Bab 5 -List. Web Design Team Dosen. Politeknik Elektronika Negeri Surabaya (PENS) 1

Ukuran: px

Mulai penontonan dengan halaman:

Download "Bab 5 -List. Web Design Team Dosen. Politeknik Elektronika Negeri Surabaya (PENS) 1"

Sucianty Yuwono
7 tahun lalu
Tontonan:

1 Bab 5 -List Web Design Team Dosen (PENS) 1

2 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

3 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

4 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

5 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

6 (PENS) 6

7 Atribut type pada tag <ol> : (PENS) 7

8 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

9 (PENS) 9

10 Unordered List Untuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka <ul> dan penutup </ul> (PENS) 10

11 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

12 Hasil Unordered List (PENS) 12

13 Item unordered list secara default menggunakan noktah.untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>. (PENS) 13

14 Atribut type pada tag <ul> : (PENS) 14

15 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

16 unordered list dengan type = circle. (PENS) 16

17 Nested List List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi. (PENS) 17

18 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

19 Hasil Nested List (PENS) 19

20 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

21 Contoh - Listing 5.6 :definitionlist.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <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

22 Hasil Definition List (PENS) 22

23 Tag-tag List HTML (PENS) 23

24 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

25 FINISH (PENS) 25

dokumen-dokumen yang mirip

MODUL PRAKTIKUM APLIKASI IT 1 MODUL VI LIST

MODUL PRAKTIKUM APLIKASI IT 1 MODUL VI LIST MODUL VI LIST List diperlukan untuk menampilkan informasi yang bersifat berurutan dan biasanya ditampilkan delam bentuk daftar. HTML menyediakan beberapa jenis List, yaitu : 1. List tanpa nomor / Unordered