Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>
Cara Membuat Daftar/List di HTML
Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.
Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
Berikut adalah contoh kode HTML untuk membuat Unordered lists menggunakan tag<ul>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul type="disc">
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul type="square">
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul type="circle">
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>
Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ol type="1">
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ol>
</body>
</html>
Cara Membuat Description List dalam HTML
Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan.Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Untuk setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.
Definition Lists <DL>: untuk menjelaskan istilah-istilah.
Berikut adalah contoh kode program description list dalam HTML:
Definition Lists <DL>: untuk menjelaskan istilah-istilah.
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . </dd>
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML;/h3>
<dl>
<dt>HTML</dt>
<dd>HTML adalah singkatan dari Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS adalah singkatan dari Cascading Style Sheet.</dd>
<dt>PHP</dt>
<dd>PHP adalah singkatan dari PHP: Hypertext Preprocessor.</dd>
</dl>
</body>
</html>
Berikut List-list yang jarang digunakan dalam HTML:Menu List: menampilkan item-item yang mempunyai link ke page lain.
<menu> . . . </menu>
Directory List (DIR): untuk daftar item yang pendek atau kurang dari 20 karakter.
<dir> . . . </dir>
Sign up here with your email
ConversionConversion EmoticonEmoticon