.jpeg "List dalam HTML")
List merupakan sebuah daftar urutan yang dibuat agar mempermudah pembaca ketika membaca sebuah informasi. Karena jika menyampaikan sebuah informasi menggunakan list, pembaca lebih mudah untuk membacanya. Misalnya list menu makanan pada sebuah restoran, list nama pekerjaan dan list absen sekolah.
Untuk membuat sebuah list, kita membutuhkan sebuah text editor untuk menuliskan kodingan nya. Dalam html, list memiliki beberapa jenis. Berikut ini adalah jenis - jenis list dalam html :
1. Ordered List
Ordered List merupakan sebuah list yang urutan nya menggunakan angka dan huruf. Untuk membuat list jenis Ordered List, kita bisa menggunakan tag <ol> dengan tag penutup nya </ol>. Kemudian di dalam tag <ol>, kita berikan tag <li> beserta tag penutup nya </li>. Fungsi dari tag <li> adalah untuk membuat list nya. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Ordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Murid</p>
<ol>
<li>Abdul</li>
<li>Bayu</li>
<li>Cakra</li>
<li>Dennis</li>
<li>Erlangga</li>
</ol>
</body>
</html>Daftar Nama Murid
- Abdul
- Bayu
- Cakra
- Dennis
- Erlangga
Pada umumnya, Ordered List diurutkan berdasarkan angka mulai dari 1,2,3 hingga seterusnya. Lalu apakah kita bisa mengubah nya ? Jawaban nya adalah bisa. Kita bisa mengubahnya menjadi huruf a,b,c dan seterusnya. Bagaimana caranya ?
Kita hanya perlu menambahkan attribute "type" pada codingan <ol>. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Ordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Murid</p>
<ol type="a">
<li>Abdul</li>
<li>Bayu</li>
<li>Cakra</li>
<li>Dennis</li>
<li>Erlangga</li>
</ol>
</body>
</html>Daftar Nama Murid
- Abdul
- Bayu
- Cakra
- Dennis
- Erlangga
Kita juga membuat list nya menggunakan huruf kapital. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Ordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Murid</p>
<ol type="A">
<li>Abdul</li>
<li>Bayu</li>
<li>Cakra</li>
<li>Dennis</li>
<li>Erlangga</li>
</ol>
</body>
</html>Daftar Nama Murid
- Abdul
- Bayu
- Cakra
- Dennis
- Erlangga
Kamu juga bisa mengganti list nya menggunakan angka romawi. Contohnya seperti i,ii,iii dan I,II,III. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Ordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Murid</p>
<ol type="i">
<li>Abdul</li>
<li>Bayu</li>
<li>Cakra</li>
<li>Dennis</li>
<li>Erlangga</li>
</ol>
<p>Daftar Nama Jurusan</p>
<ol type="I">
<li>Teknik Komputer Jaringan</li>
<li>Akuntansi</li>
<li>Teknik Kendaraan Ringan</li>
<li>Rekayasa Perangkat Lunak</li>
<li>Tata Boga</li>
<li>Perhotelan</li>
</ol>
</body>
</html>Daftar Nama Murid
- Abdul
- Bayu
- Cakra
- Dennis
- Erlangga
Daftar Nama Jurusan
- Teknik Komputer Jaringan
- Akuntansi
- Teknik Kendaraan Ringan
- Rekayasa Perangkat Lunak
- Tata Boga
- Perhotelan
2. Unordered List
Unordered List merupakan sebuah liat yang urutan nya berupa simbol simbol. Kita bisa membuat ordered list dengan tag <ul> beserta penutupnya </ul>. Di dalam tag <ul>, kita berikan tag <li> untuk membuat list nya. Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Ordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Negara</p>
<ul>
<li>Indonesia</li>
<li>Malaysia</li>
<li>Singapura</li>
<li>Hongkong</li>
<li>Vietnam</li>
<li>India</li>
</ul>
</body>
</html>Daftar Nama Negara
- Indonesia
- Malaysia
- Singapura
- Hongkong
- Vietnam
- India
<!DOCTYPE html>
<html>
<head>
<title> Contoh Unordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Negara</p>
<ul type="square">
<li>Indonesia</li>
<li>Malaysia</li>
<li>Singapura</li>
<li>Hongkong</li>
<li>Vietnam</li>
<li>India</li>
</ul>
</body>
</html>Daftar Nama Negara
- Indonesia
- Malaysia
- Singapura
- Hongkong
- Vietnam
- India
<!DOCTYPE html>
<html>
<head>
<title> Contoh Unordered List dalam Html </title>
</head>
<body>
<p>Daftar Nama Negara</p>
<ul type="disc">
<li>Indonesia</li>
<li>Malaysia</li>
<li>Singapura</li>
<li>Hongkong</li>
<li>Vietnam</li>
<li>India</li>
</ul>
<p>Daftar Nama Hewan</p>
<ul type="none">
<li>Angsa</li>
<li>Bebek</li>
<li>Kucing</li>
<li>Kuda</li>
<li>Keledai</li>
<li>Sapi</li>
</ul>
<p>Daftar Nama Buah</p>
<ul type="circle">
<li>Pisang</li>
<li>Mangga</li>
<li>Manggis</li>
<li>Apel</li>
<li>Anggur</li>
<li>Pepaya</li>
</ul>
</body>
</html>Daftar Nama Negara
- Indonesia
- Malaysia
- Singapura
- Hongkong
- Vietnam
- India
Daftar Nama Hewan
- Angsa
- Bebek
- Kucing
- Kuda
- Keledai
- Sapi
Daftar Nama Buah
- Pisang
- Mangga
- Manggis
- Apel
- Anggur
- Pepaya
Meskipun Disc dan Circle memiliki fungsi yang sama, namun tetap saja memiliki perbedaan. Diatas kita bisa melihat perbedaan antara disc dan circle. Jika Disc untuk simbol lingkaran biasa, sedangkan circle untuk lingkaran yang tengahnya transparan.
3. Description List
Description List merupakan sebuah list yang digunakan untuk memberikan deskripsi atau penjelasan singkat pada sebuah list. Untuk membuat Description List, kita bisa menggunakan tiga tag. Berikut ini adalah tag tag yang bisa kita gunakan.
- Tag <dl> berfungsi sebagai pembuka description list.
- Tag <dt> digunakan untuk menuliskan kata yang akan diberikan deskripsi nya.
- Tag <dd> berfungsi untuk memberikan deskripsi dari kata yang ditulis dalam tag <dt>
Berikut ini adalah contoh codingan nya
<!DOCTYPE html>
<html>
<head>
<title> Contoh Description List dalam Html </title>
</head>
<body>
<p>Daftar List :</p>
<dl>
<dt>Android Studio</dt>
<dd>Software yang digunakan untuk membuat aplikasi android</dd>
<dt>Flutter</dt>
<dd>Software yang digunakan untuk membuat aplikasi berbasis android dan IOS</dd>
<dt>Bootstrap</dt>
<dd>Software yang membantu para pengembang website agar lebih mudah mengembangkan website</dd>
</dl>
</body>
</html>Daftar List :
- Android Studio
- Software yang digunakan untuk membuat aplikasi android
- Flutter
- Software yang digunakan untuk membuat aplikasi berbasis android dan IOS
- Bootstrap
- Software yang membantu para pengembang website agar lebih mudah mengembangkan website