Membuat Daftar/List Menggunakan HTML

Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.

Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

    
<h2>Yang harus dilakukan hari ini</h2>

<ol>

<li>Pergi ke pasar</li>

<li>Buat tutorial HTML</li>

<li>Mengerjakan tugas kuliah</li>

</ol>

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item. Dan jika ditampilkan pada browser, maka yang akan anda dapatkan adalah seperti berikut :

Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :

    
<h2>Yang harus dilakukan hari ini</h2>
<ul>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ul>

Definisi List

Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data list memiliki struktur tersendiri. Biasanya data list ini digunakan untuk membuat daftar istilah beserta definisinya seperti halnya dalam kamus.

<dl>

<dt>Test</dt>
<dd>Test</dd>

</dl>

Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh penggunaan dari Definition List:

    

<dl>

<dt>Manga</dt>

<dd>Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa Jepang; di luar Jepang, kata tersebut digunakan khusus untuk membicarakan tentang komik Jepang. </dd>

<dt>Mangaka</dt>

</dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) adalah orang yang menggambar manga</dd>

</dl>

List/Daftar bersarang

Sebuah daftar bisa saja memiliki daftar lagi di dalamitemnya, atau biasa kita sebut dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut.

Buat file baru dengan nama file coba4.html lalu ketikkan kode HTML berikut

    

<!DOCTYPE HTML>

<HTML>

<head>

<title>List/Daftar</title>

</head>

<body>

<h2>Yang harus dilakukan hari ini</h2>

<ol>

<li>Pergi ke pasar

<ul>

<li>Beli sayuran</li>

<li>Beli kertas

<ol>

<li>A4</li>

<li>Legal</li>

</ol>

</li>

<li>Beli tinta</li>

</ul>

</li>

<li>Buat tutorial HTML</li>

<li>Mengerjakan tugas kuliah</li>

</ol>

</body>

</HTML>

Dan berikut tampilan pada browser.

Yang perlu anda perhatikan adalah di mana anda meletakkan tag <ol>atau <ul> jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item (</li>).

Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.

Banner

Membuat Daftar/List Menggunakan HTML

0 Response to "Membuat Daftar/List Menggunakan HTML"

Post a Comment