CAP. 6. HYPERLINK-URI

 

6.1. Noţiuni generale

 

Hypertext-ul reprezintă o metodă de realizare a unui text, ideală pentru utilizarea pe calculator, care permite cititorului să parcurgă materialul în maniera aleasă de el. Pentru a realiza un hypertext, mai întâi „tranşaţi“ informaţiile în unităţi mici, manevrabile, cum ar fi paginile individuale de text. Aceste unităţi sunt numite noduri. Apoi înglobaţi în text hyperlink-uri (numite şi ancore). Când cititorul execută click pe un hyperlink, programul de hypertext afişează un nod diferit. Procesul de navigare printre nodurile legate în acest fel se numeşte răsfoire (browsing). O colecţie de hyperlink-uri este numită web. WWW (World Wide Web) este un sistem de hypertext la scară globală. Aplicaţiile de hypertext sunt foarte utile în special atunci când se lucrează cu cantităţi mari de text, ca în cazul enciclopediilor sau al documentelor juridice.

Pentru simplificare, ca şi până acum, când facem referire la hyperlink-uri le vom numi simplu link-uri.

Pentru a include un link către un document propriu sau aflat pe un alt server, este absolut necesar să cunoaşteţi adresa exactă a acelui document şi modul de inserare a unei ancore în propriul document HTML.

Adresa unui document poate fi inserată la modul relativ sau la modul absolut.

 

De exemplu:

test.html – reprezintă o referinţă relativă

în vreme ce

C:\Ghid programare HTML\Teste\test.html – reprezintă o referinţă absolută

 

6.2. URL-uri

 

În Internet, fiecare document ar propria sa adresă identificată printr-un URL (Uniform Resource Locator). Acesta constă dintr-o combinaţie de elemente scrise într-o anumită ordine, astfel:

 

protocol://numele_de_domeniu/cale

 

unde:

 

protocol – reprezintă software-ul sau maniera prin care serverul de domeniu comunică documentul unui browser

numele_de_domeniu – reprezintă numele alocat pe Internet serverului ce găzduieşte documentul web

calea – reprezintă numele directorului (şi al eventualelor subdirectoare) unde este stocat documentul web

 

 

Iată câteva exemple de URL-uri:

 

http://ghid-html.dap.ro/index.html

·        tipul protocolului este http

·        ghid-html este, în acest caz, numele unui subdomeniu din domeniul dap situat în zona ro (ce identifică site-urile româneşti)

·        index.html este numele unui fişier

 

http://ghid-html.dap.ro/teste/computer.jpg

·        tipul protocolului este http

·        ghid-html este, ca şi mai sus, numele unui subdomeniu

·        teste reprezintă numele unui subdirector

·        computer.jpg  este numele unui fişier

 

ftp://ftp.uni-stuttgart.de/pub/download/madyn_v15_160107.zip

·        tipul protocolului este ftp. Acest serviciu este utilizat pentru a crea link-uri către fişiere ce pot fi descărcate după servere ftp.

·        gazda este ftp.uni-stuttgart.de

·        pub şi download reprezintă numele unor subdirectoare

·        madyn_v15_160107.zip este numele unui fişier

mailto: ghid-html@dap.ro

·        tipul serviciului este identificat ca fiind mail client program. Acest link va lansa în execuţie clientul de mail al utilizatorului.

·        destinatarul email-ului este ghid-html@dap.ro

 

 

6.3. Ancore

 

Ancorele (anchors) reprezintă elementele HTML care precizează atât sursa cât şi destinaţia unui link. Sunt marcate prin tag-ul de deschidere <A> şi necesită tag-ul de închidere </A>.

O ancoră poate fi utilizată în două moduri:

1. Pentru a crea un semn de carte (bookmark) în interiorul unui document utilizând atributul NAME sau ID. Odată creat, acesta devine ţinta potenţială a unui link.

   2. Pentru a crea un link către alt document sau către un semn de carte utilizând atributul HREF, valoarea atributului fiind dată de un anumit URL.

       

Notă: Vă reamintim că schema de culori ce va fi afişată pentru link-uri este controlată de atributele elementului BODY, şi anume LINK, VLINK şi ALINK, descrise în Capitolul 2 din acest ghid. Nespecificarea acestor valori va determina browser-ul să afişeze schema de culori implicită.

 

Pentru exemplificare vom folosi următoarele secvenţe de cod:

 

<A NAME="nume_semn_de_carte">Semn de carte</A>

are ca rezultat atribuirea unui semn de carte

 

<A HREF="#nume_semn_de_carte ">Du-te la semnul de carte </A>

are ca rezultat realizarea unui link în document către semnul de carte

 

<A HREF="http://ghid-html.dap.ro/teste/test5.html">Du-te la Testul 5 pe site-ul  XXXXXXXXX </A>

are ca rezultat realizarea unui link în document către un alt document pe Internet, în acest caz test5.html

 

Desigur, poate fi combinat link-ul către o pagină cu link-ul intern existent pe acea pagină, având ca rezultat specificarea unei secţiuni anumite dintr-un document web.

 

<A HREF="http://ghid-html.dap.ro/teste/test5.html#semn_de_carte"> Du-te la semnul de carte din cadrul Testului 5 pe site-ul  XXXXX </A>

 

Tot cu ajutorul ancorelor se poate trimite un mail printr-un singur click în interiorul unui document, astfel:

 

<A HREF="mailto:emailuser@host">Nume</a>

 

Un alt atribut important al acestui element este reprezentat de TARGET, care specifică locul în care se va deschide URL-ul. Valorile pe care le poate luat acest atribut sunt:

·        _blank – URL-ul ţintă se va deschide într-o nouă fereastră (este implicit, deci poate fi şi nespecificat)

·        _top – URL-ul ţintă se va deschide în fereastra curentă

·        _self – URL-ul ţintă se va deschide în acelaşi cadru din care s-a dat click

·        _parent – URL-ul ţintă se va deschide în cadrul părinte (dar despre cadre vom vorbi ceva mai târziu)

 

 

6.4. Aplicaţie practică

 

Pentru a pune în practică cele prezentate în acest capitol, vom crea un nou fişier numit test5.html care va conţine următoarele linii de cod:

 

<HTML>

<HEAD>

  <TITLE>Inserarea link-urilor în document</TITLE>

</HEAD>

<BODY>

<H2><A name="C1">Capitolul 1</A></H2>

<P>Acest capitol trateaza problematica ba bla bla</P>

<H2><A name="C2">Capitolul 2</A></H2>

<P>Acest capitol trateaza problematica ba bla bla</P>

<H2><A name="C3">Capitolul 3</A></H2>

<P>Acest capitol trateaza problematica ba bla bla</P>

<H2><A name="C4">Capitolul 4</A></H2>

<P>Acest capitol trateaza problematica ba bla bla</P>

<P>Dati click pe <A href="#C1">Vedeti si Capitolul 1</A> si veti avea ca rezultat deplasarea documentului la Capitolul 1.</P>

<H2><A name="C5">Capitolul 5</A></H2>

<P>Acest capitol trateaza problematica ba bla bla</P>

<P>Dati click pe <A href="http://ghid-html.dap.ro/teste/test5.html#C3" target="_blank">Capitolul 3 din Testul 5 pe site-ul  XXXXX </A> si veti avea ca rezultat o fereastra noua pozitionata la Capitolul 3 din Testul 5 pe site-ul  XXXXX.</P>

</BODY>

</HTML>

 

Rezultatul afişat va fi următorul: