Membuat list dan pilihan di HTML
List dan Pilihan
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). contoh kita mau mengelompokan dat-data berikut : Pisang, Jambu, Apel, Anggur dapat kita dikelompokan ke dalam kelompok : Buah-buahan.
Ordered List
Untuk membuka 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.
orderedlist.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>
simpan dengan format html
hasilnya :
Atribut type pada tag <ol> :
| Type | Arti |
| I | Angka ditampilkan dengan angka romawi huruf besar |
| i | Angka ditampilkan dengan angka romawi huruf kecil |
| A | Angka ditampilkan dengan abjad huruf besar |
| a | Angka ditampilkan dengan abjad huruf kecil |
contoh orderedlist 2
<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>
<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>
hasilnya :
Unordered ListUntuk membuat list tidak terurut nomor (Unordered List), kita gunakan
tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya
menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ul kependekan
dari Unordered List, li kependekan dari List Item
tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya
menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ul kependekan
dari Unordered List, li kependekan dari List Item
contoh 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>
<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>
hasilnya :
Item unordered list secara default mengunakan noktah.Untuk keperluan tampilan
tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>.
tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>.
Atribut type pada tag <ul> :
Contoh : 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>
| Type | Arti |
| Circle | Bullet Lingkaran |
| Disc | Bullet Titik |
| Square | Bullet Kotak |
<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>
hasilnya :
Keterangan : unordered list dengan type = circle.
Nested ListList item dapat digunakan secara bersarang, maksudnya di dalam list ada
list item lagi.Contoh : 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>
hasil jadi:
Definition ListDefinition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag
menentukan definition term serta <DD> tag menentukan definition itu sendiriContoh - 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>
<dl>
<dt>Web Design</dt>
<dd>Belajar HTML - Macromedia Dreamweaver</dd>
<dt>Pemrograman Web</dt>
<dd>Belajar PHP MySQL</dd>
</dl>
</body>
</html>
menentukan definition term serta <DD> tag menentukan definition itu sendiriContoh - 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>
<dl>
<dt>Web Design</dt>
<dd>Belajar HTML - Macromedia Dreamweaver</dd>
<dt>Pemrograman Web</dt>
<dd>Belajar PHP MySQL</dd>
</dl>
</body>
</html>
hasil jadi :
Tag-tag List HTML
| Tag Awal | Keterangan |
| <ol> | Mendefinisikan Ordered List |
| <ul | Mendefinisikan Unored List |
| <li> | Mendefinisikan List Item |
| <dl> | Mendefinisikan Definition List |
| <dt> | Mendefinisikan Definition Term |
| <dd> | Mendefinisika |
Selamat Mencoba
Komentar
Posting Komentar