Beranda  ›  HTML  ›  Tutorial

Tutorial Belajar Nested List di HTML

,


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:
  1. daftar satu
    • subdaftar pertama
    • subdaftar kedua
    • subdaftar ketiga
  2. daftar dua
  3. 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

Subscribe to receive free email updates:

0 Response to "Tutorial Belajar Nested List di HTML"

Posting Komentar

Langganan: Posting Komentar (Atom)