List (Daftar) yang di maksud adalah menampilkan data atau informasi secara terstruktur.
List di html di bagi menjadi tiga yakni ordered list (Daftar berurutan), unordered list (Daftar tak berurutan) dan Description List (List dengan deskripsi) dan ke tiga jenis list ini sudah di sediakan elementnya sesuai fungsinya masing-masing.
Membuat list (Ordered list) di HTML
List jenis ini sistem kerjanya menampilkan daftar informasi secara berurutan dengan menggunakan penomoran (1,2,3...) atau abjad (a,b,c...) dll.
Element untuk membuat list jenis ini (Ordered list) yakni dengan tag <ol> sebagai pembungkus list dan tag <li> sebagai daftar item.
Contoh membuat list jenis Ordered list sebagai berikut:
Contoh membuat Ordered list di HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>
</body>
</html>
Preview
- HTML
- CSS
- JavaScript
- PHP
- MySql
Contoh di atas, informasi berupa teks di tampilkan secara berurutan dan setiap item informasi terdapat pengurutan berupa angka.
Dengan tag <ol>, kita juga bisa merubah mode pengrurutannya yang secara default HTML mengurutkan berasarkan angka yang terkecil sambai terbesar pada setiap item, kita dapat mengubahnya dengan sebuah abjad dengan menggunakan sebuah atribut khusus yakni atribut Style="...".
Contoh pengurutan daftar ordered list berdasarkan abjad sebagai berikut:
Contoh tag <ol> denagan atribut type di HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ol type="a" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>
<ol type="A" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>
</body>
</html>
Preview
- HTML
- CSS
- JavaScript
- PHP
- MySql
- HTML
- CSS
- JavaScript
- PHP
- MySql
Selain mengurutkan berdasarkan angkan dan abjad, kita juga bisa mengurutkan list (Ordered list) dengan angka romawi.
Contoh:
Contoh Ordered list dengan atribut type di tag <ol> HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ol type="i" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>
<ol type="I" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>
</body>
</html>
Preview
- HTML
- CSS
- JavaScript
- PHP
- MySql
- HTML
- CSS
- JavaScript
- PHP
- MySql
Membuat list (Unordered List) di HTML
Unordered list (Daftar tak berurutan) adalah list yang tidak di sertai indikasi pengrurutan berdasarkan angka atau abjad.
Unordered list indikasi itemnya berupa karakter seperti titik bulat dan lain-lain. element yang di gunakan untuk membuat list (Unordered list) adalah element HTML dengan tag <ul> dan item list dengan tag <li>.
Contoh Unordered list sebagai berikut:
Contoh Unordered list di HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>
</body>
</html>
Kita juga bisa mengubah karakter yang mengindikasikan item list dengan karakter lain dengan atribut type="...", contohnya seperti di bawah ini:
Contoh mengganti karakter indikasi list di tag <ul>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Atrubut type="square" (karakter kotak)</p>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>
<p>Atribut type="none" (menghilangkan karakter penanda list)</p>
<ul type="none">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>
<p>Atribut type="circle" (lingkaran)</p>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>
<p>Atribut type="dics" (seperti default)</p>
<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>
</body>
</html>
Preview
Atrubut type="square" (karakter kotak)
Atribut type="none" (menghilangkan karakter penanda list)
Atribut type="circle" (lingkaran)
Atribut type="dics" (seperti default)
Membuat list (Description list) di HTML
List jenis ini (Description list) adalah list yang tedak memilki indikasi daftar baik berupa abjad, angka dan karakter. namaun di sini ada yang membedakan dari dua jenis list yang sebelumnya kita bahas, yakni description list bisa di sertai dengan keterangan (deskripsi) pada setiap daftar informasinya.
Tag yabg sudah di sediakan di HTML unutuk membuat description list adalah tag <dl> (Data list). Tag untuk list itemnya adalah <dt> (Data term) dan untuk mendefinisikan deskripsinya yakni tag <dd> (data description).
Contoh untuk membuat Description List sebagai berikut:
.
Contoh Description List di HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Belajar html dasar sangat penting untuk bekal saat mempelajari bahasa pemrograman</dd>
<dt>CSS</dt>
<dd>HTML dan CSS perlu di kuasai dengan baik untuk dapat membangun struktur web berpotensi</dd>
<dt>Java Script</dt>
<dd>Web modern membutuhkan Java Script agar nampak dinamis.</dd>
<dt>PHP</dt>
<dd>Bahasa pemrograman berbasis web dapat di manfaatkan agar web lebih dinamis dan interaktif.</dd>
</dl>
</body>
</html>
Preview
HTML
Belajar html dasar sangat penting untuk bekal saat mempelajari bahasa pemrograman
CSS
HTML dan CSS perlu di kuasai dengan baik untuk dapat membangun struktur web berpotensi
Java Script
Web modern membutuhkan Java Script agar nampak dinamis.
PHP
Bahasa pemrograman berbasis web dapat di manfaatkan agar web lebih dinamis dan interaktif.
Sebenarnya, masih ada satu lagi tehnik membuat List di html dengan indikator list gambar, namun konsep ini tidak akan kita bahas di artikel ini, melainkan kita akan bahas saat kita sudah belajar mengenai CSS lebih dalam lagi.