Modul Pembelajaran HTML Dasar
1. Pengenalan HTML
HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat
halaman web. HTML digunakan untuk menyusun struktur konten di web.
Struktur Dasar Dokumen HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman -->
</body>
</html>
2. Elemen Semantik HTML5
Elemen semantik memberikan makna pada struktur halaman. Contoh elemen:
- <header>: bagian atas halaman (judul, logo, dll.)
- <nav>: navigasi
- <section>: bagian konten
- <article>: konten mandiri (berita, postingan)
- <aside>: konten sampingan (iklan, sidebar)
- <footer>: bagian bawah halaman
Contoh penggunaan:
<body>
<header>
<h1>Selamat Datang</h1>
</header>
<nav>
<ul>
<li><a href="#tentang">Tentang</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
<section>
<article>
<h2>Artikel Utama</h2>
<p>Ini adalah isi artikel.</p>
</article>
</section>
<footer>
<p>© 2025 Nama Anda</p>
</footer>
</body>
3. Atribut HTML
Atribut memberikan informasi tambahan pada elemen. Contoh umum:
- href untuk tautan
- src untuk gambar
- alt untuk deskripsi gambar
- class dan id untuk styling dan scripting
Contoh:
<img src="foto.jpg" alt="Foto Profil" class="profil">
<a href="https://example.com" target="_blank">Kunjungi Situs</a>
4. Formulir dan Input
Elemen formulir:
- <form>, <input>, <textarea>, <select>, <button>
Contoh:
<form action="/submit" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan"></textarea>
<button type="submit">Kirim</button>
</form>
5. Aksesibilitas Dasar (ARIA)
ARIA (Accessible Rich Internet Applications) membantu pengguna dengan disabilitas.
Contoh atribut:
- aria-label, aria-hidden, role
Contoh:
<button aria-label="Tutup menu"
onclick="tutupMenu()">×</button>
<nav role="navigation" aria-label="Navigasi utama">
...
</nav>
6. Proyek Kecil: Portofolio Pribadi
Tujuan: Membuat halaman web statis sederhana yang menampilkan informasi pribadi.
Struktur:
- Header: Nama dan foto
- Nav: Tautan ke bagian-bagian
- Section: Tentang saya, keahlian, proyek
- Form: Kontak
- Footer: Hak cipta
Contoh Preview:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Portofolio Saya</title>
</head>
<body>
<header>
<h1>Nama Anda</h1>
<img src="foto.jpg" alt="Foto Profil">
</header>
<nav>
<a href="#tentang">Tentang</a>
<a href="#keahlian">Keahlian</a>
<a href="#kontak">Kontak</a>
</nav>
<section id="tentang">
<h2>Tentang Saya</h2>
<p>Deskripsi singkat.</p>
</section>
<section id="keahlian">
<h2>Keahlian</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
<section id="kontak">
<h2>Kontak</h2>
<form>
<input type="text" placeholder="Nama">
<input type="email" placeholder="Email">
<textarea placeholder="Pesan"></textarea>
<button type="submit">Kirim</button>
</form>
</section>
<footer>
<p>© 2025 Nama Anda</p>
</footer>
</body>
</html>
