Tutorial HTML
BackNext
Capitolul 3 Hiperlink-urile!!!!
Ancorele
<a> Defineste o ancora (legatura)
Pentru a crea o legatura spre un document WEB, se utilizeaza tag-ul <a> (ancora). O ancora
poate indica spre orice resursa din web: o pagina web, o imagine, un fisier de sunte, un film
etc.
Tag-ul <a> poate primi atribute.
Atributul href
În cazul acesta ancora va crea o legatura spre un alt document.
Sintaxa pentru crearea unei legaturi:
<a href="url">textul meu care se va afisa si care este subliniat
albastru</a>
Tag-ul <a> primeste ca atribut pe href care ia ca valoare adresa resursei spre care ancora
face legatura. Cuvintele scrise între cele doua tag-uri <a> ...../a> vor fi afisate de catre
browser ca hiperlink.
Exemplu:
<a href="http://www.csac.ulbsibiu.ro/">Situl Catedrei de Calculatoare si
Automatizari</a>
Atributul target
Acest atribut se foloseste pentru a defini unde se va deschide documentul spre care se face
legatura. Daca acest atribut nu se specifica atunci pagina se va deschide în fereastra
browserului în locul acelei care a facut legatura.
Pentru deschide documentul spre care se face legatura într-o noua fereastra se va folosi
atributul target cu valoarea _blank
Exemplu
<a href=http://www.csac.ulbsibiu.ro/ target=”_blank”>Situl Catedrei de
Calculatoare si Automatizari</a>
Atributul name
Atributul name este utilizat pentru a crea o ancora cu nume. Aceste ancore sunt foarte des
utilizate în cadrul documentelor mari. Pentru a ajunge la un anumit punct din document acela
se marcheaza ca fiind o ancora cu nume. Având aceasta ancora din orice document se poate
“sari” direct la sectiunea din document marcata de ea. Acest lucru usureaza enorm navigarea
prin document.
Sintaxa pentru crearea uniei ancore cu nume este:
<a name="nume eticheta">textul de afisat</a>
Exemplu
<a name="cap1">Capitolul 1</a>
Observatie:
O ancora cu nume nu se va afisa de catre browser într-un mod anume.
Pentru a face o legatura spre o ancora cu nume se adauga la sfarsitul numelui documentului
spre care se face legatura semnul # urmat de numele ancorei. (Daca suna prea complicat
urmariti exemplul):
Exemplu
Pas 1.
În documentul ex1.htm avem mai multe denumiri de captiole. Pentru a sari mai usor la
începutul fiecarui capitol definim câte o ancora cu nume:
<html>
<head>
<body>
<a name=”cap1”> Capitolul 1</a>
<p> In capitolul 1 povestim basme si intamplari basme si intamplari basme
si intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari.......</p>
<a name=”cap2”> Capitolul 2</a>
<p> In capitolul 2 povestim iarasi basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari basme si intamplari basme si intamplari basme si
intamplari basme si intamplari basme si intamplari basme si intamplari
basme si intamplari.......</p>
</body>
</html>
Pas 2.
Definim legatura direct spre o ancora cu nume. Presupunem ca avem un document web care
contine cuprinsul...
<html>
<head>
</head>
<body>
<p> Cuprinsul</p>
<a href=”ex1.htm#cap1” target=”_blank”>Capitolul 1</a><br>
<a href=”ex1.htm#cap2” target=”_blank”>Capitolul 2</a><br>
</body>
</html>
Observatie:
Daca se doreste saltul în cadrul aceluiasi document atunci la definirea legaturii se poate uitliza
doar numele ancorei precedat de # fara a mai specifica numele fisierului.
Exemplu
<a href=”#cap1” target=”_blank”>Capitolul 1</a><br>
Obsevatie generala:
Întotdeauna este bine sa adaugati la sfârsit un / când dati adresa spre un subfolder:
Ex corect: href=”www.csac.ulbsibiu.ro/orar/
Daca nu puneti si / la sfârsit atunci browserul va face doua cereri: prima în care va adauga
automat / iar a doua când va face cererea cu / adaugat.
Ex. incorrect: href=”www.csac.ulbsibiu.ro/orar
Exemple diverse
1. Crearea unei legaturi
<html>
<body>
<p>
<a href="ex13.htm">
acest text</a> este un link spre pagina ex13.htm
</p>
<p>
<a href="http://www.csac.ulbsibiu.ro/" target="_blank">
acest text</a> este un link la pagina catedrei si se deschide intr-o
fereastra noua
</p>
</body>
</html>
2. Crearea unei legaturi dintr-o poza
<html>
<body>
<p>
utilizam o poza ca link:
<a href="ex15.htm">
<img border="0" src="04.gif">
</a>
20
</p>
</body>
</html>
Observatie: Aici am folosit un tag <img> care îl vom pargurge mai târziu. Atributul src indica
sursa pozei adica numele fisierului care trebuie sa fie în acelasi director cu fisierul html.
3. Un link spre o adresa de mail
<html>
<body>
<p>
un link catre o adresa de mail - daca aveti un client de mail instalat la
click pe acest link se deschide fereastra clientului de mail:
<a href="mailto:radu.kretzulescu@ulbsibiu.ro?subject=salutare">
trimite-ma</a>
</p>
</body>
</html>
Observatie: Se observa pe status bar linkul facut!