List ~ Pemrograman dan Teknologi

Saat membuat daftar dengan Ms word atau aplikasi sejenis, kalian bisa saja mengetik setiap angka atau karakter lain secara manual di setiap bagian dari daftar. Tapi, cara tersebut tidak efisien. Tampilan dari penomoran juga bisa terlihat berantakan. Selain itu, kalau kalian menghapus sebagian dari daftar kalian perlu mengubah semua angka di bawah bagian yang dihapus. Untungnya, di Ms Word dan word processor lainnya ada penomoran otomatis.

Selain dengan aplikasi word processor, kalian bisa juga menggunakan penomoran otomatis dalam kode HTML. Ada 2 tag yang sering digunakan untuk menampilkan daftar atau list dalam HTML. Tag tersebut adalah <ul> dan <ol>. Tag <ul> atau unordered list digunakan untuk daftar / "list" yang menggunakan "bullet". Sedangkan <ol> atau ordered list digunakan untuk daftar yang menggunakan angka atau huruf yang berurutan.

Seperri tabel, list atau daftar merupakan elemen HTML yang terdiri dari beberapa macam tag. Selain <ol> atau <ul> kalian perlu menggunakan tag <li> sebagai penanda bagian dari daftar. Angka atau bullet akan ditambahkan sebelum isi dari tag <li> sesuai dengan jenis daftarnya.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <H2>Unordered list</H2>
    <ul>
        <li>pertama,</li>
        <li>kedua,</li>
        <li>ketiga,</li>
        <li>dst....</li>
    </ul>
    <H2>Ordered list</H2>
    <ol>
        <li>pertama,</li>
        <li>kedua,</li>
        <li>ketiga,</li>
        <li>dst....</li>
    </ol>
</BODY>
</HTML>

Contoh di atas menggunakan tag <ol> dan juga tag <ul>. Kedua tag tersebut mempunyai kesamaan berupa keberadaan tag <li> yang menyatakan isi atau anggota dari list / daftar tersebut. Beda kedua tag tersebut ada di awalan dari item-nya.

Atribut

Untuk mengubah awal dan jenis penomoran dalam list, kalian bisa menggunakan beberapa atribut. Beberapa atribut tersebut yaitu type, start, dan reversed. Sebagian atribut tersebut hanya bisa digunakan untuk tag <ol>.

Atribut type adalah atribut yang sama-sama bisa digunakan dalam tag <ol> maupun <ul>. Untuk tag <ul>, atribut type mempengaruhi bentuk bullet yang digunakan. Nilai-nilai yang bisa digunakan pada atribut type untuk tag <ul> yaitu :

none
square
disk
circle

Atribut type pada tag <ol> mempunyai nilai yang berbeda dengan tag <ul>. Itu karena tag <ol> tidak menggunakan bullet. Atribut type pada tag <ol> menggunakan huruf atau angka. Selain atribut type, ada juga atribut lain. Atribut-atribut khusus untuk tag <ol> yaitu :

reversed : untuk menunjukkan daftar (list) yang dibalik urutannya. Misalnya, dari 5 sampai 1 (5,4,3,2,1) dikenal dengan istilah descending. Ini adalah boolean attribute, jadi tidak perlu disebutkan nilai / value-nya.
start : Menentukkan awal penomoran untuk individual item dalam daftar (list) yang diurutkan.
type : Menentukkan tipe penomoran otomatis.

Nilai yang mungkin dari atribut type :

none => tidak ada bullet.
1 / Number => penomoran menggunakan huruf kecil (lowercase)
A / Upper-Alpha =>penomoran menggunakan huruf besar (uppercase)
A / Lower-Alpha =>penomoran menggunakan huruf besar (lowercase)
i / Lower-Roman => penomoran menggunakan huruf kecil Romawi (lowercase Roman numerals)
I / Upper-Roman => penomoran menggunakan huruf besar Romawi (uppercase Roman numerals)

Contoh:

<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
     <H2>Unordered list</H2>
     <ul type="circle">
         <li>pertama,</li>
         <li>kedua,</li>
         <li>ketiga,</li>
         <li>dst....</li>
     </ul>

     <H2>Ordered list</H2>
     <ol reversed start = "10" type="a">
         <li>pertama,</li>
         <li>kedua,</li>
         <li>ketiga,</li>
         <li>dst....</li>
     </ol>
</BODY>
</HTML>

Definition List

Selain list dan ordered list, ada juga definition list yang didefinisikan menggunakan tag <dl>. Isi dari tag <dl> harus didefinisikan dengan tag <dt> dan tag <dd>. Kedua tag ini tidak punya atribut khusus. Walaupun begitu, ada beberapa atribut umum yang bisa digunakan. Berikut ini contoh penggunaannya.

<HTML>
<HEAD>
    <Title>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <H2>Definition list</H2>
    <dl>
        <dt>Istilah 1</dt>
        <dd>
            Definisi 1
        </dd>
    </dl>
    <dl>
        <dt>Istilah 2</dt>
        <dd>
            Definisi 2
        </dd>
    </dl>
</BODY> 
</HTML>

Sebenarnya ada satu jenis list / daftar yang belum saya sebutkan yaitu tag <menu> dan dan <menuitem>. Tapi, karena beberapa browser sempat tidak mendukung penggunaan tag tersebut dan tag ini "sempat" dianggap deprecated, jadi saya memutuskan untuk tidak membahasnya.