Membuat Daftar List HTML Sederhana

Bookmark and Share
Membuat Daftar List Html Sederhana Menggunakan fungsi tag <ul></ul> dan tag <ol></ol>




     <html>
    <head>
    <title>Daftar list Sederhana Html</title>
    </head>
    <body>
    <h2>Membuat Daftar List Html Sederhana
    </h2>
    <p>
    <hr>
    <div align="center">
    <table width="80%" border="1" align="center">
    <tr>
    <td>Menggunakan &lt;UL&gt;&lt;\UL&gt; </td>
    <td><div align="center"></div>
    <p align="center">Menggunakan &lt;OL&gt;&lt;\OL&gt;</p></td>
    </tr>
    <tr>
    <td><ul>
    <li><a href="#">Daftar 1 </a></li>
    <li><a href="#">Daftar 2 </a></li>
    <li><a href="#">Daftar 3 </a></li>
    <li><a href="#">Daftar 4 </a></li>
    <li><a href="#">Daftar 5 </a></li>
    <li><a href="#">Daftar 6 </a></li>
    <li><a href="#">Daftar 7 </a></li>
    <li><a href="#">Daftar 8 </a></li>
    <li><a href="#">Daftar 9 </a></li>
    <li><a href="#">Daftar 10</a></li>
    </ul></td>
    <td><div align="center"></div>
    <div align="center">
    <ol>
    <li><a href="#">Daftar 1 </a></li>
    <li><a href="#">Daftar 2 </a></li>
    <li><a href="#">Daftar 3 </a></li>
    <li><a href="#">Daftar 4 </a></li>
    <li><a href="#">Daftar 5 </a></li>
    <li><a href="#">Daftar 6 </a></li>
    <li><a href="#">Daftar 7 </a></li>
    <li><a href="#">Daftar 8 </a></li>
    <li><a href="#">Daftar 9 </a></li>
    <li><a href="#">Daftar 10</a></li>
    </ol>
    </div></td>
    </tr>
    </table>
    </li>
    </ul>
    </div>
    <div align="center"></div>
    <ol>
    </ol>
    <p>&nbsp;</p>
    </body>
    </html>

    Save as dengan ekstensi html
    Jika kita ingin menambahkan fitur css dalam script yang ada di atas pada tag <head></head> kita bisa menambahkan  script yang ada di bawah ini


    <STYLE TYPE="text/css">
    BODY, P {color: black; font-family: verdana; font-size: 10 pt}
    H1 {margin-top: 10; color: black; font-family: arial; font-size: 12 pt}
    H2 {margin-bottom: -10; color: black; font-family: verdana; font-size:
    18 pt}
    A:link, A:visited {color: #000080; text-decoration: none}
    </STYLE>

    { 0 komentar... Views All / Send Comment! }

    Poskan Komentar