Mata Kuliah: Pemrograman Berbasis Web
🧭 1. Konsep HTML Lanjutan
8
📖 Deskripsi
HTML lanjutan mencakup penggunaan elemen-elemen modern HTML5 untuk membangun struktur halaman yang lebih terorganisir, semantik, dan mudah dipahami oleh manusia maupun mesin (browser & search engine).
🧠 Narasi
Jika HTML dasar hanya berfokus pada tampilan, HTML lanjutan mulai memperhatikan makna (semantic), aksesibilitas, dan struktur profesional dalam pengembangan web modern.
🧩 2. Semantic HTML
7
📖 Deskripsi
Semantic HTML adalah penggunaan tag HTML yang memiliki arti/tujuan jelas.
🧱 Tabel Tag Semantic
| Tag | Fungsi |
|---|---|
<header> | Bagian atas halaman |
<nav> | Navigasi/menu |
<main> | Konten utama |
<section> | Bagian konten |
<article> | Artikel mandiri |
<footer> | Bagian bawah |
💻 Contoh
<header>
<h1>Website Saya</h1>
</header><nav>
<a href="#">Home</a>
</nav><main>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
</article>
</main>
🧠 Narasi
Penggunaan semantic HTML:
- Membantu SEO
- Memudahkan pembacaan kode
- Mendukung aksesibilitas (screen reader)
📋 3. Form Lanjutan
7
📖 Deskripsi
HTML5 menyediakan input yang lebih canggih.
🧱 Tabel Input
| Tipe Input | Fungsi |
|---|---|
email | Validasi email |
date | Pilih tanggal |
number | Input angka |
range | Slider |
file | Upload file |
💻 Contoh
<form>
Email: <input type="email" required><br>
Tanggal: <input type="date"><br>
Umur: <input type="number"><br>
<button>Kirim</button>
</form>
🧠 Narasi
Form modern membantu validasi otomatis tanpa JavaScript, meningkatkan pengalaman pengguna.
📊 4. Tabel Lanjutan
5
📖 Deskripsi
HTML tabel lanjutan memungkinkan struktur kompleks.
🧱 Elemen Tambahan
| Tag | Fungsi |
|---|---|
<thead> | Header tabel |
<tbody> | Isi tabel |
<tfoot> | Footer |
colspan | Gabung kolom |
rowspan | Gabung baris |
💻 Contoh
<table border="1">
<thead>
<tr><th>Nama</th><th>Nilai</th></tr>
</thead>
<tbody>
<tr><td>Ani</td><td>90</td></tr>
</tbody>
</table>
🧠 Narasi
Struktur tabel yang baik penting untuk:
- Data kompleks
- Aksesibilitas
- Integrasi dengan CSS/JS
🎧 5. Multimedia (Audio & Video)
6
📖 Deskripsi
HTML5 mendukung media tanpa plugin tambahan.
🧱 Tabel Tag
| Tag | Fungsi |
|---|---|
<audio> | Audio |
<video> | Video |
💻 Contoh
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>
🧠 Narasi
Sebelumnya membutuhkan Flash, sekarang HTML5 sudah native.
🧠 6. HTML5 API Dasar
7
📖 Deskripsi
HTML5 menyediakan API tambahan:
🧱 Contoh API
| API | Fungsi |
|---|---|
| Geolocation | Lokasi pengguna |
| Local Storage | Simpan data lokal |
| Canvas | Gambar grafis |
💻 Contoh Local Storage
<script>
localStorage.setItem("nama", "Budi");
</script>
🧠 Narasi
API ini membuat web lebih interaktif tanpa backend.
♿ 7. Aksesibilitas (Accessibility)
7
📖 Deskripsi
Aksesibilitas memastikan web bisa digunakan semua orang.
🧱 Teknik
- Gunakan
altpada gambar - Gunakan semantic HTML
- Gunakan atribut ARIA
💻 Contoh
<img src="foto.jpg" alt="Mahasiswa sedang belajar">
🧠 Narasi
Web yang baik harus inklusif, termasuk untuk pengguna disabilitas.
📱 8. Meta Tag & SEO Dasar
7
📖 Deskripsi
Meta tag membantu mesin pencari memahami halaman.
🧱 Contoh
<meta name="description" content="Website pembelajaran HTML">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
🧠 Narasi
Meta tag penting untuk:
- SEO
- Responsiveness
- Informasi halaman
📂 9. Embedding & Integrasi
7
📖 Deskripsi
HTML bisa menyisipkan konten eksternal.
🧱 Tag
| Tag | Fungsi |
|---|---|
<iframe> | Menampilkan halaman lain |
💻 Contoh
<iframe src="https://www.youtube.com"></iframe>
🧠 Narasi
Digunakan untuk:
- Video
- Peta
- Konten eksternal lainnya
🧪 10. Studi Kasus Mini Project
🎯 Tugas
Buat halaman web dengan:
- Struktur semantic lengkap
- Form input lengkap
- Tabel data
- Video/audio
- Meta SEO
- Embed (iframe)
🎯 11. Kesimpulan
- HTML lanjutan fokus pada struktur modern
- Semantic HTML sangat penting
- HTML5 membawa banyak fitur baru
- Aksesibilitas dan SEO harus diperhatikan
🎓 Penutup
Materi ini menjadi jembatan menuju:
➡️ CSS (desain lanjutan)
➡️ JavaScript (interaksi kompleks)
➡️ Framework web modern
