Liên kết và trang thứ hai · Lập trình với Martin

Website của bạn không còn chỉ một trang. Bạn sẽ xây trang thứ hai và nối chúng bằng liên kết.

Xem này: một liên kết

Liên kết – thứ có thể bấm để đi nơi khác – được tạo bằng thẻ <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 nói liên kết dẫn đến đâu.
Văn bản giữa <a> và </a> là phần hiển thị và có thể bấm.

Trang thứ hai

Website của bạn mới chỉ có index.html. Hãy thêm trang thứ hai – chỉ là file khác trong cùng thư mục:

Trong VS Code, tạo file mới. Đặt tên theo dự án, như lunch-menu.html, about-me.html, trips.html, hoặc roster.html. Lại là chữ thường, không khoảng trắng hay dấu.
Dán bộ khung trang đầy đủ (giống bài 1) và cho <title>, <h1>, cùng nội dung riêng.
Nối các trang bằng liên kết: trên index.html, thêm liên kết đến trang mới, và trên trang mới thêm liên kết quay lại – kiểu <a href="index.html">Back home</a>.

Lượt của bạn 💪

Tạo trang thứ hai và liên kết hai trang với nhau. Ít nhất một liên kết dẫn ra internet.

🏫 Website trường – giải pháp (lunch-menu.html)

<!doctype html>
<html lang="vi">
  <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>

Và trên index.html, thêm:

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

🙋 Website cá nhân – giải pháp (about-me.html)

<!doctype html>
<html lang="vi">
  <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>

🌍 Nhật ký du lịch – giải pháp (trips.html)

<!doctype html>
<html lang="vi">
  <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>

⚽ Website câu lạc bộ – giải pháp (roster.html)

<!doctype html>
<html lang="vi">
  <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>

✅

Tự kiểm tra: Bạn bấm liên kết trên trang chủ → trang thứ hai mở. Bạn bấm “Back” → về nhà. Website của bạn giờ có hơn một trang lần đầu tiên!

Điều cần nhớ từ bài này

Liên kết: <a href="where">link text</a>.
Trang mới trên website = file .html mới trong cùng thư mục.
Liên kết giữa trang của bạn chỉ dùng tên file (lunch-menu.html); liên kết ra ngoài bắt đầu bằng https://.