Assalamu'alaikum Warahmatullaahi Wabarakatuh.
Setelah mempelajari Tabel pada artikel sebelumnya, sekarang kita akan mempelajari tentang list. Ada dua jenis list, yaitu unordered list dan ordered list.
A. UNORDERED LIST
Unordered list digunakan untuk membuat list tidak berurutan. Contoh :
- item
- item
- item
<ul> <li>item</li> <li>item</li> <li>item</li> </ul>
Pada syntax di atas kita membuat sebuah list dengan tampilan biasa. Namun kita bisa merubah style dari list tersebut dengan menambahkan atribut style. Berikut contoh penggunaannya :
<ul style="list-style-type:disc"> <li>item</li> <li>item</li> <li>item</li> </ul> <ul style="list-style-type:square"> <li>item</li> <li>item</li> <li>item</li> </ul> <ul style="list-style-type:circle"> <li>item</li> <li>item</li> <li>item</li> </ul> <ul style="list-style-type:none"> <li>item</li> <li>item</li> <li>item</li> </ul>
Kita lihat setiap style menghasilkan tipe yang berbeda.
2. ORDERED LIST
Ordered List digunakan untuk membuat list yang berurutan. Contoh :
- item pertama
- item kedua
- item ketiga
Syntax yang digunakan untuk membuat list item seperti di atas adalah :
<ol> <li>item</li> <li>item</li> <li>item</li> </ol>
Pada contoh di atas, kita menggunakan urutan 1,2,3, dan seterusnya. Bagaimana jika kita ingin menggunakan urutan a,b,c atau yang lainnya? Berikut contoh scrypt-nya :
<ol type="1"> <li>Item Pertama</li> <li>Item Kedua</li> <li>Item Ketiga</li> </ol> <ol type="A"> <li>Item Pertama</li> <li>Item Kedua</li> <li>Item Ketiga</li> </ol> <ol type="a"> <li>Item Pertama</li> <li>Item Kedua</li> <li>Item Ketiga</li> </ol> <ol type="I"> <li>Item Pertama</li> <li>Item Kedua</li> <li>Item Ketiga</li> </ol> <ol type="i"> <li>Item Pertama</li> <li>Item Kedua</li> <li>Item Ketiga</li> </ol>
Berikut tampilan dari hasil scrypt di atas :
3. DESCRIPTION LIST
Description list digunakan untuk sebuah list yang dilengkapi penjelasan dari setiap itemnya. Contoh:
Untuk membuat tampilan seperti di atas, gunakan scrypt berikut :
<dl> <dt>Unordered List</dt> <dd>- List item tidak berurutan</dd> <dt>Ordered List</dt> <dd>- List item berurutan</dd> </dl>- Dalam scrypt di atas, tag <dl> berarti mencakup keselruhan list.
- tag <dt> berarti item yang akan diberi deskripsi
- tag <dd> berarti deskripsi dari item
4. LIST BERCABANG (NESTED LIST)
Nested List digunakan bila kita ingin membua list di dalam list. Contoh :
Untuk membuat tampilan di atas, gunakan scrypt berikut :
<ul> <li>Kopi</li> <li>Teh <ul> <li>Teh Hitam</li> <li>Teh Hijau</li> </ul> </li> <li>Susu</li> </ul>
Pada gambar di atas, terdapat empat item yang di-list secara horizontal, yaitu HTML, CSS, Javascript, dan PHP.
Untuk membuat list yang kita buat berurutan secara horizontal seperti di atas, kita perlu menambahkan scrypt pada style CSS kita dengan atribut display dan value inline.
Berikut scrypt lengkapnya :
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Demikian Seri Belajar HTML Part 14 tentang List pada HTML. Semoga bermanfaat.
Wassalamu'alaikum Warahmatullaahi Wabarakatuh.
0 komentar:
Post a Comment
Terima kasih atas kunjungannya, semoga artikel ini bermanfaat. Silahkan berikan komentar Anda.