Lists HTML

Jarum jam yang kecil masih nunjuk diantara angka 5 dan 6 terus yang panjang nunjuk di angka 9, jadi saatnya ane ngucapain SELAMAT PAGI.... :D

Nih dari pada ga ada kegiatan, dari pada ane tidor lagi, mending ane nglanjutin bahasan kemaren dah. Kemaren udah dibahas tentang Tabel HTML, sekarang giliran List HTML yang bakal ane bahas, sob..
OK langsung aja yak ke materinyee... CEKIDOOT......

Jadi gini sob, List-list HTML ntu dibagi menjadi 3 sob, diantaranya...

• Unordered List
• Ordered List
• Description List

maksudnya apaan? bedanya apaan dari ketiga list ntu?
tenang-tenang, ntar ane jabarin atu-atu ya.. sabaarr... :p

Ok, yang pertama Unordered List,   contohnya ntu kaya yg dipake di atas ntu.. yang bulet-bulet item tuu.. liat kan?
nih kalo masih kaga paham, ane kasih contoh lagi di bawah ya.. perhatiin loh, awas kalo ga diperhatiin heehhe
Oya sebelum ngliat contoh, untuk unordered list ntu make tag <ul> terus untuk list itemnya make tag <li>

Tampulan coding di Sublime

Tampilan di browser

unordered list ini punya beberapa atribut, fungsi atribut ntu bisa dibilang buat modifikasi alias ngasih beberapa varian, biar ga bulet-bulet item mulu getooo..
nih beberapa atribut listnya :

• list-style-type:disc
• list-style-type:circle
• list-style-type:square
• list-style-type:none

terus bedanya apa dong dari keempat atribut di atas?
tenang, ntar ane kasih penampakannye bang...


LIST-STYLE-TYPE:DISC
  
untuk atribut satu nih ga ada bedanya sama yg ga pake list-style-type:disc

LIST-STYLE-TYPE:CIRCLE 

 LIST-STYLE-TYPE:SQUARE

 LIST-STYLE-TYPE:NONE

perbedaan dari ke empat atribute di atas ntu cuma di "disc, circle, square, dan none" dimana perbedaan masing-masing adalah penampakan dari daftar list itemnya..


Oke, kita lanjut ke yang kedua, Ordered List, ordered list ini make tag <ol> dan <li>
orderes list beda ama unordered list, dimana ordered list ini nantinya penampakan bakal make nomer. langsung aja yak ke tkp.....

sama kaya unordered list, ordered list juga punya beberapa atribute, ada 5 atribute :

• type="1"
• type="A"
• type="a"
• type="I"
• type="i"

 

type="1"

type="A"

type="a"

type="I"

type="i"

yang ketiga, Description List, penjelasannya gimana ya.. ane bingung gan hehe..
langsung aja ke contoh deh ya biar paham hehehe

dah paham kan apa itu description list? hehehe
jadi description list ntu make tag <dl> <dt> <dd>  


NESTED LIST HTML
 
Sekarang kita lanjut ke Nasted List HTML, apaan tu???
Nasted List HTML adalah list dalam list, langsung aja ke contoh..

Nested List HTML

HORIZONTAL LIST

Seperti biasa, html selalu berjodoh sama CSS, di list html juga bisa di pasangin sama CSS, salah satunya horizontal list. horizontal list ini pake ID dengan display:inline

selain itu, list juga bisa kita modifikasi sesuka hati biar bisa keliatan kereeeen.... hahaha

Ok sip pembahasan List HTML udah kelar, kemaren juga udah bahas Tabel HTML,
 tinggal Blok dan Kelas HTML yang belum, :D


Referensi www.w3schools.com

Fatkhurrokhman Sidiq - PROJECT X