-->

Iklan bawah header

Belajar HTML Part 7 - Cara Membuat List di HTML

membuat list di html

Jika kamu disuruh untuk membuat daftar barang yang harus kamu beli dengan menggunakan HTML..

..bagaimana kamu membuatnya?

Mungkin kamu bisa membuatnya dengan cara seperti ini:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat Link di HTML</title>
    </head>
    <body>
         <h1>Daftar Buah untuk dibeli:</h1>
         <p>- Durian</p>
         <p>- Mangga</p>
         <p>- Semangka</p>
         <p>- Apel</p>
    </body>
</html>

Hasil yang akan ditampilkan mungkin akan terlihat sebagai list.

contoh list html

Tapi, ini bukanlah cara yang benar untuk membuat list di HTML. Karena HTML sendiri sudah menyediakan tag khusus untuk membuat list.

Lalu, bagaimana cara membuatnya?

Mari kita bahas..

Cara Membuat List di HTML

Dalam HTML ada tiga macam jenis list yang bisa kita buat, yatiu ordered list (list yang terurut), unordered list (list yang tak terurut) dan description list (list yang berisi definisi).

Untuk lebih jelasnya, mari kita bahas satu per satu...

Ordered List di HTML

Ordered list ini akan menampilkan daftar atau list dalam bentuk angka atau huruf. Tag yang digunakan untuk membuat ordered list ini yaitu tag <ol>. Nantinya didalam tag <ol> ini akan berisikan dengan item-item yang akan dimasukan ke dalam list. Daftar item tersebut bisa kita buat dengan menggunakan tag <li> (list item).

Berikut contohnya:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Membuat Ordered List di HTML</title>
    </head>
    <body>
         <h1>Buah Favoritku:</h1>
         <ol>
               <li>Semangka</li>
               <li>Mangga</li>
               <li>Pisang</li>
               <li>Manggis</li>
               <li>Durian</li>
          </ol>
    </body>
</html>

Hasilnya:

contoh ordered list

Contoh diatas merupakan list yang diurutkan berdasarkan angka dari 1,2 sampai 5.

Selain menggunakan angka, kamu juga bisa membuat list berdasarkan huruf seperti a,b,c atau juga berdasarkan angka romawi seperti I, II, III. Untuk membuatnya, kita bisa menambahkan atribut type pada tag ol dan berikut nilai yang bisa ditambahkan ke dalam atribut type:

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

Berikut contohnya:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Membuat Ordered List dengan Atribut Type</title>
    </head>
    <body>
         <h3>Membuat List dengan type alfabet kapital</h3>
         <ol  type='A'>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
         </ol>
         <h3>Membuat List dengan type alfabet</h3>
         <ol  type='a'>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
          </ol>
<h3>Membuat List dengan type romawi</h3>
         <ol  type'i'>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
          </ol>
<h3>Membuat List dengan type romawi kapital</h3>
         <ol  type = 'I'>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
               <li>Cara Membuat List di HTML</li>
          </ol>
    </body>
</html>

Hasilnya:

orderd list dengan atribut type

Unordered List di HTML

Unordered list ini akan menampilkan daftar atau list dalam bentuk simbol. Tag yang akan digunakan untuk membuat unoredered list yaitu <ul> dan untuk daftar setiap itemnya dibuat juga dengan menggunakan tag <li>.

Berikut Contohnya:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat List di HTML</title>
    </head>
    <body>
         <h1>Pelajari Bahasa Pemrograman Berikut:</h1>
         <ul>
              <li>Javascript</li>
              <li>Java</li>
              <li>PHP</li>
              <li>Python</li>
              <li>Kotlin</li>
         </ul>
    </body>
</html>

Hasilnya:

membuat unordered list

Secara default simbol yang akan digunakan pada tag unordered list adalah simbol lingkaran kecil. Untuk mengganti dengan simbol yang lainnya, kita bisa menggunakan atribut type.

Berikut nilai yang bisa ditambahkan dalam atribut type:

  • disc untuk simbol lingkaran
  • square untuk simbol persegi
  • circle untuk simbol lingkaran
  • none tidak memakai simbol

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat List di HTML</title>
    </head>
    <body>
         <h1>Pelajari Bahasa Pemrograman Berikut:</h1>
         <ul type="square">
              <li>Javascript</li>
              <li>Java</li>
              <li>PHP</li>
              <li>Python</li>
              <li>Kotlin</li>
         </ul>
         <h1>Pelajari Bahasa Pemrograman Berikut:</h1>
         <ul type="circle">
              <li>Javascript</li>
              <li>Java</li>
              <li>PHP</li>
              <li>Python</li>
              <li>Kotlin</li>
         </ul>
         <h1>Pelajari Bahasa Pemrograman Berikut:</h1>
         <ul type="disc">
              <li>Javascript</li>
              <li>Java</li>
              <li>PHP</li>
              <li>Python</li>
              <li>Kotlin</li>
         </ul>
         <h1>Pelajari Bahasa Pemrograman Berikut:</h1>
         <ul type="none">
              <li>Javascript</li>
              <li>Java</li>
              <li>PHP</li>
              <li>Python</li>
              <li>Kotlin</li>
         </ul>
    </body>
</html>

Hasilnya:

Membuat unordered list

Selain menggunakan simbol, kita juga bisa membuat list dengan menggunakan gambar. Caranya dengan menambahkan atribut style pada tag <ul>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat List di HTML</title>
    </head>
    <body>
         <h1>Pelajari Bahasa Pemrograman Berikut:</h1>
         <ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
              <li>Javascript</li>
              <li>Java</li>
              <li>PHP</li>
              <li>Python</li>
              <li>Kotlin</li>
         </ul>
    </body>
</html>

Hasilnya:

membuat unordered list dengan atribut style

Description List di HTML

Description List merupakan list yang berisi deskripsi atau penjelasan. Terdapat tiga tag yang akan kita gunakan untuk membuat description list:

  • <dl> (description list) untuk memulai description list
  • <dt> (description term) untuk membuat kata yang akan dideskripsikan
  • <dd> (description description) untuk membuat penjelasan dari kata

Contohnya:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Belajar Membuat Description List HTML</title>
    </head>
    <body>
         <h1>Daftar istilah:</h1>
         <dl>
               <dt>Kata yang akan dideskripsikan</dt>
               <dd>Penjelasan dari kata yang akan dideskripsikan</dd>
               <dt>Kata yang akan dideskripsikan</dt>
               <dd>Penjelasan dari kata yang akan dideskripsikan</dd>
               <dt>Kata yang akan dideskripsikan</dt>
               <dd>Penjelasan dari kata yang akan dideskripsikan</dd>
               <dt>Kata yang akan dideskripsikan</dt>
               <dd>Penjelasan dari kata yang akan dideskripsikan</dd>
         </dl>
    </body>
</html>

Hasilnya:

membuat description list

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel