Home esercizi html link interni

Esercizi Link Interni HTML

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>