Tutorial Cascading Style Sheet (CSS) - Unordered / Ordered / Discription Lists

Dalam tutorial kali ini kita akan belajar membuat sebuah daftar, dimana dalam pembuatan website tidak jarang kita jumpai bentuk-bentuk seperti ini. Untuk membuat daftar, ada beberapa macam yang bisa digunakan, apakah berupa symbol atau berupa nomor. Untuk membuat daftar yang berupa symbol yang kita kenal dengan bullets, kita kenal dengan unordered list (ul) yang memiliki beberapa style/tipe diantaranya adalah :
- list-style-type:disc (default)
- list-style-type:circle
- list-style-type:square
- list-style-type:none (tanpa bullets) Sedangkan untuk membuat daftar berupa nomor, kita bisa memanfaatkan elemen html berupa ordered list (ol), dimana ordered list ini memiliki type antara lain : - type='1' ; berupa angka yang dimulai dari 1. (default). - type='A' ; berupa huruf kapital. - type='a' ; berupa huruf kecil. - type='I' ; berupa angka romawi besar. - type='i' ; berupa angka romawi kecil. Untuk menuliskan script Unordered dan ordered list bisa kita tulis seperti kode berikut :


<style>
        /* memberikan background warna pada elemen body */
 body {
 background-color:#df0;
 }

        /* bullets yang digunakan adalah segi empat */
 ul {
 list-style-type:square;
 }
</style>

Silahkan tentukan sendiri bentuk bullets yang akan digunakan sesuai keinginan, dan terapkan kepada dokumen HTML misalkan seperti contoh berikut :


<html>
<head>
<title>Unordered Ordered List</title>
<style>
 body {
 background-color:#08A7D3;
 }
 ul {
 list-style-type:square;
 }
</style>
</head>
<body>
<h1>Unordered - Ordered List</h1>
<h3>Daftar Menu Buka Puasa</h3>
<ul>
 <li>Ayam Panggang</li>
 <li>Ayam Goreng</li>
 <li>Kare Ayam</li>
</ul>

<h3> Daftar Menu Makan Sahur</h3>
<ol>
 <li>Bali Ayam </li>
 <li>Bali Telor</li>
 <li>Bali Tahu</li>
</ol>
</body>
</html>

Setelah dokumen HTML tersebut disimpan coba tampilkan dokumen tersebut melalui browser. Unordered dan ordered list ini begitu penting ketika ingin membuat sebuah menu navigasi, dmn setiap menu navigasi selalu memnfaatkan fasilitas ini. Maka dari itu sebelum kita bahas bagaimana membuat menu navigasi lebih baik kita perkenalkan dahulu unordered dan orderd list.

Selanjutnya kita akan bahas mengenai diskripsi list, artinya list yang ada akan diberikan sebuah diskripsi misalkan seperti gambar disamping.

elemen-elemen HTML yang digunakan adalah : - tag <dl>. - tag <dt>. - tag <dl>. dimana tag <dl> mendifinsikan sebagai daftar deskripsi, sedang tag <dt> mendefinisikan istilah (nama), dan tag <dl> menjelaskan setiap istilah. Dari gambar disamping dijelaskan bahwa terdapat 2 daftar nama yang akan di diskripsikan, yaitu Kopi dan Susu, dimana Kopi akan didiskripsikan sebagai minuman panas dengan detil diskripsi yaitu Kopi Hitam Panas, sedang Susu akan di diskripsikan sebagai minuman dingin, dengan detil dsikripsi yaitu Susu Segar Dingin. Terus bagaimana cara membuat diskripsi seperti contoh tersebut, berikut kodenya.


<h1> Diskripsi List</h1>
<h3>Daftar Minuman</h3>
<dl>
  <dt>Kopi</dt>
  <dd>- Kopi Hitam Panas</dd>
  <dt>Susu</dt>
  <dd>- Susu segar dingin</dd>
</dl>

Demikan tutorial CSS mengenai unordered list, ordered list dan diskripsi list, semohg tutorial sekilas ini bisa dipahami guna menunjang tutorial selanjutnya yang berkaitan dengan menu navigasi dalam proyek kedepan. Selamat Berkarya, Selamat belajar dan salam coding. Thx

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Unordered / Ordered / Discription Lists