PANDUAN LENGKAP
Belajar HTML
Dalam 2 Minggu
Tutorial Lengkap dari Dasar Sampai Mahir
14 Hari • 14 Materi • Proyek Nyata
MINGGU 1: Fondasi HTML
Hari 1: Pengenalan & Struktur Dasar HTML
Apa itu HTML?
HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa yang
digunakan untuk membuat halaman web. HTML bukan bahasa pemrograman, tapi
bahasa markup yang memberi tahu browser bagaimana menampilkan konten.
Analogi sederhana: HTML seperti kerangka rumah. Dia menentukan struktur - mana
pintu, mana jendela, mana ruangan. Nanti CSS akan mewarnai dan mendekorasi,
JavaScript akan membuat pintu bisa dibuka-tutup.
Struktur Dasar Dokumen HTML
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Penjelasan Elemen:
• <!DOCTYPE html> - Memberitahu browser bahwa ini dokumen HTML5
• <html> - Tag pembuka untuk seluruh dokumen HTML
• <head> - Berisi informasi tentang halaman (metadata)
• <title> - Menentukan judul yang muncul di tab browser
• <body> - Berisi semua konten yang terlihat di halaman web
Konsep Tag: Pembuka dan Penutup
Sebagian besar tag HTML memiliki tag pembuka dan tag penutup:
<namatag>konten di sini</namatag>
Tag pembuka: <namatag> | Tag penutup: </namatag> (ada garis miring /)
Komentar dalam HTML
Komentar adalah catatan untuk diri sendiri atau programmer lain. Browser tidak
menampilkan komentar.
<!-- Ini adalah komentar -->
<!--
Komentar bisa
lebih dari satu baris
-->
Latihan Hari 1
<!DOCTYPE html>
<html>
<head>
<title>Halaman Pertama Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
<!-- Ini adalah komentar -->
</body>
</html>
Ringkasan Hari 1
• HTML = bahasa markup untuk membuat halaman web
• Struktur dasar: <!DOCTYPE html>, <html>, <head>, <body>
• <title> menentukan judul di tab browser
• Tag punya pembuka dan penutup
• Komentar pakai <!-- komentar -->
Hari 2: Heading dan Paragraf
1. Heading (Judul)
Heading adalah judul atau sub-judul di halaman web. HTML punya 6 level heading, dari
yang terbesar (<h1>) sampai yang terkecil (<h6>).
<h1>Heading 1 - Paling Besar</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 - Paling Kecil</h6>
Aturan Penting:
• Gunakan <h1> hanya SATU kali per halaman (untuk judul utama)
• Gunakan heading secara berurutan (jangan loncat dari h1 ke h4)
• Penting untuk SEO, aksesibilitas, dan maintainability
2. Paragraf
Tag <p> digunakan untuk membuat paragraf. Browser otomatis memberi jarak sebelum
dan sesudah paragraf.
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
3. Line Break (Baris Baru)
Tag <br> digunakan untuk membuat baris baru dalam satu paragraf. <br> adalah self-
closing tag (tidak punya tag penutup).
<p>Baris pertama<br>Baris kedua<br>Baris ketiga</p>
4. Horizontal Rule (Garis Horizontal)
Tag <hr> membuat garis horizontal untuk memisahkan konten. Seperti <br>, tag ini juga
self-closing.
<p>Konten bagian pertama</p>
<hr>
<p>Konten bagian kedua</p>
Ringkasan Hari 2
• 6 level heading: <h1> (terbesar) sampai <h6> (terkecil)
• <h1> hanya dipakai 1x per halaman
• Heading harus berurutan (h1 → h2 → h3)
• <p> untuk paragraf
• <br> untuk baris baru dalam paragraf (self-closing)
• <hr> untuk garis horizontal pemisah (self-closing)
Hari 3: Text Formatting (Format Teks)
Hari ini kita belajar cara memformat teks — membuat teks tebal, miring, bergaris
bawah, dan lainnya.
Tag Formatting Teks
Tag Fungsi Kapan Dipakai
<strong> Teks tebal + penting Peringatan, info kritis
<b> Teks tebal visual Highlight tanpa makna
khusus
<em> Teks miring + penekanan Kata yang perlu ditekankan
<i> Teks miring visual Istilah asing, judul buku
<u> Garis bawah Perhatian khusus
<mark> Highlight (stabilo) Info penting yang perlu
disorot
<small> Teks kecil Disclaimer, catatan kaki
<del> Teks dicoret Harga coret, teks dihapus
<ins> Teks ditambahkan Teks baru, update
<sub> Subscript H₂O, CO₂
<sup> Superscript x², 10³
Contoh Penggunaan
<p>Perhatian: <strong>jangan klik tombol ini!</strong></p>
<p>Kamu <em>harus</em> mengerjakan PR ini.</p>
<p>Buku <i>Harry Potter</i> sangat terkenal.</p>
<p>Jawaban benar: <mark>pilihan B</mark>.</p>
<p>Harga: <del>Rp 200.000</del> <ins>Rp 150.000</ins></p>
<p>Rumus air adalah H<sub>2</sub>O</p>
<p>2<sup>3</sup> = 8</p>
Ringkasan Hari 3
• <strong> untuk teks penting (lebih baik dari <b>)
• <em> untuk penekanan (lebih baik dari <i>)
• <mark> untuk highlight kuning seperti stabilo
• <del> dan <ins> untuk menampilkan perubahan
• <sub> dan <sup> untuk subscript dan superscript
Hari 4: Links (Tautan)
Link adalah yang membuat web menjadi 'web' — menghubungkan satu halaman ke
halaman lainnya.
Tag Anchor: <a>
Tag untuk membuat link adalah <a> (anchor). Struktur dasarnya:
<a href="url">Teks yang bisa diklik</a>
1. Link ke Website Lain (External Link)
<a href="[Link] Google</a>
<a href="[Link] target="_blank">
YouTube (tab baru)
</a>
2. Link ke Halaman Sendiri (Internal Link)
<a href="[Link]">Tentang Saya</a>
<a href="[Link]">Kontak</a>
3. Link Email
<a href="[Link] Email</a>
4. Link Telepon
<a href="[Link] 0812-3456-7890</a>
5. Jump Link (dalam Halaman yang Sama)
Berguna untuk halaman panjang — klik link langsung loncat ke bagian tertentu.
<!-- Link -->
<a href="#kontak">Pergi ke bagian Kontak</a>
<!-- Target -->
<h2 id="kontak">Hubungi Saya</h2>
Atribut target
Atribut Fungsi
target="_blank" Buka di tab baru
(tanpa target) Buka di tab yang sama (default)
Ringkasan Hari 4
• <a href="url">teks</a> — struktur dasar link
• href="[Link] — link ke website lain
• href="[Link]" — link ke halaman sendiri
• target="_blank" — buka di tab baru
• href="[Link] — link email
• href="#id" — jump link dalam halaman
Hari 5: Images (Gambar)
Tag Image: <img>
Tag untuk menampilkan gambar adalah <img>. Ini adalah self-closing tag (tidak punya
tag penutup).
<img src="url-gambar" alt="deskripsi gambar">
Atribut Wajib:
• src = Source (sumber gambar)
• alt = Alternative text (teks jika gambar gagal tampil)
Sumber Gambar (src)
<!-- Dari Internet -->
<img src="[Link] alt="Gambar">
<!-- Dari Komputer Sendiri -->
<img src="[Link]" alt="Foto saya">
<!-- Dari Folder -->
<img src="images/[Link]" alt="Foto">
Atribut width dan height
<!-- Hanya atur lebar (tinggi menyesuaikan) -->
<img src="[Link]" alt="Foto" width="300">
<!-- Atur keduanya -->
<img src="[Link]" alt="Foto" width="300" height="200">
Best practice: Atur hanya width saja agar gambar tidak terdistorsi.
Gambar dengan Caption
Standar industri menggunakan <figure> dan <figcaption>:
<figure>
<img src="[Link]" alt="Pemandangan" width="300">
<figcaption>Pemandangan Gunung Rinjani</figcaption>
</figure>
Gambar sebagai Link
<a href="[Link] target="_blank">
<img src="[Link]" alt="Klik untuk ke Google">
</a>
Format Gambar yang Umum
Format Kegunaan
.jpg / .jpeg Foto, gambar dengan banyak warna
.png Gambar dengan background transparan
.gif Gambar animasi sederhana
.webp Format modern, ukuran kecil, kualitas bagus
.svg Logo, ikon (bisa diperbesar tanpa pecah)
Ringkasan Hari 5
• <img src="..." alt="..."> — struktur dasar gambar
• src — sumber gambar (URL atau file lokal)
• alt — teks alternatif (wajib, deskriptif)
• width — atur lebar (tinggi otomatis proporsional)
• <figure> + <figcaption> — gambar dengan keterangan
Hari 6: Lists (Daftar)
Lists sangat sering dipakai — mulai dari menu navigasi, daftar belanja, langkah-
langkah, sampai fitur produk.
3 Jenis List di HTML
Jenis Tag Tampilan
Unordered List <ul> Bullet point (•)
Ordered List <ol> Angka (1, 2, 3...)
Description List <dl> Istilah + deskripsi
1. Unordered List (Daftar Bullet)
Dipakai ketika urutan tidak penting.
<ul>
<li>Beras</li>
<li>Telur</li>
<li>Sayuran</li>
</ul>
2. Ordered List (Daftar Angka)
Dipakai ketika urutan penting.
<ol>
<li>Panaskan minyak</li>
<li>Masukkan bawang putih</li>
<li>Tambahkan sayuran</li>
</ol>
3. Nested List (List di Dalam List)
<ul>
<li>Buah-buahan
<ul>
<li>Apel</li>
<li>Mangga</li>
</ul>
</li>
<li>Sayuran</li>
</ul>
4. List dengan Link (Navigasi)
Ini adalah standar industri untuk membuat navigasi website:
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Tentang</a></li>
<li><a href="[Link]">Kontak</a></li>
</ul>
</nav>
Ringkasan Hari 6
• <ul> + <li> — daftar bullet, urutan tidak penting
• <ol> + <li> — daftar angka, urutan penting
• Nested list — list di dalam list (harus di dalam <li>)
• <nav> + <ul> + <a> — navigasi website (standar industri)
Hari 7: Review & Latihan Minggu 1
Selamat! Kamu sudah menyelesaikan Minggu 1. Hari ini fokus pada review dan
memperkuat semua yang sudah dipelajari.
Recap Minggu 1
Hari Materi Tag Utama
1 Struktur Dasar <!DOCTYPE>, <html>,
<head>, <body>
2 Heading & Paragraf <h1>-<h6>, <p>, <br>, <hr>
3 Text Formatting <strong>, <em>, <mark>,
<del>
4 Links <a href>, target, [Link] tel:
5 Images <img>, src, alt, <figure>
6 Lists <ul>, <ol>, <li>, nested list
Proyek Minggu 1: Website Profil Pribadi
Buat website 3 halaman yang menggabungkan semua materi:
1. [Link] — Halaman utama dengan foto dan intro
2. [Link] — Biodata, pendidikan, keahlian
3. [Link] — Daftar hobi dengan gambar dan deskripsi
Checklist:
• Struktur HTML lengkap di setiap file
• Navigasi yang berfungsi antar halaman
• Minimal 1 gambar dengan <figure> dan <figcaption>
• Gunakan heading berurutan
• Pakai list untuk daftar item
• Link email dan jump link minimal 1x
MINGGU 2: Elemen Penting & Standar Industri
Hari 8: Tables (Tabel)
Struktur Dasar Tabel
Tabel HTML terdiri dari beberapa tag yang bekerja bersama:
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
Tag yang dipakai:
• <table> — wadah tabel (container)
• <tr> — Table Row (baris)
• <td> — Table Data (kolom/sel)
• <th> — Table Header (judul kolom, tebal dan tengah)
Table Header - <th>
<table border="1">
<tr>
<th>Nama</th>
<th>Kota</th>
<th>Umur</th>
</tr>
<tr>
<td>Budi</td>
<td>Jakarta</td>
<td>20 tahun</td>
</tr>
</table>
Struktur Semantik Tabel
Standar industri menggunakan 3 bagian:
<table border="1">
<thead>
<!-- Bagian header -->
<tr><th>Nama</th><th>Nilai</th></tr>
</thead>
<tbody>
<!-- Bagian data utama -->
<tr><td>Budi</td><td>85</td></tr>
</tbody>
<tfoot>
<!-- Bagian footer (total, catatan) -->
<tr><td>Total</td><td>85</td></tr>
</tfoot>
</table>
Colspan dan Rowspan
colspan menggabungkan kolom horizontal:
<tr>
<th colspan="3">Data Siswa</th>
</tr>
rowspan menggabungkan baris vertikal:
<tr>
<td rowspan="2">Budi</td>
<td>Matematika</td>
<td>85</td>
</tr>
<tr>
<td>Bahasa Inggris</td>
<td>90</td>
</tr>
Ringkasan Hari 8
• <table> — wadah tabel
• <tr> — baris tabel
• <td> — kolom/sel data
• <th> — header (tebal, tengah)
• <thead>, <tbody>, <tfoot> — struktur semantik
• colspan — gabung kolom horizontal
• rowspan — gabung baris vertikal
Hari 9: Forms - Input Dasar
Form digunakan untuk login, pendaftaran, kontak, komentar, dan hampir semua
interaksi user dengan website.
Tag Form: <form>
<form>
<!-- Input-input ada di sini -->
</form>
Jenis-Jenis Input
Type Kegunaan Contoh
text Input teks biasa Nama, alamat
email Input email (validasi Email address
otomatis)
password Input password Password login
(disembunyikan)
number Input angka (dengan Umur, jumlah
min/max)
date Input tanggal (calendar Tanggal lahir
picker)
tel Input telepon Nomor HP
url Input URL website Website URL
Contoh Form Login
<form>
<label>Email:</label><br>
<input type="email" name="email"
placeholder="email@[Link]" required>
<br><br>
<label>Password:</label><br>
<input type="password" name="password" required>
<br><br>
<button type="submit">Login</button>
</form>
Atribut Penting
Atribut Fungsi
name Nama field (wajib untuk pengiriman data)
placeholder Teks petunjuk di dalam input
required Field wajib diisi
readonly Tidak bisa diedit, nilai tetap dikirim
disabled Tidak aktif, nilai tidak dikirim
value Nilai default/awal
Label - <label>
Label adalah teks penjelasan untuk input. Best practice: selalu gunakan label!
<!-- Cara 1: dengan for dan id -->
<label for="namaUser">Nama:</label>
<input type="text" id="namaUser" name="nama">
<!-- Cara 2: label membungkus -->
<label>
Nama:
<input type="text" name="nama">
</label>
Ringkasan Hari 9
• <form> — wadah untuk semua input
• <label> — teks penjelasan (wajib pakai!)
• <input type="text"> — input teks biasa
• <input type="email"> — email dengan validasi
• <input type="password"> — password (disembunyikan)
• placeholder — teks petunjuk
• required — field wajib diisi
Hari 10: Forms - Input Lanjutan
1. Radio Button - Pilih Satu
Digunakan ketika user harus memilih SATU opsi dari beberapa pilihan.
<p>Jenis Kelamin:</p>
<input type="radio" id="laki" name="gender" value="laki-laki">
<label for="laki">Laki-laki</label><br>
<input type="radio" id="perempuan" name="gender" value="perempuan">
<label for="perempuan">Perempuan</label>
Aturan penting: Atribut name harus SAMA untuk satu grup pilihan.
2. Checkbox - Pilih Banyak
Digunakan ketika user bisa memilih LEBIH DARI SATU opsi.
<p>Hobi: (pilih yang sesuai)</p>
<input type="checkbox" id="baca" name="hobi" value="membaca">
<label for="baca">Membaca</label><br>
<input type="checkbox" id="olahraga" name="hobi" value="olahraga">
<label for="olahraga">Olahraga</label><br>
<input type="checkbox" id="musik" name="hobi" value="musik">
<label for="musik">Musik</label>
Perbedaan Radio vs Checkbox
Radio Button Checkbox
Pilih SATU saja Pilih BANYAK (0, 1, atau lebih)
Bentuk bulat ⚪ Bentuk kotak ☑
name harus sama name bisa sama/beda
3. Textarea - Input Teks Panjang
Untuk input teks multi-baris (komentar, pesan, deskripsi):
<label for="pesan">Pesan Anda:</label><br>
<textarea
id="pesan"
name="pesan"
rows="5"
cols="40"
placeholder="Tulis pesan..."></textarea>
4. Select (Dropdown)
Untuk pilihan dari menu turun:
<label for="kota">Kota Asal:</label><br>
<select id="kota" name="kota">
<option value="">-- Pilih Kota --</option>
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="surabaya">Surabaya</option>
</select>
5. Jenis-Jenis Button
<!-- Submit - Kirim Form -->
<button type="submit">Kirim</button>
<!-- Reset - Reset Form ke Awal -->
<button type="reset">Reset</button>
<!-- Button Biasa -->
<button type="button">Klik Saya</button>
6. Fieldset & Legend
Mengelompokkan input terkait dengan garis border:
<fieldset>
<legend>Data Pribadi</legend>
<label>Nama:</label><br>
<input type="text" name="nama"><br><br>
<label>Email:</label><br>
<input type="email" name="email">
</fieldset>
Ringkasan Hari 10
• <input type="radio"> — pilih SATU opsi
• <input type="checkbox"> — pilih BANYAK opsi
• <textarea> — input teks multi-baris
• <select> + <option> — dropdown menu
• <fieldset> + <legend> — kelompokkan input
Hari 11: Semantic HTML
Semantic HTML adalah penggunaan tag yang bermakna — tag yang menjelaskan isi
kontennya, bukan hanya tampilannya. Ini penting untuk SEO, aksesibilitas, dan kode
yang lebih mudah dibaca.
Tag Semantic HTML
Tag Fungsi Kapan Dipakai
<header> Bagian kepala Logo, judul, navigasi atas
<nav> Navigasi Menu navigasi utama
<main> Konten utama Isi utama halaman (1x per
halaman)
<article> Artikel/konten mandiri Post blog, berita, artikel
<section> Bagian/seksi Kelompok konten terkait
<aside> Konten samping Sidebar, info terkait
<footer> Bagian kaki Copyright, link, kontak
Contoh Struktur Semantic
<header>
<h1>Website Saya</h1>
</header>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Tentang</a></li>
</ul>
</nav>
<main>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
</article>
<aside>
<h3>Artikel Terkait</h3>
<p>Link ke artikel lain...</p>
</aside>
</main>
<footer>
<p>© 2024 Website Saya</p>
</footer>
Perbedaan <section> vs <article> vs <div>
Tag Kapan Dipakai
<article> Konten mandiri yang bisa dipindah
<section> Bagian tematik dengan heading
<div> Container tanpa makna (untuk styling)
Kenapa Semantic HTML Penting?
• Google/search engine lebih mudah memahami struktur
• Screen reader untuk tunanetra lebih mudah navigasi
• Developer lain lebih mudah baca kode
• Standar industri modern
Ringkasan Hari 11
• <header> — kepala halaman
• <nav> — menu navigasi
• <main> — konten utama (1x per halaman)
• <article> — konten mandiri
• <section> — bagian tematik
• <aside> — konten samping
• <footer> — kaki halaman
Hari 12: Div & Span
Dua tag container yang paling sering dipakai: <div> dan <span>. Keduanya tidak punya
makna semantik, tapi sangat penting untuk styling dan grouping konten.
<div> - Container Block-Level
<div> adalah container block-level = selalu mulai di baris baru dan mengambil lebar
penuh.
<div>
<h2>Judul</h2>
<p>Paragraf di dalam div.</p>
</div>
<div>
<p>Ini div kedua, otomatis di baris baru.</p>
</div>
<span> - Container Inline
<span> adalah container inline = tetap di baris yang sama, tidak membuat baris baru.
<p>Ini adalah <span>teks di tengah</span> paragraf.</p>
<p>Harga: <span style="color: red;">Rp 50.000</span></p>
Perbedaan <div> vs <span>
<div> <span>
Block-level Inline
Baris baru Tetap di baris yang sama
Lebar penuh Lebar sesuai konten
Untuk kelompok besar Untuk bagian kecil teks
Atribut class dan id
<!-- class - bisa dipakai berkali-kali -->
<div class="card">Kartu 1</div>
<div class="card">Kartu 2</div>
<!-- id - harus unik (1x per halaman) -->
<div id="header">Header</div>
<div id="footer">Footer</div>
Kapan Pakai <div> vs Tag Semantic?
Gunakan tag semantic dulu, <div> hanya jika tidak ada tag yang tepat.
Buruk:
<div class="header">
<div class="nav">...</div>
</div>
Baik:
<header>
<nav>...</nav>
</header>
Ringkasan Hari 12
• <div> — container block-level (baris baru, lebar penuh)
• <span> — container inline (tetap di baris sama)
• class — bisa dipakai berkali-kali
• id — harus unik (1x per halaman)
• Prioritas: semantic HTML dulu, baru <div>
Hari 13: Meta Tags & SEO Dasar
Meta tags adalah tag di dalam <head> yang tidak terlihat di halaman, tapi sangat
penting untuk SEO, performa, dan tampilan di media sosial.
Meta Tags Wajib
<head>
<!-- Encoding karakter (WAJIB) -->
<meta charset="UTF-8">
<!-- Responsive design (WAJIB) -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
Meta Tags untuk SEO
<!-- Deskripsi (muncul di hasil Google) -->
<meta name="description"
content="Tutorial HTML lengkap dalam 2 minggu">
<!-- Kata kunci (opsional) -->
<meta name="keywords"
content="HTML, tutorial, web development">
<!-- Penulis -->
<meta name="author" content="Nama Anda">
Open Graph - Tampilan di Media Sosial
Agar tampil bagus saat dibagikan di Facebook, WhatsApp, LinkedIn:
<meta property="og:title"
content="Belajar HTML untuk Pemula">
<meta property="og:description"
content="Tutorial HTML lengkap">
<meta property="og:image"
content="[Link]
<meta property="og:url"
content="[Link]
Favicon - Ikon di Tab Browser
<link rel="icon" href="[Link]" type="image/x-icon">
<!-- atau -->
<link rel="icon" href="[Link]" type="image/png">
Lang Attribute - Bahasa Halaman
<html lang="id"> <!-- Bahasa Indonesia -->
<html lang="en"> <!-- Bahasa Inggris -->
Template Head Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Website Saya - Tutorial HTML</title>
<meta name="description"
content="Tutorial HTML lengkap">
<meta name="keywords"
content="HTML, tutorial">
<meta name="author" content="Nama Anda">
<meta property="og:title" content="Website Saya">
<meta property="og:description"
content="Tutorial HTML">
<meta property="og:image"
content="[Link]
<link rel="icon" href="[Link]">
</head>
<body>
<!-- Konten halaman -->
</body>
</html>
Tips SEO HTML
• Title unik per halaman (50-60 karakter)
• Satu <h1> per halaman
• Heading berurutan (h1 → h2 → h3)
• Alt text deskriptif di semua gambar
• Link internal antar halaman
Ringkasan Hari 13
• <meta charset="UTF-8"> — encoding (wajib)
• <meta name="viewport"> — responsive (wajib)
• <meta name="description"> — tampil di Google
• Open Graph — tampilan di sosmed
• <link rel="icon"> — favicon
• lang="id" — bahasa halaman
Hari 14: Proyek Akhir & Review Minggu 2
Selamat! Kamu sudah menyelesaikan pembelajaran HTML 2 minggu!
Recap Minggu 2
Hari Materi Tag Utama
8 Tables <table>, <tr>, <td>, <th>
9 Forms - Input Dasar <form>, <input>, <label>
10 Forms - Lanjutan radio, checkbox, textarea,
select
11 Semantic HTML <header>, <nav>, <main>,
<footer>
12 Div & Span <div>, <span>, class, id
13 Meta Tags & SEO <meta>, Open Graph,
favicon
Yang Sudah Kamu Kuasai
• Struktur HTML yang benar
• Semua tag HTML dasar dan penting
• Semantic HTML (standar industri)
• Forms interaktif
• Tables untuk data
• SEO dasar
• Membuat website multi-halaman yang profesional
Proyek Akhir: Website Company Profile
Buat website perusahaan 4 halaman dengan struktur profesional:
4. [Link] — Halaman utama (hero, keunggulan, statistik)
5. [Link] — Visi misi, sejarah, tim
6. [Link] — Paket layanan dengan tabel harga
7. [Link] — Form kontak lengkap
Checklist Proyek Akhir
Struktur & Semantic:
• <header>, <nav>, <main>, <footer> di setiap halaman
• <article>, <section>, <aside> dipakai dengan tepat
• Heading berurutan, hanya 1 <h1> per halaman
Content:
• Text formatting (<strong>, <em>, <mark>)
• Gambar dengan alt deskriptif
• <figure> + <figcaption> minimal 2x
• List (<ul>, <ol>, nested list)
Tables & Forms:
• Tabel dengan <thead>, <tbody>, <tfoot>
• Form lengkap dengan berbagai input
• <fieldset> + <legend> untuk grouping
• Radio, checkbox, textarea, select
Meta Tags:
• <meta charset> dan viewport di setiap halaman
• <title> berbeda per halaman
• Meta description di setiap halaman
• lang="id" di tag <html>
Langkah Selanjutnya
1. CSS (Minggu 3-4)
Belajar styling untuk membuat website cantik dan modern:
• Warna, font, spacing
• Layout (Flexbox, Grid)
• Responsive design
• Animasi
2. JavaScript (Minggu 5-8)
Membuat website interaktif:
• Validasi form
• Animasi dinamis
• Manipulasi DOM
• API integration
3. Praktik Terus!
• Buat 1 website baru setiap minggu
• Clone design dari website favorit
• Ikut challenge di Frontend Mentor
SELAMAT!
Kamu sudah menyelesaikan
Panduan Lengkap Belajar HTML
dalam 2 Minggu
Kamu sekarang punya fondasi HTML yang kuat!
Terus berlatih dan jangan berhenti belajar!
🚀 Happy Coding! 🚀