Banner HTML

Membuat Daftar Terurut Dan Tidak Terurut Di HTML

Ketika Anda membuka sebuah halaman web (web page) dari sebuah website, mungkin Anda akan menemukan sebuah daftar (list) misalnya judul buku komputer, nama menu makanan, nama pembicara dalam seminar, langkah untuk ikut program afiliasi dan lain sebagainya. Sebuah daftar dapat ditampilkan secara terurut (ordered list) dengan menggunakan angka atau huruf dan secara tidak terurut (unordered list) dengan menggunakan lingkaran kecil, kotak kecil dan sebagainya.

Di HTML, elemen yang digunakan untuk membuat daftar terurut dan tidak terurut adalah ol, ul dan li. Untuk membuat daftar terurut, Anda menggunakan elemen ol. Di dalam elemen ol ini, Anda dapat menuliskan tiap-tiap itemnya menggunakan elemen li. Secara default, daftar terurut akan ditampilkan menggunakan angka. Untuk membuat daftar tidak terurut, Anda menggunakan elemen ul. Di dalam elemen ul ini, Anda dapat menuliskan tiap-tiap itemnya menggunakan elemen li. Secara default, daftar tidak terurut akan ditampilkan menggunakan lingkaran kecil hitam (bullet). Default untuk tampilan baik daftar terurut maupun tidak terurut masih dapat dirubah menggunakan CSS. Elemen li di HTML dapat berisi teks, inline element dan juga block element.

Perlu diperhatikan juga, Anda seharusnya menerapkan daftar terurut dan tidak terurut secara logis. Sebuah daftar judul buku komputer tidak perlu terurut sedangkan langkah-langkah untuk ikut program afiliasi seharusnya terurut. Berikut ini adalah tabel elemen HTML yang digunakan untuk membuat daftar terurut dan tidak terurut:

Elemen HTML Untuk Membuat Daftar Terurut Dan Tidak Terurut
Elemen Keterangan
ul Untuk membuat daftar tidak terurut (unordered list).
ol Untuk membuat daftar terurut (ordered list).
ul Untuk membuat daftar item (list item) di daftar terurut dan tidak terurut.

Berikut ini adalah contoh sederhana skrip HTML untuk membuat daftar terurut (ordered list) dan daftar tidak terurut (unordered list).

<!DOCTYPE html>
<html>
<head>
<title>Membuat Daftar Terurut Dan Tidak Terurut</title>
</head>
<body>
<p>Daftar beberapa buku komputer yang paling laris:</p>
<ul>
   <li>Bahasa Pemrograman Java.</li>
   <li>Mengenal Internet Untuk Pemula.</li>
   <li>Bekerja Dengan Formula Dan Fungsi Excel 2010.</li>
   <li>Membuat Website Dinamis Dengan CMS Joomla 3.</li>
   <li>Membuat Website Instan Dengan Wordpress.</li>
   <li>Belajar HTML5 Dan CSS3.</li>
</ul>
<p>Langkah-langkah untuk ikut program afiliasi di RistoHosting:</p>
<ol>
   <li>Mendaftar secara online menggunakan form pendaftaran.</li>
   <li>Aktivasi pendaftaran melalui email.</li>
   <li>Memilih banner yang akan digunakan untuk promosi.</li>
   <li>Menyalin skrip banner yang telah dipilih.</li>
   <li>Memasang skrip banner di website atau blog.</li>
</ol>
</body>
</html>

Untuk memperbaiki mutu konten, Anda dapat berpartisipasi dengan cara melaporkan apabila menemukan kesalahan ketik, kata-kata rangkap, redaksi kurang pas (jelas), gambar pendukung tidak ada dan sebagainya melalui form Kontak Kami untuk mendapatkan perbaikan. Terima kasih atas kerjasamanya.

Hindro HindriantoHindro adalah pendiri sekaligus admin termasmedia.com dan topikit.com, blog online yang mengulas teknologi informasi. Dunia web mulai ditekuni tahun 2012 dengan mempelajari CMS Joomla dan Wordpress. Beberapa buku yang sekarang dipelajari antara lain PHP, HTML5, ASP.NET 4.5, JavaScript, CSS3, MySQL, Adobe Dreamweaver, Adobe Photoshop dan Adobe Flash.