MASTERING HTML DARI NOL SAMPAI PROFESIONAL

Panduan Lengkap Menguasai HTML Tingkat Menengah

Bagian 2

Penulis: Tim Pengembang Materi Profesional

Editor: Expert Content Team
Edisi: Pertama, 2024
Format: Ebook Interaktif Premium
 Daftar Isi

KATA PENGANTAR ................................................................................................................................ 4

BAB 1: TABEL DAN DATA .................................................................................................................... 5
MATERI 1: TABLE - MEMBUAT TABEL........................................................................................... 5
MATERI 2: FORM - MEMBUAT FORMULIR .................................................................................. 13
BAB 2: STRUKTUR DAN SEMANTIK ................................................................................................. 22
MATERI 3: DIV DAN SPAN ............................................................................................................ 22
MATERI 4: SEMANTIC HTML ........................................................................................................ 31
BAB 3: MULTIMEDIA DAN INTEGRASI ............................................................................................ 47
MATERI 5: AUDIO DAN VIDEO..................................................................................................... 47
MATERI 6: IFRAME......................................................................................................................... 55
MATERI 7: KARAKTER KHUSUS ................................................................................................... 63
BAB 4: OPTIMASI DAN STYLING ..................................................................................................... 70
MATERI 8: META TAGS.................................................................................................................. 70
MATERI 9: STYLE INLINE.............................................................................................................. 75
BAB 5: PROYEK AKHIR ...................................................................................................................... 80
MATERI 10: PROJECT AKHIR - MEMBUAT PROFIL PRIBADI PROFESIONAL ........................ 80
PENUTUP.............................................................................................................................................. 89
 KATA PENGANTAR

Assalamu'alaikum warahmatullahi wabarakatuh dan salam sejahtera bagi kita

semua.
Selamat datang di "HTML Lanjutan: Mastering Intermediate HTML"! Buku ini adalah
kelanjutan dari ebook dasar HTML yang telah Anda pelajari sebelumnya. Sekarang,
saatnya membawa kemampuan HTML Anda ke level berikutnya.
Mengapa Anda Perlu Belajar HTML Lanjutan?
HTML dasar mengajarkan Anda cara membuat website sederhana. Tapi website
modern membutuhkan lebih dari itu. Di buku ini, Anda akan belajar:
 Tabel kompleks - Menyajikan data terstruktur seperti laporan keuangan
 Formulir interaktif - Mengumpulkan data pengguna dengan berbagai jenis input
 Semantic HTML - Membuat website yang ramah SEO dan aksesibilitas
 Multimedia - Menambahkan audio, video, dan konten dari website lain
 Optimasi - Meta tags untuk SEO dan tampilan mobile

Target Pembaca Buku Ini

Buku ini cocok untuk Anda yang sudah:
- Menguasai dasar-dasar HTML (heading, paragraf, gambar, link, list)
- Ingin membuat website yang lebih profesional dan kompleks
- Bersiap mempelajari CSS dan JavaScript
- Ingin memahami struktur website modern

Metode Pembelajaran
Setiap materi dalam buku ini dilengkapi dengan:
1. Penjelasan konsep dengan bahasa mudah dipahami
2. Perumpamaan dunia nyata untuk mempermudah pemahaman
3. Contoh kode yang bisa langsung dipraktikkan
4. Latihan soal untuk evaluasi mandiri
5. Tugas praktik dengan kode yang bisa diuji

Tips Sukses Belajar HTML Lanjutan

1. Praktek setiap hari - Minimal 30 menit coding
2. Buat catatan - Tulis snippet kode yang sering digunakan
3. Eksperimen - Ubah-ubah kode contoh untuk melihat hasilnya
4. Debugging - Belajar mencari dan memperbaiki error
5. Buat proyek - Terapkan semua ilmu di proyek akhir
Sekarang, mari kita mulai perjalanan menuju penguasaan HTML tingkat lanjut!
 BAB 1: TABEL DAN DATA
MATERI 1: TABLE - MEMBUAT TABEL

Menyajikan Data dalam Bentuk Tabel

Pengertian Table dalam HTML

Table atau tabel adalah elemen HTML yang digunakan untuk menampilkan data
dalam bentuk baris dan kolom, persis seperti spreadsheet di Microsoft Excel atau
Google Sheets. Tabel sangat berguna untuk menyajikan data terstruktur seperti
jadwal, laporan keuangan, daftar produk, perbandingan harga, dan masih banyak
lagi.

Perumpamaan Jadwal Pelajaran

Ingat jadwal pelajaran di sekolah? Ada hari (Senin, Selasa, Rabu), ada jam (07:00,
08:00, 09:00), dan ada mata pelajaran (Matematika, Bahasa Inggris, IPA) yang
tersusun rapi dalam baris dan kolom. Itulah tabel! Setiap sel dalam jadwal tersebut
berisi informasi spesifik pada pertemuan antara baris dan kolom tertentu.

Struktur Dasar Tabel

Membuat tabel di HTML membutuhkan beberapa tag yang bekerja bersama-sama:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>

Tag-Tag dalam Tabel

Tag Kepanjangan Fungsi Karakteristik

<table> Table Membungkus seluruh tabel Tag container utama

<tr> Table Row Membuat baris baru Setiap baris punya tag ini

Teks tebal dan di tengah secara

<th> Table Header Judul kolom
default

<td> Table Data Isi data biasa Teks normal dan rata kiri

Contoh Tabel Sederhana

Mari kita buat tabel data siswa sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Tabel Sederhana</title>
</head>
<body>
<h1>Data Siswa Kelas X</h1>

<table border="1">
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Kelas</th>
<th>Nilai Rata-rata</th>
</tr>
<tr>
<td>1</td>
<td>Budi Santoso</td>
<td>X-A</td>
<td>88.5</td>
</tr>
<tr>
<td>2</td>
<td>Ani Wijaya</td>
<td>X-A</td>
<td>92.0</td>
</tr>
<tr>
<td>3</td>
<td>Citra Dewi</td>
<td>X-B</td>
<td>85.5</td>
</tr>
</table>
</body>
</html>

Penjelasan:
- border="1" memberi garis tepi pada tabel dan sel-selnya
- Setiap <tr> mewakili satu baris data
- Di dalam <tr>, kita punya 4 <th> (untuk baris pertama) atau 4 <td> (untuk
baris data)

Atribut Penting untuk Tabel

Atribut pada <table>:
Atribut Fungsi Contoh

border Ketebalan garis tepi border="1"

 Atribut Fungsi Contoh

cellpadding Jarak teks ke border sel cellpadding="10"

cellspacing Jarak antar sel cellspacing="5"

width Lebar tabel width="100%"

bgcolor Warna latar tabel bgcolor="#f0f0f0"

align Posisi tabel (left/center/right) align="center"

Contoh dengan atribut lengkap:

<table border="1"
cellpadding="10"
cellspacing="0"
width="80%"
align="center"
bgcolor="#f9f9f9">
<!-- isi tabel -->
</table>

Menggabungkan Sel (Rowspan dan Colspan)

Tabel tidak selalu berbentuk kotak sempurna. Kadang kita perlu menggabungkan
beberapa sel menjadi satu, seperti di Excel.

Colspan - menggabungkan kolom (melebar ke kanan):

<table border="1">
<tr>
<th colspan="2">Data Gabungan 2 Kolom</th>
</tr>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
</tr>
</table>

Rowspan - menggabungkan baris (memanjang ke bawah):

<table border="1">
<tr>
<td rowspan="2">Gabung 2 Baris</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Contoh kompleks: Jadwal Pelajaran

<!DOCTYPE html>
<html>
<head>
<title>Jadwal Pelajaran</title>
</head>
<body>
<h1 style="text-align: center;">Jadwal Pelajaran Kelas X-A</h1>

<table border="1" cellpadding="10" cellspacing="0" width="100%">

<!-- Header -->
<tr bgcolor="#ffcc00">
<th>Jam</th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
<th>Kamis</th>
<th>Jumat</th>
</tr>

<!-- Baris 1: Jam 07:00-08:30 -->

<tr>
<th>07:00-08:30</th>
<td>Matematika</td>
<td>Bahasa Indonesia</td>
<td>IPA</td>
<td>IPS</td>
<td rowspan="2">Prakarya</td>
</tr>

<!-- Baris 2: Jam 08:30-10:00 -->

<tr>
<th>08:30-10:00</th>
<td>Bahasa Inggris</td>
<td>Matematika</td>
<td>Bahasa Inggris</td>
<td>Olahraga</td>
</tr>

<!-- Istirahat -->

<tr bgcolor="#e0e0e0">
<th>10:00-10:30</th>
<td colspan="5" align="center"><b>ISTIRAHAT</b></td>
</tr>

<!-- Baris 3: Jam 10:30-12:00 -->

<tr>
<th>10:30-12:00</th>
<td>IPA</td>
<td>Agama</td>
<td>Matematika</td>
<td>PKN</td>
<td>BK</td>
</tr>
 </table>
</body>
</html>

Penggunaan Tabel yang Tepat

KAPAN menggunakan tabel:
 Data yang memang berbentuk tabel (laporan, jadwal, perbandingan)
 Informasi yang lebih mudah dipahami dalam format baris-kolom
 Data statistik atau numerik
KAPAN TIDAK menggunakan tabel:
× Untuk layout/tata letak halaman (gunakan CSS Grid/Flexbox)
× Untuk menampilkan gambar (lebih baik langsung pakai <img>)
× Untuk membuat daftar (gunakan <ul> atau <ol>)

Tips Profesional Membuat Tabel

1. SELALU gunakan <th> untuk header - Meningkatkan aksesibilitas dan SEO
2. Tambahkan scope pada <th> untuk screen reader:

<th scope="col">Nama</th> <!-- header kolom -->

<th scope="row">Baris 1</th> <!-- header baris -->

3. Gunakan border-collapse: collapse; di CSS untuk tabel yang lebih rapi

4. Berikan alternatif untuk tampilan mobile (tabel bisa di-scroll horizontal)
5. Jangan membuat tabel terlalu kompleks - pecah menjadi beberapa tabel jika
perlu

Contoh Tabel untuk E-commerce

<!DOCTYPE html>
<html>
<head>
<title>Tabel Produk</title>
</head>
<body>
<h2>Daftar Produk Unggulan</h2>
<table border="1" cellpadding="12" cellspacing="0" width="100%">
<tr bgcolor="#4CAF50" style="color: white;">
<th>ID Produk</th>
<th>Nama Produk</th>
<th>Kategori</th>
<th>Harga</th>
<th>Stok</th>
</tr>
<tr>
<td>PRD001</td>
<td>Smartphone XYZ</td>
<td>Elektronik</td>
<td>Rp2.500.000</td>
<td bgcolor="#90EE90">Tersedia</td>
</tr>
<tr>
<td>PRD002</td>
 <td>Kemeja Casual</td>
<td>Fashion</td>
<td>Rp150.000</td>
<td bgcolor="#FFCCCC">Habis</td>
</tr>
<tr bgcolor="#f5f5f5">
<td>PRD003</td>
<td>Buku HTML Master</td>
<td>Buku</td>
<td>Rp85.000</td>
<td bgcolor="#90EE90">Tersedia</td>
</tr>
<tr>
<td colspan="3" align="right"><b>Total Nilai Stok:</b></td>
<td colspan="2"><b>Rp2.735.000</b></td>
</tr>
</table>
</body>
</html>

Latihan Soal
Soal 1: Tag apa yang digunakan untuk membuat baris dalam tabel?
A. <td>
B. <tr> ✓
C. <th>
D. <row>

Jawaban: B
<tr> (Table Row) adalah tag yang membuat baris baru dalam tabel. <td> untuk sel
data, <th> untuk header.*

Soal 2: Tag apa untuk judul kolom dalam tabel?

A. <td>
B. <tr>
C. <th> ✓
D. <header>

Jawaban: C
<th> (Table Header) digunakan untuk sel judul. Secara default, teks di <th> akan
tebal dan berada di tengah.

Soal 3: Apa fungsi dari atribut colspan?

A. Menggabungkan beberapa baris
B. Menggabungkan beberapa kolom ✓
C. Memberi warna pada tabel
D. Mengatur lebar tabel

Jawaban: B
colspan (column span) menggabungkan beberapa kolom menjadi satu sel.
Kebalikannya rowspan untuk baris.
Praktik Langsung
Tugas: Buat tabel nilai siswa dengan ketentuan:
- 4 kolom: No, Nama, Matematika, Bahasa Inggris, Rata-rata
- Minimal 3 baris data
- Gunakan colspan untuk judul utama "Laporan Nilai Semester 1"
- Gunakan rowspan jika ada data yang sama

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Latihan Tabel - Nilai Siswa</title>
</head>
<body>
<h2 align="center">Laporan Nilai Semester 1</h2>

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center">

<!-- Judul utama dengan colspan -->
<tr bgcolor="#2196F3" style="color: white;">
<th colspan="5">SMA NEGERI 1 JAKARTA</th>
</tr>

<!-- Header kolom -->

<tr bgcolor="#e0e0e0">
<th>No</th>
<th>Nama Siswa</th>
<th>Matematika</th>
<th>Bahasa Inggris</th>
<th>Rata-rata</th>
</tr>

<!-- Data siswa 1 -->

<tr>
<td>1</td>
<td>Budi Santoso</td>
<td align="center">85</td>
<td align="center">90</td>
<td align="center" bgcolor="#90EE90">87.5</td>
</tr>

<!-- Data siswa 2 -->

<tr>
<td>2</td>
<td>Ani Wijaya</td>
<td align="center">92</td>
<td align="center">88</td>
<td align="center" bgcolor="#90EE90">90.0</td>
</tr>

<!-- Data siswa 3 -->

<tr>
<td>3</td>
<td>Citra Dewi</td>
 <td align="center">78</td>
<td align="center">85</td>
<td align="center" bgcolor="#FFCCCC">81.5</td>
</tr>

<!-- Baris untuk rata-rata kelas -->

<tr bgcolor="#f5f5f5">
<td colspan="2" align="right"><b>Rata-rata Kelas:</b></td>
<td align="center"><b>85.0</b></td>
<td align="center"><b>87.7</b></td>
<td align="center"><b>86.3</b></td>
</tr>
</table>

<p align="center" style="color: #666; margin-top: 20px;">

<i>Catatan: Nilai rata-rata dihitung berdasarkan 3 siswa</i>
</p>
</body>
</html>
 MATERI 2: FORM - MEMBUAT FORMULIR

Mengumpulkan Data dari Pengunjung

Pengertian Form
Form atau formulir adalah elemen HTML yang digunakan untuk mengumpulkan
input dari pengguna. Ini adalah jembatan antara pengunjung website dengan
pemilik website. Setiap kali Anda login ke media sosial, mencari produk di e-
commerce, mengisi survei, atau mendaftar newsletter - Anda sedang menggunakan
form!

Perumpamaan Formulir Pendaftaran

Bayangkan Anda mau daftar kursus. Anda mengisi formulir kertas: nama, alamat,
nomor telepon, pilihan kursus. Setelah diisi, Anda serahkan ke petugas. Dalam
website, form HTML adalah formulir kertasnya, dan tombol submit adalah saat Anda
menyerahkan formulir ke petugas. Bedanya, data dikirim ke server, bukan ke
petugas.

Struktur Dasar Form

<form action="[Link]" method="POST">

<!-- Input fields di sini -->
<input type="text" name="nama" placeholder="Masukkan nama">
<button type="submit">Kirim</button>
</form>

Atribut Penting pada <form>

Atribut Fungsi Contoh

action URL tujuan pengiriman data action="[Link]

method Metode pengiriman (GET/POST) method="POST"

name Nama form name="registrasi"

target Target hasil form target="_blank"

enctype Tipe encoding (untuk upload file) enctype="multipart/form-data"

Perbedaan GET vs POST:

GET POST

Data terlihat di URL Data tersembunyi

 GET POST

Batasan panjang (2048 karakter) Tidak ada batasan

Bisa di-bookmark Tidak bisa di-bookmark

Untuk pencarian/filter Untuk data sensitif (password)

Jenis-Jenis Input Field

1. Text Input - untuk teks pendek

<input type="text" name="nama" placeholder="Nama lengkap" required>

<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="number" name="umur" placeholder="Umur" min="1" max="100">
<input type="tel" name="telepon" placeholder="Nomor telepon">
<input type="url" name="website" placeholder="Website">
<input type="search" name="cari" placeholder="Cari...">

2. Textarea - untuk teks panjang

<textarea name="alamat" rows="4" cols="50" placeholder="Alamat lengkap"></textarea>

3. Radio Button - pilih satu dari beberapa opsi

<input type="radio" name="jenis_kelamin" value="laki-laki" id="laki">

<label for="laki">Laki-laki</label>
<input type="radio" name="jenis_kelamin" value="perempuan" id="perempuan">
<label for="perempuan">Perempuan</label>

4. Checkbox - pilih banyak opsi

<input type="checkbox" name="hobi" value="membaca" id="membaca">

<label for="membaca">Membaca</label>
<input type="checkbox" name="hobi" value="menulis" id="menulis">
<label for="menulis">Menulis</label>

5. Select Dropdown - pilihan dari daftar

<select name="kota" required>

<option value="">Pilih Kota</option>
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="surabaya">Surabaya</option>
</select>

6. File Upload - untuk mengunggah file

<input type="file" name="foto" accept="image/*" required>

7. Date & Time

<input type="date" name="tanggal_lahir">

 <input type="time" name="jam">
<input type="datetime-local" name="tanggal_waktu">
<input type="month" name="bulan">
<input type="week" name="minggu">

8. Range Slider

<input type="range" name="volume" min="0" max="100" value="50">

9. Color Picker

<input type="color" name="warna_favorit" value="#00ff9d">

Tombol dalam Form

<!-- Tombol submit - mengirim data -->

<button type="submit">Kirim Data</button>
<input type="submit" value="Kirim">

<!-- Tombol reset - membersihkan form -->

<button type="reset">Reset</button>
<input type="reset" value="Hapus Semua">

<!-- Tombol biasa - untuk JavaScript -->

<button type="button" onclick="alert('Halo!')">Klik Saya</button>

Contoh Form Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Pendaftaran</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
 }
.radio-group, .checkbox-group {
display: flex;
gap: 20px;
}
.radio-group label, .checkbox-group label {
font-weight: normal;
display: inline;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Form Pendaftaran Member</h1>
<p>Silakan isi data diri Anda dengan lengkap.</p>

<form action="[Link]" method="POST">

<!-- Nama Lengkap -->
<div class="form-group">
<label for="nama">Nama Lengkap <span style="color: red;">*</span></label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap"
required>
</div>

<!-- Email -->

<div class="form-group">
<label for="email">Email <span style="color: red;">*</span></label>
<input type="email" id="email" name="email" placeholder="email@[Link]"
required>
</div>

<!-- Password -->

<div class="form-group">
<label for="password">Password <span style="color: red;">*</span></label>
<input type="password" id="password" name="password" placeholder="Minimal 8 karakter"
required>
</div>

<!-- Jenis Kelamin (Radio) -->

<div class="form-group">
<label>Jenis Kelamin <span style="color: red;">*</span></label>
<div class="radio-group">
<input type="radio" id="laki" name="jenis_kelamin" value="laki-laki" required>
<label for="laki">Laki-laki</label>

<input type="radio" id="perempuan" name="jenis_kelamin" value="perempuan">

<label for="perempuan">Perempuan</label>
 </div>
</div>

<!-- Tanggal Lahir -->

<div class="form-group">
<label for="tanggal_lahir">Tanggal Lahir</label>
<input type="date" id="tanggal_lahir" name="tanggal_lahir">
</div>

<!-- Kota (Select Dropdown) -->

<div class="form-group">
<label for="kota">Kota Domisili</label>
<select id="kota" name="kota">
<option value="">Pilih Kota</option>
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="surabaya">Surabaya</option>
<option value="semarang">Semarang</option>
<option value="yogyakarta">Yogyakarta</option>
</select>
</div>

<!-- Hobi (Checkbox) -->

<div class="form-group">
<label>Hobi</label>
<div class="checkbox-group">
<input type="checkbox" id="membaca" name="hobi" value="membaca">
<label for="membaca">Membaca</label>

<input type="checkbox" id="menulis" name="hobi" value="menulis">

<label for="menulis">Menulis</label>

<input type="checkbox" id="olahraga" name="hobi" value="olahraga">

<label for="olahraga">Olahraga</label>

<input type="checkbox" id="musik" name="hobi" value="musik">

<label for="musik">Musik</label>
</div>
</div>

<!-- Alamat (Textarea) -->

<div class="form-group">
<label for="alamat">Alamat Lengkap</label>
<textarea id="alamat" name="alamat" rows="3" placeholder="Jalan, RT/RW, Kelurahan,
Kecamatan"></textarea>
</div>

<!-- Upload Foto -->

<div class="form-group">
<label for="foto">Foto Profil</label>
<input type="file" id="foto" name="foto" accept="image/*">
<small style="color: #666;">Format: JPG, PNG (maks 2MB)</small>
</div>

<!-- Warna Favorit -->

<div class="form-group">
<label for="warna">Warna Favorit</label>
 <input type="color" id="warna" name="warna" value="#4CAF50">
</div>

<!-- Tingkat Kepuasan (Range) -->

<div class="form-group">
<label for="kepuasan">Tingkat Kepuasan (1-10)</label>
<input type="range" id="kepuasan" name="kepuasan" min="1" max="10" value="5">
<span id="nilai_kepuasan">5</span>
</div>

<!-- Persetujuan -->

<div class="form-group">
<input type="checkbox" id="setuju" name="setuju" required>
<label for="setuju" style="display: inline;">Saya menyetujui <a href="#">syarat dan
ketentuan</a> yang berlaku <span style="color: red;">*</span></label>
</div>

<!-- Tombol -->

<div class="form-group">
<button type="submit">Daftar Sekarang</button>
<button type="reset" style="background-color: #f44336;">Reset Form</button>
</div>
</form>

<script>
// Menampilkan nilai range slider
const range = [Link]('kepuasan');
const output = [Link]('nilai_kepuasan');
[Link] = function() {
[Link] = [Link];
}
</script>
</body>
</html>

Tips Membuat Form yang Baik

1. Gunakan <label> untuk setiap input - Meningkatkan aksesibilitas dan UX
2. Atribut required untuk field wajib - Validasi dasar dari HTML
3. Placeholder yang jelas - Memberi contoh format pengisian
4. Kelompokkan field yang terkait - Gunakan <fieldset> dan <legend>
5. Feedback visual - Beri warna hijau untuk valid, merah untuk error

Contoh dengan Fieldset:

<fieldset>
<legend>Informasi Pribadi</legend>
<input type="text" name="nama" placeholder="Nama">
<input type="email" name="email" placeholder="Email">
</fieldset>

<fieldset>
<legend>Informasi Akun</legend>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</fieldset>
Latihan Soal
Soal 1: Tag apa yang digunakan untuk membuat input teks?
A. <text>
B. <input type='text'> ✓
C. <input text>
D. <textbox>

Jawaban: B
<input type="text"> adalah cara yang benar. Atribut type menentukan jenis input.

Soal 2: Input type apa yang menyembunyikan teks yang diketik?

A. text
B. hidden
C. password ✓
D. secret

Jawaban: C
type="password" menampilkan bullet point atau bintang sebagai pengganti karakter
yang diketik.

Soal 3: Apa perbedaan radio button dan checkbox?

A. Radio untuk pilih banyak, checkbox untuk pilih satu
B. Radio untuk pilih satu, checkbox untuk pilih banyak ✓
C. Sama saja
D. Radio untuk angka, checkbox untuk teks

Jawaban: B
Radio button dengan name yang sama hanya bisa dipilih satu. Checkbox bisa
memilih banyak opsi.

Praktik Langsung
Tugas: Buat form kontak sederhana dengan:
- Nama (text, required)
- Email (email, required)
- Pesan (textarea)
- Prioritas (select: Rendah, Sedang, Tinggi)
- Tombol submit

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Kontak - Latihan</title>
<style>
body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 500px;
margin: 50px auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.form-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input, select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
button {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
opacity: 0.9;
}
.required:after {
content: " *";
color: red;
}
</style>
</head>
<body>
 <div class="form-container">
<h1>� Hubungi Kami</h1>

<form action="#" method="POST">

<div class="form-group">
<label class="required">Nama Lengkap</label>
<input type="text" name="nama" placeholder="Masukkan nama Anda" required>
</div>

<div class="form-group">
<label class="required">Alamat Email</label>
<input type="email" name="email" placeholder="email@[Link]" required>
</div>

<div class="form-group">
<label>Prioritas</label>
<select name="prioritas">
<option value="rendah">� Rendah</option>
<option value="sedang" selected>� Sedang</option>
<option value="tinggi">� Tinggi</option>
</select>
</div>

<div class="form-group">
<label>Pesan</label>
<textarea name="pesan" rows="5" placeholder="Tulis pesan Anda di sini..."></textarea>
</div>

<button type="submit">Kirim Pesan</button>

</form>

<p style="text-align: center; color: #666; margin-top: 20px; font-size: 12px;">

Kami akan merespon dalam 1x24 jam
</p>
</div>
</body>
</html>
 BAB 2: STRUKTUR DAN SEMANTIK
MATERI 3: DIV DAN SPAN

Mengelompokkan Elemen

Pengertian Div dan Span

Div (division) dan Span adalah tag container yang tidak memiliki makna khusus,
tetapi sangat penting dalam pengelompokan dan styling elemen. Mereka seperti
"kotak kosong" yang bisa Anda isi dan beri gaya sesuai kebutuhan.

Perumpamaan Kotak Penyimpanan

- <div> itu seperti kotak besar untuk menyimpan banyak barang. Anda bisa
menaruh mainan, buku, pakaian, semuanya dalam satu kotak besar. Kotak ini
akan mengambil seluruh lebar (membuat baris baru).
- <span> seperti pembungkus plastik kecil untuk satu barang saja. Hanya
membungkus kata atau kalimat pendek tanpa mengganggu aliran teks di
sekitarnya.

DIV (Division) - Block Level Element

Tag <div> adalah elemen block, artinya:
- Membuat baris baru sebelum dan sesudahnya
- Lebar default = 100% dari parent
- Bisa diatur tinggi, lebar, margin, padding

Contoh penggunaan div:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
margin: 10px;
border-radius: 10px;
}
.header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
.content {
background-color: white;
padding: 20px;
margin-top: 10px;
}
.footer {
background-color: #333;
 color: white;
padding: 10px;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Website Saya</h1>
</div>

<div class="content">
<h2>Selamat Datang</h2>
<p>Ini adalah konten utama website.</p>
<p>Div membantu kita mengelompokkan dan memberi gaya.</p>
</div>

<div class="footer">
<p>Copyright 2024</p>
</div>
</div>
</body>
</html>

SPAN - Inline Level Element

Tag <span> adalah elemen inline, artinya:
- Tidak membuat baris baru
- Hanya selebar kontennya
- Tidak bisa diatur margin/padding vertikal (tapi bisa horizontal)

Contoh penggunaan span:

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.important {
color: red;
font-size: 1.2em;
}
.price {
color: green;
font-weight: bold;
}
.old-price {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<h1>Belajar <span class="highlight">Span</span> di HTML</h1>

<p>
Ini adalah kalimat dengan kata
<span class="important">PENTING</span>
yang diberi warna merah dan ukuran lebih besar.
</p>

<p>
Harga: <span class="old-price">Rp100.000</span>
<span class="price">Rp75.000</span>
</p>

<p>
Status: <span style="color: green; font-weight: bold;">✓ Tersedia</span>
</p>
</body>
</html>

Kapan Menggunakan Div vs Span

Situasi Gunakan Alasan

Membungkus beberapa elemen

<div> Block element, membuat struktur baru
(gambar, heading, paragraf)

Membuat layout halaman (header,

<div> Butuh blok terpisah
sidebar, footer)

Membuat card atau container <div> Butuh background, border, padding

Mewarnai satu kata dalam kalimat <span> Inline, tidak merusak aliran teks

Memberi gaya pada sebagian teks <span> Presisi pada teks pendek

Ikon atau badge dalam teks <span> Inline, bisa di samping teks

Styling Div dan Span dengan CSS

<!DOCTYPE html>
<html>
<head>
<style>
/* Styling untuk div */
.card {
width: 300px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 20px;
 margin: 20px;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}

/* Styling untuk span */

.badge {
background-color: #4CAF50;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
margin-left: 10px;
}
.icon {
font-size: 20px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="card">
<h2>
Produk Unggulan
<span class="badge">NEW</span>
</h2>
<p>Deskripsi produk yang sangat menarik.</p>
<p><span class="icon">�</span> Rating: 4.8/5</p>
</div>
</body>
</html>

Tips Profesional
1. Gunakan div dengan class yang deskriptif - class="product-card" lebih baik dari
class="box1"
2. Jangan terlalu banyak div bersarang - "Div-itis" membuat kode sulit dibaca
3. Untuk layout, pertimbangkan semantic HTML5 - <header>, <main>, <footer>
lebih baik dari <div class="header">
4. Span untuk micro-interactions - Bisa diberi event JavaScript tanpa merusak
layout
5. Kombinasikan div dan span - Div untuk struktur, span untuk detail

Latihan Soal
Soal 1: Tag mana yang bersifat block (membuat baris baru)?
A. <span>
B. <div> ✓
C. Keduanya block
D. Keduanya inline

Jawaban: B
<div> adalah block element yang membuat baris baru. <span> adalah inline
element.

Soal 2: Kapan waktu yang tepat menggunakan <span>?

A. Untuk membungkus beberapa elemen besar
B. Untuk membungkus teks pendek dalam kalimat ✓
C. Untuk membuat tabel
D. Untuk gambar

Jawaban: B
<span> ideal untuk membungkus teks pendek di dalam paragraf atau heading tanpa
mengganggu aliran teks.

Soal 3: Mana yang bisa diatur width dan height?

A. <span>
B. <div> ✓
C. Keduanya
D. Tidak ada

Jawaban: B
Sebagai block element, <div> bisa diatur lebar dan tinggi. <span> sebagai inline
element tidak merespon width/height.

Praktik Langsung
Tugas: Buat halaman profil produk dengan:
- Container div untuk seluruh halaman
- Div untuk header produk
- Div untuk galeri gambar (3 gambar)
- Div untuk informasi produk
- Span untuk harga, span untuk diskon, span untuk status stok

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Latihan Div dan Span - Halaman Produk</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
/* Container utama */
.product-container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* Header produk */
.product-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}

.product-header h1 {
font-size: 28px;
margin-bottom: 10px;
}

/* Galeri gambar */
.gallery {
display: flex;
gap: 15px;
padding: 30px;
background: #fafafa;
}

.gallery-item {
flex: 1;
background: white;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.gallery-item img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
}

/* Informasi produk */
.product-info {
padding: 30px;
}

.price-section {
background: #e8f5e9;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}

/* Styling untuk span */

.old-price {
text-decoration: line-through;
color: #999;
font-size: 18px;
margin-right: 15px;
}

.current-price {
color: #4CAF50;
font-size: 28px;
font-weight: bold;
}

.discount-badge {
background-color: #ff9800;
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 14px;
margin-left: 15px;
}

.stock-status {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
}

.stock-available {
background-color: #4CAF50;
color: white;
}

.stock-low {
background-color: #ff9800;
color: white;
}

.feature-list {
list-style: none;
margin-top: 20px;
}

.feature-list li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}

.feature-icon {
font-size: 20px;
margin-right: 10px;
}
 .btn-buy {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 50px;
cursor: pointer;
width: 100%;
margin-top: 20px;
transition: transform 0.3s;
}

.btn-buy:hover {
transform: scale(1.02);
}
</style>
</head>
<body>
<div class="product-container">
<!-- Header Produk -->
<div class="product-header">
<h1>SmartWatch Pro X</h1>
<p>Jam Tangan Pintar Generasi Terbaru</p>
</div>

<!-- Galeri Gambar -->

<div class="gallery">
<div class="gallery-item">
<img src="[Link] alt="Produk tampak depan">
<p>Tampak Depan</p>
</div>
<div class="gallery-item">
<img src="[Link] alt="Produk tampak samping">
<p>Tampak Samping</p>
</div>
<div class="gallery-item">
<img src="[Link] alt="Produk dengan strap">
<p>Dengan Strap</p>
</div>
</div>

<!-- Informasi Produk -->

<div class="product-info">
<div class="price-section">
<span class="old-price">Rp1.500.000</span>
<span class="current-price">Rp999.000</span>
<span class="discount-badge">Diskon 33%</span>
</div>

<div>
Status Stok:
<span class="stock-status stock-available">✓ Tersedia</span>
</div>

<ul class="feature-list">
 <li>
<span class="feature-icon">�</span>
<span>Layar AMOLED 1.75 inci</span>
</li>
<li>
<span class="feature-icon">❤ </span>
<span>Sensor detak jantung & SpO2</span>
</li>
<li>
<span class="feature-icon">�</span>
<span>20 mode olahraga</span>
</li>
<li>
<span class="feature-icon">�</span>
<span>Tahan air IP68</span>
</li>
<li>
<span class="feature-icon">�</span>
<span>Baterai tahan 7 hari</span>
</li>
</ul>

<button class="btn-buy">
<span>�</span> Beli Sekarang
</button>
</div>
</div>
</body>
</html>
 MATERI 4: SEMANTIC HTML

Memberi Makna pada Struktur Website

Pengertian Semantic HTML

Semantic HTML adalah penggunaan tag HTML yang memiliki makna spesifik, bukan
sekadar container kosong seperti <div>. Tag semantic seperti <header>, <nav>,
<article>, <footer> memberi tahu browser dan mesin pencari tentang peran setiap
bagian dalam website.

Perumpamaan Label di Kotak

Bayangkan Anda punya banyak kotak di gudang. Ada kotak berlabel "Mainan",
"Buku", "Pakaian", "Elektronik". Jauh lebih mudah mencari barang yang Anda
butuhkan, bukan? Tanpa label, Anda harus membuka semua kotak satu per satu.

Semantic HTML itu seperti label pada setiap bagian website:

- <header> = "Bagian Atas" (logo, judul)
- <nav> = "Menu Navigasi"
- <main> = "Konten Utama"
- <article> = "Artikel/Berita"
- <aside> = "Sidebar/Info Samping"
- <footer> = "Bagian Bawah"

Mengapa Semantic HTML Penting?

1. SEO (Search Engine Optimization) - Google lebih memahami struktur website
Anda
2. Aksesibilitas - Screen reader bisa membaca struktur dengan benar untuk
tunanetra
3. Maintainability - Kode lebih mudah dibaca dan dipelihara
4. Future-proof - Standar web modern yang akan terus didukung

Daftar Tag Semantic HTML5

Tag Fungsi Contoh Penggunaan

<header> Bagian atas halaman/section Logo, judul, tagline

<nav> Navigasi/menu Link ke halaman lain

<main> Konten utama (hanya 1 per halaman) Isi inti website

<article> Konten independen Postingan blog, berita

<section> Bagian dalam halaman Grup konten terkait

 Tag Fungsi Contoh Penggunaan

<aside> Konten sampingan Sidebar, iklan, related posts

<footer> Bagian bawah Copyright, kontak

<figure> Media dengan caption Gambar + keterangan

<figcaption> Caption untuk <figure> Keterangan gambar

<mark> Teks disorot Highlight keyword

<time> Waktu/tanggal Tanggal publikasi

<details> Konten yang bisa dibuka/tutup FAQ, info tambahan

<summary> Judul untuk <details> Ringkasan yang terlihat

Contoh Struktur Semantic HTML

Berikut adalah struktur website modern yang benar secara semantic:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Semantic HTML - Website Modern</title>
</head>
<body>
<!-- HEADER: Logo dan judul utama -->
<header>
<h1>Website Saya</h1>
<p>Belajar Semantic HTML untuk website modern</p>

<!-- NAVIGASI: Menu utama -->

<nav>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</header>

<!-- MAIN: Konten utama website -->

<main>
<!-- ARTICLE: Postingan blog -->
<article>
<header>
<h2>Judul Artikel Pertama</h2>
<p>Ditulis oleh <strong>Ahmad</strong> |
<time datetime="2024-01-15">15 Januari 2024</time>
 </p>
</header>

<p>Ini adalah isi artikel. Konten utama ada di sini.</p>

<!-- FIGURE: Gambar dengan caption -->

<figure>
<img src="[Link]" alt="Contoh gambar semantic">
<figcaption>Gambar 1: Contoh penggunaan figure dan figcaption</figcaption>
</figure>

<p>Lanjutan isi artikel...</p>

<!-- MARK: Menyorot teks penting -->

<p>
<mark>Catatan penting:</mark>
Semantic HTML sangat bermanfaat untuk SEO.
</p>
</article>

<!-- SECTION: Bagian dalam halaman -->

<section>
<h2>Artikel Terkait</h2>

<article>
<h3>Memahami Semantic HTML</h3>
<p>Pengenalan tentang tag-tag semantic...</p>
</article>

<article>
<h3>Tips SEO untuk Pemula</h3>
<p>Cara meningkatkan peringkat website...</p>
</article>
</section>

<!-- ASIDE: Sidebar / Konten samping -->

<aside>
<h3>Tentang Penulis</h3>
<img src="[Link]" alt="Foto penulis" width="100">
<p>Ahmad adalah web developer yang fokus pada semantic HTML dan aksesibilitas.</p>

<h3>Kategori</h3>
<ul>
<li><a href="#">HTML (10)</a></li>
<li><a href="#">CSS (8)</a></li>
<li><a href="#">JavaScript (5)</a></li>
</ul>
</aside>
</main>

<!-- FOOTER: Bagian bawah halaman -->

<footer>
<p>&copy; 2024 Website Saya. All rights reserved.</p>
<p>
<a href="#">Privacy Policy</a> |
<a href="#">Terms of Service</a> |
<a href="#">Contact</a>
 </p>
</footer>
</body>
</html>

Perbandingan Non-Semantic vs Semantic

NON-SEMANTIC (CARA LAMA):

<div class="header">
<div class="logo">Website Saya</div>
<div class="nav">
<div class="menu-item">Beranda</div>
<div class="menu-item">Tentang</div>
</div>
</div>

<div class="main">
<div class="content">
<div class="post-title">Judul Artikel</div>
<div class="post-content">Isi artikel...</div>
</div>
<div class="sidebar">Sidebar...</div>
</div>

<div class="footer">Copyright 2024</div>

SEMANTIC (CARA MODERN):

<header>
<h1>Website Saya</h1>
<nav>
<a href="#">Beranda</a>
<a href="#">Tentang</a>
</nav>
</header>

<main>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
</article>
<aside>Sidebar...</aside>
</main>

<footer>Copyright 2024</footer>

Contoh Semantic HTML dengan Styling

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Blog Semantic - Tutorial HTML</title>
<style>
*{
margin: 0;
 padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Georgia', serif;
line-height: 1.6;
color: #333;
background: #f4f4f4;
}

/* Header styling */
header {
background: #2c3e50;
color: white;
padding: 1rem;
text-align: center;
}

header h1 {
margin-bottom: 0.5rem;
}

/* Navigation styling */
nav {
background: #34495e;
padding: 0.5rem;
text-align: center;
}

nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
padding: 0.5rem;
}

nav a:hover {
background: #2c3e50;
border-radius: 5px;
}

/* Layout dengan Grid */

main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}

/* Article styling */
article {
background: white;
padding: 1.5rem;
border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 1.5rem;
}

article header {
background: none;
color: #333;
padding: 0;
text-align: left;
margin-bottom: 1rem;
}

article h2 {
color: #2c3e50;
margin-bottom: 0.5rem;
}

.meta {
color: #7f8c8d;
font-size: 0.9rem;
}

/* Figure styling */
figure {
margin: 1rem 0;
}

figcaption {
text-align: center;
font-size: 0.85rem;
color: #7f8c8d;
margin-top: 0.5rem;
}

/* Aside styling */
aside {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
height: fit-content;
}

aside h3 {
color: #2c3e50;
margin-bottom: 1rem;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}

aside ul {
list-style: none;
}

aside li {
margin-bottom: 0.5rem;
}
 aside a {
color: #3498db;
text-decoration: none;
}

aside a:hover {
text-decoration: underline;
}

/* Footer styling */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}

/* Mark styling */
mark {
background: #f39c12;
color: white;
padding: 0.2rem 0.5rem;
border-radius: 3px;
}

/* Details & Summary */

details {
margin-top: 1rem;
padding: 1rem;
background: #ecf0f1;
border-radius: 5px;
}

summary {
font-weight: bold;
cursor: pointer;
color: #2c3e50;
}

@media (max-width: 768px) {

main {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<h1>� Blog Semantic HTML</h1>
<p>Membangun website dengan struktur yang bermakna</p>
</header>

<nav>
<a href="#home">� Beranda</a>
<a href="#tutorial">� Tutorial</a>
 <a href="#about">� Tentang</a>
<a href="#contact">� Kontak</a>
</nav>

<main>
<!-- Konten Utama -->
<div>
<article>
<header>
<h2>Mengapa Semantic HTML Penting?</h2>
<div class="meta">
<time datetime="2024-01-20">20 Januari 2024</time> |
Oleh <strong>Ahmad Wijaya</strong> |
<span>� 5 menit membaca</span>
</div>
</header>

<p>
Semantic HTML adalah fondasi website modern. Dengan menggunakan tag yang tepat,
kita membantu <mark>mesin pencari</mark> dan <mark>pembaca layar</mark>
memahami struktur konten kita.
</p>

<figure>
<img src="[Link] alt="Ilustrasi semantic HTML"
width="100%">
<figcaption>Gambar 1: Struktur semantic HTML yang rapi dan
terorganisir</figcaption>
</figure>

<p>
Bayangkan jika semua bagian website menggunakan tag &lt;div&gt;. Mesin pencari
tidak akan bisa membedakan mana header, mana artikel, mana footer. Dengan
semantic
HTML, Google bisa memahami hierarki konten dengan lebih baik.
</p>

<details>
<summary>� Baca Juga: Tips Semantic HTML</summary>
<p>
Gunakan &lt;header&gt; untuk bagian atas, &lt;nav&gt; untuk menu,
&lt;main&gt; untuk konten utama (hanya satu per halaman),
&lt;article&gt; untuk konten independen, &lt;aside&gt; untuk sidebar,
dan &lt;footer&gt; untuk bagian bawah.
</p>
</details>
</article>

<article>
<header>
<h2>Perbandingan: Div vs Semantic Tags</h2>
<div class="meta">
<time datetime="2024-01-18">18 Januari 2024</time> |
Oleh <strong>Ahmad Wijaya</strong>
</div>
</header>
 <p>
Banyak developer pemula masih menggunakan &lt;div&gt; untuk semuanya.
Padahal, dengan semantic tags, kode menjadi lebih <mark>readable</mark>
dan <mark>maintainable</mark>.
</p>

<details>
<summary>� Lihat Contoh Kode</summary>
<pre style="background: #2c3e50; color: #ecf0f1; padding: 1rem; border-radius: 5px;
overflow-x: auto;">
&lt;!-- Non-semantic (kurang baik) --&gt;
&lt;div class="header"&gt;...&lt;/div&gt;
&lt;div class="nav"&gt;...&lt;/div&gt;

&lt;!-- Semantic (lebih baik) --&gt;

&lt;header&gt;...&lt;/header&gt;
&lt;nav&gt;...&lt;/nav&gt;</pre>
</details>
</article>
</div>

<!-- Sidebar -->

<aside>
<h3>�� Tentang Penulis</h3>
<img src="[Link] alt="Foto penulis" style="width:
100px; border-radius: 50%; display: block; margin: 0 auto 1rem;">
<p style="text-align: center;">
Ahmad adalah web developer yang passion di bidang semantic HTML,
aksesibilitas, dan performa website.
</p>

<h3>� Kategori Artikel</h3>

<ul>
<li><a href="#">HTML Semantic (5)</a></li>
<li><a href="#">CSS Layout (3)</a></li>
<li><a href="#">Aksesibilitas (4)</a></li>
<li><a href="#">SEO (2)</a></li>
</ul>

<h3>� Artikel Populer</h3>

<ul>
<li><a href="#">Panduan Semantic HTML Lengkap</a></li>
<li><a href="#">Tips SEO untuk Pemula</a></li>
<li><a href="#">Membuat Website Aksesibel</a></li>
</ul>

<h3> Tags</h3>
<p>
<mark style="background: #3498db;">#HTML</mark>
<mark style="background: #e74c3c;">#Semantic</mark>
<mark style="background: #2ecc71;">#SEO</mark>
<mark style="background: #f39c12;">#Accessibility</mark>
</p>
</aside>
</main>

<footer>
 <p>&copy; 2024 Blog Semantic HTML. All rights reserved.</p>
<p>
<a href="#" style="color: white;">Privacy Policy</a> |
<a href="#" style="color: white;">Terms of Service</a> |
<a href="#" style="color: white;">Contact</a>
</p>
</footer>
</body>
</html>

Tips Semantic HTML Profesional

1. Gunakan hanya satu <main> per halaman - Ini adalah konten unik halaman
tersebut
2. <article> untuk konten yang bisa berdiri sendiri - Postingan blog, berita,
komentar
3. <section> untuk mengelompokkan konten terkait - Biasanya punya heading
sendiri
4. <aside> untuk konten yang tidak langsung terkait - Sidebar, iklan, related posts
5. Jangan gunakan semantic hanya untuk styling - Jika butuh container tanpa
makna, tetap pakai <div>
6. Gunakan heading dengan benar dalam semantic tags - Setiap section/article bisa
punya heading sendiri

Latihan Soal
Soal 1: Tag semantic apa yang digunakan untuk navigasi?
A. <header>
B. <nav> ✓
C. <menu>
D. <navigation>

Jawaban: B
<nav> adalah tag semantic untuk menu navigasi. Tag ini memberi tahu browser
bahwa ini adalah bagian untuk berpindah halaman.

Soal 2: Apa keuntungan menggunakan semantic HTML?

A. Website lebih cepat
B. Memudahkan SEO dan aksesibilitas ✓
C. Gambar lebih bagus
D. Teks lebih besar

Jawaban: B
Semantic HTML membantu mesin pencari (SEO) memahami struktur konten dan
membantu screen reader (aksesibilitas) untuk pengguna tunanetra.

Soal 3: Berapa banyak tag <main> yang boleh dalam satu halaman?
A. Tidak ada batasan
B. Maksimal 2
C. Hanya 1 ✓
D. Minimal 3

Jawaban: C
Hanya boleh ada satu <main> per halaman karena ini mewakili konten utama yang
unik untuk halaman tersebut.

Praktik Langsung
Tugas: Buat halaman portofolio sederhana dengan struktur semantic:
- Header dengan judul dan navigasi
- Main dengan beberapa artikel proyek
- Aside untuk info kontak
- Footer dengan copyright

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Saya - Semantic HTML</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}

header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 3rem 1rem;
}

header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}

nav {
background: #2c3e50;
padding: 1rem;
text-align: center;
position: sticky;
top: 0;
}

nav a {
 color: white;
text-decoration: none;
margin: 0 1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background 0.3s;
}

nav a:hover {
background: #34495e;
}

main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}

article {
background: #f9f9f9;
border-radius: 10px;
overflow: hidden;
margin-bottom: 1.5rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s;
}

article:hover {
transform: translateY(-5px);
}

.project-img {
width: 100%;
height: 200px;
object-fit: cover;
}

.project-content {
padding: 1.5rem;
}

.project-content h3 {
color: #667eea;
margin-bottom: 0.5rem;
}

.project-tags {
margin-top: 1rem;
}

.project-tags span {
display: inline-block;
background: #e0e0e0;
padding: 0.2rem 0.8rem;
 border-radius: 20px;
font-size: 0.8rem;
margin-right: 0.5rem;
}

aside {
background: #f9f9f9;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
height: fit-content;
}

aside h3 {
color: #667eea;
margin-bottom: 1rem;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}

.contact-info {
list-style: none;
}

.contact-info li {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.skill-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}

.skill-list span {
background: #667eea;
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
}

footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 1.5rem;
margin-top: 2rem;
}

@media (max-width: 768px) {

main {
grid-template-columns: 1fr;
 }
}
</style>
</head>
<body>
<header>
<h1>� Ahmad Wijaya</h1>
<p>Web Developer | UI/UX Enthusiast | Content Creator</p>
</header>

<nav>
<a href="#home">� Beranda</a>
<a href="#projects">� Proyek</a>
<a href="#skills">� Skill</a>
<a href="#contact">� Kontak</a>
</nav>

<main>
<div>
<h2 style="margin-bottom: 1.5rem; color: #667eea;">� Proyek Unggulan</h2>

<article>
<img class="project-img" src="[Link] alt="Proyek
Website E-commerce">
<div class="project-content">
<h3>Website E-commerce Modern</h3>
<p>
Platform belanja online dengan fitur keranjang belanja,
payment gateway, dan sistem review produk. Dibangun dengan
HTML5 semantic, CSS3, dan JavaScript.
</p>
<div class="project-tags">
<span>#HTML5</span>
<span>#CSS3</span>
<span>#JavaScript</span>
<span>#Responsive</span>
</div>
</div>
</article>

<article>
<img class="project-img" src="[Link] alt="Proyek Blog
Platform">
<div class="project-content">
<h3>Platform Blogging</h3>
<p>
Sistem blog dengan struktur semantic HTML yang optimal untuk SEO.
Mendukung komentar, kategori, dan pencarian artikel.
</p>
<div class="project-tags">
<span>#SemanticHTML</span>
<span>#SEO</span>
<span>#Accessibility</span>
</div>
</div>
</article>
 <article>
<img class="project-img" src="[Link] alt="Proyek Portfolio
Gallery">
<div class="project-content">
<h3>Portfolio Gallery Interaktif</h3>
<p>
Galeri portofolio dengan filter kategori dan lightbox preview.
Menggunakan semantic HTML dan CSS Grid untuk layout yang rapi.
</p>
<div class="project-tags">
<span>#CSSGrid</span>
<span>#Flexbox</span>
<span>#Responsive</span>
</div>
</div>
</article>
</div>

<aside>
<h3>� Profil Singkat</h3>
<img src="[Link] alt="Foto profil" style="width:
100px; border-radius: 50%; display: block; margin: 0 auto 1rem;">
<p style="text-align: center; margin-bottom: 1.5rem;">
Web developer dengan 3+ tahun pengalaman. Fokus pada semantic HTML,
performa website, dan user experience.
</p>

<h3>� Kontak</h3>
<ul class="contact-info">
<li>� ahmad@[Link]</li>
<li>� +62 812 3456 7890</li>
<li>� [Link]/ahmadwijaya</li>
<li>� [Link]/in/ahmadwijaya</li>
</ul>

<h3 style="margin-top: 1.5rem;">� Tech Stack</h3>

<div class="skill-list">
<span>HTML5</span>
<span>CSS3</span>
<span>JavaScript</span>
<span>React</span>
<span>Git</span>
<span>Figma</span>
</div>
</aside>
</main>

<footer>
<p>&copy; 2024 Ahmad Wijaya - Portofolio dengan Semantic HTML</p>
<p style="margin-top: 0.5rem; font-size: 0.8rem;">
Dibangun dengan tag semantic: header, nav, main, article, aside, footer
</p>
</footer>
</body>
</html>
 BAB 3: MULTIMEDIA DAN INTEGRASI
MATERI 5: AUDIO DAN VIDEO

Menambahkan Media ke Website

Pengertian Audio dan Video di HTML

Audio dan Video adalah elemen HTML5 yang memungkinkan kita menambahkan
konten multimedia langsung ke website tanpa plugin tambahan seperti Flash. Cukup
dengan tag <audio> dan <video>, browser modern bisa memutar file musik dan
film.

Perumpamaan TV dan Radio di Rumah

Di rumah, ada TV untuk menonton video dan radio untuk mendengar musik. Di
website, kita bisa memasukkan keduanya dengan tag <video> dan <audio>.
Bedanya, di website kita bisa mengatur kapan mulai, kapan berhenti, bahkan bisa
autoplay atau loop!

Tag Audio
Struktur dasar audio:

<audio controls>
<source src="musik.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Browser Anda tidak mendukung tag audio.
</audio>

Atribut untuk <audio>:

Atribut Fungsi Contoh

controls Menampilkan kontrol (play, pause, volume) controls

autoplay Memutar otomatis saat halaman dimuat autoplay

loop Mengulang audio terus-menerus loop

muted Memulai dalam keadaan mute (bisu) muted

preload Memuat file saat halaman dimuat preload="auto"

Format audio yang didukung:

Format Browser Support Kapan Dipakai

MP3 √ Semua browser modern Format paling universal

 Format Browser Support Kapan Dipakai

OGG √ Chrome, Firefox, Edge Alternatif open source

WAV √ Semua browser File besar, kualitas tinggi

Tag Video
Struktur dasar video:

<video width="640" height="360" controls poster="[Link]">

<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
<source src="[Link]" type="video/ogg">
Browser Anda tidak mendukung tag video.
</video>

Atribut untuk <video>:

Atribut Fungsi Contoh

controls Menampilkan kontrol pemutaran controls

autoplay Putar otomatis autoplay

loop Ulang terus loop

muted Mode bisu muted

poster Gambar thumbnail sebelum play poster="[Link]"

width Lebar video (pixel) width="640"

height Tinggi video (pixel) height="360"

Format video yang didukung:

Format Browser Support Kapan Dipakai

MP4 √ Semua browser Format paling universal

WebM √ Chrome, Firefox, Edge Kualitas baik, file kecil

OGV √ Firefox, Opera Alternatif open source

Contoh Lengkap Audio dan Video

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Audio dan Video - Belajar Multimedia</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container {
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
h1, h2 {
color: #333;
}
.demo {
background: #f5f5f5;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
video {
max-width: 100%;
border-radius: 10px;
}
audio {
width: 100%;
}
.tips {
background: #e8f5e9;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
}
.tips h3 {
color: #2e7d32;
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>� HTML5 Audio & Video</h1>
<p>Menambahkan multimedia ke website dengan tag <code>&lt;audio&gt;</code> dan
<code>&lt;video&gt;</code></p>

<!-- ========== AUDIO ========== -->

<h2>� Contoh Audio Player</h2>
<div class="demo">
<h3>Audio dengan Controls</h3>
<audio controls>
 <source src="[Link]
type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>
<p><small>� Sampel musik dari SoundHelix (royalty-free)</small></p>
</div>

<div class="demo">
<h3>Audio dengan Autoplay & Loop (dengan mute)</h3>
<audio controls autoplay loop muted>
<source src="[Link]
type="audio/mpeg">
Browser Anda tidak mendukung audio.
</audio>
<p><small>� Audio akan loop terus. Mute diaktifkan agar tidak
mengagetkan.</small></p>
</div>
<!-- ========== VIDEO ========== -->
<h2>� Contoh Video Player</h2>
<div class="demo">
<h3>Video dengan Poster (Thumbnail)</h3>
<video width="100%" controls poster="[Link]
<source src="[Link]
bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
Browser Anda tidak mendukung video.
</video>
<p><small>� Video sampel dari Google (Big Buck Bunny)</small></p>
</div>
<div class="demo">
<h3>Video Responsive (lebar 100%)</h3>
<video width="100%" controls>
<source src="[Link]
bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
<source src="[Link]
bucket/sample/[Link]" type="video/webm">
Browser Anda tidak mendukung video.
</video>
</div>
<!-- ========== TIPS ========== -->
<div class="tips">
<h3>� Tips Penggunaan Audio & Video</h3>
<ul>
<li>Sediakan <strong>multiple format</strong> (MP4 + WebM) untuk
kompatibilitas</li>
<li>Gunakan <strong>poster</strong> untuk video agar lebih menarik sebelum di-
play</li>
<li><strong>Autoplay</strong> biasanya diblokir browser kecuali video
<strong>muted</strong></li>
<li>Optimasi ukuran file video untuk performa website</li>
<li>Gunakan <strong>lazy loading</strong> untuk video di luar layar pertama</li>
</ul>
</div>
</div>
</body>
</html>
Video dari YouTube/External
Untuk menyisipkan video dari YouTube, gunakan iframe (akan dipelajari di materi
selanjutnya):

<!-- Menyisipkan video YouTube -->

<iframe width="560" height="315"
src="[Link]
frameborder="0"
allowfullscreen>
</iframe>

Styling Audio dan Video

Kita bisa memberi style pada container audio/video:

<style>
.custom-audio {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
border-radius: 50px;
}
.custom-video {
border: 3px solid #667eea;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
</style>

<div class="custom-audio">
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
</audio>
</div>

<video class="custom-video" width="100%" controls>

<source src="video.mp4" type="video/mp4">
</video>

Pro Tips
1. Sediakan fallback teks - Untuk browser yang tidak mendukung
2. Multiple sources - Berikan MP4 dan WebM untuk kompatibilitas maksimal
3. Jangan autoplay dengan suara - Mengganggu pengguna dan diblokir browser
4. Optimasi file - Kompres video untuk kecepatan loading
5. Gunakan CDN - Hosting video di layanan seperti YouTube, Vimeo

Latihan Soal
Soal 1: Tag apa untuk menampilkan video di HTML5?
A. <media>
B. <movie>
C. <video> ✓
D. <film>
Jawaban: C
<video> adalah tag HTML5 yang benar untuk menampilkan video. Tag ini didukung
semua browser modern.

Soal 2: Atribut apa yang menampilkan kontrol play/pause pada audio/video?

A. play
B. controls ✓
C. controller
D. button

Jawaban: B
Atribut controls menampilkan kontrol pemutaran (play, pause, volume, fullscreen)
pada elemen audio/video.

Soal 3: Mengapa kita perlu menyediakan multiple source (MP4 dan WebM)?
A. Agar video lebih bagus
B. Untuk kompatibilitas antar browser ✓
C. Agar ukuran lebih kecil
D. Tidak ada alasan

Jawaban: B
Tidak semua browser mendukung format yang sama. MP4 didukung semua browser,
WebM sebagai alternatif untuk browser tertentu.

Praktik Langsung
Tugas: Buat halaman media player dengan:
- 1 audio player dengan controls
- 1 video player dengan poster (thumbnail)
- Tambahkan deskripsi dan informasi durasi
- Gunakan styling yang menarik

Kode referensi (menggunakan sample online):

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Media Player - Latihan Audio Video</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #0f0f0f;
color: white;
padding: 20px;
}
.player-container {
max-width: 800px;
margin: 0 auto;
}
.card {
background: #1e1e1e;
 border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
}
.card h2 {
margin-top: 0;
color: #1DB954;
}
audio {
width: 100%;
margin: 15px 0;
}
video {
width: 100%;
border-radius: 10px;
margin: 15px 0;
}
.info {
color: #aaa;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="player-container">
<h1>� Media Player Demo</h1>

<!-- Audio Card -->

<div class="card">
<h2>� Now Playing: Relaxing Piano</h2>
<audio controls>
<source src="[Link]
type="audio/mpeg">
Browser tidak mendukung audio
</audio>
<div class="info">
Artist: SoundHelix | Genre: Instrumental | Duration: 3:45
</div>
</div>

<!-- Video Card -->

<div class="card">
<h2>� Featured Video: Nature Scenery</h2>
<video controls poster="[Link]
<source src="[Link]
bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
Browser tidak mendukung video
</video>
<div class="info">
Resolution: 1080p | Format: MP4 | Duration: 0:30
</div>
</div>
</div>
</body>
</html>
 MATERI 6: IFRAME

Menyisipkan Halaman Web ke Halaman Lain

Pengertian Iframe
Iframe (Inline Frame) adalah tag HTML yang digunakan untuk menyisipkan halaman
web lain ke dalam halaman web kita. Ini seperti "jendela" yang menampilkan
website lain di dalam website kita.

Perumpamaan Jendela ke Rumah Lain

Bayangkan Anda punya jendela ajaib yang bisa melihat ke dalam rumah tetangga.
Anda bisa melihat apa yang terjadi di rumah mereka tanpa harus pergi ke sana.
Itulah iframe - jendela ke website lain di dalam website kita!

Struktur Dasar Iframe

<iframe src="[Link]
width="800"
height="600"
title="Deskripsi iframe">
</iframe>

Atribut Penting Iframe

Atribut Fungsi Contoh

src URL halaman yang disisipkan src="[Link]

width Lebar iframe (px atau %) width="100%"

height Tinggi iframe (px) height="400"

title Deskripsi (untuk aksesibilitas) title="Peta Google"

name Nama iframe (untuk target link) name="frame1"

sandbox Restriksi keamanan sandbox="allow-scripts"

allow Izin fitur (mic, camera, dll) allow="autoplay"

allowfullscreen Izinkan fullscreen allowfullscreen

Contoh Penggunaan Iframe

1. Menyisipkan Video YouTube

<iframe width="560" height="315"

 src="[Link]
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture"
allowfullscreen>
</iframe>

2. Menyisipkan Peta Google Maps

<iframe
src="[Link]
6.828677!3d-
6.208670!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x53
71bf0fdad786a2!2sMonas!5e0!3m2!1sid!2sid!4v1234567890"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>

3. Menyisipkan Tweet dari Twitter

<iframe src="[Link]
width="550"
height="600"
title="Tweet">
</iframe>

4. Menyisipkan Dokumen PDF

<iframe src="[Link]"
width="100%"
height="600"
title="PDF Viewer">
</iframe>

Contoh Lengkap Iframe

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Iframe - Menyisipkan Konten</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 {
 text-align: center;
color: #333;
}
.iframe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
}
.iframe-card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.iframe-card h2 {
margin-top: 0;
color: #667eea;
}
iframe {
width: 100%;
border-radius: 8px;
border: 1px solid #ddd;
}
.note {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1> Belajar Iframe - Menyisipkan Kontek Eksternal</h1>

<div class="note">
<strong>� Catatan:</strong> Beberapa website (seperti Google, Facebook)
memblokir iframe untuk keamanan. Gunakan layanan yang menyediakan embed code.
</div>

<div class="iframe-grid">
<!-- YouTube Video -->
<div class="iframe-card">
<h2>� YouTube Video</h2>
<iframe width="100%" height="315"
src="[Link]
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-
in-picture"
allowfullscreen>
</iframe>
<p><small>Ganti VIDEO_ID dengan ID video YouTube yang ingin
ditampilkan</small></p>
</div>

<!-- Google Maps -->

<div class="iframe-card">
 <h2> Google Maps</h2>
<iframe

src="[Link]
8677!3d-
6.208670!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf
0fdad786a2!2sMonas!5e0!3m2!1sid!2sid!4v1234567890"
width="100%"
height="315"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
<p><small>Lokasi Monumen Nasional (Monas), Jakarta</small></p>
</div>

<!-- Spotify Embed -->

<div class="iframe-card">
<h2>� Spotify Playlist</h2>
<iframe
src="[Link]
width="100%"
height="315"
frameborder="0"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>
<p><small>Spotify playlist - Top Global Hits</small></p>
</div>

<!-- Website Preview -->

<div class="iframe-card">
<h2>� Website Preview</h2>
<iframe src="[Link]
width="100%"
height="315"
title="Example Website">
</iframe>
<p><small>Preview website [Link]</small></p>
</div>
</div>
</body>
</html>

Keamanan Iframe (Sandbox)

Atribut sandbox memberikan lapisan keamanan ekstra:

<!-- Paling ketat - tidak mengizinkan apa pun -->

<iframe src="[Link]" sandbox></iframe>

<!-- Mengizinkan script dan form -->

<iframe src="[Link]" sandbox="allow-scripts allow-forms"></iframe>

<!-- Mengizinkan navigasi ke top-level -->

<iframe src="[Link]" sandbox="allow-top-navigation"></iframe>
Opsi sandbox:
- allow-forms - Mengizinkan submit form
- allow-scripts - Mengizinkan JavaScript
- allow-same-origin - Mengizinkan akses ke asal yang sama
- allow-popups - Mengizinkan popup
- allow-top-navigation - Mengizinkan navigasi ke parent

Responsive Iframe
Membuat iframe responsive (menyesuaikan lebar layar):

<style>
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 */
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<div class="iframe-container">
<iframe src="[Link] allowfullscreen></iframe>
</div>

Latihan Soal
Soal 1: Tag apa untuk menyisipkan halaman web lain?
A. <frame>
B. <iframe> ✓
C. <embed>
D. <object>

Jawaban: B
<iframe> adalah tag yang benar untuk menyisipkan halaman web ke halaman lain.
Tag <frame> sudah usang (deprecated).

Soal 2: Atribut apa yang menentukan halaman yang disisipkan?

A. link
B. href
C. src ✓
D. url
Jawaban: C
Atribut src (source) berisi URL halaman yang akan ditampilkan di dalam iframe.

Soal 3: Apa fungsi atribut sandbox pada iframe?

A. Mempercepat loading
B. Memberi batasan keamanan ✓
C. Mengubah warna
D. Menambah ukuran

Jawaban: B
sandbox memberi batasan keamanan pada konten iframe, mencegah akses ke fitur
tertentu yang berpotensi berbahaya.

Praktik Langsung
Tugas: Buat halaman yang berisi:
- Video YouTube favorit Anda (gunakan embed code)
- Peta lokasi rumah/kantor (Google Maps)
- Embed Instagram post atau Tweet

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>My Embed Collection - Latihan Iframe</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.card {
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card h2 {
margin-top: 0;
color: #667eea;
}
.responsive-iframe {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
 }
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}
.info {
background: #f0f0f0;
padding: 10px;
border-radius: 8px;
margin-top: 15px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: white; text-align: center;">� My Embed Collection</h1>

<!-- YouTube Video -->

<div class="card">
<h2>� Favorite YouTube Video</h2>
<div class="responsive-iframe">
<iframe src="[Link]
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="info">
� Ganti VIDEO_ID dengan ID video favorit Anda dari YouTube
</div>
</div>

<!-- Google Maps Location -->

<div class="card">
<h2>� My Location Map</h2>
<div class="responsive-iframe">
<iframe

src="[Link]
8677!3d-
6.208670!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf
0fdad786a2!2sMonas!5e0!3m2!1sid!2sid!4v1234567890"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
<div class="info">
� Ganti koordinat dengan lokasi yang diinginkan
</div>
 </div>

<!-- Website Preview -->

<div class="card">
<h2>� Website Preview</h2>
<div class="responsive-iframe">
<iframe src="[Link] title="Website Preview"></iframe>
</div>
<div class="info">
� Menampilkan preview website dalam iframe
</div>
</div>
</div>
</body>
</html>
 MATERI 7: KARAKTER KHUSUS

Menampilkan Simbol dan Karakter Spesial

Pengertian Karakter Khusus

Karakter khusus (HTML entities) adalah kode khusus untuk menampilkan simbol
yang tidak ada di keyboard atau memiliki makna khusus di HTML. Misalnya, tanda <
digunakan untuk tag HTML, jadi kita perlu kode khusus jika ingin menampilkannya
sebagai teks.

Perumpamaan Kode Rahasia

Seperti kode rahasia, &nbsp; adalah cara bilang "spasi" ke komputer, &copy; untuk
simbol copyright ©. Semua dimulai dengan & (ampersand) dan diakhiri dengan ;
(titik koma).

Daftar Karakter Khusus Penting

Hasil Kode Deskripsi Contoh Penggunaan

< &lt; Kurang dari Menampilkan tag HTML

> &gt; Lebih dari Menampilkan tag HTML

& &amp; Ampersand URL parameter

" &quot; Kutip dua Atribut HTML

' &apos; Kutip satu Atribut HTML

(spasi) &nbsp; Non-breaking space Mencegah line break

© &copy; Copyright Hak cipta

® &reg; Registered Merek terdaftar

™ &trade; Trademark Merek dagang

€ &euro; Euro Mata uang Euro

£ &pound; Pound Mata uang Pound

¥ &yen; Yen Mata uang Yen

¢ &cent; Cent Sen dollar

 Hasil Kode Deskripsi Contoh Penggunaan

° &deg; Derajat Suhu, sudut

± &plusmn; Plus-minus Toleransi

× &times; Kali Perkalian

÷ &divide; Bagi Pembagian

≤ &le; Kurang dari sama dengan Perbandingan

≥ &ge; Lebih dari sama dengan Perbandingan

≠ &ne; Tidak sama dengan Perbandingan

← &larr; Panah kiri Navigasi

→ &rarr; Panah kanan Navigasi

↑ &uarr; Panah atas Navigasi

↓ &darr; Panah bawah Navigasi

♥ &hearts; Hati Simbol

★ &star; Bintang Simbol

✓ &check; Centang Validasi

✗ &cross; Silang Error

Contoh Penggunaan Karakter Khusus

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Karakter Khusus HTML</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.demo {
background: #f5f5f5;
padding: 15px;
margin: 10px 0;
 border-left: 4px solid #667eea;
}
code {
background: #e0e0e0;
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<h1>� HTML Entities (Karakter Khusus)</h1>

<div class="demo">
<h2>� Menampilkan Tag HTML</h2>
<p>Untuk menampilkan tag HTML sebagai teks, gunakan <code>&amp;lt;</code> dan
<code>&amp;gt;</code></p>
<p>Contoh: <code>&lt;div&gt; ini adalah tag div &lt;/div&gt;</code></p>
<p>Hasil: &lt;div&gt; ini adalah tag div &lt;/div&gt;</p>
</div>

<div class="demo">
<h2>� Simbol Mata Uang</h2>
<p>Harga: 100 &euro; (Euro) | 50 &pound; (Pound) | 1000 &yen; (Yen) | 99 &cent;
(Cent)</p>
<p>Kode: <code>&amp;euro; &amp;pound; &amp;yen; &amp;cent;</code></p>
</div>

<div class="demo">
<h2>� Simbol Matematika</h2>
<p>Suhu: 25&deg;C | 10 &plusmn; 2 | 5 &times; 3 = 15 | 10 &divide; 2 = 5</p>
<p>Perbandingan: x &le; 10 | y &ge; 5 | a &ne; b</p>
</div>

<div class="demo">
<h2>➡ Simbol Panah</h2>
<p>Navigasi: &larr; Kiri | &rarr; Kanan | &uarr; Atas | &darr; Bawah</p>
<p>&lArr; &rArr; &uArr; &dArr; (Double arrow)</p>
</div>

<div class="demo">
<h2>� Simbol Lainnya</h2>
<p>Rating: &hearts; &star; &check; &cross;</p>
<p>Hak cipta: &copy; 2024 | Merek: &reg; &trade;</p>
 </div>

<h2>� Tabel Lengkap Karakter Khusus</h2>

<table>
<tr>
<th>Hasil</th>
<th>Kode</th>
<th>Deskripsi</th>
</tr>
<tr><td>&lt;</td><td><code>&amp;lt;</code></td><td>Kurang dari</td></tr>
<tr><td>&gt;</td><td><code>&amp;gt;</code></td><td>Lebih dari</td></tr>
<tr><td>&amp;</td><td><code>&amp;amp;</code></td><td>Ampersand</td></tr>
<tr><td>&copy;</td><td><code>&amp;copy;</code></td><td>Copyright</td></tr>
<tr><td>&reg;</td><td><code>&amp;reg;</code></td><td>Registered</td></tr>
<tr><td>&euro;</td><td><code>&amp;euro;</code></td><td>Euro</td></tr>
<tr><td>&deg;</td><td><code>&amp;deg;</code></td><td>Derajat</td></tr>
<tr><td>&plusmn;</td><td><code>&amp;plusmn;</code></td><td>Plus-
minus</td></tr>
<tr><td>&times;</td><td><code>&amp;times;</code></td><td>Kali</td></tr>
<tr><td>&divide;</td><td><code>&amp;divide;</code></td><td>Bagi</td></tr>
<tr><td>&larr;</td><td><code>&amp;larr;</code></td><td>Panah kiri</td></tr>
<tr><td>&rarr;</td><td><code>&amp;rarr;</code></td><td>Panah kanan</td></tr>
<tr><td>&hearts;</td><td><code>&amp;hearts;</code></td><td>Hati</td></tr>
<tr><td>&star;</td><td><code>&amp;star;</code></td><td>Bintang</td></tr>
</table>
</body>
</html>

Non-breaking Space (&nbsp;)

&nbsp; (Non-breaking space) adalah spasi yang tidak akan diputus menjadi baris
baru.

<!-- Tanpa &nbsp; -->

<p>Harga Rp 1.000.000</p>
<!-- Jika lebar sempit, bisa terpecah: "Harga Rp" baris baru "1.000.000" -->

<!-- Dengan &nbsp; -->

<p>Harga Rp&nbsp;1.000.000</p>
<!-- Rp dan 1.000.000 tetap bersama di baris yang sama -->

Kapan Menggunakan Karakter Khusus?

Situasi Gunakan Alasan

Menampilkan tag HTML &lt; dan &gt; Agar tidak dianggap tag

Simbol copyright di footer &copy; Standar legal

Mata uang Euro &euro; Tidak ada di keyboard

Spasi tidak boleh pindah baris &nbsp; Menjaga pasangan kata

 Situasi Gunakan Alasan

Karakter dalam atribut &quot; Menghindari error HTML

Latihan Soal
Soal 1: Kode karakter untuk simbol copyright (©) adalah?
A. &copy; ✓
B. &copyright;
C. &cr;
D. &c;

Jawaban: A
&copy; adalah HTML entity yang benar untuk simbol copyright. Hasilnya akan
menampilkan ©.

Soal 2: Mengapa perlu menggunakan &lt; untuk tanda <?

A. Lebih mudah diketik
B. Karena < punya makna khusus di HTML (tag) ✓
C. Agar lebih panjang
D. Tidak ada alasan khusus

Jawaban: B
Tanda < digunakan untuk membuka tag HTML. Jika ingin menampilkannya sebagai
teks, harus menggunakan &lt; agar tidak dianggap sebagai tag.

Soal 3: Apa fungsi &nbsp;?

A. Membuat baris baru
B. Spasi yang tidak bisa pindah baris ✓
C. Membuat teks tebal
D. Membuat garis horizontal

Jawaban: B
&nbsp; (non-breaking space) adalah spasi yang menjaga dua kata tetap bersama di
baris yang sama.

Praktik Langsung
Tugas: Buat halaman yang menampilkan:
- Rumus matematika dengan simbol khusus
- Harga dalam berbagai mata uang
- Copyright notice di footer
- Menampilkan contoh kode HTML

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="UTF-8">
<title>Latihan Karakter Khusus</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f0f2f5;
}
.card {
background: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.math {
font-size: 1.2em;
font-family: monospace;
background: #f5f5f5;
padding: 10px;
border-radius: 5px;
}
.price {
color: #2e7d32;
font-weight: bold;
}
footer {
text-align: center;
padding: 20px;
color: #666;
}
</style>
</head>
<body>
<h1>� Latihan Karakter Khusus HTML</h1>

<div class="card">
<h2>� Rumus Matematika</h2>
<div class="math">
<p>Rumus Pythagoras: a&sup2; + b&sup2; = c&sup2;</p>
<p>Rumus luas lingkaran: &pi; &times; r&sup2;</p>
<p>Suhu: 25&deg;C = 77&deg;F</p>
<p>Perbandingan: x &le; 10 dan y &ge; 5</p>
<p>Perkalian: 5 &times; 4 = 20</p>
<p>Pembagian: 20 &divide; 4 = 5</p>
</div>
</div>

<div class="card">
<h2>� Daftar Harga Produk</h2>
<ul>
<li>Laptop: <span class="price">$999 &dollar;</span> / <span class="price">&euro;
899</span></li>
<li>Smartphone: <span class="price">&pound; 699</span> / <span class="price">&yen;
120,000</span></li>
 <li>Headset: <span class="price">&cent; 9,999</span></li>
</ul>
</div>

<div class="card">
<h2>� Contoh Kode HTML</h2>
<p>Cara menulis tag HTML di halaman web:</p>
<pre style="background: #2c3e50; color: #ecf0f1; padding: 10px; border-radius: 5px;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Judul Halaman&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<div class="card">
<h2>� Rating & Review</h2>
<p>Rating: &star; &star; &star; &star; &star; (5/5)</p>
<p>Status: &check; Tersedia | &cross; Habis</p>
<p>Favorite: &hearts; &hearts; &hearts;</p>
</div>

<footer>
<p>&copy; 2024 Belajar HTML Entities | &reg; All Rights Reserved | &trade; Trademark</p>
<p>Dibuat dengan &hearts; untuk pembelajaran HTML</p>
</footer>
</body>
</html>
 BAB 4: OPTIMASI DAN STYLING
MATERI 8: META TAGS

Memberi Informasi tentang Website

Pengertian Meta Tags

Meta tags adalah potongan kode di dalam <head> yang memberikan informasi
tentang website ke browser dan mesin pencari. Meta tags tidak terlihat di halaman,
tapi sangat penting untuk SEO (Search Engine Optimization) dan fungsionalitas
website.

Perumpamaan KTP Website

Seperti KTP yang berisi nama, alamat, tanggal lahir, meta tag adalah "KTP" website
yang memberi tahu siapa pembuatnya, deskripsi website, kata kunci, dan informasi
penting lainnya.

Struktur Dasar Meta Tags

<head>
<meta charset="UTF-8">
<meta name="description" content="Deskripsi website">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Nama Pembuat">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Jenis-Jenis Meta Tags

1. Charset - Set Karakter

<meta charset="UTF-8">

- Fungsi: Mendukung semua karakter (termasuk emoji, aksara non-Latin)

- Wajib: Ya, di baris pertama <head>
2. Description - Deskripsi Website

<meta name="description" content="Belajar HTML dari nol sampai mahir dengan tutorial
praktis">

- Fungsi: Muncul di hasil pencarian Google

- Panjang: 50-160 karakter
- SEO: Sangat penting!
3. Keywords - Kata Kunci

<meta name="keywords" content="HTML, belajar HTML, tutorial HTML, web development">

- Fungsi: Dulu untuk SEO, sekarang kurang penting

- Catatan: Google sudah tidak menggunakan ini untuk ranking
4. Author - Pembuat Website
 <meta name="author" content="Ahmad Wijaya">

5. Viewport - Tampilan Mobile

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- Fungsi: Membuat website responsive di mobile

- Wajib: Ya untuk website modern!
6. Robots - Instruksi ke Mesin Pencari

<!-- Index halaman ini -->

<meta name="robots" content="index, follow">

<!-- Jangan index halaman ini -->

<meta name="robots" content="noindex, nofollow">

<!-- Hanya ikuti link, tapi jangan index -->

<meta name="robots" content="noindex, follow">

7. Refresh - Redirect Otomatis

<!-- Redirect ke halaman lain setelah 5 detik -->

<meta http-equiv="refresh" content="5; url=[Link]

8. Open Graph (Facebook, WhatsApp, LinkedIn)

<meta property="og:title" content="Judul Website">

<meta property="og:description" content="Deskripsi website">
<meta property="og:image" content="[Link]
<meta property="og:url" content="[Link]
<meta property="og:type" content="website">

9. Twitter Card

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="Judul Website">
<meta name="twitter:description" content="Deskripsi website">
<meta name="twitter:image" content="[Link]

Contoh Lengkap Meta Tags

<!DOCTYPE html>
<html lang="id">
<head>
<!-- ========== META DASAR ========== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ========== META UNTUK SEO ========== -->

<title>Belajar HTML - Tutorial Lengkap untuk Pemula</title>
<meta name="description" content="Tutorial HTML lengkap dari dasar hingga mahir. Cocok untuk
pemula yang ingin menjadi web developer. Dilengkapi contoh kode dan latihan praktis.">
 <meta name="keywords" content="HTML, belajar HTML, tutorial HTML, web development, coding
untuk pemula">
<meta name="author" content="Ahmad Wijaya">
<meta name="robots" content="index, follow">

<!-- ========== META UNTUK SOCIAL MEDIA (Open Graph) ========== -->
<meta property="og:title" content="Belajar HTML - Tutorial Lengkap untuk Pemula">
<meta property="og:description" content="Tutorial HTML lengkap dari dasar hingga mahir. Cocok
untuk pemula yang ingin menjadi web developer.">
<meta property="og:image" content="[Link]
<meta property="og:url" content="[Link]
<meta property="og:type" content="website">
<meta property="og:locale" content="id_ID">

<!-- ========== META UNTUK TWITTER ========== -->

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Belajar HTML - Tutorial Lengkap untuk Pemula">
<meta name="twitter:description" content="Tutorial HTML lengkap dari dasar hingga mahir.">
<meta name="twitter:image" content="[Link]

<!-- ========== META LAINNYA ========== -->

<meta name="theme-color" content="#667eea"> <!-- Warna tab browser (mobile) -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Web app mode iOS -->

<link rel="icon" type="image/png" href="[Link]">

</head>
<body>
<h1>Selamat Datang di Tutorial HTML</h1>
<p>Website ini dioptimalkan dengan meta tags untuk SEO dan media sosial.</p>
</body>
</html>

Pengaruh Meta Tags di Hasil Pencarian

Tanpa meta description:

Belajar HTML
[Link]
Ini adalah halaman tentang HTML. HTML adalah...

Dengan meta description:

Belajar HTML - Tutorial Lengkap untuk Pemula

[Link]
Tutorial HTML lengkap dari dasar hingga mahir. Cocok untuk pemula yang ingin menjadi web developer...

Tips Meta Tags untuk SEO

1. Setiap halaman punya meta description unik - Jangan sama semua halaman
2. Masukkan keyword di meta description - Tapi tetap natural
3. Panjang ideal 50-160 karakter - Terlalu pendek/potong tidak bagus
4. Gunakan Open Graph untuk share ke sosial media - Gambar akan muncul
otomatis
5. Viewport WAJIB untuk website mobile-friendly

Latihan Soal
Soal 1: Meta tag apa yang membuat website responsive di mobile?
A. <meta mobile>
B. <meta viewport> ✓
C. <meta responsive>
D. <meta screen>

Jawaban: B

<meta name="viewport" content="width=device-width, initial-scale=1.0">

membuat website menyesuaikan dengan lebar layar perangkat mobile.

Soal 2: Apa fungsi meta description?

A. Membuat teks deskripsi di website
B. Memberi deskripsi ke mesin pencari ✓
C. Mengatur warna website
D. Menambah gambar

Jawaban: B
Meta description memberikan deskripsi singkat tentang halaman ke mesin pencari,
yang biasanya ditampilkan di hasil pencarian.

Soal 3: Di mana meta tags diletakkan?

A. <body>
B. <footer>
C. <head> ✓
D. <div>

Jawaban: C
Meta tags diletakkan di dalam tag <head> karena berisi informasi tentang dokumen,
bukan konten yang terlihat.

Praktik Langsung
Tugas: Buat halaman website dengan meta tags lengkap untuk:
- SEO (description, keywords, author)
- Social media (Open Graph untuk Facebook)
- Mobile responsive (viewport)

Kode referensi:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<title>Portofolio | Ahmad Wijaya - Web Developer</title>

<!-- SEO Meta Tags -->

<meta name="description" content="Portofolio Ahmad Wijaya - Web Developer profesional.
Spesialisasi di HTML5, CSS3, JavaScript, dan pembuatan website responsif.">
<meta name="keywords" content="portofolio, web developer, HTML, CSS, JavaScript, website
developer">
<meta name="author" content="Ahmad Wijaya">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->

<meta property="og:type" content="website">
<meta property="og:url" content="[Link]
<meta property="og:title" content="Portofolio | Ahmad Wijaya - Web Developer">
<meta property="og:description" content="Portofolio Ahmad Wijaya - Web Developer profesional.
Lihat proyek-proyek terbaru saya.">
<meta property="og:image" content="[Link]

<!-- Twitter -->

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="[Link]
<meta property="twitter:title" content="Portofolio | Ahmad Wijaya - Web Developer">
<meta property="twitter:description" content="Portofolio Ahmad Wijaya - Web Developer
profesional. Lihat proyek-proyek terbaru saya.">
<meta property="twitter:image" content="[Link]

<!-- Other -->

<meta name="theme-color" content="#667eea">
<link rel="icon" type="image/x-icon" href="[Link]">
</head>
<body>
<h1>Portofolio Ahmad Wijaya</h1>
<p>Web Developer dengan pengalaman 3+ tahun</p>

<h2>Proyek Terbaru</h2>
<ul>
<li>Website E-commerce</li>
<li>Aplikasi To-Do List</li>
<li>Portofolio Gallery</li>
</ul>

<footer>
<p>&copy; 2024 Ahmad Wijaya</p>
</footer>
</body>
</html>
 MATERI 9: STYLE INLINE

Memberi Gaya Langsung pada Elemen

Pengertian Style Inline

Style inline adalah cara memberi gaya CSS langsung pada satu elemen
menggunakan atribut style. Ini seperti memberi "baju khusus" untuk satu elemen
saja, tanpa mempengaruhi elemen lain.

Perumpamaan Baju Khusus

Bayangkan Anda punya baju khusus untuk acara tertentu - Anda langsung
memakainya tanpa perlu aturan khusus dari lemari. Style inline seperti itu - gaya
khusus untuk satu elemen saja, tidak mempengaruhi elemen lain yang mirip.

Struktur Dasar Style Inline

<element style="property: value;">

Contoh:

<p style="color: red;">Teks ini berwarna merah</p>

<p style="font-size: 20px;">Teks ini ukuran 20 pixel</p>
<p style="text-align: center;">Teks ini di tengah</p>

Properti CSS yang Sering Dipakai

Properti Fungsi Contoh Nilai

color Warna teks red, #ff0000, rgb(255,0,0)

background-color Warna latar yellow, #00ff9d

font-size Ukuran huruf 16px, 1.5rem, large

font-family Jenis huruf Arial, 'Segoe UI'

font-weight Ketebalan bold, normal

text-align Perataan teks center, right, justify

padding Jarak dalam 10px, 20px 10px

margin Jarak luar 10px, auto

 Properti Fungsi Contoh Nilai

border Garis tepi 1px solid black

border-radius Sudut melengkung 5px, 50%

width Lebar 100px, 50%

height Tinggi 100px, auto

display Tipe tampilan block, inline, flex

Contoh Lengkap Style Inline

<!DOCTYPE html>
<html>
<head>
<title>Style Inline - Latihan</title>
</head>
<body>
<h1 style="color: #667eea; text-align: center; font-family: Arial;">
Belajar Style Inline
</h1>

<p style="color: #333; font-size: 16px; line-height: 1.6;">

Ini adalah paragraf dengan style inline.
<span style="color: red; font-weight: bold;">Teks merah dan tebal</span>
ini menggunakan span dengan style inline.
</p>

<div style="background-color: #f0f0f0; padding: 20px; border-radius: 10px; margin: 20px 0;">
<h2 style="margin-top: 0;">Card dengan Style Inline</h2>
<p style="margin-bottom: 0;">Div ini memiliki background abu-abu, padding, dan sudut
melengkung.</p>
</div>

<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none;
border-radius: 5px; cursor: pointer;">
Klik Saya
</button>

<img src="[Link]
style="border: 3px solid #667eea; border-radius: 10px; margin-top: 20px;">
</body>
</html>

Kapan Menggunakan Style Inline?

Cocok digunakan saat:
- Styling khusus untuk satu elemen (testing cepat)
- Email HTML (kebanyakan email client tidak support CSS external)
 - Dinamis dengan JavaScript (mengubah style saat ada event)
- Halaman satu kali (landing page sederhana)

TIDAK cocok digunakan saat:

- Banyak elemen butuh gaya yang sama (gunakan class)
- Website besar dengan banyak halaman (gunakan file CSS eksternal)
- Maintenance jangka panjang (sulit diubah)

Perbandingan Metode Styling

Metode Kelebihan Kekurangan Kapan Pakai

Repetitif, susah Testing, email,

Inline Langsung, spesifik
maintenance dinamis

Internal Tidak reusable antar

Satu file, mudah Halaman tunggal
(<style>) halaman

External (file Reusable, rapi,

Perlu file tambahan Website besar
.css) cache

Pro Tips
1. Gunakan untuk testing cepat - Coba gaya baru tanpa buat file CSS
2. Hindari untuk produksi - Kecuali email HTML atau situasi khusus
3. Spesifisitas tinggi - Style inline override style dari file CSS
4. JavaScript friendly - Mudah diubah dengan [Link]

javascript

// Mengubah style inline dengan JavaScript

[Link]("myElement").[Link] = "blue";

Latihan Soal
Soal 1: Bagaimana cara memberi style inline?
A. Menggunakan tag <style>
B. Atribut style di tag pembuka ✓
C. File CSS terpisah
D. Tidak bisa

Jawaban: B
Style inline ditulis langsung di atribut style pada tag pembuka elemen.

Soal 2: Properti CSS untuk warna teks adalah?

A. text-color
B. font-color
C. color ✓
D. foreground
Jawaban: C
Properti color digunakan untuk mengatur warna teks di CSS.

Soal 3: Kapan sebaiknya menggunakan style inline?

A. Untuk semua elemen di website besar
B. Untuk testing cepat atau styling unik satu elemen ✓
C. Tidak pernah
D. Hanya untuk gambar

Jawaban: B
Style inline cocok untuk testing cepat, styling unik satu elemen, atau email HTML.

Praktik Langsung
Tugas: Buat kartu produk dengan style inline:
- Container div dengan border, padding, border-radius
- Judul produk dengan warna dan font tertentu
- Harga dengan warna hijau dan ukuran besar
- Tombol beli dengan background warna dan efek hover

Kode referensi:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Latihan Style Inline - Kartu Produk</title>
</head>
<body style="font-family: 'Segoe UI', Arial, sans-serif; background: #f5f5f5; padding: 20px;">

<div style="max-width: 350px; margin: 0 auto; background: white; border-radius: 15px; overflow:
hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">

<!-- Gambar Produk -->

<img src="[Link]
alt="Produk"
style="width: 100%; height: 200px; object-fit: cover;">

<!-- Konten -->

<div style="padding: 20px;">
<h2 style="margin: 0 0 10px 0; color: #333;">
SmartWatch Pro X
</h2>

<p style="color: #666; margin-bottom: 15px; line-height: 1.5;">

Jam tangan pintar dengan fitur kesehatan lengkap, tahan air,
dan baterai super tahan lama.
</p>

<div style="margin-bottom: 20px;">

<span style="font-size: 24px; color: #2e7d32; font-weight: bold;">
Rp999.000
</span>
 <span style="text-decoration: line-through; color: #999; margin-left: 10px;">
Rp1.500.000
</span>
<span style="background: #ff9800; color: white; padding: 2px 8px; border-radius: 20px;
font-size: 12px; margin-left: 10px;">
Diskon 33%
</span>
</div>

<button style="width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2

100%); color: white; border: none; padding: 12px; border-radius: 8px; font-size: 16px; cursor:
pointer;">
� Beli Sekarang
</button>
</div>
</div>

</body>
</html>
 BAB 5: PROYEK AKHIR
MATERI 10: PROJECT AKHIR - MEMBUAT PROFIL PRIBADI
PROFESIONAL

Menerapkan Semua yang Telah Dipelajari

Tujuan Proyek
Selamat! Anda telah mempelajari semua materi HTML lanjutan. Sekarang saatnya
menggabungkan semuanya menjadi sebuah website profil pribadi yang profesional
dan lengkap.

Spesifikasi Website
Website profil pribadi Anda harus mencakup:
1. Struktur Semantic HTML - Header, nav, main, article, aside, footer
2. Meta Tags lengkap - SEO, Open Graph, viewport
3. Tabel - Untuk menampilkan skill atau jadwal
4. Form - Untuk kontak atau newsletter
5. Audio/Video - Musik latar atau video profil
6. Iframe - Peta lokasi atau video YouTube
7. Karakter Khusus - Simbol copyright, mata uang, dll
8. Style Inline - Untuk beberapa elemen spesifik
9. Div dan Span - Untuk pengelompokan dan styling
10. List (ul/ol) - Untuk pengalaman, pendidikan, dll

Kode Final Project

<!DOCTYPE html>
<html lang="id">
<head>
<!-- ========== META TAGS ========== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<title>Profil | Ahmad Wijaya - Web Developer Portfolio</title>

<!-- SEO Meta -->

<meta name="description" content="Portofolio profesional Ahmad Wijaya - Web Developer
dengan pengalaman 3+ tahun. Spesialisasi HTML5, CSS3, JavaScript, dan pengembangan website
responsif.">
<meta name="keywords" content="portofolio, web developer, HTML, CSS, JavaScript, frontend
developer">
<meta name="author" content="Ahmad Wijaya">
<meta name="robots" content="index, follow">

<!-- Open Graph / Social Media -->

<meta property="og:type" content="website">
<meta property="og:title" content="Ahmad Wijaya - Web Developer Portfolio">
<meta property="og:description" content="Portofolio profesional Ahmad Wijaya - Web Developer.
Lihat proyek dan pengalaman saya.">
<meta property="og:image" content="[Link]
 <meta property="og:url" content="[Link]

<!-- Twitter Card -->

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ahmad Wijaya - Web Developer Portfolio">
<meta name="twitter:description" content="Portofolio profesional Ahmad Wijaya - Web
Developer.">
<meta name="twitter:image" content="[Link]

<!-- Other -->

<meta name="theme-color" content="#667eea">

<!-- CSS Internal (untuk styling yang reusable) -->

<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: #f0f2f5;
}

/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 3rem 1rem;
}

header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}

/* Navigation */
nav {
background: #2c3e50;
padding: 1rem;
text-align: center;
position: sticky;
top: 0;
z-index: 100;
}

nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background 0.3s;
}

nav a:hover {
background: #34495e;
}

/* Main Layout */
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}

/* Article / Cards */
article {
background: white;
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

article h2 {
color: #667eea;
margin-bottom: 1rem;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}

/* Aside / Sidebar */
aside {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
height: fit-content;
}

aside h3 {
color: #667eea;
margin-bottom: 1rem;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}

/* Table */
.skill-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

.skill-table th, .skill-table td {

border: 1px solid #ddd;
 padding: 8px;
text-align: left;
}

.skill-table th {
background: #667eea;
color: white;
}

/* Form */
.form-group {
margin-bottom: 1rem;
}

.form-group label {
display: block;
margin-bottom: 0.3rem;
font-weight: bold;
}

.form-group input, .form-group textarea {

width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 5px;
}

button {
background: #667eea;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background: #5a67d8;
}

/* Responsive */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
}
}

/* Footer */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 1.5rem;
margin-top: 2rem;
}

footer a {
 color: white;
text-decoration: none;
}
</style>
</head>
<body>

<!-- ========== HEADER ========== -->

<header>
<h1 style="letter-spacing: 2px;">� Ahmad Wijaya</h1>
<p style="font-size: 1.2rem;">Web Developer | UI/UX Enthusiast | Content Creator</p>
<p style="margin-top: 0.5rem;">
<span style="background: rgba(255,255,255,0.2); padding: 0.3rem 0.8rem; border-radius:
20px;">
� Jakarta, Indonesia
</span>
</p>
</header>

<!-- ========== NAVIGATION ========== -->

<nav>
<a href="#home">� Beranda</a>
<a href="#about">� Tentang</a>
<a href="#projects">� Proyek</a>
<a href="#skills">� Skill</a>
<a href="#contact">� Kontak</a>
</nav>

<!-- ========== MAIN CONTENT ========== -->

<main>
<!-- Kolom Kiri: Artikel -->
<div>
<!-- Home Section -->
<article id="home">
<h2>� Selamat Datang di Portofolio Saya</h2>
<p>
Halo! Saya <strong>Ahmad Wijaya</strong>, seorang <em>web developer</em>
dengan pengalaman
3+ tahun dalam membangun website yang responsif, cepat, dan user-friendly.
</p>
<p>
Saya spesialis di <strong>HTML5, CSS3, JavaScript</strong>, dan framework modern
seperti
<strong>[Link]</strong>. Saya juga aktif membagikan pengetahuan melalui blog dan
konten edukasi tentang web development.
</p>
<div style="background: #f0f0f0; padding: 1rem; border-radius: 10px; margin-top: 1rem;">
<p style="margin: 0;">
<span style="font-weight: bold;">� Quote favorit:</span>
<em>"Kode yang baik adalah kode yang bisa dipahami oleh manusia"</em>
</p>
</div>
</article>

<!-- About Section -->

<article id="about">
<h2>� Tentang Saya</h2>
 <p>
Saya lulusan <strong>Teknik Informatika</strong> dari Universitas Indonesia dengan
fokus pada pengembangan web. Saya memulai karir sebagai freelancer dan sekarang
bekerja sebagai frontend developer di perusahaan teknologi.
</p>

<h3 style="margin-top: 1rem;">� Pendidikan</h3>

<ul>
<li><strong>S1 Teknik Informatika</strong> - Universitas Indonesia (2016-2020)</li>
<li><strong>Full Stack Web Development Bootcamp</strong> - Online Course
(2021)</li>
</ul>

<h3>� Pengalaman Kerja</h3>

<ol>
<li><strong>Frontend Developer</strong> - PT Tech Inovasi (2022-sekarang)</li>
<li><strong>Web Developer Freelance</strong> - Self-employed (2020-2022)</li>
<li><strong>Intern Web Developer</strong> - Startup Digital (2019)</li>
</ol>
</article>

<!-- Projects Section -->

<article id="projects">
<h2>� Proyek Unggulan</h2>

<div style="margin-bottom: 1.5rem;">

<h3>� E-commerce Platform</h3>
<p>Platform belanja online dengan fitur keranjang, checkout, dan payment
gateway.</p>
<p><strong>Teknologi:</strong> HTML5, CSS3, JavaScript, [Link], [Link]</p>
</div>

<div style="margin-bottom: 1.5rem;">

<h3>� Blog Personal</h3>
<p>Blog tentang web development dengan sistem komentar dan kategori.</p>
<p><strong>Teknologi:</strong> Semantic HTML, CSS Grid, JavaScript,
LocalStorage</p>
</div>

<div>
<h3>� Portfolio Gallery</h3>
<p>Galeri portofolio interaktif dengan filter kategori dan lightbox preview.</p>
<p><strong>Teknologi:</strong> HTML5, CSS Flexbox, JavaScript, Lightbox</p>
</div>
</article>
</div>

<!-- Kolom Kanan: Sidebar -->

<aside>
<h3>� Foto Profil</h3>
<img src="[Link]
alt="Foto profil Ahmad"
style="width: 100%; border-radius: 10px; margin-bottom: 1rem;">

<h3>� Skill & Keahlian</h3>

<table class="skill-table">
<tr>
 <th>Skill</th>
<th>Level</th>
</tr>
<tr>
<td>HTML5 & Semantic HTML</td>
<td style="color: #2e7d32;">★★★★★</td>
</tr>
<tr>
<td>CSS3 & Flexbox/Grid</td>
<td style="color: #2e7d32;">★★★★★</td>
</tr>
<tr>
<td>JavaScript</td>
<td style="color: #ff9800;">★★★★☆</td>
</tr>
<tr>
<td>[Link]</td>
<td style="color: #ff9800;">★★★☆☆</td>
</tr>
<tr>
<td>UI/UX Design</td>
<td style="color: #ff9800;">★★★★☆</td>
</tr>
</table>

<h3>� Favorite Music</h3>

<audio controls style="width: 100%; margin: 0.5rem 0;">
<source src="[Link]
type="audio/mpeg">
Browser tidak mendukung audio
</audio>
<p><small>� Relaxing music for coding</small></p>

<h3>� Lokasi Saya</h3>

<div style="position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 1rem;">
<iframe

src="[Link]
8677!3d-
6.208670!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf
0fdad786a2!2sMonas!5e0!3m2!1sid!2sid!4v1234567890"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>

<h3>� Kirim Pesan</h3>

<form action="#" method="POST">
<div class="form-group">
<label for="name">Nama</label>
<input type="text" id="name" name="name" placeholder="Nama Anda" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="email@[Link]"
required>
 </div>
<div class="form-group">
<label for="message">Pesan</label>
<textarea id="message" name="message" rows="3" placeholder="Tulis pesan
Anda..."></textarea>
</div>
<button type="submit">Kirim Pesan</button>
</form>

<h3 style="margin-top: 1.5rem;"> Media Sosial</h3>

<p>
<a href="#" style="color: #667eea; text-decoration: none;">� Instagram</a>
&nbsp;|&nbsp;
<a href="#" style="color: #667eea; text-decoration: none;">� GitHub</a> &nbsp;|&nbsp;
<a href="#" style="color: #667eea; text-decoration: none;">� LinkedIn</a>
</p>
</aside>
</main>

<!-- ========== FOOTER ========== -->

<footer>
<p>&copy; 2024 Ahmad Wijaya. All rights reserved. | Made with &hearts; for learning HTML</p>
<p style="margin-top: 0.5rem; font-size: 0.8rem;">
<a href="#">Privacy Policy</a> |
<a href="#">Terms of Service</a> |
<a href="#">Sitemap</a>
</p>
</footer>
</body>
</html>

Checklist Proyek

Pastikan website Anda memiliki:

Komponen Status Catatan

Semantic HTML (header, nav, main, article,

aside, footer)
√ Semua tag semantic digunakan

Meta Tags lengkap √ SEO, Open Graph, viewport

Tabel √ Tabel skill dengan level

Form √ Form kontak di sidebar

Audio/Video √ Audio player di sidebar

Iframe √ Peta Google Maps

Karakter Khusus √ ©, ♥, dll

 Komponen Status Catatan

Style Inline √ Pada header dan beberapa elemen

Div dan Span √ Pengelompokan konten

List (ul/ol) √ Pendidikan dan pengalaman

Selamat!
Anda telah menyelesaikan HTML Lanjutan: Mastering Intermediate HTML dan
berhasil membuat website profil pribadi yang profesional!

Apa yang sudah Anda kuasai:

 Tabel kompleks dengan rowspan/colspan
 Form dengan berbagai jenis input
 Semantic HTML untuk struktur website modern
 Audio dan video player
 Iframe untuk menyisipkan konten eksternal
 Karakter khusus untuk simbol
 Meta tags untuk SEO
 Style inline untuk styling cepat
 PENUTUP

Perjalanan Anda Selanjutnya

Selamat! Anda sekarang telah menguasai HTML dari dasar hingga tingkat lanjut.
Anda memiliki fondasi yang kuat untuk melanjutkan ke teknologi web lainnya.

Langkah Selanjutnya
1. CSS (Cascading Style Sheets) - Pelajari styling lebih dalam (Flexbox, Grid,
Animations)
2. JavaScript - Buat website interaktif dengan logika pemrograman
3. Responsive Design - Buat website yang bagus di semua device
4. Git & GitHub - Version control untuk proyek profesional
5. Framework - [Link], [Link], atau Angular

Rekomendasi Sumber Belajar

 MDN Web Docs - Dokumentasi paling lengkap
 W3Schools - Tutorial praktis dengan contoh
 freeCodeCamp - Kurikulum gratis dengan sertifikasi
 YouTube - Web Programming UNPAS, Programmer Zaman Now

Pesan Motivasi
"Kemahiran tidak datang dalam semalam. Setiap ahli pernah menjadi pemula.
Teruslah belajar, teruslah berkarya, dan jangan takut membuat kesalahan. Setiap
error adalah pelajaran berharga."

Tetap semangat dan selamat berkoding!

Hak Cipta © 2024

Dilarang memperbanyak atau mendistribusikan ebook ini tanpa izin tertulis dari
penerbit. Untuk pembelajaran pribadi, Anda diperbolehkan mencetak untuk
penggunaan sendiri.