In questa lezione imparerai a fare i collegamenti (link) tra le pagine.

Cosa mi serve per fare un link?

Per fare i link usi sempre quello che ti serve per costruire il codice HTML: un elemento. Un elemento semplice con un solo attributo che ti permetterà di fare un link a qualsiasi cosa. Qui c'è un esempio di come appare un link a HTML.net:

Esempio 1:

<a href="http://www.html.net/"

>Questo è il link a HTML.net</a>

Sul tuo browser si vedrà in questo modo:

Questo è il link a HTML.net

L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (cioè, riferimento ipertestuale), che specifica dove deve portare il link - tipicamente un indirizzo su Internet o un nome di un file.
Nell'esempio sopra l'attributo href ha il valore "http://www.html.net", che è l'indirizzo completo di HTML.net e viene chiamato URL (Uniform Resource Locator). Nota che "http://" deve essere sempre inclusa in una URL. La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link. Ricordati di chiudere l'elemento con il tag di chiusura </a>.

Cosa mi dici dei link tra le mie stesse pagine?

Se vuoi fare un link tra pagine dello stesso sito web, non hai bisogno di specificare in dettagli l'intero indirizzo (URL) del documento. Per esempio, se hai fatto due pagine (chiamiamole pagina1.htm e pagina2.htm) e le hai salvate nella stessa cartella, puoi fare un link da una pagina all'altra semplicemente digitando il nome del file nel link. In questo caso un link dalla pagina1.htm alla pagina2.htm potrbbe apparire come segue:

Esempio 2:

<a href="pagina2.htm"

>Fai click qui per andare alla pagina 2</a>

Se la pagina 2 è posizionata in una sottocartella (chiamata "sottocartella"), allora il link dovrebbe apparire come questo:

Esempio 3:

<a href="sottocartella/pagina2.htm"

>Fai click qui per andare alla pagina 2</a>

Il contrario, un link dalla pagina 2 (nella sottocartella) alla pagina 1, si vedrà come segue:

Esempio 4:


 <a href="../pagina1.htm">Un link alla pagina 1</a>

I caratteri "../" puntano alla cartella posizionata un livello sopra del file da cui hai fatto il link. Con lo stesso sistema puoi puntare a due (o più) cartelle di livello superiore, scrivendo "../../".
Hai capito il sistema? In alternativa puoi sempre digitare l'indirizzo completo del file (URL).

Come faccio per i link interni alla pagina?

Puoi creare anche dei link interni alla stessa pagina - per esempio un sommario in cima alla pagina che punta a ciascuno capitolo sotto. Tutto quello che ti serve è utilizzare un utilissimo attributo chiamato id (identification, identificativo) e il simbolo "#".
Usa l'attributo id per marcare l'elemento che vuoi linkare. Per esempio:


 <h1 id="heading1">Titolo 1</h1>

Adesso puoi creare un collegamento a quell'elemento usando "#" nell'attributo del link. La gratella "#" deve essere seguita dall' id del tag che vuoi linkare. Per esempio:


 <a href="#heading1">Link a titolo 1</a>

Tutto sarà più chiaro con un esempio:

Esempio 5:


 <html>
   
   <head>
   </head>

   <body>

  <p><a href="#heading1">Link a titolo 1</a></p>
  <p><a href="#heading2">Link a titolo 2</a></p>

  <h1 id="heading1">titolo 1</h1>
  <p>Testo testo testo testo</p>

  <h1 id="heading2">titolo 2</h1>
  <p>Testo testo testo testo</p>
   
   </body>

 </html>

che sul browser apparirà così (prova a cliccare sui due link):

Link a titolo 1
Link a titolo 2

Titolo 1

Testo testo testo testo

Titolo 2

Testo testo testo testo

(Note: An id attribut must start with a letter)

Posso fare un link a qualcos'altro?

Puoi fare dei link anche ad un indirizzo di mail. Si fa pressochè come un link ad un documento:

Esempio 6:

<a href="mailto:nobody@html.net"

>Manda una e-mail a nobody a HTML.net</a>

sul browser apparirà così:

Manda una e-mail a nobody a HTML.net

L'unica differenza tra un link ad una e-mail e un link ad un file è che invece di digitare l'indirizzo di un documento, scriverai mailto: seguito dall'indirizzo di e-mail. Quando viene fatto click sul link si aprirà il programma di posta elettronica con un nuovo messaggio vuoto e l'indirizzo di e-mail specificato. Nota che questo funziona solo se sul tuo computer è stato istallato un programma di posta. Fai una prova!

Ci sono altri attributi che dovrei conoscere?

Per cereare un link devi sempre usare l'attributo href. In aggiunta, puoi anche mettere un title al tuo link:

Esempio 7:

<a href="http://www.html.net/"

 title="Visita HTML.net e impara l'HTML">HTML.net</a>

Sul browser si vedrà così:

HTML.net

L'attributo title viene usato per inserire una breve descrizione al link. Se posizioni il cursore del mouse sopra il link - senza cliccare - vedrai apparire il testo "Visita HTML.net e impara l'HTML".