Bab 5 -List Web Design Team Dosen (PENS) 1
Pendahuluan List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Contoh: Kita mau mengelompokkan datadata berikut : Pisang, Jambu, Apel, Anggur dapat kita kelompokkan ke dalam kelompok: Buah-buahan. (PENS) 2
Ordered List Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka <ol> dan penutup </ol> sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup ol kependekan dari Ordered List li kependekan dari List Item. (PENS) 3
Contoh Listing 5.1: orderedlist1.html <html> <head> <title>ordered List</title> </head> <body> <p>daftar Hari : </p> <ol> <li>senin</li> <li>selasa</li> <li>rabu</li> <li>kamis</li> <li>jum'at</li> <li>sabtu</li> <li>minggu</li> </ol> <p>daftar Kuliah : </p> <ol> <li>web Design</li> <li>pemrograman web</li> <li>database </li> </ol> </body> </html> (PENS) 4
Nomor item ordered list secara default menggunakan angka 1,2,3,.dst. Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ol>. (PENS) 5
(PENS) 6
Atribut type pada tag <ol> : (PENS) 7
Contoh - Listing 5.2 :orderedlist2.html <html> <head> <title>ordered List</title> </head> <body> <p>daftar Hari : </p> <ol type="a"> <li>senin</li> <li>selasa</li> <li>rabu</li> <li>kamis</li> <li>jum'at</li> <li>sabtu</li> <li>minggu</li> </ol> <p>daftar Kuliah : </p> <ol type="i"> <li>web Design</li> <li>pemrograman web</li> <li>database </li> </ol> </body> </html> (PENS) 8
(PENS) 9
Unordered List Untuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka <ul> dan penutup </ul> (PENS) 10
Contoh Listing 5.3 : unorderedlist1.html <html> <head> <title>unordered List</title> </head> <body> <p>daftar Hari : </p> <ul> <li>senin</li> <li>selasa</li> <li>rabu</li> <li>kamis</li> <li>jum'at</li> <li>sabtu</li> <li>minggu</li> </ul> </body> </html> (PENS) 11
Hasil Unordered List (PENS) 12
Item unordered list secara default menggunakan noktah.untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>. (PENS) 13
Atribut type pada tag <ul> : (PENS) 14
Contoh Listing 5.4: unorderedlist2.html <html> <head> <title>unordered List</title> </head> <body> <p>daftar Hari : </p> <ul type="circle"> <li>senin</li> <li>selasa</li> <li>rabu</li> <li>kamis</li> <li>jum'at</li> <li>sabtu</li> <li>minggu</li> </ul> </body> </html> (PENS) 15
unordered list dengan type = circle. (PENS) 16
Nested List List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi. (PENS) 17
Contoh Listing 5.5 :nestedlist.html <html> <head> <title>nested List</title> </head> <body> <ol> <li>buah</li> <ul type="circle"><li>semangka</li> <li>jambu</li> </ul> <li>bunga</li> <ul type="disc"> <li>melati</li> <li>anggrek</li> </ul> <li>kendaraan</li> <ul type="square"> <li>mobil</li> <li>sepeda Motor </li> </ul> </ol> </body> </html> (PENS) 18
Hasil Nested List (PENS) 19
Definition List Definition List terdiri diapit oleh tag <DL> </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri (PENS) 20
Contoh - Listing 5.6 :definitionlist.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>definition List</title> </head> <body> <h3>contoh Definition List</h3> <dl> <dt>web Design</dt> <dd>belajar HTML - Macromedia Dreamweaver</dd> <dt>pemrograman Web</dt> <dd>belajar PHP MySQL</dd> </dl> </body> </html> (PENS) 21
Hasil Definition List (PENS) 22
Tag-tag List HTML (PENS) 23
Toolbar Dreamweaver untuk tag-tag list HTML Keterangan tab Text ul : Unordered List ol : Ordered List li : List Item dl : Definition List dt : Definition Term dd : Definition Description (PENS) 24
FINISH (PENS) 25