Terkadang kita menampilkan suatu daftar di dalam teks. untuk melakukannya pada dokumen HTML kita bisa menggunakan tag ol (Ordered List) atau ul (Unordered List) dan setiap item di dalam list tersebut dimasukan dalam tag li. berikut contoh penggunaan dan penjelasannya:
List Teks Berurutan OL (Ordered List)
Tag ol akan
menampilkan item dengan angka yang berurutan secara otomatis, kita tidak perlu
menambahkan angka tersebut secara manual.
<ol>
<li>Jambu</li>
<li>Mangga</li>
<li>Pisang</li>
<li>Jeruk</li>
</ol>
Contoh di atas akan
menampilkan daftar dengan awalan angka 1, 2, 3, dst. selain dengan awalan
angka, kita juga bisa menggunakan awalan a, b, c, dst. dengan cara memberi
atribut type pada tag ol. Contoh:
<ol type="a">
<li>Jambu</li>
<li>Mangga</li>
<li>Pisang</li>
<li>Jeruk</li>
</ol>
List Teks Tidak Berurutan UL (Unordered List)
Untuk daftar teks yang
tidak berurutan adalah dengan menggunakan tag ul, daftar teks akan tampil dengan
simbol lingkaran kecil sebagai awalan teks, contoh:
<ul>
<li>Jambu</li>
<li>Mangga</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
Selain awalan yang
berbentuk lingkaran (disc), ada juga beberapa jenis lain, yaitu circle &
square. secara default type ini berisi disc. Berikut contoh untuk yang
menggunakan square:
<ul
type="square">
<li>Jambu</li>
<li>Mangga</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Nanas</li>
</ul>
Multilevel List
List yang memiliki
sub-list lagi di dalamnya, berikut contohnya:
<ul>
<li>Buah-buahan
<ol>
<li>Rambutan</li>
<li>Jeruk</li>
<li>Apel</li>
</ol>
</li>
<li>Sayur-mayur</li>
<li>Mobil
<ul type="circle">
<li>Sedan</li>
<li>Jeep</li>
</ul>
</li>
<li>Lain-lain</li>
</ul>
Tutorial HTML Halaman 7
Tidak ada komentar:
Posting Komentar
Silahkan isi komentar Anda pada kolom komentar di bawah ini atau dengan kolom komentar Facebook pada bagian atas ini.
Berkomentarlah dengan sehat! Dilarang membuat komentar dengan isi yang mengandung spam, sara, pornografi, politik, iklan, dan diluar norma yang berlaku. Thanks.