Link e una seconda pagina · Code con Martin

Il tuo sito web smette di essere una sola pagina. Ne costruirai una seconda e le collegherai con i link.

Te lo mostro: un link

Un link – la cosa cliccabile che ti porta altrove – si fa con il tag <a>:

<!-- A link to another page on your own website -->
<a href="lunch-menu.html">Lunch Menu</a>

<!-- A link out to somewhere else on the internet -->
<a href="https://www.si.edu">Our favorite museum's website</a>

href dice dove porta il link.
Il testo tra <a> e </a> è ciò che si vede ed è cliccabile.

Una seconda pagina

Finora il tuo sito web ha solo index.html. Aggiungiamo una seconda pagina – è solo un altro file nella stessa cartella:

In VS Code, crea un nuovo file. Chiamalo in base al tuo progetto, tipo lunch-menu.html, about-me.html, trips.html o roster.html. Di nuovo, minuscole, senza spazi o accenti.
Incolla lo scheletro completo della pagina (lo stesso della lezione 1) e dagli un <title>, <h1> e contenuto propri.
Collega le pagine con i link: su index.html, aggiungi un link alla nuova pagina, e sulla nuova pagina un link indietro – qualcosa come <a href="index.html">Back home</a>.

Ora tocca a te 💪

Crea una seconda pagina e collega entrambe. Aggiungi almeno un link che punti da qualche parte su internet.

🏫 Sito web della scuola – soluzione (lunch-menu.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lunch Menu – Riverside Elementary</title>
  </head>
  <body>
    <h1>This Week's Lunch Menu</h1>
    <ul>
      <li>Monday: tomato soup with pasta</li>
      <li>Tuesday: chicken with rice</li>
      <li>Wednesday: pancakes with syrup 🎉</li>
      <li>Thursday: beef stew with dumplings</li>
      <li>Friday: fish and potatoes</li>
    </ul>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

E su index.html, aggiungi:

<p><a href="lunch-menu.html">Check out the lunch menu</a></p>

🙋 Sito web personale – soluzione (about-me.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>More About Me – Jake</title>
  </head>
  <body>
    <h1>More About Me</h1>
    <p>I'm in 4th grade, I have a dog named Rocky, and I collect soccer cards.</p>
    <p>My favorite thing to listen to is <a href="https://www.youtube.com">music on YouTube</a>.</p>
    <p><a href="index.html">← Back home</a></p>
  </body>
</html>

🌍 Diario di viaggio – soluzione (trips.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>All Trips – Where We've Been</title>
  </head>
  <body>
    <h1>All Our Trips</h1>
    <ol>
      <li>The mountains – a ridge hike</li>
      <li>Greece – island hopping</li>
      <li>Washington, D.C. – museums and monuments</li>
    </ol>
    <p>We plan our routes with <a href="https://maps.google.com">Google Maps</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

⚽ Sito web del club – soluzione (roster.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Roster – Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Team Roster</h1>
    <ul>
      <li>Jake – goalkeeper (captain)</li>
      <li>Matt – defense</li>
      <li>Owen – midfield</li>
      <li>Tom – forward</li>
    </ul>
    <p>Check the league schedule at <a href="https://www.ussoccer.com">ussoccer.com</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

✅

Controlla da solo: Clicchi un link sulla homepage → si apre la seconda pagina. Clicchi “Back” → sei di nuovo a casa. Il tuo sito web ha più di una pagina per la prima volta!

Cosa porti via da questa lezione

Un link: <a href="dove">testo del link</a>.
Una nuova pagina sul tuo sito = un nuovo file .html nella stessa cartella.
I link tra le tue pagine usano solo il nome del file (lunch-menu.html); i link verso l’esterno iniziano con https://.