A. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1. Siswa memahami berbagai bentuk list yang tersedia pada HTML.
2. Siswa mampu membuat list pada tampilan website.
3. Siswa mampu menggunakan list sesuai dengan tampilan website.
B. Uraian Materi
Dalam website biasanya terdapat tampilan dengan format pilihan. Seperti pekerjaan, status, menu makanan atau kota tujuan. Agar tampilan pilihan tersebut terlihat menarik dapat menggunakan fasilitas list. Ada tiga jenis list dalam HTML yaitu :
1. UL (unordered list )
2. OL (ordered list )
3. DL (definition list )
- Unordered List ( daftar tidak berurutan)
Jenis <ul> digunakan untuk membuat item list dengan tanda bullet. Unordered list (UL) sering disebut sebagai bulleted list. Bullet ini bisa diubah dengan menambah atribut TYPE. Untuk list entri digunakan tag <li>.
Daftar type Unorderlist
| Type | Keterangan |
| disc | Tanda bulatan hitam |
| cicle | Tanda bulatan putih |
| square | Tanda kotak |
Contoh Penggunaan <ul>
- Ordered List (daftar berurutan )
Jenis <ol> digunakan untuk membuat item list dengan tanda angka arab atau romawi. Tag <ol> secara default menggunakan angka. Namun untuk keperluan tertentu dapat diatur berkat atribut type. Jika ingin list dimulai dari nilai tertentu dapat menggunakan atribut start. Kemudian tabel 4.1 berisi angka yang tersedia untuk penomoran.
Daftar nilai yang mendukung atribut
- Definition List
Sedangkan <dl> digunakan untuk membuat item list secara kalimat terdefinisi. Tag
<dl> juga dapat digunakan untuk informasi pilihan dalam bentuk kalimat. Untuk menggunakannya tag <dl> disertai tag <dt> dan <dd>.
<HTML>
<HEAD><TITLE> contoh </TITLE>
</HEAD>
<BODY>
<h3>Terdiri dua bagian</h3>
<dl><b>Bagian Pertama :</b>
<dt>Menu Nasi :</dt>
<dd>Nasi Kuning Rasa Ayam Bawang</dd>
<dd>Nasi Goreng dengan Telor Dadar</dd>
<dt>Menu Sayur :</dt>
<dd>Sayur Garang Asem Ayam Kampung</dd>
<dd>Sayur Lodeh Bumbu Rujak Cingur</dd>
</dl>
</BODY>
</HTML> C. Praktikum
1. Alat dan Bahan:
- Komputer
- Notepad/Notepade++/Sublime Text
- Ebook
2. Ketiklah Program dibawah ini:
<HTML>
<HEAD><TITLE> contoh </TITLE>
</HEAD>
<BODY>
<h3>Menu masakan Rumah Makan Pasti Enak :</h3>
<ul type="disc"><b>Menu Makanan :</b>
<li>Sayur Asem</li>
</ul><ul type="circle">
<b>Menu Minuman :</b>
<li>Es Jeruk</li>
</ul>
<ul type="square"><b>Menu Spesial :</b>
<li>Nasi Goreng Cumi-cumi</li>
</ul>
</BODY>
</HTML>Simpan dalam folder RPL dengan nama file : ul1.html