Belajar membuat List atau daftar dalam HTML
Hai sobat blogger,,
Kali ini rifkiberbagipengetahuan akan sedikit berbagi mengenai cara membuat list atau daftar dalam program HTML.
Gak usah basa-basi ya, langsung saja kita menuju ke pembahasan.
List
List dalam HTML yaitu suatu tag yang berfungsi untuk mengelompokan item-item untuk dijadikan suatu daftar yang dilengkapi dengan nomor alfabetik, nomor numerik
ataupun dengan bullet.
List pada HTML memiliki 3 varian yaitu :
Ordered List (Daftar Bernomor)
Unordered List (Daftar Bersimbol)
Definition List (Daftar Definisi)
1. Ordered List
1. Ordered List
Ordered List, merupakan jenis daftar (list) yang berupa
angka atau sering disebut juga sebagai numbered
list atau numbering.
Bentuk umumnya adalah :
<ol [atribut]>
<li>...item daftar...</li>
<li>...item daftar...</li>
<li>...item daftar...</li>
</ol>
Kali ini saya akan mencotohkan dengan menggunakan notepad++
Tulis kode berikut pada notepad++ yang sobat punya..
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h3>Ordered list</h3>
<h4>Numbered list</h4>
<ol>
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ol>
<h4>Letter list</h4>
<ol type="A">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ol>
<h4>Lowercase letter list</h4>
<ol type="a">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ol>
<h4>Roman number list</h4>
<ol type="I">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ol>
<h4>Lowercase Roman number list</h4>
<ol type="i">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ol>
</body>
</html>
Setelah sobat menulis semua kemudian lihat hasilnya dengan cara klik menu Run yang ada pada notepad sobat, lalu pilih Search engine yang sobat gunakan. Karena saya menggunakan Google Chrome maka saya pilih Launch in chrome.
Untuk lebih jelasnya lihat gambar berikut!
Hasil setelah di Run
2. Unordered List
Unordered list, merupakan bentuk daftar berupa poin-poin atau simbol. Nama lain dari unordered list sendiri adalah bullet list.
Bullet atau onordered list ini umumnya digunakan apabila
kita ingin membuat suatu daftar yang terlepas dari suatu
urutan-urutan tertentu.
Berikut bentuk umum dari Unordered List :
<ul [atribut]>
<li>...item daftar...</li>
<li>...item daftar...</li>
<li>...item daftar...</li>
</ul>
Contoh :
Kali ini saya akan mencotohkan dengan menggunakan notepad++
Tulis kode berikut pada notepad++ yang sobat punya..
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>Unordered list</h3>
<h4>Unordered list standar</h4>
<ul>
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ul>
<h4>Unordered list tipe "Disc"</h4>
<ul type="disc">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ul>
<h4>Unordered list tipe "Circle"</h4>
<ul type="circle">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ul>
<h4>Unordered list tipe "Square"</h4>
<ul type="square">
<li>Tempe</li>
<li>Tahu</li>
<li>Bakwan</li>
</ul>
</body>
</html>
Setelah sobat menulis semua kemudian lihat hasilnya dengan cara klik menu Run yang ada pada notepad sobat, lalu pilih Search engine yang sobat gunakan. Karena saya menggunakan Google Chrome maka saya pilih Launch in chrome.
Untuk lebih jelasnya lihat gambar berikut!
Hasil setelah di Run
3. Definition List
Definition List biasanya digunakan untuk menjelaskan atau mendefinisiksn suatu terminologi secara rapi dan profesional.
Pada umumnya, definition list terbagi atas dua bagian item. Bagian pertama adalah label dan bagian kedua adalah penjelasan.
Definition List terdiri diapit oleh tag
<DL> ... </DL> dan
<DT> tag menentukan definition term serta
<DD> tag menentukan definition itu sendiri.
Berikut bentuk umum Definition List
<dl>
<dt>Label</dt>
<dd>Keterangan1</dd>
<dt>Labe2</dt>
<dd>Keterangan2</dd>
</dl>
Contoh :
Kali ini saya akan mencotohkan dengan menggunakan notepad++
Tulis kode berikut pada notepad++ yang sobat punya..
<html>
<head>
<title>Definition list</title>
</head>
<body>
<h3>Definition list</h3>
<dl>
<dt>SEO</dt>
<dd>Search Engine Optimization, Teknik untuk memaksimalkan pencarian situs dalam search engine</dd>
<dt>Blog</dt>
<dd>Singkatan dari Weblog yang merupakan bentuk sederhana dari website </dd>
<dt>SE</dt>
<dd>Search Engine, Sejumlah mesin pencari situs seperti Google, Bing, Opera mini dll</dd>
</dl>
</body>
</html>
Setelah sobat menulis semua kemudian lihat hasilnya dengan cara klik menu Run yang ada pada notepad sobat, lalu pilih Search engine yang sobat gunakan. Karena saya menggunakan Google Chrome maka saya pilih Launch in chrome.
Untuk lebih jelasnya lihat gambar berikut!
Hasil setelah di Run
Gimana sobat blogger?
Mudah kan? hehe
Hanya ini yang dapat saya tulis mengenai materi yang menjadi pokok pembahasan dalam artikel ini, tentunya masih banyak kekurangan dan kelemahannya, tapi saya harap artikel ini bisa membantu sobat yang ingin belajar mengenai ilmu HTML.
Salam sukses sobat,,
Semoga bermanfaat dan jangan lupa di praktekan ya..!!
Wasalam..
Tidak ada komentar