Esercizi Collegamenti Ipertestuali HTML

Codegrind Team•Jul 16 2023

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>