Dalam membuat suatu halaman HTML pasti kadang kita membutuhkan sebuah list untuk melengkapi isi dari halaman HTML kita, maka dari itu HTML telah menyediakan suatu Tag yang dapat Anda gunakan untuk membuat suatu list di dalam halaman HTML.
Di Dalam Halaman HTMl Terdapat 3 Jenis List yang Bisa Anda Gunakan, Diantaranya :
- Ordered List
- Unordered List
- List Tanpa Bullet
Ordered List <ol>
Ordered List atau biasa lebih dikenal dengan list yang terurut dapat Anda gunakan pada halaman HTML, Tag ini nantinya akan memberikan urutan list bisa berdasarkan Angka dan huruf, yang terdapat pada sebelah kiri kalimat.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat List</title>
</head>
<body>
Jadwal Kegiatan Hari Ini :
<ol>
<li>Mandi</li>
<li>Kuliah</li>
<li>Istirahat Makan Siang</li>
<li>Pulang Kuliah</li>
<li>Mandi</li>
<li>Tidur</li>
</ol>
</body>
</html>
Contoh coding diatas adalah pengurutan list secara default yang berarti urutan tersebut akan menggunakan Angka, Jika Anda ingin membuat suatu list dengan menggunakan huruf ataupun romawi maka Anda harus memberikan atribut pada tag <ol> tersebut.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat List</title>
</head>
<body>
Jadwal Kegiatan Hari Ini :
<ol type="A">
<li>Mandi</li>
<li>Kuliah</li>
<li>Istirahat Makan Siang</li>
<li>Pulang Kuliah</li>
<li>Mandi</li>
<li>Tidur</li>
</ol>
</body>
</html>
Dengan menggunakan source code diatas maka urutan list yang Anda buat akan berubah menjadi pengurutan menggunakan huruf.
Unordered List <ul>
Unordered List adalah list yang dibuat tanpa memperdulikan urutan dari list tersebut, atau list tidak berurutan, list ini dapat berupa simbol maupun bullet. Sebenarnya cara pembuatannya tetap sama hanya saja kita menggunakan tag <ul> pada pengurutan yang kita berikan.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat List</title>
</head>
<body>
Jadwal Kegiatan Hari Ini :
<ul>
<li>Mandi</li>
<li>Kuliah</li>
<li>Istirahat Makan Siang</li>
<li>Pulang Kuliah</li>
<li>Mandi</li>
<li>Tidur</li>
</ul>
</body>
</html>
List Tanpa Bullet <dl>
List Tanpa Bullet adalah list yang tidak menggunakan tanda list di sebelah kirinya atau hanya akan membuat list tanpa adanya angka ataupun simbol yang menandakan list tersebut. Pembuatannya juga sama dengan kedua list sebelumnya hanya saja tag nya menggunakan <dl> dan tag <li> di ganti dengan <dd>. Untuk lebih jelasnya kita coba saja dengan contoh dibawah ini.
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat List</title>
</head>
<body>
Jadwal Kegiatan Hari Ini :
<dl>
<dd>Mandi</dd>
<dd>Kuliah</dd>
<dd>Istirahat Makan Siang</dd>
<dd>Pulang Kuliah</dd>
<dd>Mandi</dd>
<dd>Tidur</dd>
</dl>
</body>
</html>
Baca Juga :
Membuat Animasi Teks Bergerak Pada Halaman HTML
Membuat Link Untuk Menghubungkan Halaman HTML
Mengatur Font, Ukuran dan Perataan Teks Pada HTML
EmoticonEmoticon