Pada artikel sebelumnya, kita sudah membahas Tutorial Belajar HTML 5 Bagian 11 : Fungsi & Atribut Tag Table di HTML, selanjutnya kita akan belajar cara membuat daftar di HTML.
HTML sendiri menawarkan 3 cara kepada penulis web untuk membentuk daftar informasi. Semua daftar harus berisi satu atau lebih elemen daftar. Berikut jenis daftar dalam penulisan HTML :
- <ul> – Daftar yang tidak berurutan. Tag ini membentuk daftar yang tidak memerlukan urutan, biasanya ditandai dengan bulatan hitam atau kosong.
- <ol> – Daftar yang berurutan. Tag ini membentuk daftar yang memerlukan pengurutan, misalnya Langkah-langkah melakukan sesuatu yang diurutkan berdasarkan angka, huruf atau angka romawi.
- <dl> – Daftar definisi. Tag ini membentuk daftar dengan cara yang sama seperti yang diatur dalam kamus.
Tag Unordered List HTML
Tag unorderd list atau daftar tidak berurutan adalah kumpulan item terkait yang tidak memiliki urutan khusus.
Daftar ini dibuat dengan menggunakan tag <ul> HTML.
Setiap item dalam daftar ditandai dengan poin.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ul>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Jenis Atribut tag <ul>
Anda dapat menggunakan atribut ‘type’ pada tag <ul> untuk menentukan jenis poin yang Anda suka. Secara default, poin akan berbentuk piringan/disk berwarna hitam.
Berikut ini jenis poin yang digunakan pada atribut ‘type’ :
- <ul type = “square”>
- <ul type = “disc”>
- <ul type = “circle”>
Contoh :
Berikut contoh penggunaan tag <ul type = “square”>
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ul>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Berikut ini contoh penggunaan <ul type = “disc”>
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ul>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag Ordered List HTML
Jika Anda harus membuat daftar yang membutuhkan urutan, maka Anda sebaiknya menggunakan tag ordered list.
Daftar ini dibuat dengan menggunakan tag <ol>.
Penomoran dimulai dari 1 dan bertambah satu untuk setiap elemen daftar berurutan yang diberi tag <li>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ol>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Jenis Atribut Tag <ol>
Sama dengan tag <ul>, anda juga menggunaan atribut ‘type’ untuk menentukan jenis penomoran yang Anda butuhkan.
Secara default, penomoran akan dibuat dengan angka. Berikut pilihan jenis ‘type’ yang didukung :
- <ol type = “1”> – Default- Case Numerals.
- <ol type = “I”> – Angka Huruf Besar.
- <ol type = “i”> – Angka Huruf Kecil.
- <ol type = “A”> – Huruf Besar.
- <ol type = “a”> – Huruf Kecil.
Contoh :
Berikut adalah contoh penggunaan <ol type = “1”>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ol>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Berikut ini contoh penggunaan <ol type = “i”>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ol>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Berikut ini contoh penggunaan <ol type = “A”>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ol>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Berikut ini contoh penggunaan <ol type = “a”>
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ol>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Start
Anda dapat menggunakan atribut ‘start’ untuk tag <ol> untuk menentukan titik awal penomoran yang Anda butuhkan.
Berikut pilihan atribut yang didukung :
- <ol type = “1” start = “4”> – Nomor dimulai dengan 4.
- <ol type = “I” start = “4”> – Nomor dimulai dengan IV.
- <ol type = “i” start = “4”> – Nomor dimulai dengan iv.
- <ol type = “a” start = “4”> – Huruf dimulai dengan d.
- <ol type = “A” start = “4”> – Huruf dimulai dengan D.
Berikut ini contoh penggunaan <ol type = “i” start = “4”> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Bakso</li>
<li>Mi goreng</li>
<li>Kentang goreng</li>
<li>Siomai</li>
</ol>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag Defenition List HTML
HTML dan XHTML mendukung bentuk daftar yang disebut definition list, di mana konten terdaftar seperti dalam kamus atau ensiklopedia.
Defenition list adalah cara ideal untuk menyajikan kamus glosarium, daftar istilah, atau daftar nama/nilai lainnya.
Daftar Definisi menggunakan 3 tag berikut.
- <dl> – Mendefinisikan awal dari daftar
- <dt> – Sebuah istilah
- <dd> – Definisi istilah
</dl> – Mendefinisikan akhir dari daftar
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>Ini adalah singkatan dari Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>Ini adalah singkatan dari Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini, bisa menambah pengetahuan Anda tentang cara membuat daftar di HTML menggunakan tag <ul> & <ol> beserta dengan atributnya.
Pada tutorial selanjutnya, kita akan membahas cara manambahkan link pada teks di HTML.
0 Komentar