Di postingan kali ini saya akan sharing tentang Enumerasi atau penomoran pada HTML. Enumerasi pada HTML bisa kita sebut dengan list. Tag yang digunkan adalah Tag <ul > dan <ol> lalu di ikuti oleh tag <li>. Langsung saja yaaa…
UNORDERED LIST
Tag <ul> atau bisa disebut Unordered List penomorannya tidak berurut. Oke langsung ke contoh ya :
Sintaks : <ul>
<li> Teks Disini </li>
</ul>
Contoh :
<html>
<head>
<title> UNORDERED LIST </title>
</head>
<body>
<ul>
<li> Unordered List </li>
<li> Unordered List </li>
<li> Unordered List </li>
</ul>
</body>
<html>
Nah, jika sudah coba jalankan di web browser, hasilnya :
Bisa dilihat, penomoran yang digunakan oleh tag <ul> adalah lingkaran atau bullet, sehingga disebut daftar yang tak berurutan atau penomoran yang tidak berurut.
ORDERED LIST
Tag <ol> atau bisa disebut Ordered List penomorannya urut. Oke langsung saja ke contohnya :
Sintaks : <ol>
<li> Teks Disini </li>
</ol>
Contoh :
<html>
<head>
<title> ORDERED LIST </title>
</head>
<body>
<ol>
<li> Ordered List </li>
<li> Ordered List </li>
<li> Ordered List </li>
</ol>
</body>
<html>
Nah, Jika sudah coba jalankan di web browser, hasilnya :
Bisa dilihat hasilnya, beda dengan tag <ul>, penomoran yang digunakan oleh tag <ol> menggunakan angka, sehingga bisa dikatakan daftar yang terurut atau penomorannya terurut.
Okeee, dari kedua penjelasan serta masing-masing contoh nya, sudah jelas bukan perbedaannya ?
Ada juga yang disebut list bersarang, apa itu list bersarang ?
Nested List (List Bersarang)
Yaitu sebuah list yang didalamnya terdapat list lagi. Jadi kita bisa gabung kan tag <ol> dan tag <ul>.
Contoh :
<html>
<head>
<title> Nested list </title>
</head>
<body>
<ol>
<li> List Bersarang </li>
<ul>
<li> Contoh list Bersarang </li>
<li> Contoh list Bersarang </li>
</ul>
<li> List Biasa </li>
</ol>
</body>
</html>
Coba jalankan dibrowser, hasilnya :
Jika ingin membuat List bersarang tambahkan saja tag <ul> atau <ol> setelah tag <li></li> seperti contoh di atas.
Cukup sekian dulu tutorial nya, jika masih ada yang kebingungan silahkan tinggalkan komentar di kolom komentar ^^, Terima Kasih.
0 komentar:
Posting Komentar