Bahasa Indonesia

Eropa

Asia

← Level 1 – Builder

Pelajaran 5 dari 12 ⏱ 25 menit

Header, menu, dan footer

Berikan struktur nyata pada halaman kamu seperti yang dimiliki situs web sebenarnya: header dengan menu di bagian atas, dan footer di bawah.

Tunjukkan pada saya: setiap situs web memiliki bagian yang sama

Lihat situs web besar mana pun: di atas ada header dengan nama dan menu, di tengah ada konten, dan di bawah ada footer dengan hal-hal kecil. HTML memiliki tag khusus untuk bagian ini:

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>
💡

Secara visual, tidak banyak yang berubah untuk saat ini – tag ini sendiri tidak terlihat. Jadi mengapa repot-repot menulisnya? Karena mereka memberikan keteraturan pada kode kamu: browser, mesin telusur, dan pembaca layar semuanya menggunakannya untuk mengetahui apa itu menu dan apa isinya. Dan yang terbaik dari semuanya – dalam pelajaran mendatang kita akan menatanya, sehingga menu akan benar-benar terlihat seperti menu sebenarnya.

Giliran kamu 💪

  1. Pada index.html, gabungkan konten yang ada dalam bagian berikut: <header> di bagian atas dengan <h1> dan <nav> (link ke kedua halaman kamu), <main> di tengah dengan konten lainnya, dan <footer> di bagian bawah.

  2. Lakukan hal yang sama di halaman kedua kamu. Header dan footer harus sama persis di kedua halaman – cukup salin saja.

  3. Simpan, segarkan, klik: apakah menu berfungsi dari kedua halaman?

🏫 Situs web sekolah – solusi (index.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>
 🙋 Situs web pribadi – solusi (index.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>
 🌍 Jurnal perjalanan – solusi (index.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>
 ⚽ Situs web klub – solusi (index.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>
✅

Periksa diri kamu: Kedua halaman memiliki nama dan menu yang sama di bagian atas, footer di bagian bawah, dan menu mengalihkan kamu antar halaman. Struktur sudah selesai – sekarang kita bisa melihat tampilannya!

Apa yang bisa diambil dari pelajaran ini

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten