ancorele sunt elemente HTML cu ajutorul cărora se pot deschide alte pagini, se poate sări de la un document la altul. Sunt foarte importante în crearea de pagini web, deoarece un site este format din mai multe pagini care sunt unite între ele prin aceste ancore.
O ancora are următoarea structură:
<a href="url" title="Titlu link"> Nume </a>
- href - cel care marcheaza indicarea adresei ancorei.
- url - adresa ancorei (a paginii care va fi deschisa). De exemplu (http://www.marplo.net).
- title - se dă un titlu ancorei, un text ascuns, care apare numai când este poziționat mouse-ul deasupra legaturii.
- nume - este textul care va apărea în browser derept legatura, acesta va apărea altfel colorat și subliniat. În loc de acest text se poate folosi și o imagine, astfel "Nume" va fi inlocuit cu <img src = "nume_imagine.extensie">
- Ancore externe - cel care marcheaza indicarea adresei legaturii.
- Ancore externe către pagini ale aceluiași site
- dacă documentul țintă se află în același director cu fișierul în care se scrie link-ul, codul va fi scris așa:
<a href="nume_fisier.extensie" title="Titlu link">Nume</a>
- dacă documentul țintă se află într-un director anterior celui în care se află fișierul în care se scrie link-ul, codul va fi scris așa:
<a href="../nume_fisier.extensie" title="Titlu link">Nume</a>
- dacă documentul țintă se află într-un director din cel care se află fișierul în care se scrie link-ul, codul va fi scris așa:
<a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>
- Ancore externe către alte site-uri
- Ancore interne - adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net).
Când pagina documentului este lungă și anevoie de căutat conținutul dorit se pot folosi link-uri către texte din cadrul aceleeași pagini. Astfel se poate sări spre anumite texte și totodată reveni la începutul documentului.
Pentru a crea link-uri interne se parcurg următorii pași:
- Se scrie următorul cod la textul țintă, care marchează locația unde se va face saltul și se află în aceeași pagină cu linkul
<a name="cuvant">Textul tinta</a>
Atributul name indică ținta pentru link, e un fel de semn care indică locația, iar "Textul tinta" este textul unde se face saltul.
- În locul unde vrem să fie link-ul, adică acolo unde o să dăm click pentru a face saltul către textul ales, se scrie următorul cod:
<a href="#cuvant">Nume</a>
Aici "cuvant" este același text scris la pasul 1.
În exemplul următor se creaza o ancora catre motorul de cautare google.ro .
<!doctype html5>
<html>
<head><title>Ancore</title></head>
<body>
<a href="www.google.ro">Ancora externa catre google.ro</a>
<p style="color:red; font-family: Arial;">
Ancora externa catre google.ro. Ancora extern catre google.ro.
</p>
</body>
</html>
Clik aici pt vizualizare exemplu
În exemplul următor se creaza un ancora catre exemplul anterior.
<!doctype html5>
<html>
<head><title>Link-uri</title></head>
<body>
<a href="exemplul1.html">Ancora externa catre exemplul anterior</a>
<p style="color:red; font-family: Arial;">
Link extern catre exemplul anterior. Ancora externa catre exemplul anterior.</p>
</p>
</body>
</html>
Clik aici pt vizualizare exemplu
- Scrieţi codurile HTML de mai sus în două pagini web, prima pagină o salvaţi cu denumirea de "exemlul1.html", iar a doua cu denumirea de "exemlul2.html" şi rulaţile într-un browser.
- Modificaţi parametrii tagurilor utilizate.
- Modificaţi pagina web pentru hobby-ul preferat adăugând link-uri către alte pagini web create de voi sau de pe internet pe aceeaşi temă.