Wednesday, June 6, 2018

Membuat daftar/list bersarang dengan HTML

Langkah 1: Membuat Markup HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ol>
  <li>Item 1</li>               <!-- 1     -->
  <li>Item 2                      <!-- 2     -->
    <ol>
      <li>Sub Item 1</li>           <!-- 2.1   -->
      <li>Sub Item 2</li>           <!-- 2.2   -->
      <li>Sub Item 3                  <!-- 2.3   -->
        <ol>
          <li>Sub-sub Item 1</li>   <!-- 2.3.1 -->
          <li>Sub-sub Item 2</li>   <!-- 2.3.2 -->
          <li>Sub-sub Item 3</li>   <!-- 2.3.3 -->
          <li>Sub-sub Item 4</li>   <!-- 2.3.4 -->
        </ol>
      </li>
      <li>Sub Item 4</li>           <!-- 2.4   -->
    </ol>
  </li>
  <li>Item 3</li>               <!-- 3     -->
  <li>Item 4</li>               <!-- 4     -->
</ol>





Atau bisa sperti di bawah ini

<!DOCTYPE html>
<html>
<head>
    <title>Membuat daftar/list bersarang di HTML</title>
</head>
<body>
    <h1>Cara membuat daftar/list bersarang di HTML</h1>
    <ul>
        <li>Contoh daftar bersarang
            <ul>
                <li>Item daftar bersarang</li>
                <li>Item daftar bersarang</li>
                <li>Item daftar bersarang</li>
            </ul>
        </li>
        <li>Contoh daftar bersarang
            <ul>
                <li>Item daftar bersarang</li>
                <li>Item daftar bersarang</li>
                <li>Item daftar bersarang</li>
            </ul>
        </li>
        <li>Contoh daftar bersarang
            <ul>
                <li>Item daftar bersarang</li>
                <li>Item daftar bersarang</li>
                <li>Item daftar bersarang</li>
            </ul>
        </li>
    </ul>
</body>
</html>
Dari kode html di atas seharusnya muncul seperti gambar di bawah ini.
Cara Membuat Daftar/List di HTML

0 comments:

Post a Comment