Cara Membuat Daftar/List di HTML
Tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list disimbolkan dengan tag <ol>, dan unordered list disimbolkan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>.
Berikut adalah contoh penggunaan tag <li> menggunakan tag<ol>:
<!DOCTYPE html> <html> <head> <title>Belajar tag list</title> </head> <body> <h1>daftar Murid</h1> <ol> <li>Ryo Adjienda</li> <li>Syailendra</li> <li>Ali Cikande</li> </ol> </body> </html>
Hasilnya dalam halaman web.
Selanjutnya Anda akan latihan membuat unordered list menggunakan tag<ul>:
<!DOCTYPE html> <html> <head> <title>Belajar tag list </title> </head> <body> <h1>daftar murid</h1> <ul> <li>Ryo Adjienda</li> <li>Syailendra</li> <li>Ali Cikande</li> </ul> </body> </html>
Hasilnya dalam halaman web.
DESCRIPTION LIST
List jenis ini biasanya digunakan untuk menampilkan daftar yang berisi penjelasan.
untuk membuat description list, anda memerlukan beberapa tag antara lain :
- <dl></dl> : untuk menampilkan daftar dari description list
- <dt></dt> : untuk menampilkan sebuah istilah yang akan dijabarkan deskripsinya
- l <dd></dd> : untuk menampilkan deskripsi dari istilah yang ditulis dengan menggunakan tag <dt></dt>
baik langsung saja kita akan buat sebuah contoh skrip untuk pembuatan description list :
<!DOCTYPE html> <html> <head> <title>Belajar Membuat Daftar</title> </head> <body> <h3>Daftar Murid</h3> <dl> <dt>Ryo Adjinda</dt> <dd>Ryo Adjinda adalah anak dari Bayu Adjie tinggalnya di Bandung<dd> <dt>Syailendra</dt> <dd>Syailendra adalah anak dari Seno Adjie tinggalnya di Bangka</dd> <dt>Ali Cikande</dt> <dd>Ali Cikande adalah anak Santiajie tinggalnya di Cikande Banten</dd> </dl> </body> </html>
Hasilnya dalam halaman web tampak seperti berikut ini :
Selamat mencoba, semoga sukses.
Suryanto Tabrani dan Seno Adjie
0 Komentar