Dasar HTML (HyperText Markup Language)
Tujuan: Siswa memahami cara kerja web dan mampu membuat struktur halaman profil diri yang rapi menggunakan Semantic HTML.
Bagian 1: Persiapan Alat Tempur (Tools)
Sebelum koding, pastikan sudah terinstall:
Web Browser: Google Chrome (Rekomendasi) atau Edge.
Code Editor: Visual Studio Code (VS Code).
Ekstensi Wajib: Minta siswa install "Live Server" atau "Open In Default Browser" di VS Code agar tidak perlu refresh browser manual setiap simpan file.
Bagian 2: Teori Dasar
1. Analogi Web (Supaya Mudah Dipaham)
Jelaskan kepada siswa dengan analogi membangun rumah:
HTML: Adalah Batu Bata & Tiang (Kerangka/Struktur). Tanpa ini, tidak ada bangunan.
CSS: Adalah Cat & Dekorasi (Tampilan). Tanpa ini, rumah terlihat kusam (semen saja).
JavaScript: Adalah Listrik & Pipa Air (Fungsi). Lampu bisa nyala, keran bisa keluar air.
2. Struktur Wajib HTML
Setiap file HTML harus memiliki kerangka ini. Ajarkan siswa mengetik tanda seru ! lalu tekan Tab di VS Code untuk auto-complete.
<!DOCTYPE html> <html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul di Tab Browser</title>
</head>
<body>
</body>
</html>
Bagian 3: Elemen-Elemen Penting (Hands-on)
Mempraktikkan kode di bawah ini di dalam tag <body>.
A. Heading & Paragraf (Teks)
Heading digunakan untuk judul, Paragraf untuk isi teks.
<h1>Ini Judul Utama (Paling Besar)</h1>
<h2>Ini Sub-Judul</h2>
<p>Ini adalah paragraf. Gunakan tag ini untuk menulis deskripsi yang panjang.</p>
<p><b>Ini tebal</b> dan <i>ini miring</i>.</p>
B. List (Daftar)
Penting untuk membuat menu atau daftar item.
<h3>Hobi Saya:</h3>
<ul>
<li>Futsal</li>
<li>Koding</li>
<li>Mancing</li>
</ul>
<h3>Riwayat Sekolah:</h3>
<ol>
<li>SDN 1 Nusantara</li>
<li>SMPN 2 Merdeka</li>
</ol>
C. Gambar & Link (Multimedia)
Gambar: Pastikan file gambar ada di folder yang sama dengan file HTML agar tidak broken.
Link: Atribut
hrefadalah tujuan,target="_blank"agar membuka tab baru.
<img src="foto-profil.jpg" alt="Foto Profil Saya" width="200">
<p>Kunjungi <a href="https://google.com" target="_blank">Google</a></p>
D. Formulir Sederhana
Interaksi dasar dengan pengguna.
<h3>Hubungi Saya</h3>
<form>
<label>Nama:</label><br>
<input type="text" placeholder="Masukkan nama.."><br><br>
<label>Email:</label><br>
<input type="email"><br><br>
<button type="submit">Kirim Pesan</button>
</form>
Bagian 4: Latihan Praktik (Studi Kasus)
Tugas: Buat file baru bernama biodata.html.
Buat tampilan Curriculum Vitae (CV) digital sederhana tanpa CSS.
Contoh Kode:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sihabudin Alwi</title>
</head>
<body>
<header>
<h1>Sihabudin Alwi</h1>
<p>Calon Junior Web Developer</p>
<hr> </header>
<main>
<section>
<img src="https://via.placeholder.com/150" alt="Foto SihabudinAlwi" width="150">
</section>
<section>
<h2>Tentang Saya</h2>
<p>Halo! Saya adalah siswa kelas X RPL yang sedang belajar membuat website. Saya suka tantangan dan belajar teknologi baru.</p> </section>
<section>
<h2>Keahlian</h2>
<ul>
<li>HTML Dasar</li>
<li>Instalasi Komputer</li>
<li>Desain Grafis Dasar</li>
</ul>
</section>
<section>
<h2>Pendidikan</h2>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>Tahun</th>
<th>Sekolah</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018 - 2024</td>
<td>SD Negeri 1</td>
</tr>
<tr>
<td>2024 - Sekarang</td>
<td>SMK Bisa Hebat</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<hr>
<p>Copyright © 2026 Sihabudin Alwi.</p>
</footer>
</body>
</html>