Pembuatan List Pada HTML

Dalam pembuatan sebuah dokumen, list (daftar) merupakan sebuah hal yang tidak dapat dihindari. Daftar mengenai berbagai hal selalu dapat ditemukan dalam penulisan dokumen. Resep masakan memiliki daftar bahan yang diperlukan, serta langkah-langkah memasak yang harus diikuti. Penunjuk jalan memiliki daftar tempat yang dapat dituju, sesuai dengan arah yang akan diambil. Seorang mahasiswa yang ingin memilih mata kuliah akan dihadapkan dengan daftar mata kuliah. Banyaknya kegunaan daftar ini menjadikan HTML memberikan sekumpulan elemen khusus untuk membuat daftar.

Terdapat tiga daftar utama yang dapat dibuat dengan HTML, yaitu:

a.      Unordered List (Daftar Tidak Terurut), seperti namanya, memungkinkan kita untuk membuat daftar dari hal-hal yang tidak memiliki urutan tertentu.

b.      Ordered List (Daftar Terurut), kembali lagi, sesuai namanya, memberikan kita fasilitas untuk membuat daftar hal-hal yang harus diurutkan dengan benar.

c.       Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilah-istilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.

Pemilihan list yang akan digunakan sendiri tentunya tergantung kepada konten yang akan ditulis, serta makna semantik yang diinginkan.

Bagian ini akan membahas bagaimana menggunakan elemen-elemen list pada HTML, serta cara untuk memperindah tampilan list dengan menggunakan CSS.

a.      Unordered List

Seperti yang telah dijelaskan sebelumnya, unordered list digunakan untuk memberikan daftar dari hal-hal yang tidak memiliki urutan tertentu, atau yang urutannya tidak penting. Pembuatan unordered list dilakukan dengan menggunakan elemen ul (unordered list), yang merupakan sebuah block level element. Untuk mengisikan daftar, kita dapat menggunakan elemen li (list item), seperti pada kode di bawah:

<ul>

<li>Windows 8</li>

<li>Microsoft Office 2013</li>

<li>Visual Studio 2012</li>

</ul>

dan hasilnya adalah sebagai berikut:

Unordered List Sederhana

Ø  Mengubah Tampilan Unordered List

Seperti yang dapat dilihat pada gambar Unordered List Sederhana, secara standar browser akan menampilkan titik bulat berwarna hitam sebagai penanda daftar. Tentunya kita dapat mengubah hal ini, dengan menggunakan properti CSSlist-style-type, seperti berikut:

<li> {

                           List-style-type: square;

}

maka kita akan mendapatkan hasil:

Unordered List dengan Penanda Kotak

Nilai-nilai dari list-style-type yang dapat diisikan untuk unordered list yaitu disc, circle, dan square.

 

Ø  Jenis-jenis Penanda Unordered List

a)      List Tanpa Penanda

Kita bahkan juga dapat menggunakan gambar yang kita inginkan sebagai penanda dari list, melalui propertilist-style-image:

li {

List-style-type: none;

}

b)       

c)      List dengan Penanda Gambar

Terakhir, dengan memanfaatkan nilai none pada list-stype-type dan pseudo-selector :before, kita juga dapat membuat penanda daftar dengan karakter apapun yang kita inginkan, seperti berikut:

li {

list-style-image: ur9’images/list-style.png’);

}

b.      Ordered List

Seperti namanya, ordered list membuat daftar yang terurut. Elemen untuk pembuatan ordered list yaitu ol (orderedllist), dan isi dari list sendiri dibuat dengan menggunakan elemen li, sama seperti pada unordered lsit. Secara standar ordered list akan menggunakan angka sebagai penanda daftar:

<ol>

<li>Windows 8</li>

<li>Microsoft Office 2013</li>

<li>Visual Studio 2012</li>

</ol>

c.       Definition List

Selain daftar terurut dan tidak terurut, kita juga seringkali menjumpai daftar definisi, yang memberikan kita penjelasan singkat terhadap sebuah kata atau istilah yang mungkin tidak kita ketahui. Dalam dunia menulis, daftar ini dikenal dengan nama glosarium.

Membuat glosarium dalam HTML dilakukan dengan menggunakan elemen dl (definition list), dan kemudian alih-alih menggunakan li untuk mengisikan daftar, kita menggunakan dua elemen lain, yaitu dt (definition term - istilah yang akan didefinisikan) dan dd (definition description - penjelasan dari istilah).

Perhatikan contoh pembuatan sebuah definition list berikut:

<dl>

<dt>study</dt>

<dd>the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books</dd>

 <dt>design</dt>

 <dd>a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>

 <dd>purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>

<dt>business</dt>

 <dt>work</dt>

<dd>a person's regular occupation, profession, or trade</dd>

</dl>

dan tentunya kita dapat mengubah tampilan dari definition list dengan menggunakan CSS, seperti kita mengubah tampilan elemen-elemen lainnya. Perhatikan juga bahwa tidak terdapat elemen khusus untuk mengatur definition list, bertolak belakang dengan adanya list-style untuk ordered maupun unordered list.

d.      Nested List

Salah satu fitur list yang paling menarik dari HTML ialah kemampuan untuk membangun list di dalam list. Sebuah ordered list dapat dituliskan kembali di dalam unordered list, yang keduanya berada di dalam definiton list, ataupun sebaliknya. Sama sekali tidak ada batasan dalam menuliskan list di dalam lsit, selain permasalahan makna semantik tentunya.

Menuliskan kode untuk list di dalam list juga sangat sederhana, dengan langsung memasukkan list yang ingin ditambahkan ke dalam elemen li.