Cara Gampang Memakai Tag List Ol Dan Ul Html

Penggunaan tag list HTML ada dua jenis tag yakni <ol> dan <ul>, tag <ol> (ordered list) menapilkan type jenis urutan nomor dan aksara yakni : armenian, arabic-indic, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-greek, upper-latin, upper-roman, none, circle, disc, square, inherit, adapun tag <ul> (unordered list) tidak memilih urutan, menampilkan 4 type : disc (bullet to default), sircle (ring), square (kotak kecil) dan none. untuk menampilkan list item dari keduanya memakai tag code <li>.
Contoh default :

<ol>     <li>teks satu</li>     <li>teks dua</li>     <li>teks tiga</li> </ol> <ul>     <li>teks 1</li>     <li>teks 2</li>     <li>teks 3</li> </ul>

teks satu teks dua teks tiga teks 1 teks 2 teks 3

Susunan tag isyarat ibarat pada pola diatas sanggup dipermudah dikala memakai banyak tag list bersarang (nested) atau list didalam list dengan type yang berbeda-beda dalam jumlah daftar list yang banyak maka susunannya sanggup diubah ibarat pola dibawah ini, silahkan anda coba edit dan klik Preview untuk melihat hasilnya.

<style type="text/css"> ol.A {list-style-type: upper-alpha; font-weight:bold;} ol.ab {list-style-type: lower-alpha;} li > ol, li > ul, li > div {font-weight:normal;} </style> <h4 style="text-align:center;">BAB I<br />PENDAHULUAN</h4> <ol class="A"><li>Latar Belakang <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </div> </li><li>Rumusan Masalah <div> Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam bersahabat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna:   <ol><li>...   </li><li>Pellentesque porttitor   </li><li>...   </li></ol> </div> </li><li>Tujuan   <ol><li>...   </li><li>...     <ul><li>...     </li><li>Quisque ornare placerat risus     </li><li>...     </li></ul>   </li><li>...   </li><li>...   </li></ol> </li><li>Manfaat   <ol><li>...   </li><li>...     <ol class="ab"><li>...     </li><li>Integer aliquet mauris et nibh     </li><li>...     </li></ol>   </li><li>...   </li><li>Ut molestie magna at mi   </li></ol> </li></ol>

Selamat mencoba dan tetep semangat dalam merapihkan susunan pola makalah/skripsi di HTML.

Berbagi :