sekedar bacaan ringan
Header image

Belajar HTML : Membuat List HTML

Posted by admin in Tutorial

Ini tutorial kedua yang saya tulis. Kali ini saya akan mencoba memberikan tutorial tentang list html, dan sebelumnya saya menuliskan tutorial tentang pemformatan text tag dasar html. Bagi anda yang masih bingung dengan yang namanya list, silahkan bayangkan saja tentang daftar menu apabila anda masuk kesebuah tempat makan. Di daftar tersebut anda akan melihat text-text yang berjajar kebawah. Untuk pengertian sebenarnya, List merupakan bentuk umum yang biasa kita gunakan untuk menguarai daftar sesuatu.

List dibagi menjadi dua yaitu:

  1. Orderlist (list bernomor) : Model daftar yang setiap itemnya diberi nomor (pengurutan). Bentuk penulisan dalam html-nya menggunakan tag <ol>. Untuk list, pengurutan standar biasanya menggunakan angka (bilangan). Jika ingin mengganti pengurutnya selain angka kita bisa menggunakan atribut type. Untuk atribut type akan diletakkan pada tag <ol> nya. Atribut type dibagi menjadi 4 bentuk, yaitu:
    • a, digunakan untuk mengurutkan menggunakan abjad berupa huruf kecil.
    • A, digunakan untuk mengurutkan dengan menggunakan abjad berupa huruf besar (kapital).
    • i, digunakan untuk mengurutkan dengan bentuk angka romawi kecil.
    • I, digunakan untuk mengurutkan dengan bentuk romawi besar.

    Selain atribut type, juga ada atribut start, yang digunakan untuk memulai (start awalnya). Atribut ini hanya berfungsi pada pengurutan berupa angka/bilangan saja

    Contoh Orderlist Sederhana

    <ol>
    	<li>isi orderlist pertama</li>
    	<li>isi orderlist pertama</li>
    	<li>isi orderlist pertama</li>
    </ol>

    Contoh Orderlist menggunakan atribut type

    <ol type="a">
    	<li>isi orderlist pertama</li>
    	<li>isi orderlist pertama</li>
    	<li>isi orderlist pertama</li>
    </ol>

    Contoh Orderlist menggunakan atribut start

    <ol start="3">
    	<li>isi orderlist pertama</li>
    	<li>isi orderlist pertama</li>
    	<li>isi orderlist pertama</li>
    </ol>
  2. Unorderlist (lista tanpa nomor) : Sering disebut dengan bullet list, mempunyai bullet default berupa lingkaran berwarna hitam. Bentuk penulisan dalam html-nya menggunakan tag <ul>. Untuk jenis bullet bida diubah tergantung atribut type yang diberikan. Secara umum type unorderlist terbagi menjadi 3 bentuk dan ini tergantung dari browser yang digunakan.
    • Circle, bullet berbentuk lingkaran.
    • Square, bullet berbentuk kotak.
    • Disk, bullet berbentuk lingkaran tanpa warna.

    Contoh unorderlist Sederhana

    <ul>
    	<li>isi unorderlist pertama</li>
    	<li>isi unorderlist pertama</li>
    	<li>isi unorderlist pertama</li>
    </ul>

    Contoh unorderlist menggunakan type square

    <ul type="square">
    	<li>isi unorderlist pertama</li>
    	<li>isi unorderlist pertama</li>
    	<li>isi unorderlist pertama</li>
    </ul>

    Contoh unorderlist menggunakan circle

    <ul type="circle">
    	<li>isi unorderlist pertama</li>
    	<li>isi unorderlist pertama</li>
    	<li>isi unorderlist pertama</li>
    </ul>

    Contoh List Campuran

    <ol>
    	<li>satu</li>
    		<ul type="circle">
    			<li>satu satu</li>
    			<li>satu dua</li>
    				<ol type="a">
    					<li>satu dua satu</li>
    					<li>satu dua dua</li>
    				</ol>
    		</ul>
    	<li>dua</li>
    		<ol start="8">
    			<li>dua satu</li>
    			<li>dua dua</li>
    		</ol>
    	<li>tiga</li>
    </ol>

Untuk hasil dari contoh dari tag-tag diatas silahkan lihat disini. Semoga dengan contoh-contoh yang diberikan diatas, anda akan dapat lebih mudah untuk memahaminya.  Apabila kurang mengerti silahkan kirimkan email ke saya.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

5 Responses



Leave a Reply