Bab 5 - List
Web Design Team Dosen
Politeknik Elektronika Negeri Surabaya (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.
Politeknik Elektronika Negeri Surabaya (PENS)
2
Ordered List Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka
dan penutup
sedangkan untuk mendata setiap itemnya menggunakan tag
sebagai pembuka dan sebagai penutup ol kependekan dari Ordered List li kependekan dari List Item. Politeknik Elektronika Negeri Surabaya (PENS)
3
Contoh – Listing 5.1: orderedlist1.html
Ordered List Daftar Hari :
- Senin
- Selasa
- Rabu
- Kamis
- Jum'at
- Sabtu
- Minggu
Daftar Kuliah :
- Web Design
- Pemrograman web
- Database
Politeknik Elektronika Negeri Surabaya (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
.
Politeknik Elektronika Negeri Surabaya (PENS)
5
Politeknik Elektronika Negeri Surabaya (PENS)
6
Atribut type pada tag :
Politeknik Elektronika Negeri Surabaya (PENS)
7
Contoh - Listing 5.2 : orderedlist2.html Ordered List Daftar Hari :
- Senin
- Selasa
- Rabu
- Kamis
- Jum'at
- Sabtu
- Minggu
Daftar Kuliah :
- Web Design
- Pemrograman web
- Database
Politeknik Elektronika Negeri Surabaya (PENS)
8
Politeknik Elektronika Negeri Surabaya (PENS)
9
Unordered List Untuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka
Politeknik Elektronika Negeri Surabaya (PENS)
10
Contoh – Listing 5.3 : unorderedlist1.html Unordered List Daftar Hari :
- Senin
- Selasa
- Rabu
- Kamis
- Jum'at
- Sabtu
- Minggu
Politeknik Elektronika Negeri Surabaya (PENS)
11
Hasil Unordered List
Politeknik Elektronika Negeri Surabaya (PENS)
12
Item unordered list secara default menggunakan noktah.Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag .
Politeknik Elektronika Negeri Surabaya (PENS)
13
Atribut type pada tag :
Politeknik Elektronika Negeri Surabaya (PENS)
14
Contoh – Listing 5.4: unorderedlist2.html Unordered List Daftar Hari :
- Senin
- Selasa
- Rabu
- Kamis
- Jum'at
- Sabtu
- Minggu
Politeknik Elektronika Negeri Surabaya (PENS)
15
unordered list dengan type = circle.
Politeknik Elektronika Negeri Surabaya (PENS)
16
Nested List List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi.
Politeknik Elektronika Negeri Surabaya (PENS)
17
Contoh – Listing 5.5 : nestedlist.html Nested List - Buah
- Bunga
- Kendaraan
Politeknik Elektronika Negeri Surabaya (PENS)
18
Hasil Nested List
Politeknik Elektronika Negeri Surabaya (PENS)
19
Definition List Definition List terdiri diapit oleh tag …
dan - tag menentukan definition term serta
- tag menentukan definition itu sendiri
Politeknik Elektronika Negeri Surabaya (PENS)
20
Contoh - Listing 5.6 : definitionlist.html <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Definition List Contoh Definition List
- Web Design
- Belajar HTML - Macromedia Dreamweaver
- Pemrograman Web
- Belajar PHP MySQL
Politeknik Elektronika Negeri Surabaya (PENS)
21
Hasil Definition List
Politeknik Elektronika Negeri Surabaya (PENS)
22
Tag-tag List HTML
Politeknik Elektronika Negeri Surabaya (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 Politeknik Elektronika Negeri Surabaya (PENS)
24
FINISH
Politeknik Elektronika Negeri Surabaya (PENS)
25
