Belajar HTML Bagian 9 : Membuat Daftar di HTML

Sobat bisa membuat daftar di HTML menggunakan tag <ol> yang merupakan singkatan dari ordered list, <ul> yang merupkan singkatan dari unordered list dan <dl> yang merupkan singkatan dari definition list. Untuk penjelasan dan penulisan tag tersebut silahkan baca artikel ini sampai selesai :-).

Ordered List

Ordered list atau biasa disebut dengan daftar berurutan dapat dibuat dengan menggunakan tag <ol>. Untuk membuat item, sobat dapat menggunakan tag <li> yang merupakan singkatan dari list item atau daftar item.

Berikut ini adalah contoh penggunaan tag <ol> di HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
    <h2>Langkah-langkah menyalakan televisi :</h2>
    <ol>
        <li>Colokan kabel televisi ke stopkontak</li>
        <li>Arahkan remote ke televisi</li>
        <li>Lalu tekan tombol power yang ada di remote</li>
    </ol>
</body>
</html>

Jika sobat buka di browser, maka tampilannya akan seperti gambar di bawah ini :


Penomoran daftar dilakukan secara otomatis ketika sobat menambahkan item. Gunakanlah tag <ol> ketika membuat sebuah daftar yang memerlukan urutan yang benar, seperti "Langkah-langkah menyalakan televisi" dan sebagainya.

Unordered List

Berbeda dengan ordered list yang menandai setiap item dengan menggunakan angka secara otomatis dan berurut, kalau unorderd list menandai setiap item dengan simbol. Baik berupa lingkaran maupun persegi, sobat juga bisa mengganti simbol sesuai keinginan sobat dengan menggunakan CSS. Untuk membuat unordered list sobat akan menggunakan tag <ul>, lalu untuk item sobat akan menggunakan tag <li>.

Berikut ini adalah contoh penggunaan tag <ul> di HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
 <h2>Jenis-jenis kendaraan transportasi :</h2>
 <ul>
 <li>Angkot</li>
 <li>Kapal laut</li>
 <li>Pesawat</li>
 </ul>
</body>
</html>

Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :


Jika sobat ingin membuat daftar yang tidak terlalu mementingkan urutan pada setiap item, maka sobat bisa menggunakan ordered list misalnya "Jenis-jenis kendaraan transportasi" dan sebagainya.

Definition List

Jika sobat membutuhkan sebuah daftar yang berisi penjelasan atau deskripsi mengenai item tersebut, maka sobat bisa menggunakan definition list.

Untuk membuat definition list sobat akan menggunakan tag <dl>, untuk membuat item sobat akan menggunakan tag <dt> yang merupakan singkatan dari data term dan untuk membuat deskripsi dari item tersebut sobat akan menggunakan tag <dd> yang merupakan singkatan dari data description.

Berikut ini adalah contoh penggunaan tag <dl> di HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
 <dl>
 <dt>IPA</dt>
 <dd>IPA adalah singkatan dari Ilmu Pengetahuan Alam</dd>
 <dt>IPS</dt>
 <dd>IPS adalah singkatan dari Ilmu Pengetahuan Sosial</dd>
 <dt>MTK</dt>
 <dd>MTK adalah singkatan dari Matematika</dd>
 </dl>
</body>
</html>

Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :


Terlihat dari gambar di atas deskripsi item yang terdapat di tag <dd> akan sedikit menjauh dari item yang di deskripsikan.

Nested List

Nested list atau item bersarang adalah sebuah daftar yang memiliki daftar lagi di dalam item tersebut.

Berikut ini adalah contoh penggunaan nested list di HTML :
<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Daftar di HTML</title>
</head>
<body>
    <h2>Apa yang harus Saya lakukan hari ini :</h2>
    <ol>
        <li>Pergi ke pasar :
            <ul>
                <li>Beli cabe</li>
                <li>Beli bawang</li>
                <li>Beli tomat</li>
            </ul>
        </li>
        <li>Belajar :
            <dl>
                <dt>IPA</dt>
                    <dd>IPA adalah singkatan dari Ilmu Pengetahuan Alam</dd>
                <dt>IPS</dt>
                    <dd>IPS adalah singkatan dari Ilmu Pengetahuan Sosial</dd>
                <dt>MTK</dt>
                    <dd>MTK adalah singkatan dari Matematika</dd>
            </dl>
        </li>
    </ol>
</body>
</html>

Jika sobat jalankan di browser, maka tampilannya akan seperti gambar di bawah ini :


Biasanya daftar seperti ini biasa di gunakan untuk membuat menu web atau untuk keperluan lainnya seperti pada contoh di atas yaitu "Apa yang harus Saya lakukan hari ini" dan sebagainya.

Pada artikel selanjutnya sobat akan mempelajari Cara Membuat Link di HTML.

Comments

Popular posts from this blog

20 Template Blogger SEO Friendly dan Responsive Gratis

Cara Menginstall Phoenix OS Pada Windows 10

Cara Menghapus Antivirus Avast Dengan Benar

Cara Membuat Bootable USB Flashdisk Windows 10 Menggunakan Rufus

Cara Mengatur Posisi dan Tampilan Gambar di HTML

Cara Memblokir Akses Internet Aplikasi Windows 10 Tanpa Aplikasi Pihak Ketiga

4 Template Blogger Buatan Mas Sugeng Yang Dibagikan Secara Gratis

7 Aplikasi Pemutar Video Terbaik Untuk PC/Laptop

41 Latar Belakang Abu-abu Yang Cocok Untuk di Desain

Kumpulan Pantun Jenaka