Creare collegamenti

I collegamenti ipertestuali collegano ogni pagina alle altre, creando la struttura del web come lo conosciamo.

Com'è fatto un link

Per creare link inseriamo del testo, o un'immagine o altro, dentro a un tag a:

Questo dà il seguente risultato:

I'm creating a link to the Mozilla homepage.

Possiamo anche aggiungere un attributo title, che mostra un testo quando l'utente passa sopra al link col mouse:

...e il risultato è il seguente:

I'm creating a link to the Mozilla homepage.

 

Link a livello di blocco

Come dicevamo possiamo trasformare qualsiasi cosa in un link. Ecco un esempio con un'immagine:

 

URL e path

Un URL (Uniform Resource Locator) è una stringa di testo che definisce la posizione di qualcosa nel web. Ad esempio la home page inglese di Mozilla si trova qui:

https://www.mozilla.org/en-US/

Gli URL usano i path (percorsi) per individuare i file. Diamo un'occhiata a questo esempio di struttura di cartelle:

Questa cartella (creating-hyperlinks) contiene un piccolo sito.

Chiamiamo root la cartella principale, che contiene tutto il sito.

Al suo interno troviamo un file index.html e un file contacts.html.

In ogni sito il file index contiene la home page.

La cartella di esempio contiene anche due sottocartelle pdfs e projects, che a loro volta contengono un singolo file.

Notiamo che è possibile avere diversi file index, purché siano in cartelle diverse: il primo sarà la home dell'intero sito, il secondo la home si una sezione interna al sito (projects).

Vediamo ora alcuni esempi di link che possiamo creare:

verso un file nella stessa directory: ad es. dentro a index vogliamo creare un link a contacts, che è nella stessa cartella

verso un file contenuto in una sottocartella: ad es. da index vogliamo un link che punti alla seconda index, dentro a projects:

passando per la cartella parent (genitore): ad es. da projects/index vogliamo un link al pdf dentro a pdfs:

 

Link a frammenti di un documento

E' possibile creare un collegamento che punti allo specifico elemento di una pagina. Ad esempio aggiungiamo un attributo id a un titolo h2:

Dopodiché creiamo il link includendo l'id nell'URL:

Possiamo anche creare un link a un frammento della stessa pagina (utile ad es. per creare quei link del tipo "torna all'inizio"):

 

URL assoluti e relativi

Gli URL assoluti sono dei percorsi completi a una specifica risorsa nel web, ad esempio:

  • https://www.example.com
  • http://www.example.com/projects/index.html
  • http://www.example.com/projects/

Nell'ultimo esempio nota che quando non si specifica una pagina il web server cerca se esiste una pagina index in quella cartella.

Gli URL relativi puntano a una posizione relativa alla pagina da cui parte il link.

Ad esempio se ci troviamo dentro alla pagina

http://www.example.com/projects/index.html

un link a "progetto1.html" cercherà di aprire questo percorso:

http://www.example.com/projects/progetto1.html

un link a "sottocartella/pagina.html" cercherà di aprire:

http://www.example.com/projects/sottocartella/pagina.html

un link a "../altro.html" cercherà di aprire:

http://www.example.com/altro.html

e un link a "/" cercherà di aprire:

http://www.example.com/

e quindi:

http://www.example.com/index.html

 

Ricorda: quando devi creare dei link verso pagine dello stesso sito è sempre bene usare collegamenti relativi... in questo modo se per qualche motivo il nome del dominio dovesse cambiare non avresti bisogno di riscrivere tutti i link!

 

L'attributo download

Quando un link punta a un file da scaricare, usa l'attributo download per specificare un nome di default per il file che verrà salvato:

 

Collegamenti a email

Ecco come creare un link che prepara una nuova email vuota verso un certo indirizzo:

  • HTML

CFP CNOS-FAP DON BOSCO - via XIII Martiri, 86 - 30027 San Donà di Piave (VE) - tel. 0421 338 980 - Organismo di Formazione accreditato dalla Regione del Veneto