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:[email protected]" TITLE="Feedback on Document">[email protected]</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.