BREAKING NEWS

Cara Membuat List di HTML

HTML, Website |25 September 2020 |by Agus Suratna |1

List adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk daftar terurut. Biasanya digunakan untuk membuat menu.

Ada tiga jenis list di HTML:

  1. Ordered List adalah list yang terurut;
  2. Unordered List adalah list yang tak terurut;
  3. Description List adalah list yang berisi definisi.

 

1. Ordered List

Ordered list adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut. Ordered list dibuat dengan tag <ol>. Tag ini memiliki anak berupa tag untuk membuat item list yaitu <li> (list item).

<!DOCTYPE html> 
<html> 
     <head> 
          <title>Membuat List Ordered</title> 
     </head> 

     <body> 
          <h3>10 distro linux yang sering digunakan di Indonesia</h3> 
          <ol> 
               <li>Ubuntu</li> 
               <li>Mint</li> 
               <li>BlankOn</li> 
               <li>Fedora</li> 
               <li>Debian</li> 
               <li>CentOS</li> 
               <li>OpenSUSE</li> 
               <li>ElementaryOS</li> 
               <li>BackTrack</li> 
               <li>Kali Linux</li> 
          </ol> 
     </body> 
</html>

Hasilnya :

List diatas diurutkan berdasarkan angka dari 1 sampai 10. Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

  • a untuk alfabet a, b, c, dan seterusnya
  • A untuk alfabet A, B, C, dan seterusnya
  • i untuk angka romwari i, ii, iii, dan seterusnya
  • I untuk angka romwari I, II, III, dan seterusnya

Contoh :

<!DOCTYPE html>
<html>

    <head>
        <title>Ordered List dengan Atribut Type</title>
    </head>

    <body>
        <h3>List dengan type alfabet</h3>
        <ol type='a'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>
        
        <h3>List dengan type alfabet kapital (huruf besar)</h3>
        <ol type='A'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>

        <h3>List dengan type romawi</h3>
        <ol type='i'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>

        <h3>List dengan type romawi kapital</h3>
        <ol type='I'>
            <li>Tutorial List di HTML</li>
            <li>Tutorial Link di HTML</li>
            <li>Tutorial Tabel di HTML</li>
        </ol>

    </body>
</html>

Hasilnya :

Baca Juga  Include Dan Require Pada PHP

 

2. Unordered List

Sementara untuk list yang tidak terurut, biasanya menggunakan simbol-simbol. Cara membuatnya menggunakan tag <ul> (unordered list). Ia juga memiliki anak yang sama seperti <ol>.

Contoh :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>

    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:</h1>
        <ul>
            <li>Javascript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
            <li>Kotlin</li>
        </ul>
    </body>
</html>

Hasilnya :

Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga dapat menggantinya seperti ordered list dengan menggunakan atribut type.

Berikut ini nilai yang bisa diberikan untuk atribut type:

  • square untuk simbol persegi;
  • disc (default) untuk simbol lingkaran disc;
  • none tidak memakai simbol;
  • circle untuk simbol lingkaran;

Contoh :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>

    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:</h1>
        <ul type="square">
            <li>Javascript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
            <li>Kotlin</li>
        </ul>

        <h1>Framework untuk dipelajari:</h1>
        <ul type="circle">
            <li>Vuejs</li>
            <li>Svelte</li>
            <li>Reactjs</li>
       </ul>

        <h1>Tools untuk dipelajari:</h1>
        <ul type="none">
            <li>Gulp</li>
            <li>NPM</li>
            <li>Js Lint</li>
        </ul>

        <h1>Pelajari juga:</h1>
        <ul type="disc">
            <li>JSON</li>
            <li>XML</li>
            <li>Markdown</li>
        </ul>

    </body>
</html>

Hasilnya :

Selain menggunakan type list di atas, kita juga bisa menggunakan gambar.
Contohnya :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>

    <body>
        <h1>Bahasa Pemrograman untuk dipelajari:</h1>
        <ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
            <li>Javascript</li>
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
            <li>Kotlin</li>
        </ul>
    </body>
</html>

Hasilnya :

 

3. Description List

List ini digunakan untuk menampilkan deskripsi/penjelasan, contohnya seperti kamus. Tag untuk membuat description list adalah <dl> (data list).

Dalam tag ini terdapat tag <dt> (data term) dan <dd> (data description).

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Membuat Description List</title>
</head>

    <body>
        <h1>Daftar istilah:</h1>
        <dl>
            <dt>Kopi</dt>
            <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
            <dt>Kopi Black Magic</dt>
            <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
            <dt>White Coffee</dt>
            <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
            <dt>Kopi++</dt>
            <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
        </dl>
    </body>

</html>

Hasilnya :

Baca Juga  Tutorial PHP : #3 Variabel, Konstanta dan Tipe Data pada PHP

 

List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list. Caranya, list yang di dalam ditulis di dalam tag <li>.

Contoh:

<!DOCTYPE html>
<html lang='en'>

    <head>
        <title>List di dalam List</title>
    </head>

    <body>
        <h1>Distro Linux dan Keluarganya</h1>
        <ol>
            <li>Debian
                <ul>
                    <li>Ubuntu</li>
                    <li>Mint</li>
                    <li>elementaryOS</li>
                </ul>
            </li>

            <li>RedHat
                <ul>
                    <li>Fedora</li>
                </ul>
            </li>

            <li>Slackware</li>
        </ol>

    </body>
</html>

Hasilnya :

 

Referensi :

  • https://www.petanikode.com/html-list/

Related Post

1 Comment

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy