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>