Bab 5 - List
Politeknik Elektronika Negeri Surabaya
(PENS)
1
Pendahuluan
List item di gunakan untuk mengelompokkan
data baik berurutan (ordered list) maupun
yang tidak berurutan (unordered list).
Ordered List
Untuk membuat list terurut nomor (ordered
list), kita gunakan tag pembuka <ol> dan
penutup </ol>
sedangkan untuk mendata setiap itemnya
Politeknik Elektronika Negeri Surabaya
(PENS)
3
sedangkan untuk mendata setiap itemnya
menggunakan tag <li> sebagai pembuka dan
</li> sebagai penutup
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>
Nomor item ordered list secara default
menggunakan angka 1,2,3,â¦.dst.
Untuk keperluan tampilan tertentu kita dapat
mengubah dengan mengubah atribut type
Politeknik Elektronika Negeri Surabaya
(PENS)
5
Atribut type pada tag <ol> :
Politeknik Elektronika Negeri Surabaya
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>
Politeknik Elektronika Negeri Surabaya
Unordered List
Untuk membuat list tidak terurut nomor
Contoh â Listing 5.3 :
unorderedlist1.html
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul>
<li>Senin</li>
Politeknik Elektronika Negeri Surabaya
Item unordered list secara default
menggunakan noktah.Untuk keperluan
tampilan tertentu kita dapat mengubah
dengan mengubah atribut type pada tag <ul>.
Politeknik Elektronika Negeri Surabaya
(PENS)
13
Contoh â Listing 5.4:
unorderedlist2.html
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul type="circle">
<li>Senin</li>
Politeknik Elektronika Negeri Surabaya
Nested List
List item dapat digunakan secara bersarang,
maksudnya di dalam list ada list item lagi.
Politeknik Elektronika Negeri Surabaya
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>
Hasil Nested List
Politeknik Elektronika Negeri Surabaya
Definition List
Definition List terdiri diapit oleh tag <DL> â¦
</DL> dan <DT> tag menentukan definition
term serta <DD> tag menentukan definition
itu sendiri
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>
Politeknik Elektronika Negeri Surabaya
(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>
Tag-tag List HTML
Politeknik Elektronika Negeri Surabaya
Toolbar Dreamweaver untuk tag-tag
list HTML
Keterangan â tab Text
Keterangan â tab Text
ul
: Unordered List
ol
: Ordered List
li
: List Item
dl
: Definition List
FINISH
Politeknik Elektronika Negeri Surabaya
