Cara membuat Daftar/list di HTML (tag list)
Cara membuat Daftar/list di HTML (tag <list>)
Hai sobat apa kabar? Pada tutorial kali ini saya akan membahas tentang cara membuat daftar atau list di HTML. Pernahkah sobat melihat beberapa artikel di website yang menggunakan daftar atau list, misalnya membuat daftar belanjaan atau daftar lainnya yang bersifat berurut. Untuk menangani masalah ini HTML menyediakan tag khusus dalam pengoperasiannya. Yaitu tag list.Dalam HTML tag list terdiri dari dua jenis, yakni order list (berurutan) menggunakan tag <ol> dan unorder list (tidak berurutan) menggunakan tag <ul>. Sedangkan untuk mengurutkan menjadi list sendiri menggunakan tag <li>. untuk lebih jelasnya mari kita lihat contoh dibawah ini.
Ordered List (tag <ol>)
Seperti yang sudah saya katakan tadi tag ordered list berfungsi untuk membuat daftar yang berurutan. Untuk penulisanya menggunakan tag <ol> dan diikuti dengan tag <li> sebagai daftarnya.Dan untuk ordered list ini sendiri kita dapat memilih jenis type yang kita inginkan, Yakni nilai yang dapat kita inputkan adalah (1, A, a, I, i). Untuk lebih mudah memahami silahkan sobat ketikkan kode berikut di aplikasi text editor seperti notepad. Lalu simpan dengan nama contoh_ol.html.
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat daftar/List </title>
</head>
<body>
<h1> Daftar Menu Makanan </h1>
<ol type=”I”>
<li>Mie Ayam</li>
<li>Nasi Goreng</li>
<li>Bakso</li>
</ol>
<h1> Daftar Menu Minuman </h1>
<ol type=”A”>
<li>Teh Es</li>
<li>Jus Alpukat</li>
<li>Capucino</li>
</ol>
</body>
</html>
<html>
<head>
<title> Cara membuat daftar/List </title>
</head>
<body>
<h1> Daftar Menu Makanan </h1>
<ol type=”I”>
<li>Mie Ayam</li>
<li>Nasi Goreng</li>
<li>Bakso</li>
</ol>
<h1> Daftar Menu Minuman </h1>
<ol type=”A”>
<li>Teh Es</li>
<li>Jus Alpukat</li>
<li>Capucino</li>
</ol>
</body>
</html>
Catatan secara default apabila pada tag <ol> tidak diberikan type, maka urutan yang akan muncul berupa huruf yakni 1 2 3 dst. Jika dijalankan maka hasilnya seperti gambar dibawah ini :
Unordered List (tag <ul>)
Unordered List, berfungsi untuk membuat daftar/list yang tidak berurutan. Dan secara default akan menampilkan berbentuk bulatan oleh web browser. Sama seperti tag <ol> kita juga dapat memasukkan beberapa type dengan nilai yang sudah ditetapkan. Namun bedanya nilai yang dapat kita gunakan adalah (Square, disc, circle).Square berfungsi membuat list dengan bentuk kotak. Disc berfungsi membuat bentuk bulatan. Dan circle berfungsi membuat bentuk bulat seperti donat yang tengah-tengahnya bolong. Untuk lebih jelasnya silahkan coba kode dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Cara membuat daftar/List </title>
</head>
<body>
<h1> Daftar Menu Makanan </h1>
<ol type=”square”>
<li>Mie Ayam</li>
<li>Nasi Goreng</li>
<li>Bakso</li>
</ol>
<h1> Daftar Menu Minuman </h1>
<ol type=”disc”>
<li>Teh Es</li>
<li>Jus Alpukat</li>
<li>Capucino</li>
</ol>
<h1> Daftar Menu Penutup </h1>
<ol type=”circle”>
<li>Goreng Pisang</li>
<li>Spageti</li>
<li>Pizza</li>
</ol>
</body>
</html>
<html>
<head>
<title> Cara membuat daftar/List </title>
</head>
<body>
<h1> Daftar Menu Makanan </h1>
<ol type=”square”>
<li>Mie Ayam</li>
<li>Nasi Goreng</li>
<li>Bakso</li>
</ol>
<h1> Daftar Menu Minuman </h1>
<ol type=”disc”>
<li>Teh Es</li>
<li>Jus Alpukat</li>
<li>Capucino</li>
</ol>
<h1> Daftar Menu Penutup </h1>
<ol type=”circle”>
<li>Goreng Pisang</li>
<li>Spageti</li>
<li>Pizza</li>
</ol>
</body>
</html>
Simpan kode diatas dengan nama Contoh_ul.html, dan jalankan dengan klik 2 kali maka hasilnya seperti gambar dibawah ini :
0 Response to "Cara membuat Daftar/list di HTML (tag list)"
Post a Comment