Dalam menyusun webpage, sering sekali kita membutuh list, baik itu dengan nomer maupun dengan symbol tertentu. Hal itu dapat saja anda lakukan manual dengan mengetikannya sebagai text, akan tetapi untuk praktik yang baik sebaiknya anda gunakan tag-tag list yang sudah disediakan oleh HTML guna portabilitas antar browser tetap dapat terjaga. Ok, disini kita akan membahas ordered list, unordered list, directory list, menu list. Ok kita mulai,
Jenis-jenis List
1.
Ordered List <ol>
Adalah list yang memiliki system penomoran dengan menggunakan angka. Untuk membuat ordered list anda dapat menggunakan tag <ol>.
1.
Unordered List <ul>
Adalah list yang tidak memiliki system penomoran, sehingga sebagai gantinya list ini menggunakan symbol-symbol tertentu untuk menandai suatu list. Untuk menggunakannya anda dapat menggunakan tag <ul>.
1.
Directory List <dir>
Adalah list yang memiliki system seperti sebuah direktori. Untuk menggunakannya anda dapat menggunakan tag <dir>.
1.
Menu List <menu>
Menu list adalah list yang memiliki system list yang bersifat debagai menu. Untuk menggunakannya anda dapat menggunakan tag <menu>
Code :
<html>
<head>
<title> Kebangsaan Tutorial </title>
</head>
<body>
<ol>Ordered List
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<ul>Unordered List
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<dir>Directory List
<li>siji</li>
<li>loro</li>
<li>telu</li>
</dir>
<menu>Menu List
<li>pecel lele</li>
<li>sambel trasi</li>
<li>tiwul goreng</li>
</menu>
</body>
</html>
Hasil :
Komponen List
1.
List item<li>
Tag ini digunakan untuk membuat item dalam sebuah list.
1.
Definition List <dl>
Tag ini digunakan untuk membuat sebuah definisi dari sebuah list.
1.
Definition Term <dt>
Tag ini digunakan untuk membuat sebuah definisi dari sebuah term.
1.
Definition Description <dd>
Tag ini digunakan untuk membuat sebuah definisi dari sebuah deskripsi.
Untuk lebih memahami penggunaanya, mari kita lihat kode dibawah ini :
Code :
<html>
<head>
<title> Kebangsaan Tutorial </title>
</head>
<body>
<dl>Makanan Favorit
<dt>Suweg</dt>
<dd>- Merupakan makanan yang paling saya sukai</dd>
<dt>Kluwih</dt>
<dd>- Sayuran paling favorit</dd>
</dl>
</body>
</html>
Hasil :
yang lainnya:
Belajar HTML Bag.1 ( Mengenal HTML ), Belajar HTML Bag. 2 ( Basic HTML ),
Belajar HTML Bag. 3 ( Text & Font Formatting ), Belajar HTML Bag. 4 ( Lists )