Daftar Item
List item atau daftar item adalah untuk memberikan penjelasan terstruktur dan pokok-pokok pikiran sering digunakan daftar singkat, misalnya seperti menumakanan dan daftar isi sebuah buku. daftar ini juga sering d gunakan pada website yang beranggota atau memiliki member seperti komunitas, agar mudah mengetahui detail dari orang-orang atau akun member yang teregistrasi d website komunitas.
Ada Beberapa jenis daftar atau list, antara lain :
- Ordered List (OL) : Daftar terurut
- Unordered List (UL) : Daftar tak terurut
- Definition List (DL) : Daftar istilah
Ordered List
Element yang digunakan untuk mendefinisikan list item adalah <ol>, dengan nilai atribut type yang dapat digunakan berupa :
Element yang digunakan untuk mendefinisikan list item adalah <ol>, dengan nilai atribut type yang dapat digunakan berupa :
- "A" untuk membentuk huruf besar / kapital,
- "a" untuk huruf kecil,
- "I" untuk huruf besar romawi,
- "i" untuk huruf kecil romawi,
- "1" untuk bilangan yang merupakan simbol default.
Contoh daftar item dengan ordered list dapat di lihat pada kode berikut :
Begini Output yang akan ditampilkan :
<html>
<head>
<title> Daftar Ordered List </title>
</head>
<body>
<ol type="i" start="3">
<li> Nama : David Kuddow </li>
<li> Nama Panggian : David </li>
<li> Jenis Kelamin : Laki-laki </li>
<li> Alamat : Taman Wisma Asri 2, Bekasi Utara </li>
</ol>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Begini Output yang akan ditampilkan :
 |
| Ordered List (OL) |
Unordered List
Unordered list adalah daftar item yang tersusun tanpa urutan bilangan maupun abjad. Penanda item yang digunakan adalah sebuah simbol yang dapat berupa lingkaran, kotak atau bulatan hitam. Daftar item ini biasanya diistilahkan dengan buletted list. untuk mendefinisikan jenis list ini, dgunakan tag element <ul> </ul>.
Contoh sebuah list item dapat di lihat pada kode berikut :
<html>
<head>
<title> Daftar Unordered List </title>
</head>
<body>
<ul>
<li> Fakultas : Managemen Informatika, BSI </li>
<li> Lulus : 10 Agustus 2012 </li>
<li> Nilai IP : 3.83 </li>
</ul>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Dan begini tampilan yang akan muncul :
 |
| Unordered List (UL) |
Secara default, bila tidak ada pemberian atribut simbol item yang digunakan, maka simbol yang akan digunakan adalah berupa bulatan hitam atau disc. Untuk menampilkan simbol yang lain, tambahkan sebuah type dengan nilai atribut berupa simbol yang akan digunakan yaitu circle atau square.
<ul type="square">
Selain itu, simbol tiap item juga dapat dibuat berbeda dengan simbol item yang lain dengan memberikan atribut pada element <li>.
Contoh :
Maka yang akan muncul seperti ini :
Contoh :
<html>
<head>
<title> Daftar Unordered List </title>
</head>
<body>
<ul>
<li type="square"> Item satu </li>
<li type="circle"> Item dua </li>
</ul>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Maka yang akan muncul seperti ini :
 |
| Unordered List (UL) (Square & Circle) |
Definition List
Berbeda dengan daftar item sebelumnya, definition list adalah daftar item yang tidak memiliki simbol untuk setiap item anggotanya. List ini biasanya digunakan untuk membuat daftar penjelasan atau daftar definisi, bisa juga untuk membuat site map dan sebagainya.
ada tiga element pokok untuk membangun sebuah definition list :
Akan muncul tampilan berikut :
Contoh penggunaan daftar item :
Berikut hasil yang akan tampil di layar browser :
Untuk artikel ini dan penjelasan fungsi OL, UL & DL biasanya di gunakan untuk membuat biodata untuk di buat dalam website yang berada dalam biodata website si pemilik, dan element ini juga bisa digunakan untuk menjual desain atau seperti website toko online dengan element dan atribut yang bisa menjelaskan definision keterangan disetiap barang-barang atau item yang kalian bangun di dalam website.
Berbeda dengan daftar item sebelumnya, definition list adalah daftar item yang tidak memiliki simbol untuk setiap item anggotanya. List ini biasanya digunakan untuk membuat daftar penjelasan atau daftar definisi, bisa juga untuk membuat site map dan sebagainya.
ada tiga element pokok untuk membangun sebuah definition list :
- <dl> </dl> element untuk mendeklarasikan definition list,
- <dt> </dt> element untuk mendefinisikan istilah.
- <dd> </dd> element untuk mendefinisikan penjelasan istilah yang di maksud.
<html>
<head>
<title> Daftar Definition List </title>
</head>
<body>
<dl>
<dt> HTML </dt>
<dd> Hypertext Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Style Sheet </dd>
</dl>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Akan muncul tampilan berikut :
 |
| Definition List (DL) |
Contoh penggunaan daftar item :
<html>
<head>
<title> Curiculum Vitae </title>
</head>
<body>
<h1 align="center"> My Curriculum Vitae </h1>
<ol type="I">
<li>
<h2> Biodata Pribadi </h2>
<ul>
<li> Nama Lengkap : Shelby Valleska Wulansari </li>
<li> Nama Panggilan : Shelby </li>
<li> Tempat Lahir : Garut, 20 Juni 1993 </li>
<li> Jenis Kelamin : Wanita </li>
<li> Alamat : Garut daerah istimewah dingin sekali </li>
</ul>
</li>
<li>
<h2> Biodata Pendidikan </h2>
<ol>
<li>
<h3> Pendidikan formal </h3>
<ul type="circle">
<li> TK Garut Istimewah, 2001 </li>
<li> SDN Garut Istimewah,2002 </li>
<li> SMPN Negri Garut Istimewah, 2007 </li>
<li> SMUN Negri Garut 1 Istimewah,2009 </li>
<li> Teknik Elektro, ITB, 2011 </li>
</ul>
</li>
<li>
<h3> Pendidikan Non Formal </h3>
<ul type="circle">
<li> Kursus Sempoa Aritmatika, 2005 </li>
<li> Kursus Aplikasi perkantoran, 2008 </li>
</ul>
</li>
</ol>
</li>
</ol>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Berikut hasil yang akan tampil di layar browser :
 |
| Penggunaan Daftar Item |
Untuk artikel ini dan penjelasan fungsi OL, UL & DL biasanya di gunakan untuk membuat biodata untuk di buat dalam website yang berada dalam biodata website si pemilik, dan element ini juga bisa digunakan untuk menjual desain atau seperti website toko online dengan element dan atribut yang bisa menjelaskan definision keterangan disetiap barang-barang atau item yang kalian bangun di dalam website.
Belum ada tanggapan untuk "Membuat Daftar List Pada Website"
Posting Komentar