Dalam pembuatan list ada tiga cara yaitu menggunakan Ordered list, Unordered list dan Nested list
Ok langsung saja kita mulai untuk coding cara membuat daftar atau list di HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat list di HTML</title>
</head>
<body>
<h3>Ini adalah macam-macam list </h3>
<p>Membuat ordered list</p>
<ol>
<li>Ini adalah ordered list</li>
<li>Ini adalah ordered list</li>
<li>Ini adalah ordered list</li>
<li>Ini adalah ordered list</li>
</ol>
<p>Membuat unordered list</p>
<ul>
<li>Ini adalah unordered list</li>
<li>Ini adalah unordered list</li>
<li>Ini adalah unordered list</li>
<li>Ini adalah unordered list</li>
</ul>
<p>Membuat nested list</p>
<ul>
<li>Ini adalah nested list
<ul>
<li>Ini adalah nested list</li>
<li>Ini adalah nested list</li>
<li>Ini adalah nested list</li>
</ul>
</li>
</ul>
</body>
</html>
Hasilnya seperti ini
sekarang kita akan membuat contoh nested list.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat list di HTML</title>
</head>
<body>
<h3>Daftar Menu Kedai Baso Om Bewok</h3>
<ul>
<li>Baso
<ol>
<li>Baso Rudal</li>
<li>Baso Granat</li>
<li>Baso Urat</li>
<li>Baso Telur</li>
</ol>
<li>Minuman
<ul>
<li>Es Teh Manis</li>
<li>Es Jeruk</li>
<li>Es Tawar</li>
</ul>
</li>
</ul>
</body>
</html>
Hasilnya seperti ini
Sudah Selesai ? Belum dong, om aji mau kasih tau lagi nih, ih om aji baik banget sih, :)))
sebenernya ada beberapa yang dapat kita ubah, yang bulet bulet itu seperti ta* lalat bisa di ganti menjadi kotak lohh. mau tau caranya ? kalau bilang ga mau berarti ga jadi nih :))
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat list di HTML</title>
</head>
<body>
<h3>ul menjadi bentuk kotak </h3>
<ul type="square">
<li>Ini Jadi Kotak LOH</li>
<li>Ini Jadi Kotak LOH</li>
<li>Ini Jadi Kotak LOH</li>
<li>Ini Jadi Kotak LOH</li>
</ul>
</body>
</html>
Hasil nya jadi seperti ini loh
Sekian untuk tutorial kali ini, kita akan bertemu kembali dengan tutorial berikutnya.
No comments:
Post a Comment