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 listdengan 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.
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>
<li>lombok</li>
<li>sabun mandi</li>
<li>Sampo</li>
<li>pepsoden</li>
<li>obat nyamuk</li>
</ol>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul>
<li>lombok</li>
<li>sabun mandi</li>
<li>Sampo</li>
<li>pepsoden</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.
Contoh scriptnya seperti di bawah ini untuk membuat list ul li dan defenisi.
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body bgcolor="#36c2ff">
<ul>
<h3><li>Contoh List</h3></li>
<ol type="a">
<b><li>Ordered List (Set dengan huruh dan angka remawi)</li></b>
<ul>
<li>Ordered List dengan huruf</li>
</ul>
<ol type="a">
<li>nasi goreng</li>
<li>Bakso</li>
<li>panngsit</li>
</ol>
<br />
<ul>
<li>Ordered List dengan angka remawi</li>
</ul>
<ol type="I">
<li>nasi goreng</li>
<li>Bakso</li>
<li>panngsit</li>
</ol>
<br />
<b><li>Unordered list (Set dengan simbol yang lain) </li></b>
<br />
<ul type="disc">
<li>Contoh Simbol Unorderd</li>
</ul>
<br />
<ul type="circle">
<li>pascal</li>
<li>C++</li>
<br />
</ul>
<ul type="square">
<li>html</li>
<li>css</li>
</ul>
<br />
<ul type="disc">
<li>html</li>
<li>css</li>
</ul>
<br />
<b><li>Defenition List</li></b>
<br />
<dl>
<dt>facebook.com</dt>
<dd>google.com</dd>
<dt>twiter.com</dt>
<dd>bbm</dd>
</dl>
</ol>
</ul>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
0 komentar:
Post a Comment