I link
Le pagine web sono dette anche “ipertesti” (HTML = HyperText Markup Language) perché sono dei testi collegati tra loro tramite i cosiddetti link a formare una vera e propria rete di documenti. I link si evidenziano nella pagina web perché, solitamente, sono evidenziati in blu e sottolineati:
I link però possono anche essere costituiti da delle immagini:
Di solito un link si identifica in quanto il cursore cambia forma, come nel caso della manina in figura. Un uso comune all'interno dei siti web, e buona pratica, consiste nel rendere il logo del sito un link che porta alla homepage (la pagina index.html del sito).
Che siano immagini o testi, i link possono sia portare ad altre pagine web che permetterci di muoverci all'interno di una pagina web (vedasi ad esempio l'elenco numerato di sezioni presentate in questa pagina). Inoltre, possono portarci a vedere immagini, video, ad ascoltare file musicali o anche a scaricare file.
Per inserire un link all'interno di una pagina web si utilizza il tag <a> dove a sta per “anchor” ovvero ancora:
Che appare così:
Quindi un link è composto principalmente da due parti:
- L'indirizzo della risorsa a cui porta dopo il click specificato nell'attributo href. La risorsa può essere un'altra pagina web oppure un file
- Il testo che appare cliccabile che viene inserito tra l'apertura e la chiusura del tag
<a>.
Esistono due modi principali in cui inserire una risorsa all'interno di href, detti indirizzamento assoluto e indirizzamento relativo.
Indirizzamento assoluto
L'indirizzamento assoluto consiste nell'inserire direttamente l'url della risorsa che vogliamo richiamare, ovvero il nome del sito con il protocollo (in questo caso http) per accedere alla risorsa. Ad esempio:
Il simbolo di slash (“/”) all'estrema destra del sito indica la cartella nel server in cui la pagina di “index.html” (quindi l'homepage del sito) è contenuta. In questo caso il nome della pagina (index.html) non è scritto nell'url in quanto è implicito (ovvero sottointeso).
Se, ad esempio, https://www.miosito.it/ è l'url che punta alla cartella “sito”:
La pagina web “index.html” è contenuta nella cartella home e quindi in: https://www.miosito.it/home/. Se abbiamo bisogno di un link che punti a cont.html, basterà inserire:
Se invece dobbiamo puntare a “doc.pdf”, avremo:
E se invece dobbiamo puntare a “imm2.pdf”, avremo:
Con l'indirizzamento assoluto basta quindi mettere l'indirizzo completo della risorsa a cui vogliamo accedere a partire dalla cartella puntata da https://www.miosito.it/
Indirizzamento relativo
L'indirizzamento relativo, invece, consiste nell'indicare la posizione della risorsa a cui vogliamo accedere relativamente a (rispetto a) la pagina web in cui è contenuto il link. In questo caso, l'attributo href specifica il percorso che dobbiamo compiere per arrivare dalla pagina web alla risorsa. A questo proposito, può essere utile avere presente come è fatto l'albero delle cartelle, una struttura grafica che mostra secondo relazioni padre-figlio le cartelle e sotto-cartelle in cui sono contenuti i file di interesse. I percorsi indicati sono stati costruiti su immagini ed altri documenti, ma ognuno dei casi presentati vale per qualsiasi tipo di risorsa a cui si vuole accedere (pagine web, immagini, video, musica, documenti o altri tipi di file)
Pagina nella stessa cartella della risorsa
Prediamo ad esempio un link da “index.html” che punta ad un'altra risorsa nella cartella “home”, come “imm1.png”. Entrambe sono disposte allo stesso livello dell'albero delle cartelle (entrambe sono contenute nella cartella “home”). In questo caso basterà indicare solo il nome della risorsa:
Risorsa in una sotto-cartella
Per creare un link tra “index.html” e “imm2.png”, possiamo notare dall'albero che “imm2.png” è contenuta nella cartella “img”. Visto che “img” e “index.html” si trovano allo stesso livello, dovremo scendere di un livello nell'albero per raggiungere “imm2.png”, il che equivale ad entrare nella cartella “img”. Quindi, prima scenderemo nella cartella “img” e poi specificheremo il nome del file che vogliamo includere:
Se invece “imm2.png” non fosse contenuta direttamente in “img” ma in una sua sotto-cartella, ad esempio “cani” (quindi: “img” -> “cani” -> “imm2.png”), dovremmo prima scendere in “img”, poi in “cani” e poi specificare il nome dell'immagine in questo modo:
Per cui, per entrare in una cartella si metterà sempre “ nomecartella/ ” e si ripeterà questa forma tante volte quante sono le sotto-cartelle in cui dobbiamo scendere, completando poi il percorso con il nome del file.
Risorsa in una cartella esterna
L'ultimo caso consiste nell'uscire dalla cartella in cui la pagina è contenuta per entrare in un'altra cartella. Se, ad esempio, dobbiamo mettere un link in “index.html” che punta a “cont.html” dovremo uscire dalla cartella “home” ed entrare in “cont” e quindi di fatto salire di un livello nell'albero delle cartelle.
Per fare ciò, dobbiamo usare il prefisso “../ ” per entrare nella cartella “sito”. Dalla cartella “sito” dovremo poi entrare nella cartella “contatti”. Il percorso finale diventa:
Nel caso dovessimo salire di più di una posizione nell'albero delle cartelle, basterà concatenare i “../” tante volte quanti sono i livelli da attraversare:
- 2 livelli: "../../"
- 3 livelli: "../../../"
e così via. Attenzione che i “ ../ ” si mettono uno dopo l'altro e solo all'inizio del percorso. Non si mettono percorsi del tipo: “../cartella/../sito”.
Link a sezioni della pagina
I link possono essere usati anche per facilitare la navigazione all'interno di una pagina che è molto lunga, come nel caso di questo sito: https://it.wix.com/blog/sito-per-portfolio-esempi#viewer-15t8s. Ogni tag html (che sia <p>, <div>, <h1>, <img> eccetera) offre un attributo di “id”, ovvero un identificativo. All'interno di “id” si specifica il nome che si vuole attribuire a quell'elemento, che però deve trattarsi di un nome univoco, ovvero proprio di quell'elemento e di nessun'altro. Ad esempio, possiamo specificare un paragrafo con identificativo p1:
Per inserire un link a p1, dovremo mettere il simbolo di “#”:
Con questo tipo di link possiamo puntare anche non direttamente ad un elemento della pagina, ma ad un testo qualsiasi. In questo caso aggiungeremo un altro tag <a> ma senza specificare l'attributo href, il che di fatto lo rende un link non cliccabile:
Questo caso può essere utile, ad esempio, nel caso in cui volessimo puntare ad una parte interna di un paragrafo molto lungo.
Se, invece, si vuole che il link punti all'inizio della pagina, sarà sufficiente il solo simbolo “#”:
Link ad email
Attraverso un link si può anche creare una bozza per una email. Il click di un link contenente l'indirizzo email ha l'effetto di aprire il client di posta (il programma di posta elettronica installato sul computer) e di creare una email con destinatario l'indirizzo nel link. La parola chiave da apporre all'indirizzo è “mailto:”:
Dove “indirizzoemail” è un indirizzo email usuale nella forma utente@domino dove “utente” è il nome utente e dominio può essere qualsiasi dominio di posta elettronica, come gmail.com, virgilio.it eccetera.
Link con immagini
Per rendere un'immagine un link si inserisce all'interno del tag <a> un'immagine: