Mata Kuliah: Pemrograman Berbasis Web
🧭 1. Pengertian HTML
7
📖 Deskripsi
HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan menyusun struktur halaman web.
🧠 Narasi
HTML bukan bahasa pemrograman, melainkan bahasa markup. Artinya, HTML digunakan untuk “menandai” bagian-bagian dalam dokumen agar browser memahami bagaimana konten harus ditampilkan.
Setiap halaman web yang kita lihat di internet pada dasarnya dibangun menggunakan HTML sebagai fondasinya.
🏗️ 2. Struktur Dasar Dokumen HTML
7
📖 Deskripsi
Struktur dasar HTML terdiri dari elemen-elemen utama berikut:
💻 Contoh Kode
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo Dunia</h1>
<p>Ini adalah halaman HTML pertama saya</p>
</body>
</html>
🧠 Narasi
<!DOCTYPE html>→ Menentukan bahwa dokumen menggunakan HTML5<html>→ Elemen root (akar dari semua elemen)<head>→ Berisi metadata (judul, link, dll)<body>→ Berisi konten yang ditampilkan ke pengguna
Struktur ini wajib ada di setiap halaman HTML agar browser dapat membaca dokumen dengan benar.
🧩 3. Elemen dan Tag HTML
7
📖 Deskripsi
HTML terdiri dari tag dan elemen:
🧱 Tabel Perbedaan
| Istilah | Penjelasan |
|---|---|
| Tag | Penanda (contoh: <p>) |
| Elemen | Tag + isi (contoh: <p>Halo</p>) |
🧠 Narasi
Tag biasanya berpasangan:
- Tag pembuka:
<p> - Tag penutup:
</p>
Elemen adalah kombinasi lengkap yang membentuk suatu bagian halaman.
🔤 4. Elemen Teks Dasar
7
📖 Deskripsi
HTML menyediakan berbagai elemen untuk teks:
🧱 Tabel Elemen Teks
| Tag | Fungsi |
|---|---|
<h1> – <h6> | Judul |
<p> | Paragraf |
<b> | Tebal |
<i> | Miring |
<u> | Garis bawah |
💻 Contoh
<h1>Judul Utama</h1>
<p>Ini paragraf biasa</p>
<b>Teks Tebal</b>
🧠 Narasi
Heading digunakan untuk struktur informasi. Semakin kecil angka (h1), semakin penting judul tersebut.
🔗 5. Hyperlink dan Gambar
6
📖 Deskripsi
HTML memungkinkan navigasi dan tampilan media.
🧱 Tabel
| Tag | Fungsi |
|---|---|
<a> | Link |
<img> | Gambar |
💻 Contoh
<a href="https://google.com">Kunjungi Google</a><img src="gambar.jpg" alt="Contoh Gambar">
🧠 Narasi
<a>digunakan untuk berpindah halaman<img>tidak memiliki tag penutup (self-closing)
📋 6. List (Daftar)
8
📖 Deskripsi
HTML mendukung daftar berurut dan tidak berurut.
🧱 Tabel
| Tag | Fungsi |
|---|---|
<ul> | List tidak berurut |
<ol> | List berurut |
<li> | Item list |
💻 Contoh
<ul>
<li>Apel</li>
<li>Jeruk</li>
</ul>
🧠 Narasi
List sering digunakan untuk menu navigasi, daftar produk, dan informasi terstruktur.
📊 7. Tabel HTML
7
📖 Deskripsi
Digunakan untuk menampilkan data dalam bentuk tabel.
🧱 Struktur Tabel
| Tag | Fungsi |
|---|---|
<table> | Tabel |
<tr> | Baris |
<td> | Kolom |
<th> | Header |
💻 Contoh
<table border="1">
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ahmad</td>
<td>12345</td>
</tr>
</table>
🧠 Narasi
Tabel cocok digunakan untuk data terstruktur seperti nilai, jadwal, dan laporan.
📝 8. Form HTML
6
📖 Deskripsi
Form digunakan untuk menerima input dari pengguna.
🧱 Elemen Form
| Tag | Fungsi |
|---|---|
<form> | Form utama |
<input> | Input data |
<textarea> | Teks panjang |
<button> | Tombol |
💻 Contoh
<form>
Nama: <input type="text"><br>
<button>Kirim</button>
</form>
🧠 Narasi
Form adalah dasar dari interaksi pengguna, seperti login, registrasi, dan pencarian.
🏷️ 9. Atribut HTML
6
📖 Deskripsi
Atribut memberikan informasi tambahan pada tag.
🧱 Contoh Atribut
| Atribut | Fungsi |
|---|---|
href | Tujuan link |
src | Sumber gambar |
alt | Deskripsi gambar |
💻 Contoh
<img src="foto.jpg" alt="Foto Saya">
🧠 Narasi
Atribut sangat penting untuk:
- Fungsi tambahan
- SEO
- Aksesibilitas
🧪 10. Latihan Praktikum
🎯 Tugas
Buat halaman HTML sederhana dengan:
- Judul (h1)
- Paragraf
- Gambar
- Link
- List
- Tabel
- Form
🎯 11. Kesimpulan
- HTML adalah fondasi web
- Struktur HTML harus benar
- Tag dan elemen membentuk halaman
- HTML bekerja bersama CSS dan JavaScript
🎓 Penutup
Pemahaman HTML sangat penting sebelum melanjutkan ke:
- CSS (desain)
- JavaScript (interaksi)
