Legături (link-uri)
Aşa cum am văzut în partea introductivă a acestui capitol, noţiunea de www este strâns legată de documentele de tip hipertext.
Tot ceea ce am prezentat din limbajul HTML până în momentul de faţă, reprezintă doar partea descriptivă a acestuia, cu ajutorul căreia putem crea un conţinut static.
Link-urile reprezintă mecanismul prin care:
- putem face ca un vizitator al paginii, prin executarea unui click, să poată accesa o altă
pagină, la care dorim să-i creăm posibilitatea unui acces rapid şi, dacă acesta doreşte, să poată
reveni în pagina iniţială prin apăsarea butonului Back al browser-ului de Internet;
- putem face ca un vizitator al paginii noastre să primească un anumit fişier, de orice tip,
care se găseşte pe site-ul nostru (download);
- putem face ca un vizitator al paginii noastre să poată asculta un mesaj sonor sau chiar să
poată viziona un film;
- putem ca, printr-un click, să putem vizualiza o pagină (inclusiv cea curentă) doar dintr-un
anumit loc, fără a folosi barele de derulare;
- putem ca, prin accesarea unui click, cel care vizitează pagina să ne poată trimite un e-mail.
Pentru toate acestea, vom folosi tag-ul <a> şi </a>, numit şi Ancoră.
Ancore de legătură către alte pagini
Acestea permit ca un anumit element din document să conţină legătura către o altă pagină.
Elementul care face legătura este de obicei un text sau o imagine. De regulă, elementul legat îşi
schimbă aspectul faţă de cel clasic: textul va fi subliniat şi colorat altfel, iar imaginea va avea un
chenar colorat. În momentul în care ducem cursorul deasupra elementului legat, acesta capătă forma
unei mâini, indicându-ne astfel că este vorba de un link pe care îl putem utiliza. Printr-un simplu
click, accesăm pagina către care este făcută legătura.
Acest tip de legătură se realizează practic folosind atributul<href>, ca în exemplul de mai jos
(a se remarca modul în care, elementul legat, este inclus între tag-urile <a href=...> şi </a>
Tagul <a> şi </a> are următoarele atributele:
- href - adresa fişierului destinaţie
- target - în ce fereastră se va deschide fişierul destinaţie
- title - mică descriere asociată legăturii afişata în momentul în care mouse-ul se află deasupra legăturii
Atributul href
Exemplu
Codul html |
Rezultatul |
Prin executarea unui click
<a href="pagina.html">Pagina mea Web</a>
|
Pagina mea Web |
Să vedem ce reprezintă fiecare element folosit:
- Tagul <a> reprezintă ancora
- Atributul<href> reprezintă referinţa hipertext pentru această ancoră, care este fişierul pagina.html. Atunci când o ancoră face o referinţă hipertext o numim legătură
- Pagina mea Web reprezintă textul care apare pe pagina Web. Acest text este evidenţiat prin sublinierea şi colorarea în albastru, pentru a indica faptul că este "hypertext" (printr-un simplu
click, accesăm pagina spre care este făcută legătura)
- Tagul </a> reprezintă ancora închisă
Atributul target
Atributul target poate lua valorile:
- "_blank" pagina va fi încărcată într-o nouă fereastră
- "_parent" pagina va fi încărcată în fereastra părinte
- "_self" pagina va fi încărcată în aceeaşi fereastră
- "_top" pagina va fi încărcată în fereastra top a cadrului
Atributul title
Exemplu
Codul html |
Rezultatul |
mouse-ul deasupra legăturii
<a href="pagina.html" title="Pagina Web">Pagina mea Web</a>
|
Pagina Web |
Ancore
Ancora este punctul de reper pentru o deplasare mai uşoară în cazul unor pagini HTML lungi sau către un loc anume aflat într-o altă pagiă.
Ancora se defineşte tot intre etichetele <a> şi </a> dar cu atributul name .
Pentru a face trimitere către ancoră se introduce un link cu atributul href avand ca valoare denumirea ancorei.
Exemplu
Ancora |
<a name ="nume"> Ancora </a> |
Rezultatul |
Link către ancora aflată în aceeaşi pagină |
<a href="#ancore"> Spre ancore </a> |
Ancore |
Link către ancora aflată în alta pagină |
<a href=liste.html#nume">Spre ancora din liste.html</a> |
Lista ordonată |
Ancoră de legătură pentru trimiterea unui e-mail
Acestea permit ca, atunci când o persoană ne vizitează site-ul, dacă doreşte, să ne poată
trimită un e-mail făcând un simplu click pe legătura respectivă. Totuşi, pentru ca acest lucru să fie
funcţional, cel care vizitează site-ul trebuie să aibă configurat pe calculatorul său un client de e-mail
(cel mai frecvent este Outlook Express).
Iată un exemplu pentru o astfel de ancoră:
Exemplu
Codul html |
Rezultatul |
<address>
Click <a href=”mailto:username@server.com”>aici </a>pentru a trimite un e-mail
</address> |
Clik aici |
Observaţie
Tag-ul <address> ...</address> nu face altceva decât să afişeze textul din cadrul său italic
După cum se observă, pentru trimiterea unui e-mail, după atributul href trebuie specificat
mailto: urmat de adresa de e-mail a destinatarului.
Ancore de legătură către fişiere
Pentru a realiza legătura către un fişier, la atributul href, trebuind specificat adresa fişierului respectiv (dacă este în acelaşi director cu pagina din care facem legătura, e
suficient să-i scriem numele şi extensia).
De exemplu în cazul în care fişierul pentru download este local:
Pentru download arhiva executa un click
<a href="arhiva.zip">aici </a> |
aici |
În cazul în care fişierul pentru download se află la altă adresă:
Pentru a descarca subiectele de bacalaureat la disciplina informatica, dă un click
<a href="http://subiecte2011.edu.ro/bacalaureat/Modele_de_subiecte/Probe_scrise/E_d_Informatica.zip"> aici</a> |
aici |
Legăturile către fişiere de tip sunet sau film se fac absolut în aceeaşi manieră. În funcţie de extensia
lor (.wav, .mid, .mp3, .avi) în momentul executării unui click asupra obiectului care face legătura
către ele, acestea vor fi deschise automat către browser cu programul corespunzător.
Culoarea linkuri-lor
Poate fi modificată introducand în eticheta body următoarele atribute:
- link legatura nevizitată(default albatru)
- vlink legatura vizitată (default rosu)
- alink legatura activă (nu prea se foloseste - default portocaliu)
Exemplu
<html>
<head>
<title>Link-uri </title>
</head>
<body link="#ff0000" vlink="#000000" alink="ff9600">
Text
</body>
</html>
|
Utilizarea unei imagini ca legatură
Pentru a se adauga o imagine ca legatură, se va folosi codul:
Exemplu
<html>
<head>
<title>Link-uri </title>
</head>
<body>
<a href="pagina.html"><img src="poza.jpg" alt="poza"></a>
</body>
</html>
|