Slide 1 dari 23

Cover

BAB 3 — HTML DASAR

HTML

WEB

CSS

JS

CODE

LEARN

BAB 3 — HTML DASAR

Front End Master Class | Kelas 10 Semester 1

Semester 1 • BAB 3 dari 5

Slide 2 dari 23

Daftar Isi

BAB 3 — HTML DASAR

📚 Daftar Isi

Klik topik mana pun untuk langsung melompat ke slidenya.

Slide 3 dari 23

Apa itu HTML?

BAB 3 — HTML DASAR

🏗️ Apa itu HTML?

HTML = HyperText Markup Language — bahasa untuk membuat kerangka/struktur sebuah halaman web.

🎬 Analogi Bergerak

Membuat website itu seperti membangun rumah. HTML adalah batu bata dan kerangka yang berdiri lebih dulu — sebelum dicat (CSS) dan diberi listrik (JS).

📌 Poin Penting

HTML menentukan apa yang ada di halaman (judul, paragraf, gambar).
Diciptakan oleh Tim Berners-Lee tahun 1991.
Versi terbaru: HTML5.
HTML bukan bahasa pemrograman, tapi bahasa markup (penanda).

🦴

HTML — Tulang / Kerangka

👕

CSS — Kulit / Pakaian

💪

JavaScript — Otot / Gerakan

Slide 4 dari 23

Cara Browser Membaca HTML

BAB 3 — HTML DASAR

🔄 Bagaimana Browser Membaca HTML?

Seperti memasak: bahan mentah (file) → diolah bertahap → jadi hidangan (tampilan). Arahkan kursor ke setiap kotak untuk penjelasan.

📄 File HTML

Kode mentah yang kamu tulis, dikirim ke browser.

→

🔍 Parser

Browser membaca kode baris demi baris.

→

🌳 DOM Tree

Struktur pohon dari semua elemen HTML.

→

🎨 CSSOM

Pohon aturan gaya dari CSS.

→

🧩 Render Tree

DOM + CSSOM digabung jadi satu.

→

📐 Layout

Menghitung posisi & ukuran tiap elemen.

→

🖌️ Paint

Menggambar piksel ke layar.

→

🖥️ Tampilan

Halaman web yang kamu lihat!

🍳 Analogi Resep: File = bahan mentah, Parser = membaca resep, DOM/CSSOM = menyiapkan bumbu, Render = memasak, Tampilan = hidangan siap saji.

Slide 5 dari 23

Struktur Dasar HTML

BAB 3 — HTML DASAR

🧱 Struktur Dasar HTML

Setiap halaman HTML punya kerangka yang sama. Bayangkan denah bangunan berlantai.

🏢 Analogi Bangunan

📜

<!DOCTYPE> — Sertifikat tanah

🏛️

<html> — Seluruh bangunan

⚙️

<head> — Ruang mesin (tak terlihat)

🛋️

<body> — Ruang tamu (terlihat)

</> Kode

<!-- Sertifikat dokumen HTML5 -->
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
  </body>
</html>

💡 Setiap tag pembuka <tag> harus punya tag penutup </tag>.

Slide 6 dari 23

DOCTYPE & Tag HTML

BAB 3 — HTML DASAR

🪪 DOCTYPE & Tag <html>

Baris pertama yang memperkenalkan dokumen ke browser.

🎬 Analogi KTP

Saat masuk gedung, kamu menyerahkan KTP ke satpam untuk memperkenalkan diri. <!DOCTYPE html> adalah KTP yang berkata: "Saya dokumen HTML5!"

🤝 🪪

<!DOCTYPE html> — wajib di baris paling atas.
lang="id" — bahasa halaman (Indonesia).
charset="UTF-8" — agar huruf & emoji tampil benar.

</> Kode

<!DOCTYPE html>
<html lang="id">
  <!-- isi halaman -->
</html>

⚠️ Tanpa DOCTYPE, browser masuk "quirks mode" — tampilan jadi tidak konsisten dan aneh!

Slide 7 dari 23

Tag <head>

BAB 3 — HTML DASAR

🧠 Tag <head>

Bagian yang tidak terlihat di layar, tapi mengatur segalanya.

🎬 Analogi Otak

🧠

Seperti otak manusia: tidak terlihat dari luar, tapi mengontrol nama (title), pengaturan, dan koneksi halaman.

📌 Isi <head>

<title> — judul yang muncul di tab browser.
<meta charset> — pengaturan huruf.
<meta viewport> — agar pas di layar HP.
<link> — menghubungkan file CSS.
<style> / <script> — CSS / JS internal.

🧪 Demo

Klik untuk mengganti judul tab browser:

👆 Lihat teks di tab browser berubah!

Slide 8 dari 23

Tag <body>

BAB 3 — HTML DASAR

🧍 Tag <body>

Semua yang terlihat di layar berada di dalam <body>.

🎬 Analogi Tubuh

Jika <head> adalah otak (tak terlihat), maka <body> adalah seluruh tubuh yang terlihat orang lain: wajah, tangan, pakaian — sama seperti teks, gambar, tombol di layar.

🧍‍♂️ → 👀

⚖️ Perbandingan

🧠 <head>
Tidak terlihat.
Pengaturan & info.

🧍 <body>
Terlihat di layar.
Konten nyata.

<body>
  <h1>Selamat Datang</h1>
  <p>Ini terlihat di layar.</p>
</body>

Slide 9 dari 23

Heading h1–h6

BAB 3 — HTML DASAR

🔠 Heading: <h1> sampai <h6>

Judul bertingkat — seperti hierarki buku: judul besar → bab → sub-bab.

📖 Analogi Buku

H1 — Judul Buku

H2 — Bab

H3 — Sub-bab

H4 — Bagian

H5 — Rincian

H6 — Catatan kecil

⚠️ Aturan SEO: Gunakan <h1> hanya satu kali per halaman!

🧪 Demo Interaktif

Klik tombol → heading muncul di preview:

Hasil:

Ini adalah Heading 3

Slide 10 dari 23

Paragraf <p>

BAB 3 — HTML DASAR

📰 Paragraf <p>

Kumpulan kalimat yang membentuk satu ide — seperti artikel koran.

🧪 Live Preview — Ketik & Lihat Langsung

Ketik di sini (Enter = paragraf baru):

Hasil render:

</> Kode

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>

📌 Catatan

Browser otomatis memberi jarak antar paragraf.
Banyak spasi/enter di kode dianggap satu spasi.
Gunakan <br> untuk pindah baris dalam paragraf.

Slide 11 dari 23

Link <a>

BAB 3 — HTML DASAR

🔗 Link / Anchor <a>

Penghubung antar halaman — seperti jembatan antara dua pulau.

🌉 Analogi Jembatan

Halaman
Sekarang

🚗

Halaman
Tujuan

Atribut href menentukan tujuan jembatan (alamat).

🧪 Generator Link Teks tampil: Alamat (href):

🎨 4 Keadaan (State) Link

normal visited hover active

<a href="https://..."
   target="_blank"
   rel="noopener">Klik</a>

target="_blank" = buka di tab baru. rel="noopener" = aman.

Slide 12 dari 23

Gambar <img>

BAB 3 — HTML DASAR

🖼️ Gambar <img>

Memasang gambar — seperti memasang foto ke dalam bingkai di dinding.

🖼️ Analogi Bingkai

Gambar di atas adalah SVG inline — bekerja tanpa internet!

</> Kode & Atribut

<img src="foto.jpg"
     alt="Pemandangan gunung"
     width="300"
     loading="lazy">

src — alamat file gambar (wajib).
alt — teks pengganti bila gambar gagal muncul.
width/height — ukuran gambar.
loading="lazy" — gambar dimuat saat dibutuhkan.

♿ alt sangat penting! Dibaca screen reader untuk tunanetra, dan membantu SEO (Google).

Slide 13 dari 23

Ordered List <ol>

BAB 3 — HTML DASAR

🔢 Ordered List <ol> (Daftar Berurutan)

Daftar bernomor — dipakai saat urutan penting, seperti resep masakan.

🍳 Resep Nasi Goreng

</> Kode

<ol>
  <li>Panaskan minyak</li>
  <li>Tumis bumbu</li>
  <li>Masukkan nasi</li>
</ol>

type="A" → A, B, C • type="i" → i, ii, iii
start="5" → mulai dari nomor 5
reversed → urutan terbalik

Slide 14 dari 23

Unordered List <ul>

BAB 3 — HTML DASAR

• Unordered List <ul> (Daftar Tak Berurutan)

Daftar bullet — saat urutan tidak penting, seperti daftar belanja.

🛒 Keranjang Belanja

⚖️ Kapan Pakai yang Mana?

🔢 <ol>
Urutan PENTING
Resep, tutorial, peringkat

• <ul>
Urutan BEBAS
Hobi, belanja, fitur

<ul>
  <li>Sepak bola</li>
  <li>Membaca</li>
</ul>

Slide 15 dari 23

Tabel <table>

BAB 3 — HTML DASAR

📊 Tabel <table>

Menampilkan data dalam baris & kolom — seperti jadwal pelajaran.

🧪 Demo — Klik Header untuk Urutkan

Nama ↕	Nilai ↕
Budi	85
Ani	92
Citra	78
Dewi	88

</> Struktur Tabel

<table>
  <thead>
    <tr><th>Nama</th></tr>
  </thead>
  <tbody>
    <tr><td>Budi</td></tr>
  </tbody>
</table>

tr = baris, th = sel judul, td = sel data.
colspan = gabung kolom, rowspan = gabung baris.

⚠️ Tabel hanya untuk data tabular, BUKAN untuk mengatur tata letak halaman!

Slide 16 dari 23

Form <form>

BAB 3 — HTML DASAR

📝 Form <form>

Mengumpulkan input dari pengguna — seperti formulir pendaftaran sekolah.

🧪 Demo Form Kontak (dengan validasi)

📌 Elemen Form

<input type="text"> — teks biasa
type="email/password/number" — jenis khusus
type="radio/checkbox" — pilihan
<textarea> — teks panjang
<select><option> — dropdown
<label> — keterangan kolom
<button> — tombol kirim

💡 Validasi memastikan data yang masuk benar (mis. email harus ada tanda @).

Slide 17 dari 23

Semantic HTML

BAB 3 — HTML DASAR

🏷️ Semantic HTML — Pengantar

Tag yang bermakna — memberi nama jelas pada setiap bagian halaman.

😵 div-soup

Semua pakai div — tidak jelas mana yang mana.

VS

✨ Semantic

Setiap bagian punya nama yang jelas.

❌ Div-Soup (Membingungkan)

<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

✅ Semantic (Rapi & Bermakna)

<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

🏠 Analogi: Semantic = denah rumah dengan label ruangan ("Dapur", "Kamar"). Div-soup = rumah tanpa label, semua pintu terlihat sama. Manfaat: SEO ↑, aksesibilitas ↑, kode mudah dibaca.

Slide 18 dari 23

header, nav, main

BAB 3 — HTML DASAR

🧩 <header>, <nav>, <main>

Tiga tulang punggung tata letak halaman web modern.

🖥️ Mini Preview Layout

<header> — Sampul Majalah

<nav> — Daftar Menu

<main> — Isi Utama Buku

📌 Fungsi

<header> — bagian atas: logo, judul. (Sampul majalah)
<nav> — menu navigasi/link. (Daftar isi)
<main> — konten utama, hanya satu per halaman. (Isi buku)

<header>
  <h1>Sekolahku</h1>
  <nav>
    <a href="#">Beranda</a>
  </nav>
</header>
<main>Konten utama...</main>

Slide 19 dari 23

section, article, footer

BAB 3 — HTML DASAR

📰 <section>, <article>, <aside>, <footer>

Seperti sebuah koran: halaman, berita, dan kolofon.

📌 Penjelasan

<section> — kelompok konten bertema. (Halaman koran)
<article> — konten mandiri yang berdiri sendiri. (Satu berita)
<aside> — info samping/tambahan. (Iklan/kolom samping)
<footer> — bagian bawah: kontak, hak cipta. (Kolofon)

💡 section vs div: Gunakan section jika bagian itu punya tema/judul. Gunakan div hanya untuk pembungkus styling biasa.

</> Halaman Semantic Lengkap

<main>
  <section>
    <h2>Berita</h2>
    <article>
      <h3>Lomba 17an</h3>
      <p>Isi berita...</p>
    </article>
  </section>
  <aside>Jadwal ujian</aside>
</main>
<footer>© 2026 Sekolahku</footer>

Slide 20 dari 23

Ringkasan & Mind Map

BAB 3 — HTML DASAR

🧠 Ringkasan & Mind Map

Semua yang kita pelajari hari ini. Klik node untuk melompat ke slidenya!

HTML DASAR

✅ Checklist Topik

Apa itu HTML
Proses browser
Struktur dasar
DOCTYPE

head & body
Heading & Paragraf
Link & Gambar
List (ol/ul)

Tabel
Form
Semantic HTML
header/main/footer

Slide 21 dari 23

Latihan 1 — Halaman Profil

BAB 3 — HTML DASAR

⭐ Latihan 1 — Halaman Profil Diri

Level: ★ (Mudah — cocok untuk pemula)

📋 Brief Tugas

"Buat file HTML berisi halaman profil dirimu sendiri."

✅ Syarat Wajib

<h1> berisi nama lengkapmu
<h2> berisi "Tentang Saya"
Minimal 2 paragraf <p> bio singkat
<ul> berisi minimal 5 hobi/minat
Minimal 1 link <a> ke media sosial
Minimal 1 gambar <img>

🏆 Poin Penilaian (100)

20Heading

20Paragraf

20List

20Link

20Gambar

💡 Lihat Tips Pengerjaan ▾

Mulai dari kerangka: DOCTYPE → html → head → body.
Tulis <title> dengan namamu.
Untuk gambar tanpa internet, pakai foto di komputermu.
Cek dengan membuka file di browser.

🎯 Output diharapkan: Sebuah halaman sederhana berisi nama, foto, cerita singkat tentangmu, daftar hobi, dan tautan Instagram/TikTok.

Slide 22 dari 23

Latihan 2 — Tabel Jadwal

BAB 3 — HTML DASAR

⭐⭐ Latihan 2 — Tabel Jadwal Pelajaran

Level: ★★ (Sedang)

📋 Brief Tugas

"Buat tabel jadwal pelajaran kelas 10 untuk 1 minggu."

✅ Syarat Wajib

Gunakan table, thead, tbody, tr, th, td
Minimal 7 kolom (Jam + Senin–Sabtu)
Minimal 8 baris data (jam ke-1 s/d ke-8)
Header kolom & baris memakai <th>
Minimal 1 sel pakai colspan atau rowspan (mis. istirahat)
Tambahkan border agar tabel jelas

🧩 Starter Code (lengkapi sel kosong)

<table border="1">
  <thead>
    <tr>
      <th>Jam</th>
      <th>Senin</th>
      <!-- ...Selasa s/d Sabtu -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>07.00</th>
      <td>Matematika</td>
      <!-- lengkapi... -->
    </tr>
    <tr>
      <td colspan="7">ISTIRAHAT</td>
    </tr>
  </tbody>
</table>

Slide 23 dari 23

Latihan 3 — Website Semantic

BAB 3 — HTML DASAR

⭐⭐⭐ Latihan 3 — Website Sekolah Semantic

Level: ★★★ (Tantangan — nilai sempurna jika selesai)

📋 Brief Tugas

"Buat halaman website sekolah mini menggunakan semua elemen semantic."

✅ Syarat Wajib

<header> berisi nama sekolah & logo (boleh teks)
<nav> berisi minimal 4 link menu
<main> sebagai pembungkus utama
Di dalam main: minimal 2 <section> (Berita, Pengumuman)
Tiap section minimal 1 <article>
<aside> berisi info singkat (jadwal/kalender)
<footer> berisi info kontak
🎁 BONUS: Tambahkan <form> kontak di footer

🏗️ Scaffolding (kerangka panduan)

<body>
  <!-- MULAI: HEADER -->
  <header> ... </header>
  <!-- SELESAI: HEADER -->

  <main>
    <section>
      <article> ... </article>
    </section>
    <aside> ... </aside>
  </main>

  <footer>
    <!-- BONUS: form kontak -->
  </footer>
</body>

🏆 Lihat Rubrik Penilaian ▾

30Struktur semantic benar

25Section & article

20Nav & link

15Footer & aside

10Bonus form