Tag-uri (elemente) pentru legaturi hypertext

Tag-uri (elemente) pentru legaturi hypertext

Adevarata putere a limbajului HTML sta în capacitatea sa de a include în documentele HTML a unor legaturi (link-uri) catre alte "documente" de pe Web. Legaturile transforma documentele simple afisate doar pe ecran într-o "biblioteca universala" în care materialele dorite a fi consultate vin la cititor aproape instantaneu, iar documentele statice devine în acest fel documente interactive.

Legatura/link-ul (hyperlegatura, hyperlink-ul) este constructia de baza, putînd fi definita ca o conexiune de la o resursa Web la alta. Chiar daca pare un concept simplu, ea a fost forta primara care a asigurat succesul Webului. O legatura (link) are doua capete, numite uneori ancore, si o directie. Link-ul porneste de la ancora sursa si indica spre ancora destinatie care poate fi orice resursa Web (un document HTML, un element din interiorul unui document HTML, o imagine, un clip, un sunet, un program, etc).

Actiunea implicita asociata cu o legatura este aducerea (încarcarea) în navigator (browser) a resursei catre care indica legatura. Acest comportament este obtinut de obicei (si implicit) prin selectarea legaturii (de exemplu cu mouse-ul prin clic, de la tastatura, etc). Elementul esential al unei legaturi este tagul <A>...</A> utilizat pentru marcarea (hyper)legaturilor. El are întotdeauna atribute asociate pentru a indica ce tip de legatura este. Exista doua tipuri de baza:

Ancora NUME care marcheaza o locatie particulara din document ca tinta la care pot indica (la care se pot cupla) alte documente; atributul definitoriu este NAME (sau un echivalent: un alt element împreuna cu atributul ID).

Exemplu:

<A HREF="document.html">Text activ< 616g65g /A>

HREF (provenind de la Hypertext REFerence = referinta hypertext) este atributul care are ca valoare numele documentului HTML care va fi adus daca textul dintre tag-uri (afisat de navigator astfel încît sa iasa în evidenta) va fi selectat.

Ancora LEGĂTURĂ, indicata de atributul HREF, care indica browserului sa "sara" la alta resursa (sa o încarce), daca legatura curenta este selectata.

Exemplu:

<P><A href="#section1">Introduction</A><BR>

...

<H2 id="section1">Introduction</H2>

...section 1...

Textul "Introduction" este un text activ care daca este selectat are ca efect "saltul" la resursa identificata prin numele "section1". Aceasta resursa este de fapt o portiune din document care începe cu titlul (headerul H2) care are ca atribut id="section1".

Sintaxa:

<A>...</A>

Atribute posibile:

HREF=URI (referinta hypertext)

NAME=CDATA (destinatia)

REL=LinkTypes (relatii catre legatura)

REV=LinkTypes (relatii de la legatura)

TYPE=ContentType (tipul continutului destinatiei)

TARGET=FrameTarget (frame-ul în care se aduce resursa indicata de legatura)

HREFLANG=LanguageCode (limba în care e scrisa legatura)

CHARSET=Charset (setul de caractere utilizat la scrierea legaturii)

ACCESSKEY=Character (combinatie de taste de acces / shortcut key)

TABINDEX=Number (pozitia în ordinea de parcurgere cu TAB)

SHAPE=[ rect | circle | poly | default ] (harta senzitiva / client-side image map)

COORDS=Coords (harta senzitiva / client-side image map)

ONFOCUS=Script (elementul a primit focusul)

ONBLUR=Script (elementul a pierdut focusul)

atribute comune

Contine:

elemente inline, fara A

Continut în:

elemente de tip block-level, elemente de tip inline, fara A

Descriere:

Pentru crearea unei legaturi este nevoie de doua lucruri:

Numele documentului / resursei la care se face legatura

Textul care va deveni activ

Marcarea textului activ în documentul initial (de la care porneste legatura) se face cu tag-ul nevid <A>...</A>. Tot textul dintre tag-ul de început (<A>) si cel de sfîrsit (</A>) va deveni capatul legaturii afisat pe ecran si va fi prezentat de navigator altfel decît textul obisnuit. <A> (numita si tag-ul ancora) include si informatii suplimentare despre legatura (atribute). Navigatorul utilizeaza ancora pointer dintr-un document pentru a gasi cel de-al doilea document. Pentru a identifica ancorele pointer se marcheaza o portiune de text (sau o imagine) astfel încît navigatorul sa le deosebeasca de restul documentului.

Atributul HREF (de la Hypertext REFerence) este utilizat pentru specificarea URI-ului documentului tinta. Este de fapt modul de localizare a documentului care va fi adus la selectarea textului activ. Atributul suplimentar TYPE poate fi folosit pentru a indica tipul (în categorisirea Internet) a resursei catre care se indica, permitînd browserelor care nu pot interpreta (afisa) un anumit tip de resurse sa nu le mai încarce. Acest atribut specifica legaturile catre resursele Internet în concordanta cu diverse protocoale de acces a acestora, protocoale specificate, ca parte integranta din URI. Cele mai utilizate protocoale:

HTTP:// - legatura la un alt document HTML

FTP:// - legatura (anonima) la un server FTP

MAILTO:// - se activeaza editorul de e-mail pentru a se compune un mesaj si a se trimite la adresa specificata

TELNET:// - legatura la o adresa Telnet

WAIS:// - legatura la un server de indexare WAIS

USENET:// - legatura la o adresa Usenet

GOPHER:// - legatura la un server Gopher

Atributul optional TITLE indica titlul documentului catre care puncteaza legatura (o scurta descriere a acesteia) si poate fi astfel afisat împreuna cu URL-ul (sub forma unui tool-tip). Uneori, daca legatura este de tip "mailto", valoarea acestui atribut e folosita ca subiect al e-mail-ului care se va trimite.

Atributul NAME defineste o destinatie pentru o legatura. De exemplu, un document ce contine:

<H1><A NAME=foo>My Heading</A></H1>

defineste o destinatie pentru legaturi numita "foo". Se poate astfel folosi HREF="#foo" într-un element A din acelasi document, sau HREF="somedoc.html#foo", din alt document.

Un element A nu poate contine un alt element A, astfel ca trebuie avut în vedere ca ancorele ce definesc nume de sectiuni NU pot contine ancore care indica legaturi. Dar se pot utiliza atît NAME cît si HREF într-un singur element A pentru a se evita aceste probleme.

ID este atributul care înlocuieste atributul NAME si care poate fi folosit cu aproape orice element pentru a defini o destinatie. Exemplul anterior poate fi scris:

<H1 ID=foo>My heading</H1>

Nu toate browserele ofera suport însa pentru ID, astfel ca NAME se mai pastreaza înca. Atît NAME cît si ID trebuie sa fie unice într-un document si sa difere si prin altceva în afara literelor mici/mari. Valorile admise trebuie sa înceapa cu o litera din intervalul A-Z sau a-z si trebuie sa urmeze numai caracterele A-Z, a-z, 0-9, liniuta de despartire, de subliniere, virgula, punctul. Cînd este folosit ca si destinatie a unei legaturi, numele astfel definit este case sensitive (literele mari/mici difera).

Atributele REL si REV indica relatiile între o ancora si resursa indicata de legatura. REL defineste o relatie de la documentul curent la cel indicat de legatura, în timp ce REV defineste o relatie în sensul opus. De exemplu:

<A HREF="foo.html" REL=glossary>...</A>

indica faptul ca foo.html este glosar pentru documentul curent, în timp ce

<A HREF="bar.html" REV=subsection>...</A>

indica faptul ca documentul curent este o subsectiune a lui bar.html.

Atributul TARGET indica în ce frame sa se încarce resursa indicata de legatura. Daca nu exista un astfel de frame (cadru-pagina) se va deschide o feeastra noua. Se pot folosi si nume speciale (care încep cu o liniuta de subliniere) de frame-uri:

_blank - fereastra noua

_self - în fereastra curenta (utila pentru suprapunerea unui atribut BASE TARGET)

_parent - în parintele frame-ului din frameset

_top - în întreaga fereastra, fara frame-uri

Atributele SHAPE si COORDS ofera posibilitatea utilizatorului sa specifice o harta de imagini senzitive (client-side image maps, prin intermediul elementului OBJECT), adica un numar oarecare de zone în interiorul unei imagini si un set de documente/resurse catre care sa indice fiecare zona anterior definita. Valoarea implicita pentru SHAPE este rect, care defineste o regiune dreptunghiulara folosind COORDS="left, top, right, bottom". Alte valori posibile:

circle - specifica un cerc; se utilizeaza: COORDS="center-x, center-y, radius";

poly - specifica un poligon; se utilizeaza: COORDS="x₁, y₁, x₂, y₂, , x_N, y_N".

default - specifica întreaga imagine (ce a ramas eventual nedefinita);

Coordonatele sînt relativ la coltul stînga sus al imaginii si pot fi exprimate în pixeli sau procente. O raza a unui cerc data ca procent este calculata relativ la cea mai mica dimensiune a imaginii/obiectului (latimea sau înaltimea). Daca doua sau mai multe regiuni se suprapun are prioritate cea definita întîi.

Exemple:

<A HREF="album.html">My photo album</A>

<A HREF="../images/me.jpg">Picture of me</A>

<A HREF="/sounds/song.mid" TYPE="audio/midi" ACCESSKEY=A>Cintecel (5 kB MIDI)</A>

<A HREF="section2.html" TARGET="content" TITLE="Elements of the HEAD" REL=next>Section 2</A>

<A HREF="mailto:lp@lp.com" TITLE="Feedback on Document">lp@lp.com</A>

<A HREF="https://www.lp.com/" TARGET="_top">Web Design</A>

<A HREF="https://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5" HREFLANG=zh>ISO 639</A>

Legaturile se pot face la documente locale (care rezida pe acelasi server (dar nu neaparat în acelasi director), la documente aflate pe alte servere (legaturi îndepartate) sau intern (în interiorul unui    document; acelasi în cazul în care documentul este mare si se doreste un salt pîna la o sectiune a sa, sau o sectiune a unui alt document, atunci cînd se doreste o indicare mai rafinata a partii din resursa-document ce se refera).

1. Legaturi locale

Legaturile locale se fac utilizînd cai (referinte) relative sau absolute.

A. Referinte absolute

Cea mai simpla legatura se realizeaza precizînd calea relativa a documentului. Selectarea unei legaturi fara specificarea nici unui alt element suplimentar de localizare, determina serverul sa caute documentul solicitat în acelasi folder ca si documentul în care a început legatura.

Caile relative pot include directoare sau pot indica o cale pe care trebuie sa o urmam pentru a naviga la documentul tinta, pornind de la documentul pointer (de start). O cale poate include si directii, cum ar fi, de exemplu, coboara doua directoare spre radacina si apoi mergi în sus doua directoare pentru a gasi documentul.

Specificarea cailor relative în legaturi se face ca în Unix, indiferent de sistemul pe care este gazduita pagina/paginile HTML. Asta înseamna ca numele de directoare sau foldere sînt separate de slash-uri (/) si referirea la directorul parinte se face cu doua puncte (..).

Iata un tabel cu referirea relativa a documentelor:

Pe Macintosh, numele discului este chiar cel care apare pe disc. De pilda, daca exista un disc numit ServerWWW si documentele HTML se gasesc într-un folder numit SiteWWW, referirea relativa la acele documente se va face de forma:

HREF="ServerWWW/SiteWWW/nume_document.html

Pe sistemele care ruleaza Win/DOS, discurile sînt referite în mod obisnuit, cu ajutorul literelor, numai ca cele doua puncte verticale (c:) sînt înlocuite de o bara verticala (c|). Cele doua puncte verticale au o alta semnificatie, anume în specificarea legaturilor. Deci, daca fisierul se afla în directorul c:\nume_director\document.html, si se face o referinta la documentul aflat în d:\alt_director\subdirector\tinta.html referinta la el se va face de forma:

HREF="../d|/alt_director/subdirector/tinta.html.

B. Referinte absolute

Referintele relative localizeaza un document tinta specificînd pozitia acestuia (calea relativa) în raport cu documentul pointer (de la care porneste legatura). Referintele absolute localizeaza documentele specificînd directorul de cel mai înalt nivel si toata calea pîna la document. Referintele absolute încep întotdeauna cu un slash (/) urmat de succesiunea directoarelor pîna la documentul la care faceti referinta.

Iata un tabel cu referirea absoluta a documentelor:

Ori de cîte ori este posibil trebuie folosite referintele relative deoarece cele absolute nu sînt portabile. Specificarea relativa a localizarii documentelor permite mentinerea usoara si mutarea documentelor HTML de pe un sistem pe altul (sau dintr-un loc în altul chiar pe acelasi sistem) fara modificari majore în surse.

2. Legaturi îndepartate

Marcarea documentelor HTML pentru legaturi îndepartate se face asemanator cu marcarea în cazul referintelor la documente locale. Tag-ul de început este <A> si cel de sfîrsit </A>. Textul dintre tag-uri va fi afisat diferit fata de restul documentului pentru a arata ca este selectabil. Referinta hypertext (HREF) va contine însa URL-ul documentului, de forma:

<A HREF="https://www.w3.org/">The World Wide Web Consortium</A>

3. Legaturi interne (catre sectiunile unui document/resursa)

Ideea este de a realiza o legatura nu numai între un anumit punct al unui document si un alt document ci una ceva mai exacta, între un anumit punct al unui document si un alt anumit punct al aceluiasi document sau al altuia. Acest lucru se realizeaza prin crearea unei ancore în locul din document unde dorim sa ne conduca legatura si apoi în realizarea unei legaturi care va indica atît documentul referit cît si paragraful (sau sectiunea de document) la care facem referire.

Crearea unei ancore se face în aproape acelasi fel ca si crearea unei legaturi, utilizînd tag-ul <A> numai ca de aceasta data îi este asociat un alt atribut: NAME. Atributul va avea ca valoare un anumit cuvînt (sau grup de cuvinte) care vor fi folosite pentru a face referinta la aceasta anumita sectiune.

Exemplu: <A NAME="cuvînt_cheie">Paragraf tinta</A>

Atunci cînd se va face referinta la aceasta ancora, documentul tinta va fi derulat de catre navigator pîna cînd textul dintre <A> si </A> va ajunge în partea de sus a ecranului. Spre deosebire de legaturi, ancorele nu sînt afisate diferit fata de restul documentului în documentul tinta.

Referirea la o ancora în documentul pointer (documentul de la care porneste legatura) se face în acelasi fel ca si cînd ar fi referit un document întreg (cu URL-ul documentului ca valoare a atributului HREF) si prin includerea numelui ancorei, precedat de semnul #.

Exemplu:

<A HREF="/cale/doc.html#cuvint cheie">Salt la paragraful tinta</A>

Legatura cere navigatorului sa încarce documentul doc.html a carui cale este precizata în HREF si sa deruleze doc.html pîna cînd "Paragraf_tinta" ajunge în partea de sus a ecranului.

Ancorele pot fi create chiar în acelasi document în care se gasesc si legaturile în ideea de a usura navigarea printr-un document mai mare. În acest caz, valoarea atributului HREF este chiar cuvîntul cheie. De pilda în cazul unui singur document organizat pe sectiuni, cuprinsul poate fi prezentat la începutul documentului si poate avea legaturi care puncteaza spre diferitele sectiuni. Tot ce avem de facut este sa dam nume ancorelor si apoi sa le referim în legaturi.