🌐 Phase 1 — HTML
P02 · Pertemuan 2 dari 20
Teks, Link & Gambar
Menguasai format teks HTML, membuat hyperlink ke halaman lain, dan menyisipkan gambar dengan atribut yang benar.
Tujuan Pembelajaran
- 01Menggunakan format teks: <b>, <i>, <u>, <strong>, <em>, <mark>, <small>
- 02Membuat hyperlink: <a href>, target, rel
- 03Memahami perbedaan link absolut vs relatif
- 04Menyisipkan gambar: <img src, alt, width, height>
- 05Menggunakan atribut title dan loading="lazy"
Sub-topik & Materi
- 01Format teks: <b>, <i>, <u>, <strong>, <em>, <mark>, <small>
- 02Hyperlink: <a href>, target="_blank", rel="noopener"
- 03Link absolut vs relatif
- 04Gambar: <img src, alt, width, height>
- 05Atribut title dan loading="lazy"
Penjelasan Konsep
Konsep 1
Format Teks: <strong> vs <b>, <em> vs <i>
<strong> dan <em> adalah tag SEMANTIK — memberi makna pada teks. <strong> berarti "sangat penting", <em> berarti "ditekankan". <b> dan <i> hanya mengubah tampilan visual tanpa makna. Untuk web modern, selalu gunakan <strong> dan <em>, bukan <b> dan <i>.
html
<p>Ini <strong>sangat penting</strong> dan ini <em>ditekankan</em></p> <p>Ini <mark>disorot</mark> dan ini <small>teks kecil</small></p> <p>Gunakan <code>code</code> untuk menampilkan kode inline</p>
Konsep 2
Hyperlink: Absolut vs Relatif
Link ABSOLUT menyertakan alamat lengkap mulai dari "https://" — digunakan untuk link ke website lain. Link RELATIF hanya menyebut nama file — digunakan untuk link antar halaman dalam satu proyek yang sama. Selalu tambahkan target="_blank" dan rel="noopener" untuk link eksternal demi keamanan.
html
<!-- Link Absolut: ke website lain --> <a href="https://github.com" target="_blank" rel="noopener">GitHub</a> <!-- Link Relatif: ke halaman lain di folder yang sama --> <a href="about.html">Tentang Saya</a> <a href="folder/halaman.html">Halaman di Sub-folder</a>
Konsep 3
Gambar dengan <img>
<img> adalah void element — tidak punya tag penutup. Atribut src berisi URL atau path file gambar. Atribut alt WAJIB diisi dengan deskripsi gambar — digunakan oleh screen reader (untuk tuna netra) dan ditampilkan jika gambar gagal load. loading="lazy" membuat gambar load hanya saat hampir terlihat di layar, mempercepat halaman.
html
<!-- Gambar dari internet --> <img src="https://picsum.photos/300/200" alt="Foto pemandangan alam" width="300"> <!-- Gambar dari file lokal --> <img src="foto-saya.jpg" alt="Foto profil Ahmad" width="200" loading="lazy">
Contoh Kode Lengkap
html
<!-- Format Teks --> <p><strong>Teks tebal</strong> dan <em>teks miring</em></p> <p><mark>Teks disorot</mark> dan <small>teks kecil</small></p> <!-- Hyperlink --> <a href="https://parelabs.academy" target="_blank" rel="noopener"> Kunjungi Parelabs Academy </a> <!-- Link Relatif --> <a href="about.html">Tentang Saya</a> <!-- Gambar --> <img src="foto.jpg" alt="Foto profil saya" width="300" loading="lazy">
Latihan Kelas · Buat halaman yang menampilkan teks berformat, 3 link, dan 2 gambar
1
Buat file HTML baru dari template dasar
2
Tambahkan paragraf dengan minimal 4 jenis format teks berbeda
3
Buat 3 link: 1 absolut (ke website lain) dan 2 relatif (antar halaman)
4
Sisipkan 2 gambar dari URL internet dengan alt text yang deskriptif
5
Tampilkan di browser dan pastikan semua link dapat diklik
Kesalahan yang Sering Dibuat
Tidak mengisi atribut alt pada <img> — wajib untuk aksesibilitas dan SEO
Menggunakan target="_blank" tanpa rel="noopener" — celah keamanan (tabnabbing)
Salah path gambar: file.jpg ada di folder "images/" tapi src="file.jpg" (harusnya src="images/file.jpg")
Menggabungkan link absolut dan relatif secara keliru — jika pindah server, link relatif tetap bekerja tapi absolut tidak berubah
Menggunakan <b> dan <i> padahal harusnya <strong> dan <em> untuk makna semantik