Learn HTML Vol.6- HTML -List

Posted by : fadly injoker 2017/08/02

BLC Telkom - KPLI Klaten

Assalamualaikum wr.wb

Bagaimana dengan HTMLnya .. mari kita lanjutkan untuk kali ini yang akan saya bahas adalah mengenai LIST HTML. LIST HTML - merupakan suatu aturan atau sintaks yang mengatur teks atau tulisan yang mebjadikan suatu deretan . yang ditandai dengan <ul> </ul> dan <li></li> . tanda <li></li> berada diantara <ul> dan </ul>. Daftar item akan ditandai dengan peluru (lingkaran hitam kecil secara default).

1.Menggunakan bullets

"Bullets" merupakan tanda peluru hitam yang berbentuk lingkaran. yang ditandai dengan adanya style pada kode "<ul style="list-style-type:disc">. tanda tersebut akan berpengaruh pada data yang berada pada kode <li></li>. Berikut contohnya :

1.1 Script

1.2 Hasil

2. Menggunakan bullets Persegi

"Bullets Persegi/Square" merupakan tanda peluru hitam yang berbentuk Persegi. yang ditandai dengan adanya style pada kode "<ul style="list-style-type:Square">. tanda tersebut akan berpengaruh pada data yang berada pada kode <li></li>. Berikut contohnya :


2.1 Script


2.2 Hasil

3. Tidak Menggunakan Bullets
Style pada kode "<ul style="list-style-type:none">. tanda tersebut akan berpengaruh pada data yang berada pada kode <li></li>. Berikut contohnya :

3.1 script


3.2 Hasil

4. Menggunakan Nomor Otomatis

Yang ditandai dengan adanya type pada kode "<ol type="1">. tanda tersebut akan berpengaruh pada data yang berada pada kode <li></li>.yang menyebabkan daftar terdapat nomor secara otomatis sesuai jumlah dan urutannya, Berikut contohnya :

4.1 Script


4.2 Hasil

5. Menggunakan huruf kecil dan kapital otomatis

Yang ditandai dengan adanya type pada kode "<ol type="a"> atau "<ol type="A">. tanda tersebut akan berpengaruh pada data yang berada pada kode <li></li>.yang menyebabkan daftar terdapat huruf kecil ,secara otomatis sesuai jumlah dan urutannya, Berikut contohnya :

5.1 Script


5.2 Hasil

6. Menggunakan huruf romawi Otomatis

Yang ditandai dengan adanya type pada kode "<ol type="I">. tanda tersebut akan berpengaruh pada data yang berada pada kode <li></li>.yang menyebabkan daftar terdapat huruf romawi,secara otomatis sesuai jumlah dan urutannya, Berikut contohnya :

6.1 Script


6.2 Hasil

7. Daftar untuk membedakan judul dan deskripsi
Judul dan deskripsi berada diantara <dl> dan </dl> . Judul ditandai dengan kode "<dt> dan </dt>. kemudian untuk deskripsi ditandai dengan kode "<dd> dan </dd>. Berikut contohnya :


7.1 Script


7.2 Hasil

8. Daftar dengan type atau tampilan bersarang
Masih dalam konteks List - HTML karna masih menggunakan <ul> dan <li>. Daftar bersarang merupakan daftar yang memiliki penjabaran atau isi yang merupakan bagian dari daftar inti . Berikut contohnya :