4. Tutorial HTML Membuat Daftar Atau List

Halo Masih dengan Om aji dan Masih dengan tutorial HTML, Setelah kita membahas tutorial cara pengaturan paragraf dengan HTML sekarang kita akan membahas tutorial cara membuat daftar atau list menggunakan HTML.
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>
<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