Tutorial Belajar Nested List di HTML
Sunday, May 14, 2017
Add Comment
Pada beberapa kasus kita perlu membuat daftar subpoin di dalam poin list. Untuk itu kita dapat membuat list di dalam list.
<ol>
<li>
daftar satu
<ul>
<li>subdaftar pertama</li>
<li>subdaftar kedua</li>
</li>
<li>subdaftar ketiga</li>
</ul>
</ol>
<li>daftar dua</li>
<li>daftar tiga</li>
Contoh kode di atas akan tampil seperti ini:
- daftar satu
- subdaftar pertama
- subdaftar kedua
- subdaftar ketiga
- daftar dua
- daftar tiga
Perhatikan bahwa untuk membuat list di dalam list, kita meletakkan sub list di dalam tag
<li> dari salahsatu poin list induknya.PRAKTEK
- Pada editor terdapat kode HTML berisi daftar menu website online shop pakaian pria. Jalankan kode dan lihat tampilan outputnya.
- Gantilah setiap
<h2>pada dokumen menjadi poin list, sehingga setiap list yang ada di bawah masing-masing<h2>menjadi sub list di atasnya.
<ul>
<li>Pakaian
<ul>
<li>Atasan</li>
<li>Outerwear</li>
<li>Baju Koko</li>
<li>Bawahan</li>
<li>Pakaian Tidur</li>
<li>Pakaian Dalam</li>
</ul>
</li>
<li>Sneakers & Skate</li>
<li>Sepatu
<ul>
<li>Sepatu Derbies</li>
<li>Sandal & Flip Flop</li>
<li>Sepatu Olahraga</li>
<li>Loafers</li>
<li>Boots</li>
<li>Jam Tangan</li>
</ul>
</li>
<li>Aksesoris
<ul>
<li>Tas</li>
<li>Syal</li>
<li>Kacamata</li>
<li>Dompet</li>
<li>Topi</li>
<li>Ikat Pinggang</li>
</ul>
</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<style>
</style>
</head>
<body>
<h1>Men's Wear Online Shop</h1>
<h2>Pakaian</h2>
<ul>
<li>Atasan</li>
<li>Outerwear</li>
<li>Bawahan</li>
<li>Baju Koko</li>
<li>Pakaian Dalam</li>
<li>Pakaian Tidur</li>
</ul>
<h2>Sepatu</h2>
<ul>
<li>Sepatu Derbies</li>
<li>Sneakers & Skate</li>
<li>Sepatu Olahraga</li>
<li>Sandal & Flip Flop</li>
<li>Loafers</li>
<li>Boots</li>
</ul>
<h2>Aksesoris</h2>
<ul>
<li>Tas</li>
<li>Jam Tangan</li>
<li>Syal</li>
<li>Dompet</li>
<li>Topi</li>
<li>Ikat Pinggang</li>
<li>Kacamata</li>
</ul>
</body>
</html>
Hasilnya:
Men's Wear Online Shop
Pakaian
- Atasan
- Outerwear
- Bawahan
- Baju Koko
- Pakaian Dalam
- Pakaian Tidur
Sepatu
- Sepatu Derbies
- Sneakers & Skate
- Sepatu Olahraga
- Sandal & Flip Flop
- Loafers
- Boots
Aksesoris
- Tas
- Jam Tangan
- Syal
- Dompet
- Topi
- Ikat Pinggang
- Kacamata
0 Response to "Tutorial Belajar Nested List di HTML"
Post a Comment