Index of /Kuliah2013-2014/Desain&PemrogramanWeb/Day3-4

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
dan penutup

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
Semangka
Jambu

Bunga

Melati
Anggrek

Kendaraan

Mobil
Sepeda Motor





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



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