Home » Basic HTML, Tutorial

List dalam HTML

13 June 2009 4 Comments

List dalam HTML yang dalam bahasa microsoft word ataupun open office lebih disebut dengan bullet and numbering merupakan tag yang dinotasikan dengan <ul>…</ul> untuk bullet dan <ol>…</ol> untuk numbering. “UL” merupakan singkatan daru unordered list yang artinya bahwa list tidak diurutkan secara angka tetapi diganti dengan lambang-lambang tertentu sedangkan “OL” yang merupakan singkatan dari ordered list menggunakan urutan dalam penyajiannya.

UL (Unordered List)

UL memiliki beberapa lambang yang bisa digunakan yaitu circle, square, disc dimana cara pendefinisiannya adalah sebagai berikut :

<ul type=”square”>…..</ul>

kemudian setiap list di dalam UL akan didefinisikan menggunakan tag <li>…</li>. Berikut ini contoh penggunaan UL dan LI :

<ul type=”square”>

<li>List Pertama</li>

<li>List Kedua</li>

<li>List Ketiga</li>

</ul>

OL (Ordered List)

Ordered list memilki beberapa tipe yaitu a, A, I, i, 1. Cara penggunaan hampir mirip dengan UL hanya saja notasinya adalah OL bukan UL. contoh :

<ol type=”a”>

<li>List Pertama</li>

<li>List Kedua</li>

<li>List Ketiga</li>

</ol>

Simpan contoh script ini dalam bentuk html kemudian cobalah untuk mengubah-ubah type untuk mengetahui efek dari masing-masing tipe tesebut.  untuk melihat daftar tutorial silakan click HTML Untuk Web Design

4 Comments »

  • sandi said:

    apakah tidak ada cara lain yang lebih mudah di ingat

    di dalam HTML

  • admin (author) said:

    cara paling mudah ingat adalah dengan berlatih dengan mencobanya berkali-kali dan mencoba kasus-kasus yang cocok untuk tutorial diatas. Nggak usah dihafal nanti pun pasti tahu. kalau mau lebih mudah lagi pakai aja DreamWeaver karena punya kemampuan untuk meneruskan syntax dengan CTRL + SPASI.

  • Web Design and Development Blog » Blog Archive » Contoh Web Design Dua Kolom Layout Dengan CSS said:

    [...] ke bentuk ul untuk definisi link (lihat tutorial List Dalam HTML): 1 2 3 4 5 6 7 <ul id="nav"> <li><a href="#">Link [...]

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.