リンクと2ページ目 · Martinとコード

1ページだけのサイトから卒業。2ページ目を作って、リンクでつなごう。

見てみよう：リンク

リンク——クリックすると別の場所へ——は <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 = リンクの 行き先。
<a> と </a> の間のテキストが表示されてクリックできる部分。

2ページ目

今は index.html だけ。2ページ目を追加——同じフォルダに新しいファイルを作るだけ：

VS Code で新しいファイルを作成。プロジェクトに合わせて lunch-menu.html、about-me.html、trips.html、roster.html など。小文字、スペースなし、アクセントなし。
ページの骨組み（レッスン1と同じ）を貼り付け、独自の <title>、<h1>、コンテンツを書く。
ページ同士をリンクでつなぐ：index.html に新ページへのリンク、新ページに戻るリンク——<a href="index.html">Back home</a> みたいに。

やってみよう 💪

2ページ目を作り、両方をリンクでつなごう。インターネット上のどこかへのリンクも1つ以上。

🏫 学校サイト——答え（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>

index.html に追加：

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

🙋 個人サイト——答え（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>

🌍 旅行日記——答え（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>

⚽ クラブサイト——答え（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>

✅

確認： ホームページのリンクをクリック → 2ページ目が開く。「戻る」をクリック → ホームに戻る。初めて複数ページのサイトになった！

このレッスンのまとめ

リンク：<a href="行き先">リンクテキスト</a>。
新しいページ = 同じフォルダに新しい .html ファイル。
自分のページ同士はファイル名だけ（lunch-menu.html）；外へのリンクは https:// から始める。