Belajar HTML part4 (Lists)

image

Dalam menyusun webpage, sering sekali kita membutuh list, baik itu dengan nomer maupun dengan symbol tertentu. Hal itu dapat saja anda lakukan manual dengan mengetikannya sebagai text, akan tetapi untuk praktik yang baik sebaiknya anda gunakan tag-tag list yang sudah disediakan oleh HTML guna portabilitas antar browser tetap dapat terjaga. Ok, disini kita akan membahas ordered list, unordered list, directory list, menu list. Ok kita mulai,
Jenis-jenis List
Ordered List <ol>
Adalah list yang memiliki system penomoran dengan menggunakan angka. Untuk membuat ordered list anda dapat menggunakan tag <ol>.
Unordered List <ul>
Adalah list yang tidak memiliki system penomoran, sehingga sebagai gantinya list ini menggunakan symbol-symbol tertentu untuk menandai suatu list. Untuk menggunakannya anda dapat menggunakan tag <ul>.
Directory List <dir>
Adalah list yang memiliki system seperti sebuah direktori. Untuk menggunakannya anda dapat menggunakan tag <dir>.
Menu List <menu>
Menu list adalah list yang memiliki system list yang bersifat debagai menu. Untuk menggunakannya anda dapat menggunakan tag <menu>
Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<ol>Ordered List
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>
<ul>Unordered List
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<dir>Directory List
<li>siji</li>
<li>loro</li>
<li>telu</li>
</dir>
<menu>Menu List
<li>pecel lele</li>
<li>sambel trasi</li>
<li>tiwul goreng</li>
</menu>
</body>
</html> 
Hasil :

image

Komponen List

List item<li>
Tag ini digunakan untuk membuat item dalam sebuah list. 

Definition List <dl>
Tag ini digunakan untuk membuat sebuah definisi dari sebuah list.

Definition Term <dt>
Tag ini digunakan untuk membuat sebuah definisi dari sebuah term.

Definition Description <dd>
Tag ini digunakan untuk membuat sebuah definisi dari sebuah deskripsi.

Untuk lebih memahami penggunaanya, mari kita lihat kode dibawah ini :

Code :
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<dl>Makanan Favorit
<dt>Suweg</dt>
<dd>- Merupakan makanan yang paling saya sukai</dd>
<dt>Kluwih</dt>
<dd>- Sayuran paling favorit</dd>
</dl>
</body>
</html>
Hasil :

image

Oke..... Sudah dulu ya...




sumber dari : www.cobalihatsaja.com

0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Online Project management