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:
Altri valori meno usati sono:
<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:
Ovviamente questi attributi valgono per qualsiasi testo, non solo per <a>.
Prossima lezione |