Halo Siswa Kelas XII! Setelah sebelumnya kita berhasil menguasai dasar format teks, ukuran tulisan, dan pewarnaan di HTML, kali ini kita akan melangkah lebih jauh. Kita akan mempelajari tiga elemen penting yang membuat sebuah website menjadi hidup, interaktif, dan informatif: Gambar, Link, dan Daftar.

1. Menyisipkan Gambar (Tag <img>)

Sebuah website akan terasa membosankan tanpa adanya visual. Untuk menampilkan gambar, HTML menggunakan tag <img>. Perlu diingat, tag ini adalah empty tag (tidak memiliki tag penutup).

Atribut penting dalam tag gambar:

• src (Source): Lokasi file gambar (bisa berupa URL internet atau nama file lokal).
• alt (Alternative Text): Teks deskripsi jika gambar gagal dimuat (sangat penting untuk aksesibilitas dan SEO).
• width & height: Mengatur ukuran lebar dan tinggi gambar dalam satuan piksel (px).

2. Membuat Hyperlink / Tautan (Tag <a>)

Hyperlink adalah inti dari World Wide Web, berfungsi untuk menghubungkan satu halaman dengan halaman lainnya. Kita menggunakan tag <a> (Anchor) yang berpasangan dengan tag penutup </a>.

Atribut penting dalam tag link:

• href (Hypertext Reference): Alamat URL tujuan link tersebut.
• target=”_blank”: Perintah opsional agar halaman tujuan terbuka di tab browser yang baru.

3. Membuat Daftar Informasi (Tag <ul> & <ol>)

Untuk menyajikan informasi dalam bentuk poin-poin agar mudah dibaca, HTML menyediakan dua jenis list:

• Unordered List (<ul>): Daftar acak yang simbolnya berupa bulatan/kotak (bullet points).
• Ordered List (<ol>): Daftar berurutan yang otomatis menampilkan angka (1, 2, 3) atau huruf (A, B, C).
• Setiap baris di dalam daftar wajib dibungkus dengan tag <li> (List Item).

💻 Contoh Implementasi Kode Lengkap

Salin kode di bawah ini ke dalam aplikasi text editor kalian (Notepad / VS Code), simpan dengan nama latihan2.html, lalu jalankan di browser!

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Latihan HTML Lanjutan - Kelas XII</title>
</head>
<body>

    <h1>Selamat Datang di Halaman Pembelajaran XII</h1>
    <hr>

    <!-- Implementasi Gambar -->
    <h2>Fasilitas Lab Komputer Sekolahan</h2>
    <img src="https://unsplash.com" alt="Foto Lab Komputer" width="450" height="280">
    <p><i>Gambar 1.1: Ilustrasi perangkat pemrograman komputer.</i></p>

    <!-- Implementasi Tautan -->
    <h2>Link Referensi Belajar</h2>
    <p>Silakan pelajari materi pendukung di <a href="https://w3schools.com" target="_blank">Situs W3Schools (Tab Baru)</a>.</p>

    <!-- Implementasi Daftar/List -->
    <h2>Materi Ujian Praktik Web Desain</h2>
    
    <h3>Perangkat Lunak yang Digunakan (Unordered List):</h3>
    <ul>
        <li>Google Chrome Browser</li>
        <li>Visual Studio Code</li>
        <li>XAMPP Server lokal</li>
    </ul>

    <h3>Alur Kerja Pembuatan Projek (Ordered List):</h3>
    <ol>
        <li>Membuat perencanaan struktur wireframe halaman web.</li>
        <li>Menulis struktur kerangka dasar menggunakan HTML.</li>
        <li>Melakukan styling tata letak dan estetika menggunakan CSS.</li>
    </ol>

</body>
</html>