📢 Nuovo Corso Laravel API disponibile!

Esercizi Collegamenti Ipertestuali HTML

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo dei collegamenti ipertestuali o link esterni in HTML utilizzando il tag <a>.

Esercizio 1

Crea un link che punti al sito web esterno "https://www.example.com".
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com">Visita il sito web</a>
</body>
</html>

Esercizio 2

Crea un link che punti a una pagina specifica del tuo sito web, ad esempio "about.html".
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="about.html">Vai alla pagina "Chi siamo"</a>
</body>
</html>

Esercizio 3

Crea un link con un testo descrittivo che indichi all'utente dove il link li porterĂ , ad esempio "Clicca qui per ulteriori informazioni".
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com">Clicca qui per ulteriori informazioni</a>
</body>
</html>

Esercizio 4

Crea un link che si apra in una nuova finestra del browser quando viene cliccato.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com" target="_blank"
>Apri il link in una nuova finestra</a
>
</body>
</html>

Esercizio 5

Crea un link che includa un'immagine cliccabile al suo interno.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com"
><img src="immagine.jpg" alt="Descrizione dell'immagine"
/></a>
</body>
</html>

Esercizio 6

Crea un link che includa un'intestazione di primo livello come testo del link.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com"><h1>Titolo del link</h1></a>
</body>
</html>

Esercizio 7 (facoltativo con CSS)

Crea un link con uno stile CSS personalizzato, ad esempio un colore di sfondo o un colore del testo diverso.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
<style>
.custom-link {
background-color: yellow;
color: blue;
padding: 5px 10px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://www.example.com" class="custom-link"
>Link personalizzato</a
>
</body>
</html>

Esercizio 8

Crea un link che includa un attributo title che mostri una descrizione quando l'utente passa il mouse sopra di esso.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com" title="Visita il sito web"
>Link con descrizione</a
>
</body>
</html>

Esercizio 9

Crea un link che sia disabilitato, in modo che non possa essere cliccato dagli utenti.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com" disabled>Link disabilitato</a>
</body>
</html>

Esercizio 10

Crea un link che includa un attributo rel per specificare la relazione tra la pagina corrente e la pagina di destinazione.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="https://www.example.com" rel="nofollow">Link con attributo rel</a>
</body>
</html>