Membuat List Pada HTML Ordered List dan Unordered List Mudah

Membuat List

List atau sering kita sebut juga dengan daftar yaitu suatu metode untuk mengurutkan data, misalkan dalam sebuah warung kita bisa membuat sebuah list dengan cara ordered list(OL) atau bisa juga dengan Unordered List(UL). Ordered list yaitu suatu daftar list yang terurut bisa dengan angka, angka romawi sedangkan OL itu hanya dengan simbol misalkan dengan tanda centang atau titik.

Contoh Ordered List

<html>
<head>
    <title>List Kombinasi</title>
</head>
<body>
    <h1>Contoh Ordered List mulai nomor 17</h1>
    <ol start="17">
        <li>Multimedia</li>
        <li>Teknik Komputer Jaringan</li>
        <li>Rekayasa Perangkat Lunak</li>
    </ol>
    <h2>Contoh Ordered List Mulai dari abjad 17</h2>
        <ol start="17">
            <li>Ungu </li>
            <li>Merah</li>
            <li>Hijau</li>
        </ol>
        <h3>Contoh Ordered List 'a'</h3>
        <ol type="25">
            <li>Violet</li>
            <li>Red</li>
            <li>Green</li>
        </ol>
        <h4>Contoh Ordered List 'I' Romawi</h4>
        <ol type="I">
        <li>Kelas X</li>
        <li>Kelas XI</li>
        <li>Kelas XII</li>
        </ol>
        <h4>Contoh Ordered List 'i' Romawi</h4>
        <ol type="i">
            <li>Satu</li>
            <li>Dua</li>
            <li>Tiga</li>
        </ol>
</body>

</html>

 

ketika kita buka di browser maka hasilnya adalah 

 

selanjutnya kita kita akan menggunakan salah satu contoh Unordered List

 <html>
<head>
    <title>Vertebrata</title>
</head>
<body>
    <h1>Vertebrata </h1>
    <ul>
        <li>Ikan
    <ul>
        <li>Patin </li>
        <li>Gurame </li>
        <li>Mujair </li>
    </ul>
    </li>
    <li>Amfibi
        <ul>
        <li>Ordo anura
        <ul>
            <li>katak Hijau</li>
            <li>katak Darat</li>
            <li>katak Ungu</li>
        </ul>
        </li>
        <li>Ordo Urodela
        <ul type="circle">
            <li>Salamander</li>
            <li>Mudpuppy</li>
            </ul>
        </li>
        <li>Reptil
        <ul>
            <li>Buaya</li>
            <li>Ular Kobra</li>
            <li>Penyu</li>
        </ul>
        </li>
</body>
</html>

 

hasil setelah di run 

 

 kemudian kita akan menggunakan kedua list tersebut digabungkan atau kita sebut dengan list kombinasi

<html>
    <head>
        <title>Masih latihan list kombinasi</title>
    </head>
    <body>
        <h1>kombinasi OL dan UL</h1>
            <ol type="1">
                <li>Daftar Makanan Tadisional</li>
                <ul type="circle"><li>Tahu Gejrot</li></ul>
                <ul type="disc"><li>Peuyeum</li></ul>
                <ul type="square"><li>Karedok</li></ul>
            </ol>
        <h2>kombinasi OL dan UL</h2>
            <ol type="2">
                <li>Daftar Mata Kuliah</li>
                <ul type="circle"><li>Functional Programming</li></ul>
                <ul type="disc"><li>System Container</li></ul>
                <ul type="square"><li>Web Programming</li></ul>
                <ul type="circle"><li>Character Building</li></ul>
                <ul type="disc"><li>Computer Protokol</li></ul>
                <ul type="square"><li>Indonesia</li></ul>
                <ul type="circle"><li>Database Sql & NoSql</li></ul>
               
            </ol>
    </body>
</html>

hasil setelah kita run di browser


 

 

 

Contoh diatas hanya sebagai salah satu contoh list, maka dari itu selanjutnya kita bisa mengembangkan dari list dasar tersebut.

 

 

 

 

 

 

 

 

 

Subscribe to receive free email updates:

0 Response to "Membuat List Pada HTML Ordered List dan Unordered List Mudah"