Pada artikel kali ini kita akan belajar bagai mana cara membuat sebuah list di html
List dapat digunakan untuk membuat sebuah daftar item.
Yuk langsung saja ke tutorialnya
Tag yang digunakan untuk membuat list
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <dd> | Digunakan untuk membuat penjelasan dari item list <dt> | |
| <dl> | Digunakan untuk membuat deskripsi list | |
| <dt> | Digunakan untuk membuat definisi untuk item dari <dl> | |
| <li> | Digunakan untuk membuat item dari list | ✔ |
| <ol> | Digunakan untuk membuat list countable | ✔ |
| <ul> | Digunakan untuk membuat list uncountable | ✔ |
Kita tidak akan menggunakan semuanya.
Hanya tag-tag yang dengan tanda ✔ diatas yang akan sering kita gunakan untuk membuat list
Cara membuat list di html
Ada tiga tipe yang bisa kita buat untuk membuat list, yaitu
Order list (Countable list)
Orderlist adalah list yang dibuat menggunakan tag <ol>.
List ini digunakan untuk mengurutkan item-item list dan memberikan penomoran dalam bentuk angka maupun huruf pada setiap item list.
Contoh,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<p>Daftar Artikel</p>
<ol>
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ol>
</body>
</html>Hasilnya,
Untuk mengganti penomoronyan dengan huruf atau angka romari kita bisa menambahkan atribut type pada elemen ol nya.
Contohnya,<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<br/>
<p>Penomoran dengan Angka</p>
<ol>
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ol>
<p>Penomoran dengan Huruf</p>
<ol type="A">
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ol>
<p>Penomoran dengan Angka Romawi</p>
<ol type="I">
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ol>
</body>
</html>Hasilnya,
Point List (Uncountable list)
Point list adalah list yang dibuat menggunakan tag <ul> .
List ini digunakan untuk membuat daftar item dalam bentuk point.
Contohnya,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<br/>
<p>Daftar Artikel</p>
<ul>
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ul>
</body>
</html>Hasilnya,
Kalin juga bisa mengganti simbol pointnya dengan menambahkan atribut type pada elemen ul.
- square untuk simbol persegi;
- disc (default) untuk simbol lingkaran disc;
- none tidak memakai simbol;
- circle untuk simbol lingkaran;
Contohnya,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<br/>
<p>Daftar Artikel</p>
<ul type="circle">
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ul>
</body>
</html>Hasilnya,
Atau jika kalian ingin mengganti simbolnya dengan gambar juga bisa,
caranya adalah dengan menggunakan attribut style dengan properti list-style-image.
Contohnya,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<br/>
<p>Daftar Artikel</p>
<ul style="list-style-image: url(url_gambarmu.png)">
<li>Tutorial Html</li>
<li>Tutorial Css</li>
<li>Tutorial Javascript</li>
</ul>
</body>
</html>Description List
List deskripsi adalah list yang dibuat menggunakan tag <dl>, <dt> dan <dd>.
<dl> digunakan untuk membuat list
<dt> digunakan untuk membuat item list
<dt> digunakan untu menjelaskan item list <dt>
Contohnya,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deretcode.com</title>
</head>
<body>
<br/>
<p>Daftar Artikel</p>
<dl>
<dt>Tutorial Html</dt>
<dd>Html adalah struktur halaman web</dd>
<dt>Tutorial Css</dt>
<dd>Css adalah desain halaman web</dd>
<dt>Tutorial Javascript</dt>
<dd>Javascript adalah nyawa halaman web</dd>
</dl>
</body>
</html>
Sampai disini tutorial cara membuat list di html. Jika kalian merasa artikel ini bermanfaat silahkan tekan tombol share. Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat List Di Html"
Silahkan berkomentar dengan baik dan bijak!