Home  ›  html

Belajar HTML Dasar: #4 Membuat List

Written By Thursday, June 25, 2020 Add Comment Edit

Belajar HTML Dasar: #4 Membuat List - Selamat datang di codekami. Pada kesempatan kali ini kita akan belajar list dalam HTML. Kita ketahui dulu pengertian dari list. List adalah element yang digunakan untuk menampilkan informasi dalam bentuk list. 

 Baca juga: Belajar pemrograman php dari dasar.

Cara Membuat List di HTML

Dalam HTML kita mengenal ada 3 jenis list. Diantaranya:

     1.  Unordered List (ul), untuk membuat list yang tidak berurutan.
     2.  Ordered List (ol), untuk membuat list berurutan.
     3.  Description List, untuk membuat list yang berisi deskripsi/definisi.

      Unordered List (ul)

Dalam (ul) unordered list yang dibuat nanti akan menggunakan simbol-simbol. Cara menggunakan Unordered List dengan memberi <li> atau List Item. Seperti contoh dibawah ini :

 <!DOCTYPE html>
 <html>
 <head>
    <title>Belajar List HTML</title>
 </head>
 <body>
    <h4>Macam-macam bahasa pemrograman</h4>
    <ul>
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ul>
 </body>
 </html>

Hasilnya seperti contoh dibawah: 
Untuk model listnya temen-temen bisa buat menjadi kotak, bulat maupun menghilangkannya. Contoh :

 <!DOCTYPE html>
 <html>
 <head>
    <title>Belajar List HTML</title>
 </head>
 <body>
    <h4>ul type kotak</h4>
    <ul type="square">
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ul>
    <h4>ul type none</h4>
    <ul type=none>
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ul>
    <h4>ul type circle</h4>
    <ul type="circle">
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ul>
 </body>
 </html>

Hasilnya seperti ini:


Ordered List (ol)

Ordered List (ol) digunakan untuk membuat list secara berurutan. List ini akan ditandai dengan angka atau huruf didepanya. Sama seperti ul, ol dibuat dengan tag <ol> diikuti dengan tag <li> untuk membuat item list.

Contoh seperti script dibawah ini :

 <!DOCTYPE html>
 <html>
 <head>
    <title>Belajar List HTML</title>
 </head>
 <body>
    <h4>Macam-macam bahasa pemrograman</h4>
    <ol>
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ol>
 </body>
 </html>

Setelah kita jalankan di browser nanti akan muncuk tampilan seperti ini:
List diatas akan diurutkan berdasarkan angka 1 sampai seterusnya. Nah, terus bagaimana cara untuk merubah urutan angka menjadi abjad atau angka romawi?.

Caranya yaitu dengan kita menambahkan attribut type dalam tag <ol>. Sebagai contohnya:

 <!DOCTYPE html>
 <html>
 <head>
    <title>Belajar List HTML</title>
 </head>
 <body>
    <h4>List menggunakan Romawi</h4>
    <ol type="i">
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ol>
    <h4>List menggunakan Alfabet</h4>
    <ol type="a">
        <li>PHP</li>
        <li>JavaScript</li>
        <li>Node Js</li>
        <li>Java</li>
    </ol>
 </body>
 </html>

Outputnya seperti ini:

Teman-teman bisa modifikasi sendiri untuk urutannya. Bisa menggunakan alfabet kapital atau romawi kapital.

Description List

Untuk yang terakhir yaitu Description List. Berbeda dengan list ul atau ol, description list ini tidak memiliki penanda didepannya. List ini digunakan untuk menampilkan penjelasan. Contohnya seperti dalam kamus. 

Untuk menampilkan description list ini menggunakan tag <dl> data list. Dan didalamnya terdapat tag <dt> data term dan <dd> data description. Contohnya:

 <!DOCTYPE html>
 <html>
 <head>
    <title>Belajar List Description</title>
 </head>
 <body>
    <dl>
        <dt>HTML</dt>
        <dd>Saya sedang belajar HTML</dd>
        <dt>PHP</dt>
        <dd>Saya sedang belajar PHP</dd>
        <dt>JAVA</dt>
        <dd>Saya sedang belajar JAVA</dd>
    </dl>
 </body>
 </html>

Outputnya seperti ini:

Seperti itulah hasilnya teman-teman. Kita sudah belajar membuat List dalam HTML, selanjutnya kita akan belajar membuat tabel. Kalau ada yang ditanyakan silahkan tanya di kolom komentar. Sekian dari saya semoga bermanfaat. Sampai jumpa..

0 Response to "Belajar HTML Dasar: #4 Membuat List"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel