Bagian pertama membangun kerangka halaman restoran: dokumen valid dengan header hero yang memperkenalkan warung sejak pandangan pertama. Hero adalah kepala halaman yang tampil menonjol, berisi logo, nama, dan tagline. Strukturnya sama dengan kerangka standar dari section Semantic HTML, tetapi diberi class hero agar mudah ditata pada Bagian 3. Main sengaja dibiarkan kosong; isinya menyusul pada Bagian 2.

Peta Struktur Halaman Restoran #

Sebelum menulis kode, kita petakan dulu unsur yang menyusun halaman restoran beserta perannya:

UnsurPeran dalam halaman restoran
<!doctype html> dan <html lang="id">Menyatakan dokumen HTML modern yang berbahasa Indonesia
meta charset, meta viewport, description, titleMetadata: pengodean, skala ponsel, ringkasan halaman, dan judul tab
header.heroWilayah hero: logo bundar, nama warung, dan tagline
mainWadah menu, kontak, dan form pada tahap berikutnya
footerPenutup halaman dengan baris hak cipta

Class hero tidak menambah makna baru bagi browser; class murni penanda untuk CSS. Nama hero dipakai luas di industri untuk kepala halaman besar yang berisi perkenalan singkat. Dengan menamainya sejak awal, kita tinggal menulis aturan header.hero pada Bagian 3 tanpa menyentuh markup lagi.

Membangun Kerangka Halaman #

File berikut adalah hasil utuh tahap ini. Simpan sebagai restoran.html, atau unduh melalui tautan pada header code block:

html restoran.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Warung Melati menyajikan masakan rumahan Sunda di Bandung setiap hari.">
  <title>Warung Melati - Masakan Rumahan Sunda</title>
</head>
<body>
  <header class="hero">
    <img src="../assets/logo-resto.svg" alt="Logo Warung Melati" width="72" height="72">
    <h1>Warung Melati</h1>
    <p>Masakan rumahan Sunda, disajikan hangat sejak 2015</p>
  </header>
  <main>
    <!-- Menu dan kontak ditambahkan pada Bagian 2 -->
  </main>
  <footer>
    <p>&copy; 2025 Warung Melati</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Browser menampilkan:
  - Logo bundar di tengah atas, diikuti nama "Warung Melati" dan tagline
  - Wilayah kosong di tengah halaman karena main belum berisi konten
  - Baris hak cipta di dasar halaman
  - Teks "Warung Melati - Masakan Rumahan Sunda" pada tab browser

Mari kita telaah peran setiap bagian kode di atas:

  1. Baris 1-2: deklarasi doctype dan <html lang="id"> menempatkan browser pada mode standar serta memberi tahu bahasa kontennya.
  2. Baris 4-7: empat metadata wajib proyek — charset, viewport, description, dan title — menempati head sebelum elemen apa pun.
  3. Baris 12-16: header.hero memuat logo sebagai img beratribut alt, width, dan height, lalu h1 nama warung dan p tagline.
  4. Baris 17-19: main hanya berisi komentar HTML sebagai penanda tempat konten Bagian 2.
  5. Baris 20-22: footer menutup halaman dengan baris hak cipta.

Pemeriksaan Hasil Tahap Ini #

  1. Letakkan restoran.html dan folder assets sesuai pohon pada overview, lalu buka file ini di browser: logo, nama, tagline, dan footer tampil dengan susunan yang benar.
  2. Periksa judul pada tab browser; teksnya harus sama dengan isi elemen title.
  3. Buka tests/cek-struktur.html, lalu centang butir-butir kerangka yang telah dipenuhi oleh file ini.

Kerangka telah berdiri dengan hero yang menggugah, tetapi main masih kosong. Bagian berikutnya mengisinya dengan menu dan kontak.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

restoran.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Warung Melati menyajikan masakan rumahan Sunda di Bandung setiap hari.">
  <title>Warung Melati - Masakan Rumahan Sunda</title>
</head>
<body>
  <header class="hero">
    <img src="../assets/logo-resto.svg" alt="Logo Warung Melati" width="72" height="72">
    <h1>Warung Melati</h1>
    <p>Masakan rumahan Sunda, disajikan hangat sejak 2015</p>
  </header>
  <main>
    <!-- Menu dan kontak ditambahkan pada Bagian 2 -->
  </main>
  <footer>
    <p>&copy; 2025 Warung Melati</p>
  </footer>
</body>
</html>