Baca Juga
Langkah berikutnya yang akan kita pelajari adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag List.
Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List <ol>
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. list yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail.
<!DOCTYPE html>
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
Priview
Pada Ordered List“<ol> secara default pengurutan akan diurutkan dengan angka. Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut type pada tag <ol> contoh:
<!DOCTYPE html>
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol type="A">
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
Priview
Ketika script di atas di jalankan makan pengurutan list akan berubah, pengurutan akan diurutkan dengan huruf.
2. Unordered List <ul>
Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet. Cara membuatnya sama dengan Ordered List hanya saja tag <ol> diganti dengan tag <ul>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ul>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ul>
</body>
</html>
Priview
3. List tanpa bullet <dl>
Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan <dl> lalu tag <li> diganti dengan <dd>
contoh:
<!DOCTYPE html>
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<dl type=>
<dd>Memasak</dd>
<dd>cuci piring</dd>
<dd>cuci baju</dd>
<dd>mandi</dd>
<dd>sarapan</dd>
<dd>berangkat sekolah</dd>
</dl>
</body>
</html>
Priview
Selamat mencoba..
Bagian 12. Membuat List Pada Halaman HTML
Reviewed by Akief Takaful
on
11:09 PM
Rating:

No comments: