Ce este un link (hyperlink)?

  1. Definiţie link (hyperlink)
  2. Link-ul în paginile Internet
  3. Metoda de funcţionare a unui link
  4. Legătură spre e-mail
  5. Cum se realizează o legătură pe o imagine?
  6. Target-uri de link
  7. Anchors (ancore)

Definiţie Link

Link-ul (engleză: hyperlink), este o referinţă către un document sau parte a unui document. Termenul link (prescurtare de la hyperlink) de obicei este asociat cu Internetul şi paginile web, el fiind un termen mult mai general, care poate cuprinde referirea şi între alte tipuri de documente electronice, care nu sunt neapărat în format HTML (pagini web) şi nu sunt neapărat pe Internet.

În momentul în care există multă informaţie în format electronic (fie pe Internet, pe calculatorul personal sau chiar pe telefonul mobil) şi această informaţie este organizată logic şi relaţional pe anumite criterii, are nevoie de un mecanism de referire între acele porţiuni de informaţie (ex: referirea către o pagină care explică un anumit termen).

Alt caz în care este necesară referirea, este cazul în care o informaţie nestructurată sau de dimensiune mare, trebuie organizată logic în părţi mai mici sau părţi asociate după anumite criterii, pentru a fi prezentată mai uşor unui cititor/utilizator (ex: paginarea rezultatelor de căutare, referirea către o anumită porţiune a unei pagini, etc.).

Termenul de link (hyperlink) este o metodă de referire între documentele de tip hypertext (noţiune folosită pentru a defini textul afişat pe dispozitive electronice: PC, laptop, handheld, telefon, etc.).

Legătura (link-ul) este o etichetă foarte importantă în HTML deoarece conferă utilizatorului posibilitatea navigării de la o pagină la alta. De obicei link-ul este subliniat iar atunci când suntem deasupra lui cursorul îşi schimbă forma.

Link-ul este definit cu etichetele <a> şi </a> şi are atributele:
href - adresa fişierului destinaţie
target - în ce fereastră se va deschide fişierul destinaţie
title - o mică descriere asociată legăturii afişată în momentul în care mouse-ul se află deasupra legăturii

Adresa fişierului destinaţie (href) poate fi exprimată astfel:
nume fişier - dacă se află în acelaşi folder cu pagina curentă
adresă relativă- dacă se află pe acelaşi server sau disc, indicându-se calea
adresă URL - fiind adresa completă a paginii (de exemplu: http://www.cnfb.ro/index.php?option=profesori)

Atributul href (Hypertext REFerence) numeşte legatura către o altă pagina web. De fapt este locul unde va fi dus user-ul care va executa un click pe linkul respectiv.

Linkurile pot fi de trei tipuri:

  1. interne - către locuri specifice din pagină (anchors)
  2. locale - către alte pagini dar pe acelaşi domeniu
  3. globale - către alte domeni în afara site-ului

Internal - href="#anchorname"

Local - href="../img/foto.jpg"

Global - href="http://www.tutorialehtml.com/"

Înapoi

Link-ul în paginile Internet

Ca reprezentare grafică un link este un text (de obicei subliniat şi / sau prezentat cu o culoare diferită), care poate fi identificat într-o pagină web şi pe care se poate face clic pentru a accesa pagina sau documentul spre care punctează. Un link poate puncta atât către o pagină exterioară, cât şi în aceeaşi pagină spre o anumită sub-secţiune a paginii.

În format HTML (pagină web), un link este reprezentat în forma următoare:

<a title=”Titlu, care apare ca info când se trece cu mouse-ul peste” href=”URL” target=”unde va fi deschisă noua pagină” class=”clasaStilizareLink”>Text vizibil link</a>

Pentru a seta începutul şi sfârşitul unei anchor-e se folosesc tag-urile <a> </a>.

Un exemplu de link, care punctează către această pagină, ar fi:
<a title=”Tutorial HTML ” href=”http://www.competentedigitale.ro/HTML/”>Tutorial HTML </a>

Try it yourself >>

Înapoi

Metoda de funcţionare a unui link

Când utilizatorul face clic pe un link, navigaroul / browser-ul accesează acea pagină de la adresa specificată (în cazul exemplului de mai sus, navigatorul va reîncărca pagina curentă, pentru că punctează către această pagină).

Link-ul este un lucru necesar în imensitatea de informaţii (site-uri web) care există publicate pe Internet. Un loc unde se simpte lipsa “hyperlink-ului” este biblioteca clasică.

Avantajul unui hyperlink pe Internet este uşor de identificat şi anume rapiditatea cu care este accesată informaţia (asta în cazul în care vă merge bine net-ul) şi o libertate de a naviga rapid prin multe tipuri de informaţii (fără a deranja de fiecare dată bibliotecara pentru o definiţie sau pasaj).

Înapoi

Legătură spre e-mail:

<a href=mailto:maria@yahoo.com”>Legatura spre e-mail-ul Mariei</a>

Înapoi

Cum se realizează o legătură pe o imagine?

O legătură pe o imagine se realizează exact ca şi o legătură pe text cu diferenţa că url-ul imaginii va lua locul textului. De exemplu:

<html>
<body>

<p>Legătură pe o imagine:
<a href="http://www.competentedigitale.ro/HTML/">
<img src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>

<p>Imagine legătură fără bordură:
<a href="http://www.competentedigitale.ro/HTML/">
<img border="0" src="flower.jpeg" alt="HTML tutorial" width="32" height="32" />
</a></p>

</body>
</html>

Try it yourself >>

Înapoi

Target-uri de link

Atributul target spune browser-ului dacă trebuie să deschidă noua pagină într-o nouă fereastră sau în aceeaşi fereastră.

target= "_blank" Deschide o nouă fereastră
  "_self" Deschide pagina în aceeaşi fereastră
  "_parent" Deschide noua pagină într-un frame superior linkului
  "_top" Deschide noua pagină în acelaşi browser anulând toate frame-urile
Înapoi

Anchors (ancore)

Ancorele sunt folosite pentru a lega două sau mai multe secţiuni ale aceleiaşi pagini. În acest sens va trebui să dăm un nume secţiunilor, dar pentru aceasta cel mai indicat ar fi să aruncăm o privire pe exemplul următor.

<h1 align="center" id="primus">Fotografii Israel </h1>
<ol>
<li><a href="#1">Fotografia 1 </a></li>
<li><a href="#2">Fotografia 2 </a></li>
<li><a href="#3">Fotografia 3 </a></li>
<li><a href="#4">Fotografia 4 </a></li>
<li><a href="#5">Fotografia 5 </a> </li>
<li><a href="#6">Fotografia 6 </a></li>
<li><a href="#7">Fotografia 7 </a> </li>
</ol>

<a name=1><center><img src="f1.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=2><center><img src="f2.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=3><center><img src="f3.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=4><center><img src="f4.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=5><center><img src="f5.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=6><center><img src="f6.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>
<a name=7><center><img src="f7.JPG" width=70% height=60% ></center></a>
<a href="#primus">Înapoi</a>

Try it yourself >>

Înapoi