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

(1)

Bab 5 - List

Politeknik Elektronika Negeri Surabaya

(PENS)

1

(2)

Pendahuluan

List item di gunakan untuk mengelompokkan

data baik berurutan (ordered list) maupun

yang tidak berurutan (unordered list).

(3)

Ordered List

Untuk membuat list terurut nomor (ordered

list), kita gunakan tag pembuka <ol> dan

penutup </ol>

sedangkan untuk mendata setiap itemnya

(PENS)

3

sedangkan untuk mendata setiap itemnya

menggunakan tag <li> sebagai pembuka dan

</li> sebagai penutup

(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>Kamis</li> <li>Jum'at</li> <li>Sabtu</li> <li>Minggu</li> </ol>

(5)

Nomor item ordered list secara default

menggunakan angka 1,2,3,â¦.dst.

Untuk keperluan tampilan tertentu kita dapat

mengubah dengan mengubah atribut type

(PENS)

5

(6)

(7)

Atribut type pada tag <ol> :

(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>Kamis</li> <li>Jum'at</li> <li>Sabtu</li> <li>Minggu</li> </ol>

(9)

Politeknik Elektronika Negeri Surabaya

(10)

Unordered List

Untuk membuat list tidak terurut nomor

(11)

Contoh â Listing 5.3 :

unorderedlist1.html

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ul>

<li>Senin</li>

(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)

(15)

Contoh â Listing 5.4:

unorderedlist2.html

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<li>Senin</li>

Politeknik Elektronika Negeri Surabaya

(16)

(17)

Nested List

List item dapat digunakan secara bersarang,

maksudnya di dalam list ada list item lagi.

(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> <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>

(19)

Hasil Nested List

(20)

Definition List

Definition List terdiri diapit oleh tag <DL> â¦

</DL> dan <DT> tag menentukan definition

term serta <DD> tag menentukan definition

itu sendiri

(21)

Contoh - Listing 5.6 :

definitionlist.html

<html>

<head>

<title>Definition List</title>

</head>

<body>

<h3>Contoh Definition List</h3>

(PENS)

21

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

(22)

(23)

Tag-tag List HTML

(24)

Toolbar Dreamweaver untuk tag-tag

list HTML

Keterangan â tab Text

ul

: Unordered List

ol

: Ordered List

li

: List Item

dl

: Definition List

(25)

FINISH