Il web è oramai presente nelle nostre vite da molti anni, ma molti non si chiedono come sia fatto e come funzioni finché non sono costretti a metterci le mani. In questa pagina analizzeremo i link in html, ovvero uno dei concetti su cui si basa gran parte del web. Vedremo cosa sono, a cosa servono e come si fa a inserire un link in una pagina html.
Indice
- Cos’è un link?
- Link html – sintassi base
- L’attributo target nei link HTML
- URL assoluto e URL relativo
- Link HTML con immagini
- Link ad un indirizzo email
- Link HTML con titolo
- Conclusioni
Cos’è un link?
I link ipertestuali sono stati una delle prime forme di interattività dalla nascita di internet. Senza i link non avremmo la comodità dei motori di ricerca, di poter saltare da un sito all’altro e di muoverci agevolmente da una pagina all’altra di un sito che stiamo visitando. In pratica senza i link potremmo solamente digitare un indirizzo nella barra degli indirizzi e visitare la pagina corrispondente. Per poi cambiare pagina l’unico modo sarebbe digitare il nuovo indirizzo e così via.
Con l’introduzione dei link in html però, possiamo muoverci da una pagina all’altra semplicemente facendo click su una parola, una frase, un’immagine. I link ci permettono quindi di “muoverci” nel web da una pagina all’altra, ma anche di scaricare documenti e immagini.
Il link è fondamentalmente un puntatore, possiamo considerarla come un pezzo di codice in cui c’è scritto “se l’utente fa click qui, apri questo indirizzo di destinazione”.
Solitamente possiamo riconoscere un link dal fatto che quando ci passiamo sopra con il mouse, il puntatore cambia forma, prendendo generalmente la forma di una mano, come ad indicare che possiamo premere su quell’area. Nel caso di link testuali inoltre, solitamente troviamo che il testo è sottolineato, e tradizionalmente (ma ormai questo vale solo in pochi casi) il testo è di colore blu.
Link html – sintassi base
Il tag HTML che definisce i link è il tag <a>. La sua sintassi base è la seguente:
<a href="url di destinazione">testo del link</a>Nella sintassi base notiamo che l’attributo più importante del tag <a> è l’attributo href, che indica l’url di destinazione del link.
Quello che nell’esempio abbiamo scritto come testo del link è il testo che l’utente potrà vedere e che, facendoci click, attiverà il link verso l’url di destinazione.
Esempio
Possiamo fare un esempio di un link completo alla home page di informaticappunti:
<a href="https://www.informaticappunti.it/">Vai a informaticappunti.it</a>
questo codice HTML produrrà il seguente link:
L’attributo target nei link HTML
Il comportamento predefinito di un link scritto utilizzando la sintassi base che abbiamo appena visto è quello di aprire la pagina di destinazione nella stessa finestra del browser. Questo comportamento può essere cambiato se ad esempio abbiamo necessità di aprire il link in una nuova finestra senza perdere la pagina di origine del link.
Per modificare dove la destinazione di un link deve essere aperta dovremo utilizzare l’attributo target.
Questo nuovo attributo può avere diversi valori:
_self– Apre il collegamento nella stessa finestra o scheda del browser (comportamento predefinito nel caso l’attributo target non venga definito)_blank– Apre il collegamento in una nuova finestra o scheda del browser lasciando aperta la pagina in cui è contenuto il link._parent– Si utilizza questo valore per aprire l’indirizzo di destinazione nel riquadro principale della finestra._top– Permette di aprire il collegamento su tutta la finestra del browser.
Solitamente si utilizzano quasi sempre solamente due di questi possibili valori, il valore predefinito _self che, essendo il comportamento di default in caso l’attributo non sia presente, spesso non è esplicitato.
L’altro è il valore _blank che, come abbiamo già accennato, permette di aprire la pagina dell’indirizzo di destinazione in una nuova scheda o finestra del browser. Questo permette a chi scrive il link di lasciare aperta la pagina in cui è contenuto il link.
Esempio
Modifichiamo il link dell’esempio precedente introducendo l’attributo target con valore _blank:
<a href="https://www.informaticappunti.it/" target="_blank">Vai a informaticappunti.it</a>Il link ottenuto sarà simile al seguente:
URL assoluto e URL relativo
Entrambi gli esempi appena fatti utilizzano degli URL assoluti, ovvero abbiamo specificato nell’attributo href un indirizzo completo di protocollo. Questo è necessario quando vogliamo che il link apra un indirizzo esterno diverso dal sito su cui il link è inserito.
Un link locale (ovvero un link che punta ad un’altra pagina dello stesso sito) può essere costruito utilizzando nell’attributo href solamente il percorso relativo rispetto alla pagina su cui è inserito il link.
Esempio
Vediamo qualche esempio della sintassi dei link HTML con URL assoluto e relativo:
<!-- URL assoluti -->
<a href="https://www.comequandoperche.eu/">Come quando perché</a>
<a href="https://www.google.com/">Google</a>
<!-- URL relativi -->
<a href="pagina2.html">Vai a pagina 2</a>
<p><a href="/css/default.css">CSS</a></p>Come possiamo notare, la differenza principale è che quando vogliamo inserire un link utilizzando l’URL relativo non dobbiamo includere il protocollo (http o https) ma solamente il percorso relativo alla pagina corrente.
Link HTML con immagini
Fino ad ora abbiamo visto tutti link testuali, ovvero la possibilità di rendere un pezzo di testo clickabile per trasferire l’utente su una nuova pagina. In html è però possibile inserire delle immagini al posto del testo di un link. In questo modo possiamo dare all’utente la possibilità di fare click su un’immagine per aprire la nuova pagina.
Per rendere link un’immagine occorrerà utilizzare il tag <img> all’interno del tag <a>.
Esempio
Possiamo utilizzare questa funzionalità ad esempio per creare un link alla home page del nostro sito quando l’utente fa click sull’immagine del logo della nostra azienda.
<a href="home.php">
<img src="logo.png" alt="logo informaticappunti" style="width:42px;height:42px;">
</a>Link ad un indirizzo email
In HTML è possibile creare link non solo ad altre pagine web o documenti, ma anche a indirizzi email. Questo tipo di link si comporta in un modo leggermente diverso rispetto ai link “tradizionali”, aprendo il client esterno di posta elettronica dell’utente anziché rimanere all’interno del browser web.
Per creare un link ad un indirizzo email dovremo utilizzare la parola chiave mailto: prima dell’indirizzo nell’attributo href.
Esempio
Vediamo un esempio della sintassi di un link ad un indirizzo email:
<a href="mailto:[email protected]">Manda una mail!</a>Quando l’utente farà click sul link, verrà avviato il client di posta elettronica predefinito dell’utente e si aprirà la pagina di creazione di una nuova email con il campo destinatario già compilato con l’indirizzo specificato.
Link HTML con titolo
Navigando nel web, vi sarà forse capitato di mettere il mouse su un link e pochi istanti dopo vedere un piccolo tooltip apparire vicino al puntatore con del testo che descrive in breve il link su cui state per fare click. Questo si può fare utilizzando l’attributo title per dare un titolo al link.
Tramite l’attributo title possiamo introdurre del testo che non viene visualizzato in ogni momento, ma che può aiutare l’utente a capire cosa succederà facendo click sul link.
Esempio
Per fare un esempio possiamo unire l’attributo title con l’utilizzo del tag <img> per realizzare questo link:
<a href="home.php" title="Vai alla home page">
<img src="logo.png" alt="logo informaticappunti" style="width:42px;height:42px;">
</a>
Mettendo questo link nel nostro sito web potremo far si che l’utente posizionando il cursore del mouse sull’immagine del logo, visualizzi un tooltip che renda più chiaro il fatto che facendo click sul logo verrà portato alla home page del nostro sito.
Conclusioni
In questa pagina abbiamo visto come possiamo scrivere un link in HTML, per creare sia link semplici che più elaborati tramite l’utilizzo degli attributi target e title. Abbiamo inoltre visto come rendere link un’immagine e come creare un link che punti ad un indirizzo email.