Crearea Legaturilor in HTML

Crearea legaturilor in HTML
Navigarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor). In aceasta lectie vei invata cum sa folosesti diferite tipuri de legaturi in cadrul site-ului tau.
Legatura catre o alta pagina

Pentru a folosi legaturi in paginile web pe care le vei face, trebuie sa folosesti perechea de tag-uri <A> si </A>. Numele acestor tag-uri vine de la cuvantul anchor care se traduce ancora. Tag-ul <A> va trebui folosit impreuna cu atributul HREF. Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va avea urmatoarea forma: <A HREF=numelepaginii.html>Textul legaturii</A> Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt necesare ghilimelele. Sa vedem impreuna, cum poti adauga o legatura intr-o pagina web din folderul Pagini catre pagina imagini.html din acelasi folder. Deschide editorul de texte (de exemplu: Notepad) si scrie urmatorul cod HTML: <HTML> <HEAD> <TITLE>Legaturi</TITLE> </HEAD> <BODY> <CENTER>Legătură către o altă pagină <A HREF=imagini.html>Imagine Invat HTML</A> </CENTER> </BODY> </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 mai putem folosi decat numele paginii HTML ca valoare a atributului HREF. Sa vedem cateva exemple de legaturi catre pagini 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, pe calculatorul tau, o structura asemanatoare cu cea de mai sus, iar apoi sa faci cateva pagini HTML in diverse directoare sau subdirectoare si sa incerci sa creezi legaturi din fiecare pagina HTML catre celelate. Iata cateva exemple:
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate catre o pagina HTML din directorul Firma 1, vom folosi urmatoarea valoare a atributului HREF: <A HREF="Firma 1/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o pagina HTML din directorul Carti, vom folosi urmatoarea valoare a atributului HREF: <A HREF="Documente/Carti/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o pagina HTML din directorul Scoala, vom folosi urmatoarea valoare a atributului HREF: <A HREF="../numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o pagina HTML din directorul Site, vom folosi urmatoarea valoare a atributului HREF: <A HREF="../../numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o pagina HTML din directorul Matematica, vom folosi urmatoarea valoare a atributului HREF: <A HREF="../../Scoala/Matematica/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o pagina HTML din directorul Firma 3, vom folosi urmatoarea valoare a atributului HREF: <A HREF="../Firma 3/numelepaginii.html">Text link</A>
Legatura catre un site

Dupa ce ai vazut cum se folosesc legaturile catre alte pagini html locale acum vom vedea impreuna cum putem adauga o legatura catre un site particular. Trebuie sa folosesti urmatoarea linie de cod: <A HREF="adresa site-ului">Textul legaturii</A> Sa facem o pagina web care sa contina legaturi catre site-uri ale unor ziare din Romania. Scrie urmatorul cod HTML: <HTML> <HEAD> <TITLE>Legaturi catre site-uri particulare</TITLE> </HEAD> <BODY> <CENTER> Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia <A HREF="http://www.evz.ro">Evenimentul Zilei</A> <A HREF="http://www.jurnalul.ro">Jurnalul Naţional</A> <A HREF="http://www.capital.ro">Capital</A> <A HREF="http://www.prosport.ro">Prosport</A> <A HREF="http://www.gsp.ro">Gazeta sporturilor</A> <A HREF="http://www.libertatea.ro">Libertatea</A> </CENTER> </BODY> </HTML> 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 a deschide o noua fereastra a browser-ului atunci cand se
da click pe o legatura trebuie folosit atributul TARGET caruia 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-o noua fereastra, atunci cand se va efectua un click pe legatura catre acesta. Daca in plus vrei ca, atunci cand utilizatorii paginii tale web vor trece cursorul mouseului deasupra legaturilor, sa apara o mica nota explicativa, trebuie sa folosesti atributul TITLE. Ca valoare a acestui atribut trebuie sa scrii textul care vrei sa apara atunci cand se va trece cursorul mouse-ului deasupra legaturii respective. Pentru a intelege mai bine iata cum va arata codul paginii ziare.html dupa adaugarea atributelor TARGET si TITLE pentru fiecare legatura: <HTML> <HEAD> <TITLE>Legaturi catre site-uri particulare</TITLE> </HEAD> <BODY> <CENTER> Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia <A HREF="http://www.evz.ro" TARGET="_blank" TITLE="Ziarul Evenimentul Zilei">Evenimentul Zilei</A> <A HREF="http://www.jurnalul.ro" TARGET="_blank" TITLE="Ziarul Jurnalul Naţional">Jurnalul Naţional</A> <A HREF="http://www.capital.ro" TARGET="_blank" TITLE="Ziarul Capital">Capital</A> <A HREF="http://www.prosport.ro" TARGET="_blank" TITLE="Ziarul Prosport">Prosport</A> <A HREF="http://www.gsp.ro" TARGET="_blank" TITLE="Ziarul Gazeta Sporturilor">Gazeta sporturilor</A> <A HREF="http://www.libertatea.ro" TARGET="_blank" TITLE="Ziarul Libertatea">Libertatea</A> </CENTER> </BODY> </HTML> 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 pagina

Atunci cand avem de-a face cu pagini mai lungi, putem imparti aceste pagini in mai multe sectiuni catre care sa adaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai repede la sectiunea care ii intereseaza. 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 pe care il asociam tagului <A>, dar pentru ca in browserul Mozilla Firefox nu merge in toate versiunile, vom folosi atributul ID care face acelasi lucru. Trebuie sa tinem cont ca fiecare ID trebuie sa inceapa cu o litera si sa fie unic intr-o pagina (adica nu putem avea mai multe ID-uri cu acelasi nume in aceeasi pagina).
<A ID="ancora1">Titlul primei sectiuni</A> <A ID="ancora2">Titlul sectiunii a doua</A> <A ID="ancora3">Titlul sectiunii a treia</A> Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma: <A HREF="#ancora1">Legatura catre prima sectiune</A> <A HREF="#ancora2">Legatura catre a doua sectiune</A> <A HREF="#ancora3">Legatura catre a treia sectiune</A> Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma: <A HREF="numelepaginii.html#ancora1">Legatura catre prima sectiune</A> <A HREF="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A> <A HREF="numelepaginii.html#ancora3">Legatura catre a treia sectiune</A> Pentru a intelege mai bine cum functioneaza legaturile catre sectiunile paginilor, sa scriem impreuna codul unei pagini cu mai multe sectiuni: <HTML> <HEAD> <TITLE>Legatura catre o sectiune de pagina</TITLE> </HEAD> <BODY> <CENTER>Intrebari frecvente</CENTER> <A HREF="#intrebarea1">1. Ce pot gasi pe site-ul eCursuri.ro?</A> <A HREF="#intrebarea2">2. Ce este un curs online?</A> <A HREF="#intrebarea3">3. De ce sa invat online?</A> <HR> <A ID="intrebarea1">1. Ce pot gasi pe site-ul eCursuri.ro?</A> Site-ul eCursuri.ro isi propune sa ofere vizitatorilor sai cat mai multe resurse pentru a invata online. In acest sens, oferim membrilor site-ului acces GRATUIT la cursuri online interactive, tutoriale in care poti invata sa faci aproape orice, teste online prin care iti poti verifica cunostintele din diverse domenii, jocuri educative si referate pentru scoala. <A ID="intrebarea2">2. Ce este un curs online?</A> Un curs online presupune ca toate materialele necesare, sa fie disponibile pe internet. Asadar, viitorii cursanti vor avea la dispozitie toate resursele necesare pentru invatat, la fel ca si in cazul unui curs traditional, singura deosebire fiind ca totul se petrece online. <A ID="intrebarea3">3. De ce sa invat online?</A> Cursurile online prezinta, indiscutabil, foarte multe avantaje fata de alte tipuri de cursuri. In primul rand cursurile online pot fi consultate oricand, ele fiind disponibile non stop pe internet. Un lucru extrem de important in alegerea unui curs online este si pretul scazut al unui astfel de curs comparativ cu preturile cursurilor traditionale. In cazul cursurilor prezente pe
site-ul eCursuri.ro, acestea sunt 100% GRATUITE. Un alt avantaj al cursurilor online de pe eCursuri.ro este acela ca permite interactiunea intre membrii site-ului si/sau intre membri si autorii cursurilor, astfel fiind foarte usor sa se lamureasca anumite notiuni care nu au fost intelese foarte bine. </BODY> </HTML> 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-mail

Daca vrei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu, atunci trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail. Cum faci asta? Foarte simplu. Forma generala a unei legaturi catre o adresa de e-mail este urmatoarea: <A HREF="mailto:adresa de e-mail">Text link</A> In codul HTML al paginii intrebari.html adauga inainte de linia de cod ce contine eticheta de incheiere , urmatoarea secventa de cod: Pentru a afla raspunsul la alte intrebari, trimite un mail la: <A HREF="mailto:contact@ecursuri.ro" TITLE="Intreaba ceva">Contact eCursuri.ro</A> Salveaza pagina intrebari.html peste cea existenta. Pentru a vedea rezultatele: click aici
Utilizarea unei imagini ca legatura

Pentru a folosi o imagine ca legatura intre tag-urile <A> si </A>, va trebui scrisa adresa imaginii: <A HREF="numepagina.html"><IMG SRC="adresaimaginii"></A> Sa vedem un exemplu. Salvam mai intai imaginea de mai jos astfel: 1. 2. 3. 4. Click pe imagine Se va deschide un nou tab (pagina) cu imaginea Click dreapta pe imagine si alege din meniul care apare: Save Image As) 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: <HTML> <HEAD <TITLE>Folosirea unei imagini ca legatura</TITLE> </HEAD> <BODY> <CENTER><H1>Imagini ca legaturi</H1> <A HREF="http://www.ghid-culinar.ro/retete-culinare/dulciuri-diverse/bomboaneraffaello.html" TITLE="Invata sa faci bomboane Raffaello" BORDER="0"><IMG SRC="../Poze/bomboane.jpg"></A> </CENTER> </BODY> </HTML> Salveaza pagina cu numele linkimg.html in directorul Pagini. Pentru a vedea rezultatul click aici
Cum pot schimba culorile legaturilor?

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 </BODY> cu ajutorul caruia putem schimba culoarea implicita:
LINK pentru legaturile nevizitate
VLINK pentru legaturile vizitate ALINK pentru legaturile active
Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu daca vrei ca in cadrul paginii tale web, legaturile sa fie de culoare rosie atunci cand nu au fost vizitate, de culoare neagra cele vizitate si de culoare portocalie atunci cand se trece cu mouseul pe deasupra lor, trebuie sa folosesti urmatoarea linie de cod: <BODY LINK="#FF0000" VLINK="#000000" ALINK="FF6600"> 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

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Crearea Legaturilor in HTML

Uploaded by

Copyright:

Available Formats

Crearea legaturilor in HTML

Legatura catre o alta pagina

Legatura catre un site

Legatura catre o sectiune de pagina

Legatura catre o adresa de e-mail

Utilizarea unei imagini ca legatura

Cum pot schimba culorile legaturilor?

LINK pentru legaturile nevizitate

VLINK pentru legaturile vizitate ALINK pentru legaturile active

You might also like