Bagian pertama membangun fondasi yang menopang seluruh proyek: kerangka dokumen yang valid dan semantik. Kerangka yang benar membuat browser merender halaman dalam mode standar, membantu mesin pencari memahami isi halaman, dan mempermudah tahap berikutnya karena kita tinggal mengisi konten. Kita mulai dari head yang lengkap, lalu menyusun tiga wilayah utama body: header, main, dan footer. Seluruh materinya berasal dari section Pengenalan HTML dan Semantic HTML; kini konsep tersebut dipakai pada kasus nyata.

Peran Setiap Bagian Kerangka #

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

UnsurPeran dalam halaman profil
<!doctype html> dan <html lang="id">Menyatakan dokumen HTML modern yang berbahasa Indonesia
meta charset dan meta viewportMenetapkan pengodean karakter serta skala tampilan pada ponsel
title dan meta descriptionJudul tab browser dan ringkasan halaman untuk hasil pencarian
header, main, footerTiga wilayah body: identitas, konten utama, dan penutup

Meta description tidak ikut dirender di dalam halaman, tetapi mesin pencari kerap menampilkannya sebagai cuplikan di bawah judul. Title dan description yang jelas menjadi kartu nama pertama halaman di mata pengunjung yang menemukannya lewat pencarian.

Membangun Kerangka Halaman #

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

html profil.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="Profil singkat Budi Santoso, pengembang web pemula yang gemar membangun halaman web.">
  <title>Profil Budi Santoso</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram BS" width="56" height="56">
    <div>
      <h1>Budi Santoso</h1>
      <p>Pengembang web pemula di Bandung</p>
    </div>
  </header>
  <main>
    <!-- Konten profil ditambahkan pada Bagian 2 -->
  </main>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Browser menampilkan:
  - Logo bundar di kiri atas, diikuti nama "Budi Santoso" dan tagline di bawahnya
  - Wilayah kosong di tengah halaman karena main belum berisi konten
  - Baris hak cipta di dasar halaman
  - Teks "Profil Budi Santoso" 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 10-16: header memuat logo sebagai img beratribut alt, width, dan height (browser menyediakan ruangnya sejak awal), lalu div pembungkus nama dan tagline.
  4. Baris 17-19: main hanya berisi komentar HTML sebagai penanda tempat konten Bagian 2.
  5. Baris 20-22: footer menampung baris hak cipta yang menutup halaman.

Pemeriksaan Hasil Tahap Ini #

  1. Buka profil.html di browser, lalu pastikan 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, tetapi main masih kosong. Bagian berikutnya mengisinya dengan konten profil yang sebenarnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

profil.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="Profil singkat Budi Santoso, pengembang web pemula yang gemar membangun halaman web.">
  <title>Profil Budi Santoso</title>
</head>
<body>
  <header>
    <img src="../assets/logo.svg" alt="Logo monogram BS" width="56" height="56">
    <div>
      <h1>Budi Santoso</h1>
      <p>Pengembang web pemula di Bandung</p>
    </div>
  </header>
  <main>
    <!-- Konten profil ditambahkan pada Bagian 2 -->
  </main>
  <footer>
    <p>&copy; 2025 Budi Santoso</p>
  </footer>
</body>
</html>