SELAMAT DATANG DI BLOG KAMI
<< ASEP HILMAN >> << ASEP HILMAN >>

Menyajikan informasi dalam bentuk list di HTML



Menyajikan informasi dalam bentuk list di HTML


List dibagi menjadi tiga yaitu ordered list (senarai terurut), unordered list (tak terurut) dan Description List (daftar deskripsi/daftar definisi).


1. Ordered List

Ordered list adalah sebuah senarai yang terurut. Senarai ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa senarai ini urut. Ordered list dapat dibuat dengan tag <ol>. Tag ini memiliki anak berupa tag untuk membuat butir list yaitu <li> (list index). Contoh:
<!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>
Tampilan di pramban web:

10 distro linux yang sering digunakan di Indonesia

  1. Ubuntu
  2. Mint
  3. BlankOn
  4. Fedora
  5. Debian
  6. CentOS
  7. OpenSUSE
  8. ElementaryOS
  9. BackTrack
  10. Kali Linux
Pada hasil pembauatan list diatas, tampak sebuah daftar nama distro linux dari 1 sampai 10. Tapi bagaimana kalau saya tidak ingin angka sebagai penanda list, misalkan a,b,c atau dengan bilangan romawi I,II,III,IV. Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag <ol>. 
<!DOCTYPE html>
<html>
<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
   <h3>List dengan type alfabet</h3>
       <ol type='a'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type alfabet kapital (huruf besar)</h3>
       <ol type='A'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type romawi</h3>
       <ol type='i'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type romawi kapital</h3>
       <ol type='I'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
</body>
</html>
Tampilan di pramban web:

List dengan type alfabet

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

List dengan type alfabet kapital (huruf besar)

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

List dengan type romawi

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

List dengan type romawi kapital

  1. Gunakan Linux
  2. Jadilah Kreatif
  3. Berani Berbeda

2. Unordered List

List ini untuk menyajikan data yang tidak terurut. Tag untuk membuat unordered list adalah <ul> dan di dalamnya menggunakan tag yang sama seperti <ol> tadi yaitu <li>.
<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h3>Daftar bahasa pemrograman</h3>
  <ul>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
</body>
</html>
Tampilan di pramban web:

Daftar bahasa pemrograman

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl
Secara default simbol yang digunakan oleh unordered list adalah sebuah lingkaran kecil (disc). Kita juga dapat menggantinya seperti ordered list tadi, yaitu dengan menggunakan atribut type.
<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h3>Type = square</h3>
  <ul type="square">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = disc</h3>
  <ul type="disc">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = none</h3>
  <ul type="none">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = circle</h3>
  <ul type="circle">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
</body>
</html>
Tampilan pada browser:

Type = square

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = disc

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = none

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = circle

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl
Selain menggunakan type list di atas, kita juga dapat menggunakan gambar sebagai simbolnya. Tinggal menambahkan inline CSS dengan atribut list-style-image dan isinya adalah alamat atau URL dari gambar. Jika gambar berada dalam satu direktori dengan berkas HTML, maka cukup tuliskan alamat/URL gambar dengan nama gambarnya, misalnya: ikon_list.png. Mari kita coba, gambar yang saya gunakan adalah gambar dari situs web ubuntu.
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);">
  <li>C</li>
  <li>C++</li>
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Ruby</li>
  <li>Perl</li>
</ul>
Tampilan pada browser:
  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

3. Description List

List ini untuk menyajikan data yang memiliki deskripsi/penjelasan. Contohnya seperti kamus. Tag unutuk membuat description list adalah <dl> (data list). Dalam tag ini terdapat tag <dt> (data term) dan <dd> (data description).
<!DOCTYPE html>
<html>
<head>
  <title>Description List</title>
</head>

<body>
  <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>
Tampilan di pramban web:

List di dalam List (Nested)

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>.
<!DOCTYPE html>
<html>
<head>
    <title>List di dalam List</title>
</head>

<body>
   <h3>Distro Linux dan Keluarganya</h3>
       <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>
Tampilan di pramban web:

Distro Linux dan Keluarganya

  1. Debian
    • Ubuntu
    • Mint
    • elementaryOS
  2. RedHat
    • Fedora
  3. Slackware
referensi:
  • [1] http://www.w3schools.com/html/html_lists.asp
  • [2] http://htmlhelp.com/reference/css/classification/list-style-image.html

HALAMAN

POPULAR POST