Belajar HTML part4 (Lists) ~ Blogke-bas

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

Ordered List <ol>

Adalah list yang memiliki system penomoran dengan menggunakan angka. Untuk membuat ordered list anda dapat menggunakan tag <ol>.

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>.

Directory List <dir>

Adalah list yang memiliki system seperti sebuah direktori. Untuk menggunakannya anda dapat menggunakan tag <dir>.

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> Cobalihatsaja 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

List item<li>

Tag ini digunakan untuk membuat item dalam sebuah list.

Definition List <dl>

Tag ini digunakan untuk membuat sebuah definisi dari sebuah list.

Definition Term <dt>

Tag ini digunakan untuk membuat sebuah definisi dari sebuah term.

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> Cobalihatsaja 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 :