Cap.7.

Legături şi referinţe

1. Referinte externe
În unele cărţi, atunci când autorul face referire la un citat sa o informaţie dintr-o altă carte sau un
dintr-un alt document acesta înserează într-o paranteza numele lucrării referite, eventual pagina sau secţiunea
referita. Daca informaţia respectiva prezintă interes pentru utilizator, acesta nu are decât sa caute in rafturile
bibliotecii sale (în cazul cel mai fericit) sau ale altor biblioteci, materialul amintit.
Limbajul HTML rezolva aceasta problema prin introducerea noţiunii de hipertext. Hipertextul diferă de
textul obişnuit prin introducere in interiorul documentului a unor elemente de legătura cu alte documente
existente in Web. Prin activarea acestor elemente cu ajutorul mouse-ului sau tastaturii se realizează trecerea
instantanee de la documentul iniţial (documentul sursa) la cel vizat (documentul destinaţie), fiind oricând
posibila revenirea la documentul iniţial. Orice legătura are două capete numite ancore şi un sens. Primul capăt
(elementul care refera) este ancora sursa, iar al doilea capăt (elementul referit) este ancora destinaţie. Ancora
sursa se numeşte referinţa şi ea poate fi externa sau internă, după cum ancora destinaţie se găseşte in afara
sau in interiorul documentului care conţine referinţa.
Prezenta unei referinţe în interiorul documentului se marchează cu ajutorul perechii de controale HTML
<A> si </A>. Pentru ca marcajul de referinţă să fie funcţional, acesta trebuie sa conţină atributul Href, numit
atribut de referinţă hipertext. Valoarea acestuia este un URL care localizează documentul referit.

Exemplu: <A href = "http://www.msn.com/">Legatura cu..</A>

Legăturile unui document nu sunt limitate la legături cu alte documente. El poate sa conţină legături de
tip "mail" sau legături către fişiere de tip "program" care vor fi executate atunci când utilizatorul activează
referinţa de legătura corespunzătoare.

2. URL-uri relative
Daca informaţia pe care o puneţi la dispoziţia utilizatorilor în Web este alcătuită din mai multe
documente corelate, ea trebuie structurata corespunzător într-o formula de directoare şi subdirectoare care sa
va ofere o distribuire cât mai logica a materialelor. Aceasta structura formează un "site".
Sa presupunem ca directorul rădăcina al site-ului se numeşte "Radacina". El conţine directoarele
"Produse" si "Informatii" si documentul "index.html". În interiorul directorului "Produse" se găsesc documentele
"Carti.html" şi "Muzica.html", iar în directorul "Informatii" se gaseste documentul "Preturi.html".
Un URL relativ este URL-ul în care nu se trece decât calea de la fişierul curent la fişierul destinaţie.
Calculatorul va completa automat calea către documentul curent, construind astfel URL-ul complet. In cazul
trecerii către directorul părinte se foloseşte expresia "..".
Exemplu: Daca fişierul curent este "index.html", pentru a referii documentul "Carti.html" se foloseşte
expresia "Produse/Carti.html".
Daca fişierul curent este "Carti.html", pentru a referi documentul "Muzica.html" de foloseşte expresia
"Muzica.html"
Daca fişierul curent este "Carti.html", pentru a referi documentul "index.html" de foloseşte expresia
"../index.html"
Daca fişierul curent este "Carti.html", pentru a referi documentul "Preturi.html" de foloseşte expresia
"../Informatii/Preturi.html"
Iată schema site-ului. ------------
            |   Radacina   |
          --------------
                     |
          ----------------------------------------
          |                            |                     |
     -----------        -----------              ------------  
    | index.html |  |  Produse  |          |  Informatii  |
     -----------        -----------              ------------
                                     |                             |
                             -----------                    --------------
                             |               |                |  Preturi.html  |
                   ------------      ------------           ------------
                  | Carti.html |  | Muzica.html |
               ------------      ------------

Folosirea URL-urilor relative este foarte convenabilă deoarece, atunci când site-ul este publicat, locaţia
sa pe server poate fi schimbată de către administratorul calculatorului, aceasta modificare afectând doar calea
către rădăcina site-ului, si nicidecum relaţiile şi legăturile din interiorul site-ului. Exista posibilitatea de a fixa un

Cap. 7 - 1 -
URL de baza relativ la care sa se calculeze toate URL-urile relative intr-un document. Acest lucru este posibil
prin folosirea în secţiunea de antet a documentului a controlului de marcaj <Base>, al cărui atribut href fixează
baza de formare a documentului. De exemplu, daca în documentul "Carti.html" se fixează
<Base href = "http://www.CalculatorulMeu.com/Radacina/index.html">
înseamnă ca toate URL-urile relative se calculează faţă de documentul "index.html", o referinţă către
documentul "Preturi.html" având forma:
<A href = "Informatii/Preturi.html">Preturile</A> sunt următoarele...

3. Înapoi la referinţe
În interiorul documentului, textul elementului referinţă (interna sau externa) este scris de obicei cu
culoare albastra şi subliniat. Pentru a alege culoarea de prezentare a referinţelor intr-o pagina se folosesc
următoarele atribute ale elementului Body:
● link - pentru culoare textului referinţelor nevizitate
● vlink - pentru culoarea textului referinţelor care au fost deja vizitate
● alink - pentru culoarea textului referinţei in momentul in care aceasta care este activata.
În momentul in care activăm o referinţă către un document HTML, acesta va fi afişat în fereastra
programului de explorare Web, în locul documentului iniţial.
Daca vrem sa controlam fereastra in care va fi afişat noul document putem sa folosim atributul target a
elementului ancora. Valorile posibile ale acestui atribut sunt:
● _self - pentru a afişa documentul destinaţie in fereastra documentului sursa (valoare implicita)
● _blank - pentru a afişa documentul destinaţie intr-o noua fereastra deschisa de programul de explorare
● _parent - folosita la cadre de ferestre
● _top - folosita, de asemenea, la cadre de ferestre.

Exemplu 1: Exemplu de document cu setări de culoare si ferestre "ţinta" pentru legături  

<html>
<head>
     <title>Setarea optiunilor pt. culorile si fereastra de afisare a legaturilor</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body alink="#FF00FF" link="#008000" vlink="#808000">
<h1>Bun venit in magazinul nostru virtual!</h1>
<p>La preturi care ucid orice urma de concurenta, noi va oferim cele mai tari, cele mai adevarate si cele mai
cautate produse din lumea <a href = "Produse/Carti2.html" target="_blank">cartilor</a> si a <a href =
"Produse/Muzica2.html" target="_blank">muzicii</a>. Pentru a vedea o oferta completa si uimitoare a ceea ce
se poate
achizitiona de la noi selectati una din urmatoarele optiuni:
<p><div align = "center">
<a href ="Produse/Carti2.html" target="_blank">Carti</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href = "Produse/Muzica2.html"
target="_blank">Muzica</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title = "Preturile produselor"
href="Informatii/Preturi2.html" target = "_blank">Informatii</a>
</div>
<p>Pentru eventualele sugestii asteptam mesajele voastre la <a href = "mailto:cristianfb@xnet.ro">
posta vesela </a>.<br>
Va oferim spre delectare un fragment din <a href="../../Sunet/Spacemusic.au">muzica stelelor.</a>
</body>
</html>

4. Referinţe interne
Activarea unei referinţe către un document face ca acel document sa fie afişat în fereastra programului
de explorare. Dar dacă apare situaţia în care din documentul referit ne interesează un anumit element şi vrem
ca acesta să fie afişat începând cu prima linie a ferestrei? În acest caz trebuie sa definim în acel document o
ancora destinaţie numit "ţinta".

Cap. 7 - 2 -
 O ţinta se marchează cu ajutorul elementului ancora (A) căruia i se atribuie un nume de identificare cu
ajutorul atributului Name sau Id.
Exemplu: <A name = "intro"><H2>Introducere</H2></A>
Pentru a crea în acelaşi document o referinţa către ţinta definită mai sus nu rămâne decât sa scriem
corect atributul de referinţă hipertext.
Exemplu: <A href = "#intro">Partea 1.Introducere </A>
Daca referinţa este creată în alt document ea trebuie sa conţină URL-ul documentului care conţine ţinta
şi numele de identificare a ţintei.

Ex. <A href="www.Calculator.com/Documente/Document1.html#intro">Partea1.Introducere </A>

Este foarte important ca numele de identificare a unei ţintei să fie unic în cadrul unui document. În caz
contrar destinaţia referinţei nu mai este valida.

Exemplu 2: Folosirea referinţelor către ţinte interne

<hr>
<html> <h2><a name = "Clapton">Eric Clapton</a></h2>
<head> <ul>
<title>Muzica</title>      <li>Eric Clapton (1970)</li>
<meta http-equiv="Content-Type" content="text/html;      <li>History of Eric Clapton (1972)</li>
charset=iso-8859-1">      <li>461 Ocean Boulevard (1974)</li>
</head>      <li>E.C. Was Here (1975)</li>
<body>      <li>Just One Night (1970)</li>
<p align = "center"><a href = "../index.html">Pagina      <li>Layla (1983)</li>
de </ul>
inceput</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs <hr>
p; <h2><a name = "Cohen">Leonard Cohen </a></h2>
<a href = "../Informatii/Preturi.html#PretMuzica" <ul>
>Informatii</a></p>      <li>Songs of Leonard Cohen (1967)</li>
<h1>Bun venit in lumea muzicii!</h1>      <li>Songs From a Room (1969)</li>
Alegeti din lista interpretul sau formatia favorita si...      <li>Songs of Love and Hate (1971)</li>
spor la cumparaturi!      <li>New Skin For the Old Ceremony (1974)</li>
<ul> </ul>
     <li><a href = "#Cooper">Alice Cooper</a></li> <hr>
     <li><a href = "#Beatles">The Beatles</a></li> <h2><a name = "Doors">The Doors</a></h2>
     <li><a href = "#Clapton">Eric Clapton</a></li> <ul>
     <li><a href = "#Cohen">Leonard Cohen</a></li>      <li>The Doors (1967)</li>
     <li><a href = "#Doors">The Doors</a></li>      <li>Strange Days (1967)</li>
     <li><a href = "#Dylan">Bob Dylan</a></li>      <li>Waitting For the Sun (1968)</li>
</ul>           <li>Soft Parade (1969)</li>
<hr>      <li>Morrison Hotel (1970)</li>
<h2><a name = "Cooper">Alice Cooper</a></h2> </ul>
<ul> <hr>
     <li>Easy Action (1970)</li> <h2><a name="Dylan">Bob Dylan</a></h2>
     <li>Killer (1971)</li> <ul>
     <li>Billion Dollar Babies (1973)</li>      <li>Bob Dylan (1962)</li>
     <li>From the Inside (1977)</li>      <li>Freewhelin' Bob Dylan (1963)</li>
</ul>      <li>Times, They Are a Changin' (1964)</li>
<hr>      <li>Another Side of B.D. (1964)</li>
<h2><a name = "Beatles">The Beatles</a></h2>      <li>Hightway 61 Revisited (1965)</li>
<ul> </ul>
     <li>Please, Please Me (1963)</li> <hr>
     <li>With The Beatles (1963)</li> <p align = "center"><a href = "../index.html">Pagina
     <li>A Hard Day's Night (1964)</li> de
     <li>Beatles for Sale (1964)</li> inceput</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
     <li>Help (1965)</li> p;
     <li>Rubber Soul (1966)</li> <a href = "../Informatii/Preturi.html#PretMuzica"
     <li>The Beatles (1968)</li> >Informatii</a></p>
     <li>Let It Be (1970)</li> </body>
</ul> </html>

Cap. 7 - 3 -
 5. Specificare unei relaţii între documente
Elementul LINK este folosit în antetul documentului pentru a specifica o relaţie între documentul curent şi
alte documente sau programe din Web. Elementul LINK nu are conţinut şi nu va fi afişat în interiorul
documentului, dar el este folosit de către programele de navigare Web în diverse scopuri, depinzând de valoarea
atributul rel, valoare ce defineşte relaţia cu documentul referit. Iată câteva dintre valorile posibile ale acestui
atribut:
Alternate – defineşte o alternativa la documentul curent si este folosită de obicei împreună cu atributul hreflang
pentru a specifica limba în care este scris documentul. Exemplu:

<HEAD>
<TITLE>The manual in English</TITLE>
<LINK title="Manualul in limba engleza"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://Calculator.com/manual/franceza.html">

Stylesheet – defineşte o legătura cu un document de tip "foaie de stil"

Start – defineşte primul document dintr-o colecţie de documente
Next si Previous – definesc care sunt următorul şi respectiv, precedentul document într-o ordonare liniara a
colectiei de documente
Contents, Index, si Glosary – definesc documente de tipul "Cuprins" , "Index" si "Glosar".
Exemplu:

<HEAD>
<TITLE>Capitolul 4</TITLE>
<LINK rel="Contents" href="../toc.html">
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="Capitolul5.html">
<LINK rel="Prev" href="Capitolul3.html">
</HEAD>

Modul în care informaţia oferită de elementul Link este folosită, depinde foarte mult de programul de
navigare şi motoarele de căutare în Web.

Cap. 7 - 4 -