Esercizi Link Interni HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare le basi sulla creazioni di link interni di pagina in HTML utilizzando il tag <a> insieme agli id sugli elementi.

Esercizio 1

Crea un link che punti all'intestazione di primo livello all'interno della stessa pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <h1 id="intestazione">Titolo principale</h1>
    <p>Questo è un paragrafo di testo.</p>
    <a href="#intestazione">Torna all'inizio della pagina</a>
  </body>
</html>

Esercizio 2

Crea un link che punti a un paragrafo specifico all'interno della stessa pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <h1>Titolo principale</h1>
    <p id="paragrafo1">Primo paragrafo</p>
    <p id="paragrafo2">Secondo paragrafo</p>
    <a href="#paragrafo1">Vai al primo paragrafo</a>
  </body>
</html>

Esercizio 3

Crea un link che punti a un elemento specifico di un elenco puntato all'interno della stessa pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <h1>Titolo principale</h1>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li id="elemento3">Elemento 3</li>
    </ul>
    <a href="#elemento3">Vai al terzo elemento dell'elenco</a>
  </body>
</html>

Esercizio 4

Crea un link che punti a un'immagine specifica all'interno della stessa pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <h1>Titolo principale</h1>
    <img id="immagine1" src="immagine1.jpg" alt="Immagine 1" />
    <img id="immagine2" src="immagine2.jpg" alt="Immagine 2" />
    <a href="#immagine2">Vai alla seconda immagine</a>
  </body>
</html>

Esercizio 5

Crea un link che punti a una sezione specifica della pagina con un testo descrittivo, ad esempio "Vai alla sezione finale".

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <h1>Titolo principale</h1>
    <p>Questo è un paragrafo di testo.</p>
    <h2 id="sezione-finale">Sezione finale</h2>
    <p>Altre informazioni qui...</p>
    <a href="#sezione-finale">Vai alla sezione finale</a>
  </body>
</html>