Primi passi con HTML - Lezione 4 - Collegamenti (ipertesti)
Siamo arrivati al concetto fondamentale di HTML, lo scopo per cui è stato creato: i collegamenti ipertestuali (o semplicemente link). I link sono il modo per creare connessioni tra diversi contenuti. Immagina di avere 100.000 file di testo: anche se creassi un indice con 200 descrizioni per ciascun gruppo, ti servirebbero 500 categorie. Per consultare tutte queste rubriche e trovare le informazioni desiderate, ci vorrebbe molto tempo. Come possono i collegamenti rendere la nostra vita più semplice?
I link collegano tra loro due documenti HTML in modo arbitrario, e ogni documento ha un nome univoco. In questo modo, da un documento possiamo accedere ad altri dieci documenti simili o correlati, aumentando così le probabilità di trovare ciò che cerchiamo.
Lo stesso principio si applica ai siti web. Le pagine di un sito hanno nomi univoci chiamati URL (Uniform Resource Locator – localizzatore uniforme delle risorse). Scriviamo il nome univoco della pagina a cui vogliamo collegarci nel tag <a></a>. In generale, la struttura è la seguente:
<a href="percorso_univoco">testo del link</a>
In questo codice, href è un attributo del tag a. Abbiamo già parlato degli attributi nella lezione precedente. Ora creiamo un altro file nella stessa cartella di index.html. Chiamiamolo file.html e inseriamo al suo interno il seguente codice:
<html>
<head>
<title>Il mio secondo documento HTML</title>
</head>
<body>
<h1>Il mio secondo documento HTML</h1>
</body>
</html>
Nel file index.html scriviamo questo codice:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<p>
<a href="file.html">Link al secondo documento</a>
</p>
</body>
</html>
Ora, aprendo index.html nel browser, avrai un link che ti porterà a file.html. Esercitiamoci ora con i percorsi ai file. Quando entrambi i file si trovano nella stessa cartella, basta scrivere il nome del file nell’attributo href e il browser capirà che si trova nello stesso percorso. Ma se non vogliamo tenere i file nella stessa cartella, come si fa? In questo caso usiamo i percorsi relativi.
Percorsi relativi
I percorsi relativi si chiamano così perché vengono calcolati rispetto al file sorgente. Creiamo una cartella chiamata files nella stessa directory di index.html. Spostiamo dentro questa cartella il file file.html. Ora, se clicchi sul link in index.html, il browser non troverà più file.html perché il suo percorso è cambiato.
Ora useremo un percorso relativo partendo da index.html. Per indicare una cartella si utilizza la barra (/), ad esempio:
/Program Files/MSOffice/
Per indicare l’inizio del percorso relativo si scrive ./ (punto e barra). Quindi il percorso dalla posizione di index.html alla cartella files sarà:
./files/
Infine aggiungiamo il nome del file per ottenere il percorso completo:
./files/file.html
Ora aggiorniamo il file index.html con il nuovo percorso:
<html>
<head>
<title>Il mio primo documento HTML</title>
</head>
<body>
<h1>Il mio primo documento HTML</h1>
<p>
<a href="./files/file.html">Link al secondo documento</a>
</p>
</body>
</html>
Salva il file index.html e aggiorna la pagina nel browser: il link a file.html funziona di nuovo. Puoi anche scrivere il percorso in questo modo:
<a href="files/file.html">Link al secondo documento</a>
Il browser interpreterà correttamente il link anche senza ./. Tuttavia, se scrivi:
<a href="/files/file.html">Link al secondo documento</a>
questo sarà un percorso assoluto, non relativo, e non funzionerà correttamente in locale. Se vuoi scrivere un percorso relativo, usa ./ o inizia direttamente dal nome della cartella.
Ora creiamo un link di ritorno da file.html a index.html. Indichiamo prima che si tratta di un percorso relativo:
./
Ora specifichiamo che il file si trova un livello più in alto, uscendo dalla cartella files. Usiamo quindi ../ (due punti e barra):
./../
Se nella cartella files ci fosse un’altra sottocartella con un file HTML, per tornare indietro di due livelli scriveremmo ./../../. Ogni ../ rappresenta un livello superiore.
Ora aggiungiamo il nome del file alla fine del percorso:
./../index.html
Inseriamo questo percorso nel file file.html:
<html>
<head>
<title>Il mio secondo documento HTML</title>
</head>
<body>
<h1>Il mio secondo documento HTML</h1>
<p>
<a href="./../index.html">Link al primo documento</a>
</p>
</body>
</html>
Ora puoi passare da una pagina all’altra e tornare indietro. Osserva come cambiano gli URL nel browser.
Torniamo ora ai percorsi che iniziano con la barra / senza il punto: si tratta di percorsi assoluti.
Percorsi assoluti
I percorsi assoluti vengono utilizzati nei siti web online. Ad esempio, in Drupal tutte le pagine vengono caricate tramite un unico file index.php, quindi il percorso / indica la radice del sito. Quando utilizzi un percorso assoluto sul tuo computer, esso parte dalla directory principale del disco. È possibile usare anche percorsi relativi, ma gli assoluti sono spesso più comodi. Infatti, se sposti un file o una cartella, i percorsi relativi possono rompersi (bisogna aggiungere o rimuovere ../), mentre gli assoluti restano validi.
I percorsi assoluti iniziano con / o con l’indirizzo completo del sito, ad esempio https://drupalbook.org/ru/. Il browser li riconosce entrambi. Ecco alcuni esempi di percorsi assoluti:
/index.html
/files/file.html
/files2/file2.html
Se vogliamo creare un link a file2.html sia da index.html che da file.html, il codice sarà identico, anche se i file si trovano in cartelle diverse:
<a href="/files2/file2.html">link</a>
Come detto, questo codice funzionerà sia in index.html che in file.html, e persino in file2.html.
Attributo target
L’attributo target è molto importante, specialmente quando un link apre un altro sito. Determina come si aprirà la pagina collegata:
_blank – in una nuova finestra o scheda;
_self – nella stessa finestra (valore predefinito);
_parent – nel frame padre (i frame sono ormai obsoleti, sostituiti da AJAX);
_top – rimuove tutti i frame e apre la pagina a schermo intero; se non ci sono frame, equivale a _self.
In genere ci serve solo _blank, poiché _self è implicito e non serve scriverlo.
<a href="/files2/file2.html" target="_blank">link</a>
Attributo rel
L’attributo rel (da “relation”) indica la relazione tra il documento corrente e quello collegato. L’uso più comune è rel="nofollow", che indica ai motori di ricerca (come Google e Yandex) di non indicizzare quel link. Ad esempio, se stai collegando un sito esterno, è buona pratica aggiungere rel="nofollow" insieme a target="_blank".
<a href="/files2/file2.html" target="_blank" rel="nofollow">link</a>