Membuat Daftar dengan HTML

Membuat daftar/list dengan HTML
1.       Daftar item tanpa di urutkan
Jika anda ingin menampilkan data dalam berntuk daftar/list yang di beri nomor, anda bisa menggunakan tag <ul> (unordered list). Dalam hal ini, akhir daftar dapat di akhiri dengan </ul> (di baca mati ul kalo bahasa saya). Untuk lebih jelasnya lihat koding di bawah ini.
<html>
<head><title> contoh pemakaian tag ‘ul’ </title></head>
<body>
<h2> beberapa macam bahasa pemrograman berbasis web </h2>
<ul>
PHP <br>
ASP<br>
ASP.NET<br>
cold fusion <br>
JSP <br>
javaScript <br>
</ul>
</body>
</html>

Maka hasilnya adalah seperti ini
 
Agar setiap item di beri tanda seperti bulatan (di sebut bullet), anda bisa menambahkan tag <li> di depan masing-masing item.

<html>
<head><title> contoh pemakaian tag ‘ul’  </title></head>
<body>
<h2> beberapa macam bahasa pemrograman berbasis web </h2>
<ul>
<li>PHP <br>
<li>ASP<br>
<li>ASP.NET<br>
<li>Cold fusion <br>
<li>JSP <br>
<li>javaScript <br>
</ul>
</body>
</html>
 

2.       Daftar item dengan di urutkan
Dengan menggunakan tag <ol> (ordered list), pemberian nomor dapat di otomatiskan tanpa anda harus menuliskannya. Anda juga bisa memilih huruf latin atau angka romawi dengan menggunakan atribut ‘type’ pada tag <ol>


<html>
<head><title> tag ol dengan type </title></head>
<body>
<h2> pengurutan</h2>
<b> dengan angka</b>
<ol>
<li> satu <br>
<li> dua <br>
<li> tiga <br>
</ol>
<b> dengan huruf kapital</b>
<ol type = A>
<li> satu <br>
<li> dua <br>
<li> tiga <br>
</ol>
<hr>
<b> dengan angka romawi</b>
<ol type = I>
<li> satu <br>
<li> dua <br>
<li> tiga <br>
</ol>
<hr>
<b> dengan huruf kecil</b>
<ol type = a>
<li> satu <br>
<li> dua <br>
<li> tiga <br>
</ol>
<hr>
<b>dengan angka romawi huruf kecil </b>
<ol type = i>
<li> satu <br>
<li> dua <br>
<li> tiga <br>
</ol>
</body>
</html>
Maka hasilnya :
 


Keterangan <ol type =”..”> :
“A” = mengurutkan dengan huruf capital
“a” = mengurutkan dengan huruf kecil
“I” = mengurutkan dengan huruf romawi capital
“i”= mengurutkan dengan huruf romawi kecil
“1”= menggunakan angka sebagai penomoran urut. Merupakan nilai default jika TYPE tak di sebutkan

Keterangan lainnya :
Kode <br> adalah untuk pindah baris
Kode <hr> adalah untuk pindah baris dengan meninggalkan garis/pembatas
Kode <h2> adalah untuk membuat header
Kode <b> adalah untuk membuat tulisan menjadiu cetak tebal

Share ke :

About Syakir Rahman

Syakir rahman adalah seorang blogger, dan juga front-end web developer. Kunjung website pribadinya disini : http://www.syakirurohman.net
    Blogger Comment
    Facebook Comment

0 comments:

Posting Komentar