Sviluppo Web

I Link

Stampa WhatsApp Email

Un link è un collegamento ipertestuale che permette di spostarsi da una pagina a un’altra o da una sezione a un’altra nella stessa pagina.

Un link è un collegamento ipertestuale che permette di spostarsi da una pagina a un’altra o da una sezione a un’altra all’interno della stessa pagina.

In HTML, i link si creano con il tag a. L’attributo principale è href, che indica la destinazione del link.

Esempi: 


<a href="https://www.esempio.com">Visita il sito</a> <!-- Link esterno a un sito web -->

<a href="#sezione1">Vai alla sezione 1</a> <!-- Link interno alla stessa pagina -->

In sintesi:

  • <a>: crea il collegamento.
  • href: specifica la destinazione del link.
  • Se href inizia con #, il link punta a un id presente nella stessa pagina.



LABORATORIO

Creare un mini indice con le liste e i link

In questo laboratorio imparerai a creare un mini indice all’interno di una pagina HTML utilizzando le liste, i link e l’attributo id per collegare i titoli alle voci dell’indice.

Particolare attenzione sarà data ai link: il tag a permette di creare collegamenti. L’attributo principale è href, che indica la destinazione del link. Se href inizia con #, il collegamento punta a un id presente nella stessa pagina.

1 Crea o apri un documento HTML

Apri il file HTML che hai creato nei laboratori precedenti (per esempio artista.html) con il tuo editor di testo. All’interno della sezione <body>, aggiungi alcuni titoli con i tag h2 e assegna a ciascuno un attributo id univoco. 


<h2 id="bio">Biografia</h2>
<p>...contenuto...</p>

<h2 id="album">Discografia</h2>
<p>...contenuto...</p>

<h2 id="premi">Premi e riconoscimenti</h2>
<p>...contenuto...</p>

2 Crea il mini indice con link

All’inizio del documento, subito dopo il titolo principale h1, inserisci un titolo di terzo livello e una lista non ordinata ul. Ogni elemento della lista deve contenere un link a che utilizza l’attributo href per puntare all’id dei titoli creati in precedenza. 


<h3>Indice della pagina</h3>
<ul>
    <li><a href="#bio">Biografia</a></li>
    <li><a href="#album">Discografia</a></li>
    <li><a href="#premi">Premi e riconoscimenti</a></li>
</ul> <!-- Link puntano agli id delle sezioni corrispondenti -->

3 Visualizza il risultato

Salva il file HTML e aprilo nel browser. Cliccando sulle voci del mini indice verrai automaticamente portato alla sezione corrispondente della pagina.

4 Suggerimenti pratici

  • Assicurati che ogni link punti a un id esistente nella pagina.
  • Puoi personalizzare i link con CSS, ad esempio cambiare il colore, sottolineatura o effetto al passaggio del mouse.
  • Utilizza ul per liste puntate e ol per liste numerate.