Crearea Legaturilor in HTML

9/14/13 Crearea legaturilor in HTML

www.ecursuri.ro/cursuri-online/crearea-legaturilor-in-html-print.html 1/6

Crearea legaturilor in HTML

Navigarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor). In aceasta lectie vei invata cum safolosesti diferite tipuri de legaturi in cadrul site-ului tau.

Legatura catre o alta paginaPentru a folosi legaturi in paginile web pe care le vei face, trebuie sa folosesti perechea de tag-uri si .Numele acestor tag-uri vine de la cuvantul anchor care se traduce ancora. Tag-ul va trebui folosit impreuna cuatributul HREF. Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va avea urmatoarea forma:

Textul legaturii

Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt necesareghilimelele. Sa vedem impreuna, cum poti adauga o legatura intr-o pagina web din folderul Pagini catre paginaimagini.html din acelasi folder. Deschide editorul de texte (de exemplu: Notepad) si scrie urmatorul cod HTML:

Legaturi

Legtur ctre o alt pagin

Imagine Invat HTML

Salveaza pagina (File/Save As) cu numele de link.html in folderul Pagini.

Pagina link.html ar trebui sa arate astfel: click aici

Daca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu pagina noastra atunci nu maiputem folosi decat numele paginii HTML ca valoare a atributului HREF. Sa vedem cateva exemple de legaturi catrepagini din alte directoare sau subdirectoare. Fie urmatoarea structura:

Pentru a intelege cat mai bine cum functioneaza legaturile catre diverse pagini web, este bine sa faci si tu, pecalculatorul tau, o structura asemanatoare cu cea de mai sus, iar apoi sa faci cateva pagini HTML in diversedirectoare sau subdirectoare si sa incerci sa creezi legaturi din fiecare pagina HTML catre celelate. Iata catevaexemple:



pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate catre o pagina HTML dindirectorul Firma 1, vom folosi urmatoarea valoare a atributului HREF:

Text link

pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o pagina HTML din directorulCarti, vom folosi urmatoarea valoare a atributului HREF:

Text link

pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o pagina HTML dindirectorul Scoala, vom folosi urmatoarea valoare a atributului HREF:

Text link

pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o pagina HTML dindirectorul Site, vom folosi urmatoarea valoare a atributului HREF:

Text link

pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o pagina HTML dindirectorul Matematica, vom folosi urmatoarea valoare a atributului HREF:

Text link

pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o pagina HTML dindirectorul Firma 3, vom folosi urmatoarea valoare a atributului HREF:

Text link

Legatura catre un siteDupa ce ai vazut cum se folosesc legaturile catre alte pagini html locale acum vom vedea impreuna cum putemadauga o legatura catre un site particular. Trebuie sa folosesti urmatoarea linie de cod:

Textul legaturii

Sa facem o pagina web care sa contina legaturi catre site-uri ale unor ziare din Romania. Scrie urmatorul codHTML:

Legaturi catre site-uri particulare

Legturi ctre site-urile unor ziare din RomniaEvenimentul ZileiJurnalul NaionalCapitalProsportGazeta sporturilorLibertatea

Salveaza pagina cu numele de ziare.html in directorul Pagini.



Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici

Asa cum ai observat pana acum, atunci cand dai click pe una dintre legaturile din paginile prezentate ca exemple,se deschide o pagina HTML in aceeasi fereastra a browser-ului, peste pagina ce contine legatura. Pentru adeschide o noua fereastra a browser-ului atunci cand se da click pe o legatura trebuie folosit atributul TARGETcaruia i se atribuie valoarea "_blank".

Sa vedem un exemplu: sa schimbam codul paginii ziare.html astfel incat site-ul fiecarui ziar sa se deschida intr-onoua fereastra, atunci cand se va efectua un click pe legatura catreacesta. Daca in plus vrei ca, atunci cand utilizatorii paginii tale web vor trece cursorul mouse-ului deasupralegaturilor, sa apara o mica nota explicativa, trebuie sa folosesti atributul TITLE. Ca valoare a acestui atribut trebuiesa scrii textul care vrei sa apara atunci cand se va trece cursorul mouse-ului deasupra legaturii respective. Pentrua intelege mai bine iata cum va arata codul paginii ziare.html dupa adaugarea atributelor TARGET si TITLE pentrufiecare legatura:

Legaturi catre site-uri particulare

Legturi ctre site-urile unor ziare din RomniaEvenimentul ZileiJurnalulNaionalCapitalProsportGazetasporturilorLibertatea

Salveaza pagina cu numele ziare.html peste pagina existenta.

Iata cum ar trebui sa arate pagina finala ziare.html: click aici

Legatura catre o sectiune de paginaAtunci cand avem de-a face cu pagini mai lungi, putem imparti aceste pagini in mai multe sectiuni catre care saadaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai repede la sectiunea care iiintereseaza. Un bun exemplu pentru o astfel de pagina il reprezinta paginile care contin intrebarile frecvente(Frecvently Asked Questions).

Fiecare titlu al sectiunii trebuie definit ca ancora. Pentru acest in mod normal foloseam atributul NAME pecare il asociam tagului , dar pentru ca in browserul Mozilla Firefox nu merge in toate versiunile, vom folosiatributul ID care face acelasi lucru. Trebuie sa tinem cont ca fiecare ID trebuie sa inceapa cu o litera si sa fie unicintr-o pagina (adica nu putem avea mai multe ID-uri cu acelasi nume in aceeasi pagina).

Titlul primei sectiuniTitlul sectiunii a douaTitlul sectiunii a treia

Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma:

Legatura catre prima sectiuneLegatura catre a doua sectiuneLegatura catre a treia sectiune



Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma:

Legatura catre prima sectiuneLegatura catre a doua sectiuneLegatura catre a treia sectiune

Pentru a intelege mai bine cum functioneaza legaturile catre sectiunile paginilor, sa scriem impreuna codul uneipagini cu mai multe sectiuni:

Legatura catre o sectiune de pagina

Intrebari frecvente

1. Ce pot gasi pe site-ul eCursuri.ro?2. Ce este un curs online?3. De ce sa invat online?

1. Ce pot gasi pe site-ul eCursuri.ro?Site-ul eCursuri.ro isi propune sa ofere vizitatorilor sai cat mai multe resurse pentru a invata online. In acestsens, oferim membrilor site-ului acces GRATUIT la cursuri online interactive, tutoriale in care poti invata sa faciaproape orice, teste online prin care iti poti verifica cunostintele din diverse domenii, jocuri educative si referatepentru scoala.

2. Ce este un curs online?Un curs online presupune ca toate materialele necesare, sa fie disponibile pe internet. Asadar, viitorii cursanti voravea la dispozitie toate resursele necesare pentru invatat, la fel ca si in cazul unui curs traditional, singuradeosebire fiind ca totul se petrece online.

3. De ce sa invat online?Cursurile online prezinta, indiscutabil, foarte multe avantaje fata de alte tipuri de cursuri. In primul rand cursurileonline pot fi consultate oricand, ele fiind disponibile non stop pe internet. Un lucru extrem de important inalegerea unui curs online este si pretul scazut al unui astfel de curs comparativ cu preturile cursurilortraditionale. In cazul cursurilor prezente pe site-ul eCursuri.ro, acestea sunt 100% GRATUITE. Un alt avantaj alcursurilor online de pe eCursuri.ro este acela ca permite interactiunea intre membrii site-ului si/sau intre membrisi autorii cursurilor, astfel fiind foarte usor sa se lamureasca anumite notiuni care nu au fost intelese foarte bine.

Salveaza pagina cu numele intrebari.html in directorul Pagini.

Daca totul a mers bine pagina ar trebui sa fie la fel cu aceasta: click aici

Legatura catre o adresa de e-mailDaca vrei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu, atunci trebuie ca incadrul paginii sa existe o legatura catre o adresa de e-mail. Cum faci asta? Foarte simplu. Forma generala a uneilegaturi catre o adresa de e-mail este urmatoarea:



Text link

In codul HTML al paginii intrebari.html adauga inainte de linia de cod ce contine eticheta de incheiere , urmatoareasecventa de cod:

Pentru a afla raspunsul la alte intrebari, trimite un mail la:Contact eCursuri.ro

Salveaza pagina intrebari.html peste cea existenta. Pentru a vedea rezultatele: click aici

Utilizarea unei imagini ca legaturaPentru a folosi o imagine ca legatura intre tag-urile si , va trebui scrisa adresa imaginii:

Sa vedem un exemplu. Salvam mai intai imaginea de mai jos astfel:

1. Click pe imagine2. Se va deschide un nou tab (pagina) cu imaginea3. Click dreapta pe imagine si alege din meniul care apare: Save Image As)4. Salveaza imaginea cu numele bomboane.jpg in folderul Poze

Acum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura catre site-ul Ghid-Culinar.ro. Deschide editorul de texte si scrie codul urmator:



Salveaza pagina cu numele linkimg.html in directorul Pagini.

Pentru a vedea rezultatul click aici

Cum pot schimba culor ile legatur ilor?Fiecare legatura din cadrul unei pagini web are trei culori:

o culoare pentru legaturile nevizitate (nu a fost efectuat nici un click pe ele)o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele)o culoare pentru legaturile active (atunci cand cursorul mouse-ului se afla deasupra lor)

Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului cu ajutorul caruiaputem schimba culoarea implicita:

LINK pentru legaturile nevizitateVLINK pentru legaturile vizitateALINK pentru legaturile active

Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu daca vrei ca in cadrul paginiitale web, legaturile sa fie de culoare rosie atunci cand nu au fostvizitate, de culoare neagra cele vizitate si de culoare portocalie atunci cand se trece cu mouse-ul pe deasupra lor,trebuie sa folosesti urmatoarea linie de cod:

Pentru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie decat sa inlocuiesti in linia de mai sus,codurile, cu cele ale culorilor dorite.

Crearea Legaturilor in HTML

Documents

Transcript of Crearea Legaturilor in HTML