MASTERING HTML DARI NOL SAMPAI PROFESIONAL

Panduan Lengkap Belajar HTML untuk Pemula

Bagian 1

Penulis: Tim Pengembang Materi HTML MustD

Editor: MustD
Edisi: Pertama, 2024
Format: Ebook Interaktif

i
 KATA PENGANTAR

Assalamu'alaikum warahmatullahi wabarakatuh dan salam sejahtera bagi kita

semua.
Pertama-tama, saya ingin mengucapkan selamat datang di perjalanan Anda
mempelajari HTML. Mungkin Anda bertanya-tanya, "Apakah saya bisa menguasai
HTML meskipun tidak memiliki latar belakang teknologi?" Jawabannya: SANGAT
BISA!
Ebook ini dirancang khusus untuk pemula absolut - orang yang mungkin baru
pertama kali mendengar tentang HTML, atau bahkan baru pertama kali membuka
komputer untuk belajar coding. Saya percaya bahwa setiap orang memiliki potensi
untuk menjadi pembuat website, bukan hanya pengguna website.
Ebook ini merupakan pengantar materi interaktif pada website
[Link] yang digunakan sebagai modul belajar
peserta sudah terdaftar di sistem kami.

Mengapa Ebook Ini Berbeda?

Ebook ini tidak hanya mengajarkan teori, tetapi juga memberikan:
1. Perumpamaan dunia nyata yang mudah dipahami
2. Latihan praktis di setiap materi
3. Soal evaluasi untuk menguji pemahaman
4. Kode contoh yang bisa langsung dicoba
5. Tips dan trik dari praktisi berpengalaman

Target Pembaca
Ebook ini cocok untuk:
1. Pelajar yang ingin memulai karir di bidang teknologi
2. Profesional non-IT yang ingin membuat website sendiri
3. Wirausahawan yang ingin memahami teknologi website
4. Siapa saja yang ingin belajar dari nol tanpa tekanan

Cara Menggunakan Ebook Ini

1. Baca perlahan - Jangan terburu-buru, pahami setiap konsep
2. Praktek langsung - Setiap materi memiliki kode yang bisa Anda coba
3. Kerjakan soal - Evaluasi pemahaman Anda di setiap akhir materi
4. Ulangi jika perlu - Tidak masalah membaca ulang materi yang sulit

Sekarang, mari kita mulai perjalanan menakjubkan ini. Dunia website menunggu
Anda!

ii
 Daftar Isi

KATA PENGANTAR..................................................................................................................ii
BAB 1: DASAR-DASAR HTML ................................................................................................. 1
MATERI 1: APA ITU HTML?................................................................................................ 1
MATERI 2: TAG, ELEMEN, DAN ATRIBUT .......................................................................... 4
MATERI 3: STRUKTUR DASAR HTML ................................................................................. 7
BAB 2: MEMFORMAT TEKS .................................................................................................. 11
MATERI 4: HEADING - MEMBUAT JUDUL ........................................................................ 11
MATERI 5: PARAGRAPH - MENULIS TEKS ........................................................................ 15
MATERI 6: TEXT FORMATTING ....................................................................................... 19
MATERI 7: KOMENTAR DI HTML ..................................................................................... 23
BAB 3: MENAMBAH ELEMEN MULTIMEDIA .......................................................................... 28
MATERI 8: LINK - MENGHUBUNGKAN HALAMAN ............................................................. 28
MATERI 9: GAMBAR - MEMPERCANTIK HALAMAN ........................................................... 33
MATERI 10: LIST - MEMBUAT DAFTAR ............................................................................ 38
BAB 4: PROYEK AKHIR ........................................................................................................ 44
PROYEK: MEMBUAT HALAMAN PROFIL SEDERHANA ....................................................... 44
PENUTUP............................................................................................................................. 50

iii
 BAB 1: DASAR-DASAR HTML
MATERI 1: APA ITU HTML?

Memahami Bahasa Dasar Pembuat Website

Pengertian HTML
Selamat datang di materi pertama! Inilah awal dari perjalanan Anda menjadi
seorang web developer.
HTML adalah singkatan dari HyperText Markup Language. Mungkin terdengar
rumit, tapi sebenarnya konsepnya sangat sederhana.
Bayangkan Anda ingin membangun sebuah rumah. Sebelum rumah berdiri kokoh,
Anda membutuhkan kerangka - tembok, lantai, atap, pintu, dan jendela. Tanpa
kerangka ini, rumah tidak akan berdiri. Nah, HTML adalah kerangka dari website!
Setiap website yang pernah Anda kunjungi - Google, YouTube, Instagram,
Tokopedia, semuanya - memiliki HTML sebagai fondasinya. Tanpa HTML, yang Anda
lihat di browser hanyalah layar kosong.

Sejarah Singkat HTML

HTML pertama kali diciptakan oleh Tim Berners-Lee pada tahun 1991. Saat itu,
beliau bekerja di CERN (organisasi penelitian fisika nuklir di Eropa). Awalnya, HTML
hanya digunakan untuk berbagi dokumen ilmiah antar peneliti.
Namun, siapa sangka? Ide sederhana ini berkembang menjadi fondasi dari SEMUA
website yang ada di internet saat ini! Dari yang paling sederhana hingga yang paling
kompleks, semuanya menggunakan HTML.

Karakteristik Penting HTML

Ada satu hal penting yang harus Anda pahami sejak awal: HTML BUKAN bahasa
pemrograman.

Apa bedanya? Mari saya jelaskan dengan perumpamaan:

 Bahasa pemrograman (seperti JavaScript, Python, PHP) seperti robot yang
bisa berpikir, menghitung, dan mengambil keputusan. "Jika pengguna klik
tombol ini, maka tampilkan pesan selamat datang."
 HTML (bahasa markup) seperti tukang cat yang hanya memberi warna dan
tanda. "Teks ini judul, teks ini paragraf, ini gambarnya."
HTML hanya memberi "tanda" atau "markup" pada teks agar komputer tahu cara
menampilkannya. Seperti Anda memberi tanda pada Ebook dengan stabilo - mana
yang jadi judul, mana yang paragraf, mana yang gambar, mana yang penting.

Perumpamaan Rumah
Agar lebih mudah memahami HTML, bayangkan proses membangun rumah:
Komponen Rumah Komponen HTML Fungsi

Pondasi <!DOCTYPE html> Memberi tahu browser ini HTML modern

1
Komponen Rumah Komponen HTML Fungsi

Kerangka bangunan Tag pembuka-penutup Struktur dasar halaman

Tembok <body> Menampung semua konten

Atap <head> Melindungi informasi penting

Pintu & Jendela <a> dan <img> Koneksi ke halaman lain dan gambar

Cat & Dekorasi Atribut Informasi tambahan pada elemen

Perumpamaan Ebook Resep

Cara lain untuk memahami HTML adalah dengan membayangkan Ebook resep
masakan:

Ebook Resep Masakan HTML

─────────────────────────────────────────
Judul resep → <h1> (heading)
Daftar bahan → <ul> (unordered list)
Langkah-langkah → <ol> (ordered list)
Gambar masakan → <img> (image)
Catatan khusus → <p> (paragraph)
Tips dari chef → <em> atau <strong>

Setiap elemen dalam Ebook resep memiliki fungsi spesifik, sama seperti tag HTML!

Mengapa Anda Harus Belajar HTML?

Mungkin Anda bertanya, "Di era sekarang dengan berbagai platform pembuat
website (Wix, Squarespace, WordPress), mengapa saya masih perlu belajar HTML?"

Jawabannya:
1. Kontrol penuh - Dengan menguasai HTML, Anda bisa membuat website persis
seperti yang Anda inginkan, tanpa batasan template
2. Dasar untuk teknologi lain - CSS (untuk styling) dan JavaScript (untuk
interaktivitas) sama-sama membutuhkan HTML
3. Peluang karir - Web developer masih menjadi salah satu profesi dengan
permintaan tertinggi
4. Memperbaiki website sendiri - Tidak perlu selalu bergantung pada orang lain
untuk perubahan kecil
5. Memahami internet - HTML adalah fondasi World Wide Web, memahaminya
berarti memahami bagaimana internet bekerja

Ringkasan Materi
 HTML = HyperText Markup Language
 HTML adalah kerangka website
 HTML bukan bahasa pemrograman, tapi bahasa markup

2
  HTML menggunakan tag untuk menandai elemen
 Semua website di dunia menggunakan HTML

Latihan Soal
Soal 1: Apa kepanjangan dari HTML?
A. HyperText Markup Language ✓
B. HighTech Modern Language
C. HyperTransfer Markup Language
D. Home Tool Markup Language

Jawaban: A
HyperText Markup Language adalah kepanjangan yang benar dari HTML.

Soal 2: HTML adalah...

A. Bahasa pemrograman
B. Bahasa markup ✓
C. Aplikasi editor
D. Mesin pencari

Jawaban: B
HTML adalah bahasa markup, bukan bahasa pemrograman. Fungsinya adalah
memberi tanda pada teks, bukan melakukan logika pemrograman.

Praktik Langsung
Sekarang saatnya Anda mencoba! Buka text editor (Notepad, VS Code, atau
bahkan Notepad biasa), lalu ketik kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertamaku. Aku sedang belajar HTML!</p>
</body>
</html>

Cara menjalankan:
 Simpan file dengan nama [Link]
 Buka file tersebut dengan double-click (akan terbuka di browser)
 Lihat hasilnya!
 Selamat! Anda baru saja membuat website pertama Anda!

3
 MATERI 2: TAG, ELEMEN, DAN ATRIBUT

Mengenal Bahan Penyusun HTML

Pengertian Tiga Komponen Utama

Setelah memahami apa itu HTML, sekarang kita akan mempelajari tiga komponen
utamanya: Tag, Elemen, dan Atribut. Ketiganya seperti bahan bangunan yang harus
Anda pahami sebelum membangun struktur yang lebih kompleks.

1. Tag HTML
Tag adalah tanda kurung siku < > yang digunakan untuk menandai elemen
HTML. Contoh: <p> untuk paragraf, <h1> untuk judul.
Sebagian besar tag memiliki pasangan penutup dengan tanda slash: </p>. Tag
pembuka dan penutup bekerja seperti tangan yang membuka dan menutup -
semua yang ada di antara mereka akan terpengaruh oleh tag tersebut.

Contoh tag yang butuh penutup:

 <p> ... </p> (paragraf)
 <h1> ... </h1> (heading)
 <div> ... </div> (division/container)

Contoh tag yang tidak butuh penutup (self-closing):

 <br> (baris baru)
 <img> (gambar)
 <input> (form input)

2. Elemen HTML
Elemen adalah keseluruhan dari tag pembuka, konten, dan tag penutup.
Contoh: <p>Ini paragraf</p> adalah satu elemen lengkap.

Struktur elemen:
Tag Pembuka → Konten → Tag Penutup
↓ ↓ ↓
<p> Ini paragraf </p>
3. Atribut HTML
Atribut adalah informasi tambahan di dalam tag pembuka. Seperti "warna" pada
baju - bajunya sama tapi warnanya bisa berbeda.

Struktur atribut:
<nama_tag atribut="nilai">

Contoh:

<p align="center">Teks ini akan di tengah</p>

<img src="[Link]" alt="Pemandangan">

4
Perumpamaan Kotak Kado
Bayangkan Anda punya kotak kado:
Komponen Perumpamaan HTML

Kotak kado (ada tutup dan alas) Tag <div> dan </div>

Kotak + isi kado di dalamnya Elemen <div>Boneka</div>

Pita atau label pada kotak Atribut class="hadiah-ulang-tahun"

Atribut yang Sering Digunakan

Atribut Fungsi Contoh

id Memberi identitas unik id="judul-utama"

class Mengelompokkan elemen class="teks-merah"

style Memberi gaya langsung style="color: blue;"

title Tooltip saat hover title="Info tambahan"

src Sumber gambar/video src="[Link]"

href Tujuan link href="[Link]

Aturan Penting
1. Tag harus bersarang dengan benar
- JANGAN: <p><b>Teks</p></b>
- HARUS: <p><b>Teks</b></p>
2. Atribut harus punya nilai (kecuali atribut boolean) - disabled, checked, readonly
3. Gunakan tanda kutip untuk nilai atribut (bisa petik satu atau dua, konsistenlah)
4. Nama tag dan atribut tidak case-sensitive tapi biasanya ditulis lowercase

Latihan Soal
Soal 1: Manakah yang merupakan contoh tag HTML yang benar?
A. {p}
B. [p]
C. <p> ✓
D. (p)

Jawaban: C
Tag HTML ditulis dengan tanda kurung siku < >, bukan kurung kurawal, kurung siku
biasa, atau kurung biasa.

5
Soal 2: Apa fungsi atribut dalam HTML?
A. Menutup tag
B. Memberi informasi tambahan pada elemen ✓
C. Membuat elemen baru
D. Menghapus elemen

Jawaban: B
Atribut memberikan informasi tambahan tentang elemen, seperti sumber gambar,
lebar, tinggi, gaya, dll.

Praktik Langsung
Buat file HTML baru dan coba kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Latihan Tag, Elemen, Atribut</title>
</head>
<body>
<!-- Contoh berbagai elemen dengan atribut -->
<h1 id="judul-utama" style="color: navy;">Belajar HTML Itu Menyenangkan</h1>

<p class="teks-penting" title="Klik untuk info lebih lanjut">

Ini adalah paragraf dengan atribut <strong>class</strong> dan <strong>title</strong>.
</p>

<p style="color: red; font-size: 20px;">

Teks merah dan berukuran 20px menggunakan atribut style.
</p>

<img src="[Link]
alt="Gambar random dari Lorem Picsum"
title="Ini gambar keren!"
width="200">
</body>
</html>

Amati:
 Bagaimana atribut style mengubah tampilan
 Bagaimana atribut title menampilkan tooltip saat cursor di atas elemen
 Bagaimana atribut alt pada gambar (akan muncul jika gambar gagal dimuat)

6
 MATERI 3: STRUKTUR DASAR HTML

Membangun Kerangka Website

Struktur Wajib HTML

Setiap website HTML punya struktur wajib yang harus ada. Seperti rumah yang
harus punya pondasi, tembok, dan atap, website juga memiliki kerangka dasar yang
tidak boleh dilewatkan.
Berikut adalah struktur minimal HTML yang valid:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Konten website di sini
</body>
</html>

Penjelasan Detail Setiap Bagian

1. <!DOCTYPE html> - Deklarasi Tipe Dokumen
Baris pertama ini memberi tahu browser: "Halo, ini adalah dokumen HTML versi
5 (yang terbaru)!"
Mengapa ini penting? Tanpa deklarasi ini, browser akan menjalankan "mode
quirks" (mode aneh) yang bisa membuat tampilan website tidak sesuai harapan.
Selalu tulis deklarasi ini di baris pertama!

2. <html> - Akar Dokumen

Tag ini membungkus seluruh konten website. Semua kode HTML harus berada
di antara <html> dan </html>.

Atribut yang sering ditambahkan:

<html lang="id"> <!-- Memberi tahu browser halaman dalam bahasa Indonesia -->

3. <head> - Kepala Website

Kepala website berisi informasi meta (informasi tentang informasi) yang tidak
terlihat langsung oleh pengunjung. Ini seperti "kartu identitas" website.
Apa saja yang bisa ada di <head>?

<title> - Judul di tab browser

<meta> - Metadata (deskripsi, keyword, author, viewport)
<link> - Menghubungkan file CSS
<style> - CSS internal

7
 <script> - JavaScript (bisa juga di akhir body)

Contoh head yang lengkap:

<head>
<meta charset="UTF-8">
<meta name="description" content="Belajar HTML dari nol">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Nama Anda">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Profesional Saya</title>
<link rel="stylesheet" href="[Link]">
</head>

4. <title> - Judul Halaman

Teks yang muncul di tab browser, bookmark, dan hasil pencarian Google. Ini
adalah salah satu faktor penting untuk SEO (Search Engine Optimization).

Tips:
 Buat title yang deskriptif (5-10 kata)
 Tempatkan keyword di awal title
 Contoh bagus: "Belajar HTML Pemula - Tutorial Lengkap 2024"
 Contoh buruk: "Halaman 1"

5. <body> - Badan Website

Ini adalah tempat semua konten yang terlihat oleh pengunjung: teks, gambar,
video, tombol, form, dan sebagainya.

Perumpamaan Manusia
Agar lebih mudah mengingat struktur HTML, bayangkan tubuh manusia:
Struktur HTML Perumpamaan Manusia Fungsi

<!DOCTYPE
html> Akta kelahiran Identitas dokumen

<html> Seluruh tubuh Pembungkus utama

<head> Kepala Berisi informasi (tidak selalu terlihat)

<title> Nama di KTP Terlihat di tab browser

<body> Badan Semua yang terlihat dari luar

Checklist Struktur HTML

Sebelum memulai coding, pastikan struktur Anda memiliki:
1. <!DOCTYPE html> di baris pertama
2. Tag <html> pembuka dan penutup
3. Tag <head> dengan <title> di dalamnya
4. Tag <body> untuk semua konten

8
 5. Indentasi yang rapi (spasi/tab untuk hierarki)

Latihan Soal
Soal 1: Tag apa yang berisi semua konten yang terlihat di website?
A. <head>
B. <title>
C. <body> ✓
D. <html>

Jawaban: C
Tag <body> adalah tempat semua konten visual website. Apa pun yang ingin
ditampilkan ke pengunjung harus diletakkan di dalam <body>

Soal 2: Di manakah letak tag <title>?

A. Di dalam <body>
B. Di dalam <head> ✓
C. Di luar <html>
D. Di bawah <body>

Jawaban: B
Tag <title> harus berada di dalam <head>. Ini memberi tahu browser judul halaman
sebelum konten dimuat.

Praktik Langsung
Buat struktur HTML lengkap dengan komponen berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Website pertama saya untuk belajar HTML">
<meta name="author" content="Nama Saya">
<title>Belajar HTML - Website Pertamaku</title>
</head>
<body>
<!-- Semua konten website di sini -->
<h1>Selamat Datang di Website Saya!</h1>
<p>Ini adalah website pertama yang saya buat dengan struktur HTML lengkap.</p>
<p>Saya belajar tentang:</p>
<ul>
<li>Struktur dasar HTML</li>
<li>Tag dan elemen</li>
<li>Atribut</li>
</ul>
<p>Terima kasih sudah berkunjung!</p>
</body>
</html>

Simpan sebagai struktur_lengkap.html dan buka di browser.

9
Amati:
 Tab browser menampilkan judul "Belajar HTML - Website Pertamaku"
 Halaman web menampilkan semua konten yang ada di <body>
 Gunakan "View Page Source" (klik kanan di browser) untuk melihat struktur
HTML asli

10
 BAB 2: MEMFORMAT TEKS
MATERI 4: HEADING - MEMBUAT JUDUL

Mengatur Tingkatan Judul di Website

Pengertian Heading
Heading adalah tag untuk membuat judul atau subjudul. Ada 6 tingkatan dari <h1>
sampai <h6>. Semakin kecil angkanya, semakin besar dan penting judul tersebut.

Perumpamaan Koran
Bayangkan Anda membaca koran:
Heading Perumpamaan Koran Penggunaan

<h1> Judul utama di halaman depan Paling besar, hanya 1 per halaman

<h2> Judul section/berita utama Pembagi topik utama

<h3> Sub judul dalam suatu berita Sub-bagian dalam topik

<h4> Judul kecil dalam sub bab Detail spesifik

<h5> & <h6> Catatan kaki atau info tambahan Jarang digunakan

Contoh Penggunaan Heading

<!DOCTYPE html>
<html>
<head>
<title>Contoh Heading</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>

<h2>Tentang Saya</h2>
<h3>Pendidikan</h3>
<p>Saya lulus dari Universitas Teknologi...</p>

<h3>Pengalaman Kerja</h3>
<p>Saya pernah bekerja di perusahaan startup...</p>

<h2>Portofolio</h2>
<h3>Proyek 1: Aplikasi E-commerce</h3>
<p>Aplikasi ini dibangun dengan...</p>

<h3>Proyek 2: Website Company Profile</h3>

<p>Website untuk perusahaan retail...</p>

<h2>Hubungi Saya</h2>

11
 <p>Email: email@[Link]</p>
</body>
</html>

Aturan Penting Penggunaan Heading

1. Hanya SATU <h1> per halaman - Seperti hanya satu judul utama di koran
2. Jangan lompat tingkatan - Jika sudah pakai <h2>, jangan langsung <h4> tanpa
<h3>
3. Gunakan untuk struktur, bukan ukuran - Jangan memilih heading hanya karena
ukuran fontnya. Gunakan CSS untuk styling!
4. Heading penting untuk SEO - Mesin pencari (Google) membaca heading untuk
memahami struktur konten

Perbandingan Ukuran Default Heading

Tag Ukuran Default Penggunaan Tipikal

<h1> 2em (32px) Judul halaman

<h2> 1.5em (24px) Judul section

<h3> 1.17em (18.72px) Sub-section

<h4> 1em (16px) Sub-sub-section

<h5> 0.83em (13.28px) Detail kecil

<h6> 0.67em (10.72px) Catatan kaki

Catatan: 1em = 16px di sebagian besar browser

Tips Heading untuk Pemula

 Buat outline sebelum mulai menulis konten
 Gunakan <h1> untuk judul utama halaman
 Gunakan <h2> untuk topik-topik besar
 Gunakan <h3> untuk poin-poin dalam topik
 <h4> sampai <h6> untuk detail yang sangat spesifik

Latihan Soal
Soal 1: Heading mana yang paling besar ukurannya?
A. <h1> ✓
B. <h2>
C. <h6>
D. Semua sama besar

Jawaban: A

12
<h1> adalah heading level 1 yang memiliki ukuran font terbesar secara default. <h6>
adalah yang terkecil.

Soal 2: Berapa jumlah tingkatan heading dalam HTML?

A. 3 tingkatan
B. 4 tingkatan
C. 5 tingkatan
D. 6 tingkatan ✓

Jawaban: D
HTML menyediakan 6 tingkatan heading dari <h1> hingga <h6>.

Praktik Langsung
Buat halaman profil sederhana dengan struktur heading yang benar:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Saya - Belajar Heading</title>
</head>
<body>
<!-- HANYA SATU H1 -->
<h1>Profil Saya</h1>

<h2>Data Pribadi</h2>
<p>Nama: Ahmad Wijaya</p>
<p>Umur: 25 tahun</p>
<p>Kota: Jakarta</p>

<h2>Pendidikan</h2>
<h3>Sekolah Dasar</h3>
<p>SDN Menteng 01 (2005-2011)</p>

<h3>Sekolah Menengah Pertama</h3>

<p>SMP Negeri 3 Jakarta (2011-2014)</p>

<h3>Sekolah Menengah Atas</h3>

<p>SMA Negeri 8 Jakarta (2014-2017)</p>

<h3>Perguruan Tinggi</h3>
<p>Universitas Indonesia - Teknik Informatika (2017-2021)</p>

<h2>Hobi</h2>
<h3>Olahraga</h3>
<p>Berenang, bersepeda, lari</p>

<h3>Kesenian</h3>
<p>Bermain gitar, melukis</p>

<h2>Kontak</h2>
<p>Email: ahmad@[Link]</p>
<p>Telepon: 0812-3456-7890</p>
</body>

13
</html>

Evaluasi diri:
 Apakah hanya ada satu <h1>?
 Apakah hierarki heading terstruktur dengan baik?
 Apakah ada lompatan tingkatan heading?

14
 MATERI 5: PARAGRAPH - MENULIS TEKS

Membuat Paragraf yang Rapi

Pengertian Tag <p>

Tag <p> (paragraph) digunakan untuk membuat paragraf atau teks biasa. Setiap kali
Anda ingin menulis teks yang panjang, bungkus dengan tag <p>.

Perumpamaan Ebook Cerita

Dalam Ebook cerita, Anda memiliki paragraf-paragraf yang dipisah oleh baris baru.
Setiap paragraf berisi beberapa kalimat yang membahas satu ide utama. Nah, dalam
HTML, tag <p> itulah yang membungkus setiap paragraf tersebut.

Contoh Penggunaan Paragraf

<!DOCTYPE html>
<html>
<head>
<title>Belajar Paragraf</title>
</head>
<body>
<h1>Pengertian HTML</h1>

<p>HTML adalah singkatan dari HyperText Markup Language.

Bahasa ini digunakan untuk membuat struktur dasar website.
Semua website yang pernah Anda kunjungi menggunakan HTML.</p>

<p>CSS adalah bahasa yang digunakan untuk mempercantik tampilan

website. Dengan CSS, Anda bisa mengatur warna, ukuran font,
tata letak, dan animasi.</p>

<p>JavaScript adalah bahasa pemrograman yang membuat website

menjadi interaktif. Contohnya: pop-up, animasi kompleks,
dan validasi form.</p>
</body>
</html>

Fakta Penting tentang Paragraf

Perhatikan: Enter di kode HTML TIDAK akan menjadi enter di website!

Contoh yang SALAH:

<p>Ini baris pertama.

Ini baris kedua.
Ini baris ketiga.</p>
<!-- Di browser, semua akan jadi satu baris terus! -->

Cara membuat baris baru dalam paragraf:

15
<p>Ini baris pertama.<br>
Ini baris kedua. <br>
Ini baris ketiga. </p>

Tag <br> (break line) adalah tag self-closing yang membuat baris baru.

Memformat Teks dalam Paragraf

Anda bisa menggabungkan tag formatting di dalam paragraf:

<p>
<strong>HTML</strong> adalah fondasi website.
<em>Tanpa HTML</em>, website tidak akan ada.
<u>Belajar HTML</u> adalah langkah pertama menjadi web developer.
<mark>Selamat belajar!</mark>
</p>

Aturan Penulisan Paragraf yang Baik

Satu ide per paragraf - Jangan mencampur beberapa ide dalam satu paragraf
Panjang ideal - 3-5 kalimat per paragraf (di mobile, lebih pendek lebih baik)
Gunakan heading untuk memisahkan topik, bukan paragraf kosong
Jangan gunakan <br> berulang kali untuk membuat jarak - gunakan CSS margin
Konsisten dengan spasi - Browser akan mengabaikan spasi berlebih

Tips Membaca Kode Paragraf

<!-- Cara 1: Semua dalam satu baris (tidak disarankan untuk paragraf panjang) -->
<p>Ini adalah paragraf yang sangat panjang dan ditulis dalam satu baris sehingga sulit dibaca di
kode editor.</p>

<!-- Cara 2: Dipecah menjadi beberapa baris (disarankan) -->

<p>
Ini adalah paragraf yang ditulis dalam beberapa baris di kode editor.
Meskipun ditulis terpisah, browser akan menampilkannya sebagai satu
paragraf utuh tanpa baris baru.
</p>

Latihan Soal
Soal 1: Tag apa yang digunakan untuk membuat paragraf?
A. <par>
B. <paragraph>
C. <p> ✓
D. <pg>

Jawaban: C
Tag <p> adalah singkatan dari "paragraph" dan merupakan tag yang benar untuk
membuat paragraf di HTML.

16
Soal 2: Bagaimana cara membuat baris baru dalam paragraf?
A. Tekan Enter di kode
B. Gunakan tag <br> ✓
C. Gunakan tag <newline>
D. Tidak bisa dibuat baris baru

Jawaban: B
Tag <br> (break) digunakan untuk membuat baris baru di HTML. Enter di kode tidak
berpengaruh pada tampilan browser.

Praktik Langsung
Buat halaman dengan beberapa paragraf yang membahas tentang hobi Anda:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Hobi Saya - Latihan Paragraf</title>
</head>
<body>
<h1>Hobi Saya: Membaca Ebook</h1>

<p>
Membaca Ebook adalah salah satu hobi yang saya tekuni sejak kecil.
Saya masih ingat pertama kali membaca Ebook cerita bergambar
tentang petualangan di hutan. Sejak saat itu, kecintaan saya
terhadap dunia literasi terus berkembang.
</p>

<p>
Genre Ebook favorit saya adalah fiksi ilmiah dan fantasi.
Penulis seperti J.K. Rowling, George R.R. Martin, dan
Isaac Asimov selalu berhasil membawa imajinasi saya ke
dunia yang berbeda. <br>
Selain itu, saya juga suka membaca Ebook pengembangan diri
dan biografi tokoh-tokoh inspiratif.
</p>

<p>
<strong>Manfaat membaca bagi saya:</strong><br>
- Menambah wawasan dan pengetahuan<br>
- Meningkatkan kemampuan berpikir kritis<br>
- Mengurangi stres setelah seharian bekerja<br>
- Memperkaya kosakata dan kemampuan menulis
</p>

<p>
<em>"Ebook adalah jendela dunia"</em> - Pepatah ini benar adanya.
Melalui membaca, saya bisa bepergian ke berbagai tempat,
mengalami berbagai petualangan, dan belajar dari pengalaman
orang lain tanpa harus mengalaminya langsung.
</p>
</body>
</html>

17
Catatan: Perhatikan bagaimana tag <br> digunakan untuk membuat daftar di
paragraf ketiga.

18
 MATERI 6: TEXT FORMATTING

Membuat Teks Menjadi Tebal, Miring, dan Bergaris

Pengertian Text Formatting

Text Formatting adalah tag-tag khusus untuk mempercantik tampilan teks. Seperti
saat Anda mencatat di Ebook, Anda menggunakan stabilo untuk menandai bagian
penting, menebalkan kata kunci, atau membuat catatan kecil. HTML punya alat yang
sama!

Daftar Tag Formatting

Tag Fungsi Contoh Hasil

<b> Tebal (bold) - hanya tampilan <b>Teks tebal</b>

<strong> Tebal + penekanan penting <strong>Penting!</strong>

<i> Miring (italic) - hanya tampilan <i>Teks miring</i>

<em> Miring + penekanan (emphasis) <em>Teks ditekankan</em>

<u> Garis bawah (underline) <u>Teks bergaris bawah</u>

<mark> Disorot seperti stabilo <mark>Teks disorot</mark>

<small> Lebih kecil dari teks normal <small>Teks kecil</small>

<del> Dicoret (deleted) <del>Teks dicoret</del>

<ins> Disisipkan (inserted) <ins>Teks sisipan</ins>

<sub> Subscript (bawah) H₂O

<sup> Superscript (atas) 10² = 100

Contoh Penggunaan Lengkap

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<h1>Contoh Text Formatting</h1>

19
 <p>
<b>Ini teks tebal</b> (menggunakan tag b)<br>
<strong>Ini teks tebal dengan penekanan penting</strong> (menggunakan strong)<br>
<i>Ini teks miring</i> (menggunakan i)<br>
<em>Ini teks miring dengan penekanan</em> (menggunakan em)<br>
<u>Ini teks bergaris bawah</u> (menggunakan u)<br>
<mark>Ini teks yang disorot</mark> (menggunakan mark)<br>
<small>Ini teks yang lebih kecil</small> (menggunakan small)<br>
<del>Ini teks yang dicoret</del> (menggunakan del)<br>
<ins>Ini teks yang disisipkan</ins> (menggunakan ins)
</p>

<h2>Contoh Penggunaan dalam Kalimat</h2>

<p>
<strong>Peringatan!</strong> Jangan lupa untuk <em>membaca instruksi</em>
dengan <u>seksama</u> sebelum memulai. <mark>Catatan penting:</mark>
Harga <del>Rp100.000</del> menjadi <ins>Rp75.000</ins>.
</p>

<h2>Contoh Subscript dan Superscript</h2>

<p>
Rumus kimia air: H₂O<br>
Rumus matematika: E = mc²<br>
Tanggal lahir: 10^th January 2000
</p>
</body>
</html>

Perbedaan <b> vs <strong> dan <i> vs <em>

Ini adalah pertanyaan yang sering muncul:
Tag Tujuan Penggunaan

<b> Visual (tampilan tebal) Ketika hanya ingin teks terlihat tebal

<strong> Semantik (penekanan serius) Untuk kata/frasa yang benar-benar penting

<i> Visual (tampilan miring) Untuk istilah asing, judul karya, dll

<em> Semantik (penekanan) Untuk memberi tekanan pada kata/frasa

Contoh:

<p>
<b>Catatan:</b> Ini hanya tampilan tebal.<br>
<strong>Warning!</strong> Ini benar-benar penting untuk keselamatan!<br>
<i>Romeo and Juliet</i> adalah drama karya Shakespeare.<br>
Saya <em>sangat</em> menyukai masakan ini!
</p>

Kapan Menggunakan Tag Formatting

20
 1. <strong> - Untuk peringatan, informasi krusial, kata kunci penting
2. <em> - Untuk memberi penekanan pada kata/frasa tertentu
3. <mark> - Untuk menyorot bagian yang relevan dengan pencarian
4. <del> - Untuk menunjukkan revisi/harga diskon
5. <ins> - Untuk menunjukkan tambahan/revisi
6. <small> - Untuk disclaimer, hak cipta, catatan kaki
7. <sub>/<sup> - Untuk rumus matematika, kimia, catatan kaki

Latihan Soal
Soal 1: Tag mana yang digunakan untuk membuat teks bercoret?
A. <strike>
B. <del> ✓
C. <remove>
D. <cross>

Jawaban: B
Tag <del> (deleted) digunakan untuk menunjukkan teks yang dihapus/dicoret.
Meskipun <strike> juga berfungsi, tag tersebut sudah usang (deprecated).

Soal 2: Apa perbedaan <b> dan <strong>?

A. Tidak ada perbedaan, sama-sama tebal
B. <b> lebih tebal dari <strong>
C. <strong> untuk penekanan serius, <b> hanya tampilan ✓
D. <strong> untuk teks kecil

Jawaban: C
<strong>memiliki makna semantik yang menunjukkan bahwa teks tersebut penting
secara serius, sementara <b> hanya membuat teks terlihat tebal tanpa makna
khusus.

Praktik Langsung
Buat halaman yang menampilkan review produk dengan berbagai formatting:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Review Produk - Belajar Text Formatting</title>
</head>
<body>
<h1>Review: Smartphone XYZ Pro Max</h1>

<p>
<strong>Rating: 4.8/5</strong> ⭐⭐⭐⭐⭐<br>
<mark>Editor's Choice Award 2024</mark>
</p>

<h2>Kelebihan</h2>
<p>
<strong>Baterai tahan lama</strong> - Bisa digunakan <em>lebih dari 2 hari</em>
dengan pemakaian normal.<br>

21
 <strong>Kamera luar biasa</strong> - Hasil foto malam hari <u>sangat jernih</u>
dan minim noise.<br>
<strong>Layar 120Hz</strong> - Scroll menjadi <em>super mulus</em>!
</p>

<h2>Kekurangan</h2>
<p>
<del>Harga terlalu mahal</del> <ins>Harga sekarang turun 20%!</ins><br>
<small>Note: Harga promo hanya berlaku sampai akhir bulan ini.</small>
</p>

<h2>Spesifikasi Singkat</h2>
<p>
Prosesor: Snapdragon 8 Gen 3<br>
RAM: 12GB LPDDR5<br>
Storage: 256GB UFS 4.0<br>
Baterai: 5000mAh dengan fast charging 65W<br>
OS: Android 14
</p>

<p>
<strong>Verdict:</strong>
<em>"Pilihan terbaik untuk tahun 2024"</em>
</p>
</body>
</html>

22
 MATERI 7: KOMENTAR DI HTML

Membuat Catatan Rahasia dalam Kode

Pengertian Komentar
Komentar adalah catatan yang hanya terlihat di kode sumber, tidak di website.
Berguna untuk mengingatkan diri sendiri, memberi petunjuk ke programmer lain,
atau menyembunyikan kode sementara.

Perumpamaan Post-it
Bayangkan Anda punya Ebook resep. Anda tempel post-it yang berisi catatan pribadi
seperti "Ini resep rahasia nenek" atau "Jangan lupa tambah gula". Post-it ini hanya
Anda yang lihat, tidak mengubah resep aslinya. Nah, komentar HTML itu seperti
post-it dalam kode!

Sintaks Komentar

<!-- Ini adalah komentar satu baris -->

<!--
Ini adalah komentar
yang bisa ditulis
dalam beberapa baris
-->

<!--
TODO: Tambahkan bagian galeri foto di sini
Author: Ahmad Wijaya
Tanggal: 15 Januari 2024
-->

<!-- <p>Kode ini disembunyikan sementara</p> -->

Kegunaan Komentar
Kegunaan Contoh

Menjelaskan kode rumit <!-- Loop ini untuk generate menu navigasi -->

TODO list <!-- TODO: Tambahkan validasi form -->

Informasi author <!-- Dikembangkan oleh Tim Web Developer -->

Lisensi/Hak cipta <!-- Copyright 2024, PT Maju Jaya -->

Menonaktifkan kode sementara <!-- <div class="banner-promo">...</div> -->

23
 Kegunaan Contoh

Pemisah section <!-- ========== MAIN CONTENT ========== -->

Praktik Komentar yang Baik

Contoh komentar yang baik:

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

<header>
<!-- Logo akan muncul di sini -->
<img src="[Link]" alt="Logo Perusahaan">

<!-- Navigasi utama website -->

<nav>
<ul>
<li><a href="/">Beranda</a></li>
<li><a href="/tentang">Tentang</a></li>
<li><a href="/kontak">Kontak</a></li>
</ul>
</nav>
</header>

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

<main>
<!-- Artikel utama hari ini -->
<article>
<h1>Judul Artikel</h1>
<!-- TODO: Tambahkan meta data penulis -->
<p>Konten artikel...</p>
</article>
</main>

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

<footer>
<!-- Copyright tahun berjalan akan diupdate via JavaScript -->
<p>&copy; 2024 Perusahaan Kami</p>
</footer>

Hal yang Perlu Diperhatikan

 Jangan menumpuk komentar - Komentar berlebihan membuat kode sulit dibaca
 Komentar tidak bisa bersarang - Jangan menulis komentar di dalam komentar
lain

<!-- Ini benar -->

<!-- Ini salah: <!-- komentar di dalam komentar --> -->

 Jangan menyimpan data sensitif - Komentar tetap terlihat di "View Page Source"
 Komentar tetap diunduh - Meskipun tidak ditampilkan, komentar tetap masuk
dalam file HTML

Latihan Soal

24
Soal 1: Bagaimana cara membuat komentar di HTML?
A. // komentar
B. /* komentar */
C. <!-- komentar --> ✓
D. # komentar

Jawaban: C
Komentar HTML ditulis dengan <!-- di awal dan --> di akhir. Format lain digunakan di
bahasa pemrograman lain (JavaScript, CSS, PHP).

Soal 2: Apa yang terjadi dengan komentar saat website dibuka?

A. Tampil sebagai teks biasa
B. Tidak tampil sama sekali ✓
C. Tampil sebagai catatan kecil
D. Membuat error

Jawaban: B
Komentar tidak akan ditampilkan di browser. Hanya terlihat jika seseorang melihat
"View Page Source" atau menginspeksi elemen.

Praktik Langsung
Buat halaman dengan komentar yang menjelaskan setiap bagian:

<!DOCTYPE html>
<html lang="id">
<head>
<!--
Author: Nama Anda
Tanggal: [tanggal hari ini]
Deskripsi: Halaman profil pribadi untuk latihan komentar HTML
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Pribadi</title>
</head>
<body>
<!-- ================================================== -->
<!-- SECTION: HEADER / JUDUL HALAMAN -->
<!-- ================================================== -->
<header>
<h1>Profil Pribadi</h1>
<!-- TODO: Tambahkan foto profil nanti -->
</header>

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

<!-- SECTION: DATA PRIBADI -->
<!-- ================================================== -->
<section>
<h2>Data Pribadi</h2>
<!-- Informasi dasar tentang saya -->
<ul>
<li><strong>Nama:</strong> Ahmad Wijaya</li>

25
 <li><strong>Tempat/Tanggal Lahir:</strong> Jakarta, 15 Januari 1998</li>
<li><strong>Alamat:</strong> Jakarta Selatan</li>
<li><strong>Email:</strong> ahmad@[Link]</li>
</ul>
</section>

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

<!-- SECTION: PENDIDIKAN -->
<!-- TODO: Update dengan data terbaru -->
<!-- ================================================== -->
<section>
<h2>Pendidikan</h2>
<ul>
<li>S1 Teknik Informatika - Universitas Indonesia (2016-2020)</li>
<li>SMA Negeri 8 Jakarta (2013-2016)</li>
</ul>
</section>

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

<!-- SECTION: PENGALAMAN KERJA -->
<!-- ================================================== -->
<section>
<h2>Pengalaman Kerja</h2>
<!--
Catatan: Pengalaman kerja ini masih perlu diverifikasi
oleh HRD sebelum dipublikasikan di website resmi.
-->
<ul>
<li><strong>Frontend Developer</strong> - PT Tech Inovasi (2021-2023)</li>
<li><strong>Web Developer Intern</strong> - Startup Digital (2020)</li>
</ul>
</section>

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

<!-- SECTION: HOBI -->
<!-- ================================================== -->
<section>
<h2>Hobi & Minat</h2>
<!-- JANGAN LUPA: Tambahkan hobi yang relevan dengan karir -->
<ul>
<li>Programming & Coding</li>
<li>Membaca Ebook teknologi</li>
<li>Olahraga (lari & renang)</li>
</ul>
</section>

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

<!-- FOOTER / COPYRIGHT -->
<!-- ================================================== -->
<footer>
<p>© 2024 Ahmad Wijaya. All rights reserved.</p>
<!-- Page last updated: [akan diisi oleh JavaScript] -->
</footer>

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

<!-- KODE UNTUK DEBUGGING - UNCOMMENT JIKA DIPERLUKAN -->
<!-- ================================================== -->

26
 <!--
<script>
[Link]("Halaman profil dimuat");
[Link]("Versi: 1.0");
</script>
-->
</body>
</html>

Tips: Buka halaman di browser, lalu klik kanan dan pilih "View Page Source" untuk
melihat komentar-komentar yang sudah Anda buat!

27
 BAB 3: MENAMBAH ELEMEN MULTIMEDIA
MATERI 8: LINK - MENGHUBUNGKAN HALAMAN

Membuat Jalan Antara Halaman

Pengertian Link
Link atau tautan adalah cara untuk berpindah dari satu halaman ke halaman lain.
Tag yang digunakan adalah <a> (anchor - jangkar). Link adalah salah satu fitur
paling penting di HTML karena itulah yang membuat web menjadi "web" (jaring
yang saling terhubung).

Perumpamaan Lorong Rumah

Bayangkan rumah Anda punya beberapa ruangan. Lorong-lorong menghubungkan
ruangan satu dengan lainnya. Tanpa lorong, Anda tidak bisa pindah ruangan. Link
dalam website adalah lorong tersebut - menghubungkan satu halaman ke halaman
lain, atau satu bagian ke bagian lain dalam halaman yang sama.

Struktur Dasar Link

<a href="tujuan_link">Teks yang diklik</a>

Contoh:

<a href="[Link] Google</a>

Atribut Penting pada Link

Atribut Fungsi Contoh

href Tujuan link (wajib ada) href="[Link]

target Cara membuka link target="_blank" (tab baru)

title Tooltip saat hover title="Buka Google"

download Download file (bukan buka) download="[Link]"

rel Hubungan dengan halaman tujuan rel="noopener noreferrer"

Jenis-Jenis Link
1. Link ke Website Lain (External Link)

<a href="[Link]

28
 <a href="[Link] target="_blank">YouTube (tab baru)</a>

2. Link ke Halaman di Website Sama (Internal Link)

<a href="[Link]">Halaman Tentang</a>

<a href="[Link]">Hubungi Kami</a>
<a href="../[Link]">Kembali ke Beranda</a>

3. Link ke Bagian dalam Halaman (Anchor Link)

<!-- Buat target dengan id -->

<h2 id="bagian1">Bagian 1</h2>

<!-- Link ke target -->

<a href="#bagian1">Lompat ke Bagian 1</a>
<a href="#footer">Ke Footer</a>

4. Link untuk Email dan Telepon

<a href="[Link] Email</a>

<a href="[Link] 0812-3456-7890</a>
<a href="[Link] WhatsApp</a>

5. Link untuk Download

<a href="[Link]" download>Download PDF</a>

<a href="[Link]" download="[Link]">Download Gambar</a>

Link dengan Gambar

<!-- Klik gambar untuk pindah halaman -->

<a href="[Link]
<img src="[Link]" alt="Instagram">
</a>

Tips Link yang Baik

1. Teks link harus deskriptif - Jangan "Klik di sini", tapi "Baca artikel lengkap"

<!-- Buruk -->

<a href="[Link]">Klik di sini</a>

<!-- Baik -->

<a href="[Link]">Baca artikel tentang HTML</a>

29
2. Beritahu jika link ke website lain - Gunakan target="_blank" atau indikator visual
3. Gunakan rel="noopener noreferrer" untuk keamanan saat target="_blank"

<a href="[Link] target="_blank" rel="noopener noreferrer">

Website Eksternal
</a>

4. Buat link yang bisa diakses - Pastikan kontras warna cukup dan bisa diklik
dengan keyboard

Latihan Soal
Soal 1: Tag apa yang digunakan untuk membuat link?
A. <link>
B. <a> ✓
C. <href>
D. <url>

Jawaban: B
Tag <a> (anchor) adalah tag yang benar untuk membuat hyperlink. Tag <link>
digunakan untuk menghubungkan file CSS.

Soal 2: Atribut apa yang menentukan tujuan link?

A. src
B. link
C. href ✓
D. url

Jawaban: C
href (hypertext reference) adalah atribut yang berisi URL tujuan dari link tersebut.

Praktik Langsung
Buat halaman navigasi dengan berbagai jenis link:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar Link - Website Navigasi</title>
<style>
/* Styling sederhana untuk navigasi */
nav {
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;

30
 margin: 0 15px;
padding: 5px 10px;
}
nav a:hover {
background-color: #555;
border-radius: 5px;
}
.section {
margin: 30px 0;
padding: 20px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<!-- Navigasi Utama -->
<nav>
<a href="#home">Beranda</a>
<a href="#about">Tentang</a>
<a href="#services">Layanan</a>
<a href="#contact">Kontak</a>
<a href="[Link] target="_blank" rel="noopener noreferrer">Google</a>
</nav>

<!-- Section dengan ID untuk anchor link -->

<div id="home" class="section">
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah halaman demo untuk belajar berbagai jenis link di HTML.</p>
<p>
<a href="#about">Langsung ke bagian Tentang</a> |
<a href="[Link] target="_blank">GitHub (tab baru)</a>
</p>
</div>

<div id="about" class="section">

<h2>Tentang Saya</h2>
<p>Saya sedang belajar HTML dan ini adalah latihan membuat link.</p>
<p>
<a href="[Link] email ke saya</a><br>
<a href="[Link] saya: 0812-3456-7890</a><br>
<a href="[Link] via WhatsApp</a>
</p>
<p><a href="#home">Kembali ke atas</a></p>
</div>

<div id="services" class="section">

<h2>Layanan Kami</h2>
<ul>
<li><a href="#">Web Development</a> (coming soon)</li>
<li><a href="#">Mobile App Development</a> (coming soon)</li>
<li><a href="#">UI/UX Design</a> (coming soon)</li>
</ul>
<!-- Contoh link download -->
<p><a href="[Link]" download>Download contoh file</a></p>
</div>

<div id="contact" class="section">

31
 <h2>Kontak</h2>
<p>
<a href="[Link] target="_blank">Instagram</a> |
<a href="[Link] target="_blank">Twitter</a> |
<a href="[Link] target="_blank">LinkedIn</a>
</p>
<!-- Link dengan gambar -->
<a href="[Link] target="_blank">
<img src="[Link]
alt="GitHub" width="30">
</a>
</div>
</body>
</html>

32
 MATERI 9: GAMBAR - MEMPERCANTIK HALAMAN

Menambahkan Visual ke Website

Pengertian Tag Gambar

Gambar membuat website lebih menarik dan informatif. Tag yang digunakan adalah
<img> (image). Berbeda dengan tag lain, <img> adalah tag self-closing (tidak perlu
penutup).

Perumpamaan Album Foto

Bayangkan Anda punya album foto. Setiap foto butuh tempat di album, dan Anda
perlu memberi tahu di mana foto itu disimpan. Di website, tag <img> adalah tempat
fotonya, dan atribut src memberi tahu di mana foto disimpan.

Struktur Dasar Gambar

<img src="[Link]" alt="Deskripsi gambar">

Atribut Penting pada Gambar

Atribut Fungsi Contoh

src (sumber) Alamat file gambar (wajib) src="[Link]"

alt (alternatif) Teks jika gambar gagal dimuat (wajib) alt="Pemandangan gunung"

width Lebar gambar width="300"

height Tinggi gambar height="200"

title Tooltip saat hover title="Foto liburan"

loading Cara memuat gambar loading="lazy" (muat saat diperlukan)

Contoh Penggunaan Gambar

<!DOCTYPE html>
<html>
<head>
<title>Belajar Gambar</title>
</head>
<body>
<h1>Galeri Foto</h1>

<!-- Gambar dari file lokal (simpan file di folder yang sama) -->

33
 <img src="[Link]" alt="Foto profil saya" width="200">

<!-- Gambar dari internet -->

<img src="[Link] alt="Gambar random dari Lorem Picsum">

<!-- Gambar dengan ukuran spesifik -->

<img src="[Link]" alt="Logo Perusahaan" width="150" height="150">

<!-- Gambar dengan tooltip -->

<img src="[Link]" alt="Produk terbaru" title="Klik untuk detail" width="250">

<!-- Lazy loading (gambar dimuat saat discroll) -->

<img src="[Link]" alt="Gambar besar" loading="lazy" width="100%">
</body>
</html>

Format Gambar yang Didukung

Format Kelebihan Kekurangan Penggunaan

Ukuran kecil, warna

JPEG/JPG Tidak support transparansi Foto, gambar kompleks
bagus

PNG Support transparansi Ukuran lebih besar Logo, icon, screenshot

GIF Bisa animasi Warna terbatas (256 warna) Animasi sederhana

Ukuran kecil, kualitas

WebP Tidak semua browser support Modern, disarankan
bagus

SVG Scalable (tidak pecah) Tidak untuk foto kompleks Icon, ilustrasi, logo

Tips Penggunaan Gambar

1. SELALU gunakan atribut alt - Untuk aksesibilitas (pengguna tunanetra) dan SEO
2. Atur ukuran gambar - Jangan tampilkan gambar 4000px dengan lebar 200px
(boros bandwidth)
3. Gunakan format yang tepat:
 Foto → JPEG/WebP
 Logo/Icon → PNG/SVG
 Animasi → GIF (atau video lebih baik)
4. Optimasi gambar sebelum upload (kompres ukuran file)
5. Gunakan loading="lazy" untuk gambar di luar layar pertama

Gambar sebagai Link

<a href="[Link]
<img src="[Link]" alt="Instagram" width="30">
</a>

34
Latihan Soal
Soal 1: Tag apa untuk menampilkan gambar?
A. <picture>
B. <img> ✓
C. <image>
D. <photo>

Jawaban: B
Tag <img> adalah tag yang benar untuk menampilkan gambar di HTML. Tag
<picture> digunakan untuk responsive images.

Soal 2: Apa fungsi atribut alt pada gambar?

A. Mengatur ukuran gambar
B. Memberi judul gambar
C. Teks alternatif jika gambar gagal dimuat ✓
D. Membuat animasi

Jawaban: C
alt (alternative text) adalah teks yang akan ditampilkan jika gambar gagal dimuat,
dan juga dibaca oleh screen reader untuk pengguna tunanetra.

Praktik Langsung
Buat galeri foto sederhana dengan berbagai jenis gambar:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Galeri Foto - Belajar Gambar</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
width: 250px;
text-align: center;
}
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h1>Galeri Foto Wisata</h1>

<div class="gallery">

35
 <!-- Card 1: Gambar dari internet -->
<div class="card">
<img src="[Link]
alt="Pemandangan gunung"
title="Gunung Fuji"
width="250"
height="200">
<h3>Gunung Fuji</h3>
<p>Pemandangan indah dari Jepang</p>
</div>

<!-- Card 2: Gambar landscape -->

<div class="card">
<img src="[Link]
alt="Air terjun"
title="Air Terjun Niagara"
width="250"
height="200">
<h3>Air Terjun Niagara</h3>
<p>Perbatasan Amerika-Kanada</p>
</div>

<!-- Card 3: Gambar dengan lazy loading -->

<div class="card">
<img src="[Link]
alt="Pantai tropis"
title="Pantai Maldives"
width="250"
height="200"
loading="lazy">
<h3>Pantai Maldives</h3>
<p>Surga tropis di Samudera Hindia</p>
</div>

<!-- Card 4: Gambar sebagai link -->

<div class="card">
<a href="[Link] target="_blank">
<img src="[Link]
alt="Kopi dan laptop"
title="Klik untuk lihat ukuran besar"
width="250"
height="200">
</a>
<h3>Working Space</h3>
<p>Klik gambar untuk lihat ukuran penuh</p>
</div>
</div>

<hr>

<h2>Tips Memilih Gambar:</h2>

<ul>
<li>Gunakan <strong>alt text</strong> yang deskriptif</li>
<li>Optimasi ukuran file untuk kecepatan loading</li>
<li>Gunakan <strong>lazy loading</strong> untuk gambar di bawah</li>
<li>Pastikan gambar memiliki <strong>lisensi</strong> yang jelas</li>
</ul>

36
 <p>
<strong>Sumber gambar:</strong> Lorem Picsum (gambar gratis untuk testing)<br>
<small>Catatan: Di website sungguhan, gunakan gambar sendiri atau dari situs penyedia
gambar gratis (Unsplash, Pexels, dll).</small>
</p>
</body>
</html>

37
 MATERI 10: LIST - MEMBUAT DAFTAR

Mengorganisir Informasi dalam Bentuk Daftar

Pengertian List
List atau daftar digunakan untuk menampilkan informasi dalam bentuk yang
terstruktur. Ada 3 jenis list di HTML, masing-masing dengan kegunaan berbeda.

Perumpamaan Daftar Belanja

Saat pergi ke supermarket, Anda punya daftar belanja. Ada dua jenis: daftar biasa
(poin-poin tanpa urutan penting) dan daftar berurutan (nomor urut untuk langkah-
langkah). HTML bisa membuat keduanya, plus daftar deskripsi untuk istilah dan
definisi!

1. Unordered List (Daftar Tidak Berurutan) - <ul>

Gunakan untuk: Daftar yang urutannya tidak penting (contoh: daftar belanja,
fitur produk, bahan masakan)

Tampilan: Bullet point (lingkaran, kotak, atau simbol lain)

<h3>Bahan-bahan membuat kue:</h3>

<ul>
<li>Tepung terigu - 250 gram</li>
<li>Telur - 2 butir</li>
<li>Gula pasir - 150 gram</li>
<li>Margarin - 100 gram</li>
</ul>

Hasil:
 Tepung terigu - 250 gram
 Telur - 2 butir
 Gula pasir - 150 gram
 Margarin - 100 gram

2. Ordered List (Daftar Berurutan) - <ol>

Gunakan untuk: Daftar yang urutannya penting (contoh: langkah-langkah,
peringkat, resep)

Tampilan: Angka (1,2,3), huruf (a,b,c), atau angka romawi (i,ii,iii)

<h3>Cara membuat kue:</h3>

<ol>

38
 <li>Panaskan oven suhu 180°C</li>
<li>Campurkan tepung, gula, dan telur</li>
<li>Aduk hingga merata</li>
<li>Panggang selama 30 menit</li>
</ol>

Hasil:
1. Panaskan oven suhu 180°C
2. Campurkan tepung, gula, dan telur
3. Aduk hingga merata
4. Panggang selama 30 menit

Variasi ordered list:

<ol type="A"> <!-- A, B, C, D... -->

<ol type="a"> <!-- a, b, c, d... -->
<ol type="I"> <!-- I, II, III, IV... -->
<ol type="i"> <!-- i, ii, iii, iv... -->
<ol start="5"> <!-- mulai dari angka 5 -->

3. Description List (Daftar Deskripsi) - <dl>

Gunakan untuk: Daftar yang berisi pasangan istilah dan definisi (contoh:
glosarium, FAQ, daftar istilah)

Komponen:

<dt> = Description Term (istilah)

<dd> = Description Definition (definisi)

<h3>Glosarium Istilah Web:</h3>

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - bahasa untuk membuat struktur website</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets - bahasa untuk mempercantik tampilan website</dd>

<dt>JavaScript</dt>
<dd>Bahasa pemrograman untuk membuat website interaktif</dd>
</dl>

List Bersarang (Nested List)

List bisa berisi list lain di dalamnya:

39
 <h3>Struktur Organisasi:</h3>
<ul>
<li>Direktur Utama
<ul>
<li>Manajer Operasional
<ul>
<li>Staff Admin</li>
<li>Staff Logistik</li>
</ul>
</li>
<li>Manajer Keuangan</li>
</ul>
</li>
<li>Komisaris</li>
</ul>

Kapan Menggunakan List yang Mana?

Situasi List yang Tepat

Daftar belanja <ul> (tidak perlu urutan)

Langkah-langkah <ol> (urutan penting)

Fitur produk <ul> (biasanya bullet points)

Resep masakan <ol> untuk langkah, <ul> untuk bahan

Daftar istilah <dl> (term + definisi)

Menu navigasi <ul> dengan CSS styling

Peringkat teratas <ol> (urutan 1,2,3 penting)

Tips Penggunaan List

1. Setiap item harus dalam <li> - Jangan menulis teks langsung di dalam <ul> atau
<ol>
2. List bisa dikombinasikan - <ul> di dalam <ol> dan sebaliknya
3. Gunakan CSS untuk styling - Ubah bullet point, warna, spacing dengan CSS
4. List penting untuk aksesibilitas - Screen reader memberitahu pengguna bahwa
mereka sedang membaca list

Latihan Soal
Soal 1: Tag apa yang digunakan untuk membuat daftar dengan angka (berurutan)?
A. <ul>
B. <ol> ✓
C. <li>
D. <dl>

Jawaban: B

40
<ol> (ordered list) membuat daftar berurutan dengan angka. <ul> (unordered list)
untuk bullet points.

Soal 2: Tag apa yang membungkus setiap item dalam list?

A. <item>
B. <li> ✓
C. <point>
D. <dt>

Jawaban: B
<li>(list item) adalah tag untuk setiap item dalam <ul> atau <ol>. <dt> digunakan
untuk description list.

Praktik Langsung
Buat halaman resep masakan yang menggunakan semua jenis list:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Resep Nasi Goreng - Belajar List</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.recipe-card {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
color: #e67e22;
text-align: center;
}
.info {
background-color: #ffeaa7;
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
ul, ol {
margin: 10px 0 20px 20px;
}
li {
margin: 8px 0;
}
</style>
</head>

41
<body>
<div class="recipe-card">
<h1>⭐ Resep Nasi Goreng Spesial</h1>

<div class="info">
<strong>Informasi:</strong><br>
Waktu: 30 menit<br>
⭐ Porsi: 2 orang<br>
⭐ Tingkat: Mudah
</div>

<h2>⭐ Bahan-bahan (Unordered List):</h2>

<ul>
<li>Nasi putih - 2 piring (lebih enak pakai nasi semalam)</li>
<li>Bawang merah - 3 siung</li>
<li>Bawang putih - 2 siung</li>
<li>Cabai merah - 2 buah (sesuai selera)</li>
<li>Telur - 1 butir</li>
<li>Kecap manis - 2 sendok makan</li>
<li>Garam dan merica - secukupnya</li>
<li>Minyak goreng - 2 sendok makan</li>
</ul>

<h2>⭐ Bumbu Halus:</h2>

<ul>
<li>Bawang merah + bawang putih</li>
<li>Cabai merah</li>
<li>Garam secukupnya</li>
</ul>

<h2>⭐ Langkah-langkah (Ordered List):</h2>

<ol>
<li>Haluskan semua bahan bumbu</li>
<li>Panaskan minyak di wajan</li>
<li>Tumis bumbu halus hingga harum</li>
<li>Masukkan telur, orak-arik hingga matang</li>
<li>Masukkan nasi, aduk rata</li>
<li>Tambahkan kecap manis, garam, dan merica</li>
<li>Aduk hingga semua tercampur rata (sekitar 3-5 menit)</li>
<li>Koreksi rasa, sajikan hangat</li>
</ol>

<h2>⭐ Istilah dalam Resep (Description List):</h2>

<dl>
<dt><strong>Orak-arik</strong></dt>
<dd>Teknik memasak telur dengan cara diaduk cepat hingga matang tapi masih
lembut</dd>

<dt><strong>Menumis</strong></dt>
<dd>Memasak dengan sedikit minyak dan api sedang sambil diaduk terus</dd>

<dt><strong>Koreksi rasa</strong></dt>
<dd>Mencicipi masakan untuk memastikan rasa sudah pas</dd>
</dl>

<h2> Variasi Nasi Goreng (Nested List):</h2>

<ul>

42
 <li><strong>Berdasarkan Bahan Tambahan:</strong>
<ul>
<li>Nasi Goreng Seafood (udang, cumi, ikan)</li>
<li>Nasi Goreng Ayam (suwir ayam)</li>
<li>Nasi Goreng Sosis</li>
</ul>
</li>
<li><strong>Berdasarkan Rasa:</strong>
<ul>
<li>Nasi Goreng Pedas (extra cabai)</li>
<li>Nasi Goreng Manis (extra kecap)</li>
<li>Nasi Goreng Asin (extra garam/terasi)</li>
</ul>
</li>
</ul>

<div class="info">
<strong>⭐ Tips Sukses:</strong>
<ol type="a">
<li>Gunakan nasi yang sudah dingin (bisa dari kulkas)</li>
<li>Gunakan api besar untuk hasil yang lebih wangi</li>
<li>Jangan terlalu lama mengaduk agar nasi tidak hancur</li>
</ol>
</div>
</div>
</body>
</html>

43
 BAB 4: PROYEK AKHIR
PROYEK: MEMBUAT HALAMAN PROFIL SEDERHANA

Sekarang saatnya menggabungkan semua materi yang sudah dipelajari! Anda akan
membuat halaman profil pribadi yang lengkap.

Spesifikasi Proyek
Buat file HTML dengan nama profil_saya.html yang berisi:
 Struktur HTML lengkap (DOCTYPE, html, head, body)
 Heading (h1 untuk nama, h2 untuk section)
 Paragraf untuk deskripsi diri
 Text formatting (tebal, miring, mark, dll)
 Link ke media sosial dan kontak
 Gambar foto profil
 List (minimal 2 jenis list)
 Komentar untuk dokumentasi

Kode Referensi (Contoh Lengkap)

<!DOCTYPE html>
<html lang="id">
<head>
<!-- ================================================== -->
<!-- META DATA & JUDUL HALAMAN -->
<!-- ================================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Halaman profil pribadi - latihan HTML">
<meta name="author" content="Nama Anda">
<title>Profil | Nama Anda</title>

<style>
/* CSS sederhana untuk mempercantik tampilan */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f2f5;
line-height: 1.6;
}
.profile-card {
background-color: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.profile-img {
text-align: center;
margin-bottom: 20px;
}

44
 img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
border: 3px solid #4CAF50;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 10px;
}
.tagline {
text-align: center;
color: #7f8c8d;
margin-bottom: 30px;
}
.social-links {
text-align: center;
margin: 30px 0;
}
.social-links a {
margin: 0 10px;
text-decoration: none;
color: #3498db;
}
.social-links a:hover {
text-decoration: underline;
}
hr {
margin: 30px 0;
}
</style>
</head>
<body>
<div class="profile-card">
<!-- ================================================== -->
<!-- HEADER: FOTO PROFIL DAN NAMA -->
<!-- ================================================== -->
<div class="profile-img">
<!-- Ganti dengan URL foto profil Anda -->
<img src="[Link]
alt="Foto profil"
width="150"
height="150">
</div>

<h1>Ahmad Wijaya</h1>
<div class="tagline">
<em>Web Developer | Content Creator | Tech Enthusiast</em>
</div>

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

<!-- SECTION: TENTANG SAYA -->
<!-- ================================================== -->
<h2>⭐ Tentang Saya</h2>
<p>

45
 Halo! Saya <strong>Ahmad Wijaya</strong>, seorang <em>web developer</em> yang
berbasis di Jakarta. Saya memiliki passion di bidang <mark>teknologi web</mark>
dan <u>pendidikan digital</u>. Saat ini, saya sedang fokus mengembangkan
konten edukasi tentang <strong>HTML, CSS, dan JavaScript</strong> untuk pemula.
</p>
<p>
Saya percaya bahwa <strong>teknologi seharusnya bisa diakses oleh semua
orang</strong>.
Karena itu, saya berusaha membuat materi belajar yang <em>mudah dipahami</em>
dan <em>langsung bisa dipraktikkan</em>.
</p>

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

<!-- SECTION: PENDIDIKAN -->
<!-- ================================================== -->
<h2>⭐ Pendidikan</h2>
<ul>
<li><strong>S1 Teknik Informatika</strong> - Universitas Indonesia (2016-2020)
<ul>
<li>IPK: 3.85/4.00</li>
<li>Skripsi: "Aplikasi Pembelajaran HTML Interaktif"</li>
</ul>
</li>
<li><strong>SMA Negeri 8 Jakarta</strong> (2013-2016)
<ul>
<li>Jurusan IPA</li>
<li>Aktif di klub programming</li>
</ul>
</li>
</ul>

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

<!-- SECTION: PENGALAMAN KERJA -->
<!-- ================================================== -->
<h2>⭐ Pengalaman Kerja</h2>
<ol>
<li><strong>Frontend Developer</strong> - PT Tech Inovasi (2021-sekarang)
<ul>
<li>Mengembangkan website company profile</li>
<li>Membuat dashboard admin dengan [Link]</li>
<li>Mengoptimalkan performa website hingga 40%</li>
</ul>
</li>
<li><strong>Web Developer Intern</strong> - Startup Digital (2020)
<ul>
<li>Membantu pengembangan landing page</li>
<li>Melakukan debugging dan maintenance website</li>
</ul>
</li>
</ol>

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

<!-- SECTION: KEAHLIAN (SKILLS) -->
<!-- ================================================== -->
<h2>⭐ Keahlian</h2>
<ul>
<li><strong>HTML5 & CSS3</strong> - ⭐⭐⭐⭐⭐ (Sangat Mahir)</li>

46
 <li><strong>JavaScript</strong> - ⭐⭐⭐⭐ (Mahir)</li>
<li><strong>[Link]</strong> - ⭐⭐⭐ (Menengah)</li>
<li><strong>UI/UX Design</strong> - ⭐⭐⭐ (Menengah)</li>
</ul>

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

<!-- SECTION: PORTOFOLIO PROYEK -->
<!-- ================================================== -->
<h2>⭐ Portofolio Proyek</h2>
<dl>
<dt><strong>Website E-commerce Skincare</strong></dt>
<dd>Website toko online dengan fitur keranjang belanja dan payment gateway.
<em>Teknologi: HTML, CSS, JavaScript, PHP</em></dd>

<dt><strong>Aplikasi To-Do List</strong></dt>

<dd>Aplikasi sederhana untuk manajemen tugas sehari-hari.
<em>Teknologi: HTML, CSS, JavaScript (Local Storage)</em></dd>

<dt><strong>Landing Page Company Profile</strong></dt>

<dd>Website profil perusahaan modern dengan animasi scroll.
<em>Teknologi: HTML5, CSS3, Bootstrap</em></dd>
</dl>

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

<!-- SECTION: KONTAK & MEDIA SOSIAL -->
<!-- ================================================== -->
<h2>⭐ Hubungi Saya</h2>
<div class="social-links">
<a href="[Link] target="_blank">⭐ Email</a> |
<a href="[Link] target="_blank">⭐ LinkedIn</a> |
<a href="[Link] target="_blank">⭐ GitHub</a> |
<a href="[Link] target="_blank">⭐ Instagram</a> |
<a href="[Link] target="_blank">⭐ WhatsApp</a>
</div>

<hr>

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

<!-- FOOTER -->
<!-- ================================================== -->
<footer>
<p style="text-align: center; color: #7f8c8d;">
<small>© 2024 Ahmad Wijaya. Dibuat dengan <span style="color: red;">❤</span>
untuk belajar HTML.</small><br>
<small><em>"Kode hari ini, website masa depan"</em></small>
</p>
</footer>
</div>

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

<!-- KOMENTAR: Halaman ini terakhir diupdate: [tanggal] -->
<!-- TODO: Update foto profil dengan foto asli -->
<!-- TODO: Tambahkan link ke proyek yang sudah deploy -->
<!-- ================================================== -->
</body>
</html>

47
Checklist Evaluasi Proyek
Pastikan proyek Anda memiliki:
 Struktur HTML lengkap (DOCTYPE, html, head, body)
 Minimal 3 heading (h1, h2, h3)
 Minimal 3 paragraf
 Text formatting (tebal, miring, mark, dll)
 Gambar dengan atribut src dan alt
 Link dengan href (minimal 3 link berbeda)
 Minimal 1 unordered list
 Minimal 1 ordered list
 Komentar di kode HTML
 Tampilan yang rapi dan mudah dibaca

Tantangan Tambahan (Opsional)

Jika ingin tantangan lebih, coba:
 Buat halaman kedua (misal: portofolio) dan hubungkan dengan link
 Tambahkan tabel untuk jadwal atau data
 Buat form kontak sederhana (belum perlu fungsi, hanya tampilan)
 Tambahkan favicon (icon kecil di tab browser)

48
PANDUAN DEBUGGING

Masalah Umum dan Solusinya

Masalah Kemungkinan Penyebab Solusi

Gambar tidak Path file salah atau nama file typo Periksa nama file dan ekstensi
muncul (jpg, png, dll)

Link tidak berfungsi Lupa http:// atau https:// Tambahkan

protokol: [Link]

Teks tidak terformat Lupa tag penutup Pastikan semua tag punya
pasangan penutup

Halaman kacang Lupa DOCTYPE atau struktur HTML Tambahkan <!DOCTYPE

salah html> dan struktur dasar

Warna/tampilan Ada tag yang tidak ditutup dengan Periksa nesting tag (yang buka
aneh benar harus ditutup)

Tools Debugging
1. View Page Source (Ctrl+U) - Lihat kode HTML mentah
2. Inspect Element (F12) - Debug langsung di browser
3. Validator W3C - [Link] (cek HTML valid atau tidak)
4. Live Server - Extension VS Code untuk reload otomatis

49
 PENUTUP

Selamat!
Anda telah menyelesaikan ebook "Mastering HTML dari Nol Sampai Profesional".
Anda sekarang memiliki fondasi yang kuat untuk menjadi web developer.

Apa yang sudah Anda pelajari:

 Konsep dasar HTML
 Semua tag penting HTML
 Cara membuat struktur website
 Cara menambahkan teks, gambar, link, list
 Membuat proyek profil pribadi

Ingatlah selalu:
1. Praktek lebih penting dari teori - Jangan hanya membaca, selalu coba kode
2. Error adalah guru terbaik - Setiap error adalah kesempatan belajar
3. Google adalah teman - Web developer profesional pun googling setiap hari
4. Konsistensi adalah kunci - Lebih baik 15 menit setiap hari daripada 3 jam
seminggu sekali

Pesan Motivasi
Perjalanan Anda baru dimulai. HTML adalah pintu gerbang ke dunia pengembangan
web yang luas. Setiap ahli pernah menjadi pemula. Setiap pro pernah membuat
error.
Teruslah belajar, teruslah berkarya, dan jangan pernah berhenti mencoba. Dunia
digital menunggu kontribusi Anda!

Salam koding!

50
 TENTANG PENULIS

Ebook ini disusun oleh tim pengembang materi yang berpengalaman di bidang
pendidikan teknologi. Materi disusun berdasarkan kurikulum yang telah teruji dan
disesuaikan untuk pembelajar pemula.

Kontak & Saran:

Email: support@[Link]
Website: [Link]

Hak Cipta © 2024

Dilarang memperbanyak atau mendistribusikan ebook ini tanpa izin tertulis dari
penulis. Untuk modul belajar peserta terdaftar.

51