I link e i collegamenti

I link sono essenziali per ogni pagina web, per rindirizzare i visitatori ad altre pagine o su siti esterni.

Il tag dei link

I link, detti anche collegamenti ipertestuali, si possono creare con il tag <a>. All’interno possiamo inserire il testo che verrà visualizzato e, cliccandolo, si potrà aprire una pagina diversa.

<a> Un link base non ancora funzionante </a>

Provando, si vedrà che i link appaiono in blu e sottolineati in default. Vedremo più avanti come cambiare questo stile.
Ora vediamo come farlo funzionare. Inseriamo l’attributo essenziale href=”valore” in <a>. In valore inseriamo la pagina web che si vuole aprire. Come con l’attributo src delle lezioni precedenti, anche in href possiamo inserire solo il nome della pagina più l’estensione, se questa si trova nella stessa cartella del file HTML.

<a href="esempio.html"> Un link che porta alla pagina “esempio.html” </a>

Si possono inserire link all’intero del server o del tuo computer…

<a href="/cartella/esempio.html"> Link </a>

…oppure link esterni al sito o pagina.

<a href="https://example.com/"> Link 2 </a>

L’attributo più importante

L’attributo target=”valore” serve per cambiare il modo in cui viene aperto il link. I valori possibili sono:

• _self‎ - quello di default, apre la nuova pagina nella stessa scheda browser dove si trova il link. In questo caso, puoi anche non inserire l’attributo target.
• _blank – apre il link in una nuova scheda del browser.

Altri valori meno usati sono:

• _top – apre il link a tutta finestra.
• _parent – apre il link in un nell’eventuale riquadro principale.
• nome_di_un_frame – apre il link in un iframe (che vedrai nelle prossime lezioni).

<a href="esempio.html" target="_blank"> Un link in una nuova scheda </a>

Immagini come link

Nelle lezioni precedenti abbiamo visto il tag <img> per le immagini. Per crearne una che sia anche un link, quindi se cliccata porta l’utente in una nuova scheda, possiamo inserirla tra il <a>.

<a href="esempio.html">
  <img src="foto.jpg">
  // Cliccando sull'immagine, andrai a esempio.html
</a>

Gli stili dei link

Come detto prima il testo dei link, di default, appare blu e sottolineato. Non si addice sempre allo stile di un sito. Per questo è possibile modificare l’apparenza con l’attributo style=”valore” inserendo questi valori:

• text-decoration:none – cancella la sottolineatura del link. Si può inserire, invece di none, anche overline per la sopra lineatura, line-through per una linea al centro della scritta come fosse cancellata, underline per la normale sottolineatura (default). Puoi inserire anche più di uno, per esempio underline overline.
• color: grey – cambia il colore del link in grigio (puoi inserire altri colori, come red, blue, ecc.).

Ovviamente questi attributi valgono per qualsiasi testo, non solo per <a>.