Beranda > Home > Belajar HTML | HTML List ( Daftar )

Belajar HTML | HTML List ( Daftar )

Penggunaan HTML List ( daftar ) dalam document HTML akan terlihat seperti di bawah ini :

HTML Lists ( daftar )

An ordered list:

  1. The first list item
  2. The second list item
  3. The third list item

An unordered list:

  • List item
  • List item
  • List item

oke, sekarang kita test kemampuan kita dalam hal tag html list seperti contoh di atas tersebut :An ordered list

Cara membuat daftar unordered dalam sebuah dokumen HTML.
An unordered list
Cara membuat daftar ordered, dalam sebuah dokumen HTML.

Unordered Lists HTML

Unordered list dimulai dengan tag <ul>. dan Setiap item list dimulai dengan tag <li>.

Daftar item ditandai dengan lingkaran hitam  ( biasanyakecil ).

Contoh :

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
maka hasilnya akan seperti dibawah ini :
  • Coffee
  • Milk

HTML Ordered Lists


Ordered list dimulai dengan tag <ol>. dan Setiap item List dimulai dengan tag <li>.

Ordered list  ditandai dengan angka.

contoh :
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
maka hasilnya akan seperti dibawah ini :
  1. Coffee
  2. Milk

HTML Definition Lists

Sebuah  definition Lists adalah daftar item, dengan deskripsi dari setiap item.

Tag <dl> mendefinisikan definition Lists .

Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam Lists) dan <dd> (menjelaskan item dalam Lists)

contoh:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
maka hasilnya akan seperti dibawah ini :
Coffee
– black hot drink
Milk
– white cold drink

oke, sekarang kita akan lanjut dengan contoh – contoh di bawah ini:

Different types of ordered lists
Menunjukkan berbagai jenis daftar dipesan.

Different types of unordered lists
Menunjukkan berbagai jenis daftar unordered.

Nested list
Menunjukkan bagaimana Anda dapat Nested List.

Nested list 2
Menunjukkan daftar nested lebih rumit.

Definition list
Menunjukkan daftar definisi.

oke, kita akan lanjut ke tutorial belajar HTML selanjutnya ..

<< HTML Tabel : Sebelumnya                                                     Selanjutnya : HTML Form >>
Kategori:Home
  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: