Inserarea legăturilor în documente HTML

O legătură (link) este o conexiune către o altă resursă Web (un text, o imagine, o secvență audio
sau video, un program, altă pagină Web etc), resursă care poate fi accesată din fereastra browserului
printr-un simplu click.
Inserarea legăturilor asociate textelor și imaginilor

a. TEXT
Pentru a insera un link într-un document HTML, se utilizează eticheta <A> cu eticheta </A>
A – ancoră
Textul cuprins între etichetele <A> și </A> apare evidențiat în fereastra browserului prin subliniere
și colorare în funcție de valorile atributelor LINK, VLINK, ALINK (vezi eticheta BODY) sau în funcție de modul
implicit de configurare a browserului.
Atributele specific etichetei <A>:
 HREF=URL specifică adresa resursei la care se face referire
 NAME=Șir_de_caractere asociază un nume ancorei astfel încât să poată constitui
ținta unui alt link

 TITLE= Șir_de_caractereasociază un nume resursei la care se face legătura.

Browserul va putea afișa titlul când utilizatorul deplasează
mouse-ul deasupra legăturii.
Exemplu:
(1) <P>
Găsiți informații în <A HREF=”pag3.html”> capitolul FORMATAREA PARAGRAFELOR
</A>
</P>
Explicație: A fost creat un link către o resursă (pag3.html) existent în locația curentă. Legătura este asociată
textului: capitolul FORMATAREA PARAGRAFELOR.
(2) <P>
Studiază la<A HREF=”http://www.nicugane.ro”> Colegiul Național ”Nicu Gane”
</A>
</P>
Explicație: Resursa este o pagină Web. Legătura este asociată textului:Colegiul Național ”Nicu Gane”.
(3) <P>
Studiază la <A NAME=”cnng” TITLE=colegiu HREF=”http://www.nicugane.ro”>Colegiul
Național ”Nicu Gane”
</A>
</P>

(4) <A NAME=”Home”></A>

…
<A HREF=”#Home”>Salt la început!</A>
Explicație: Am inserat o ancoră vidă, numită Home. Construcția: <A NAME=”Home”></A> se inserează, în
corpul paginii Web, la început. La sfârșitul documentului am inserat o legătură către ancora Home, care
permite utilizatorului să revină, automat, la începutul paginii web.
Obs: pentru specificarea adresei se utilizează caracterul #, urmat de numele ancorei (#Home).
 b. IMAGINE
Eticheta <A> poate fi utilizată și pentru a insera o legătură pe o imagine. Prin selectarea imaginii va fi
accesată resursa destinație.
Între <A> și </A> se specifică imaginea le legătură.
Exemplu:
<A HREF=”http://www.nicugane.ro”>
<IMG SRC=”i1.jpg” HEIGHT=200 WIDTH=200 BORDER=2 ALT=”foto”>
</A>

TEMĂ:
În subdirectorul PAG6, construiți documentul pag6.html astfel:
- Titlul paginii: Legături
- Corpul paginii conține exemplele (1), (2) și (3) prezentate mai sus
Vizualizați pagina Web și accesați fiecare link, verificând astfel funcționalitatea legăturilor.
Descărcați, în subdirectorul PAG6, o imagine (carte/cărți) pe care o redenumiți i1.jpg.
Adăugați imaginea la conținuturile existente în pagina pag6.html. Dimensionați, la alegere, imaginea i1.jpg.
Vizualizați pagina Web.
Inserați o legătură, pe imagine i1.jpg, către pagina Web www.isj.sv.edu.ro
Vizualizați pagina Web și accesați linkul, verificând astfel funcționalitatea legăturii pe imagine.
Adăugați 5 paragrafe de dimensiuni considerabile, astfel încât conținuturile să depășească dimensiunea
ferestrei și să permită navigarea în pagina Web.
Adăugați linkul din exemplul (4).
Atenție!!!Veți scrie
<A NAME=”Home”></A> în corpul paginii Web, la început.
<A HREF=”#Home”> Salt la început!</A>în corpul paginii Web, la sfârșit.
Vizualizați pagina Web și accesați linkul pe textul Salt la început!, verificând revenirea automata la
începutul paginii Web în contextul în care textul Salt la început!, este plasat la final.

RECAPITULARE
În subdirectorul PAG7, construiți pagina pag7.html, cu tema PRIMĂVARA, astfel:
- Titlul: Recapitulare
- Corpul:
o Aliniat la dreapta un motto (citat), la alegere (în acord cu tema)
o Trei paragrafe. La vizualizare, conținutul fiecărui paragraf va fi dispus pe minim 10 rânduri.
Aliniați stânga-dreapta fiecare paragraf.
o Descărcați 3 imagini (jpg) pe care le redenumiți img1, img2, img3.
o Inserați imaginile, în linie, după cele 3 paragrafe (alegeți dimensiuni potrivite care să permit
această dispunere).
o Adăugați imaginii din mijloc o legătură către o pagina Web în care regăsiți informații pentru
tema dată (ex. Primăvara -Wikipedia)
Notă: Alegeți culori, diferite de cele implicite, pentru fundal și text.
Scrieți textul cu diacritice!!!