🌐 Phase 1 — HTML
P06 · Pertemuan 6 dari 20
HTML Lanjutan & Mini Project HTML
Embed video, audio, dan iframe (YouTube/Maps), lalu membangun website multi-halaman pertama sebagai Mini Project.
Tujuan Pembelajaran
- 01Menyisipkan video HTML5 dengan tag <video>
- 02Embed konten YouTube via <iframe>
- 03Embed peta Google Maps menggunakan <iframe>
- 04Menambahkan favicon dan meta viewport
- 05Menggunakan HTML entities: &, <, ©
- 06MINI PROJECT: Membangun website 3 halaman yang saling terhubung
Sub-topik & Materi
- 01Embed video: <video> dan YouTube iframe
- 02Embed audio: <audio> dengan controls
- 03iFrame: embed peta Google Maps
- 04Favicon: <link rel="icon"> dan meta viewport
- 05HTML entities: &, <, >, ©
- 06MINI PROJECT: Website multi-halaman (3 halaman terhubung)
Penjelasan Konsep
Konsep 1
Embed Video YouTube
Kamu bisa menyisipkan video YouTube langsung ke halaman HTML menggunakan <iframe>. Buka video di YouTube → klik Share → Embed → copy kode iframe. Ganti URL dengan format https://www.youtube.com/embed/VIDEO_ID. Tambahkan atribut allowfullscreen agar pengguna bisa fullscreen.
html
<!-- Embed YouTube --> <iframe width="560" height="315" src="https://www.youtube.com/embed/qz0aGYrrlhU" title="Tutorial HTML" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
Konsep 2
Embed Google Maps
Buka Google Maps → cari lokasi → klik Share → Embed a map → copy kode iframe. Kamu bisa menyesuaikan ukuran dengan mengubah nilai width dan height. Ini sangat berguna untuk halaman Contact.
html
<!-- Embed Google Maps --> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952..." width="600" height="450" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>
Konsep 3
Struktur Website Multi-Halaman
Website dengan banyak halaman membutuhkan struktur folder yang rapi. Semua file HTML di root folder. Buat folder images/ untuk gambar dan css/ untuk file stylesheet. Gunakan link relatif antar halaman. File index.html adalah halaman utama yang terbuka saat mengakses folder.
bash
project/
├── index.html ← halaman Home
├── about.html ← halaman About
├── contact.html ← halaman Contact
├── css/
│ └── style.css ← satu file CSS untuk semua halaman
└── images/
├── logo.png
└── hero.jpgKonsep 4
Favicon — Ikon Tab Browser
Favicon adalah ikon kecil yang muncul di tab browser. Taruh file favicon.ico atau favicon.png di root folder, lalu tambahkan link di <head>. Kamu bisa membuat favicon gratis di favicon.io.
html
<head> <!-- Favicon ICO (universal) --> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- Atau gunakan PNG --> <link rel="icon" type="image/png" href="images/favicon.png"> </head>
Contoh Kode Lengkap
html
<!-- Video HTML5 --> <video src="video.mp4" controls width="600" poster="thumbnail.jpg"> Browser Anda tidak mendukung tag video. </video> <!-- Embed YouTube --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="Judul Video" allowfullscreen> </iframe> <!-- Embed Google Maps --> <iframe src="https://maps.google.com/maps?q=Pare+Kediri&output=embed" width="600" height="400" title="Lokasi Parelabs"> </iframe> <!-- Favicon --> <link rel="icon" href="favicon.ico" type="image/x-icon">
Latihan Kelas · Sisipkan video YouTube dan peta Google Maps ke halaman yang sudah dibuat
1
Buka halaman dari tugas sebelumnya
2
Embed video YouTube menggunakan iframe (cari video tutorial HTML)
3
Embed Google Maps dengan lokasi Kampung Inggris Pare
4
Tambahkan favicon ke halaman
5
Uji semua media berjalan dengan baik di browser
Kesalahan yang Sering Dibuat
Link navigasi antar halaman salah path — selalu test setiap link setelah dibuat
Tidak menyertakan CSS yang sama di setiap halaman — setiap file HTML harus link ke style.css
Nama file menggunakan huruf kapital (About.html) — selalu lowercase untuk kompatibilitas server
iframe YouTube tidak responsive — tambahkan CSS untuk membuat iframe fleksibel
Lupa mengupdate tag <title> di setiap halaman — judul tab harus berbeda di setiap halaman