Links og en anden side · Kode med Martin

Din nettside holder op med kun at være én side. Du bygger en anden og kobler dem med links.

Jeg viser deg: et link

Et link – den klikbare ting, der tar deg et andet sted hen – laves med <a>-tagget:

<!-- 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 forteller hvor linket går hen.
Teksten mellom <a> og </a> er det, der er synligt og klikbart.

En anden side

Din nettside har foreløpig kun index.html. La oss legg til en anden side – det er bare endnu en fil i samme mappe:

I VS Code, lag en ny fil. Navngiv den etter prosjektet ditt, som lunch-menu.html, about-me.html, trips.html eller roster.html. Igen, små bokstaver, ingen mellomrum eller accenter.
Indsett det fulde sideskjelett (det samme fra leksjon 1) og giv det sit eget <title>, <h1> og noe indhold.
Forbind siderne med links: på index.html, legg til et link til den nye side, og på den nye side, legg til et link tilbake – noe som <a href="index.html">Back home</a>.

Nå er det din tur 💪

Lag en anden side og link begge sider sammen. Lag mindst ét link, der peger et sted ud på internettet også.

🏫 Skolenettside – løsning (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>

Og på index.html, legg til:

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

🙋 Personlig nettside – løsning (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>

🌍 Reisejournal – løsning (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>

⚽ Klubnettside – løsning (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>

✅

Sjekk deg selv: Du klikker på et link på nettsiden → den anden side åpner. Du klikker på “Tilbage” → du er hjemme igen. Din nettside har nu mere end én side for første gang!

Dette tar du med deg fra leksjonen

Et link: <a href="hvor">linktekst</a>.
En ny side på din nettside = en ny .html-fil i samme mappe.
Links mellom dine egne sider bruker bare filnavnet (lunch-menu.html); links udad starter med https://.