Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>. Show Cara Membuat Daftar/List di HTMLDalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh. Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>: <!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ol>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ol>
</body>
</html> Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>. Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>: <!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>eBook HTML Uncover Duniailkom Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom. Kalian pernah ngetik di microsoft word dan menggunakan Bullets and Numbering? Kalian gunakan untuk apa Bullets and Numberingnya? Bullets and Numbering digunakan untuk membuat daftar, seperti daftar makanan, daftar hobi dan lain sebagainya yang disusun dengan penomoran atau simbol. Pada HTML ini dikenal dengan nama List. Apa itu List di HTML?Pada HTML, list adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list atau daftar, bisa berupa simbol (Bullet) atau nomor urut (Numbering). List HTML bisa juga digunakan untuk membuat menu navigasi pada halaman website. Jenis List di HTMLDi dalam HTML ada tiga jenis list yaitu:
Dalam pembahasan pada tutorial ini kita akan menggunakan ketiganya untuk latihan. Namun pada praktek nyatanya kalian nanti dapat memilih dan menyesuaikan sendiri penggunaannya. Cara Menggunakan Ordered List di HTMLOrdered list adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut. Untuk membuat Ordered list kalian dapat membuatnya dengan tag <ol>. Di dalam <ol> terdapat sub elemen untuk menentukan item listnya yaitu dengan menggunakan Tag <li> (list item). Contoh Penggunaan Ordered List: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <title>Belajar Ordered List HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar nama ikan yang hidup di laut</h3> <ol> <li>Bandeng</li> <li>Barakuda</li> <li>Baronang</li> <li>Belanak</li> <li>Buntal</li> <li>Hiu</li> <li>Kakap</li> <li>Kerapu</li> </ol> </body> </html> Kode HTML di atas akan menghasilkan tampilan seperti berikut:Tampilan Ordered List Secara default Ordered List <ol></ol> akan menghasilkan tampilan daftar terurut dengan nomor, seperti contoh di atas menghasilkan urutan 1 sampai dengan 8. Kita juga dapat menyesuaikan tipe penomorannya misalkan menginginkan huruf a, b, c dan seterusnya, atau I, II, III dan seterusnya. Caranya tinggal menambahkan atribut type di Tag awal <ol>, dengan format <ol type=”…”></ol>. Buatlah kode HTML berikut ini untuk mencoba Atribut type. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <head> <title>Belajar Ordered List HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar nama ikan mentah</h3> <ol> <li>Nila</li> <li>Bawal</li> <li>Gurami</li> </ol>
<h3>Daftar Menu Makanan</h3> <ol type="a"> <li>Nila Bakar</li> <li>Bawal Goreng Sambal Ijo</li> <li>Gurami Bakar</li> </ol>
<h3>Daftar Menu Minuman</h3> <ol type="I"> <li>Es Teh</li> <li>Kopi Panas</li> <li>Kopi Dingin</li> </ol> </body> </html> Hasil dari kode di atas dapat dilihat pada gambar berikut ini. Ordered List Type Cara Menggunakan Unordered List di HTMLUnordered List adalah daftar/list item yang tidak memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan tag HTML <ul>. Setiap item dalam daftar ditandai dengan simbol-simbol. Kalian bisa menggunakan atribut type untuk tag <ul> untuk menentukan tipe bullet/simbol yang kalian inginkan. Secara default, ini adalah disc. Beberapa opsi type yang kalian bisa gunakan adalah circle, square dan disc. Berikut ini contoh penggunakan unordered List <ul></ul> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <head> <title>Belajar Unordered List HTML Bersama SulusiLain.Com</title> </head> <body> <h3>Daftar Tanaman Obat</h3> <ul> <li>Jahe</li> <li>Kunyit</li> <li>Kumis Kucing</li> </ul>
<h3>Daftar Buah</h3> <ul type="square"> <li>Duku</li> <li>Salak</li> <li>Rambutan</li> </ul>
<h3>Daftar Sayuran</h3> <ul type="circle"> <li>Bayam</li> <li>Kangkung</li> <li>Kol</li> </ul> </body> </html> Dari kode diatas akan menampilkan halaman seperti pada gambar berikut ini. Hasil Unordered List HTML Menggunakan Definition List di HTMLSelain Ordered List dan Unordered List, Pada HTML mendukung daftar/list yang disebut daftar definisi di mana entri terdaftar seperti dalam kamus atau ensiklopedia. Daftar definisi cocok digunakan untuk menyajikan glosarium, daftar istilah, atau daftar nama/nilai lainnya. Daftar Definisi menggunakan tiga tag berikut.
Cohtoh Penggunaan Definition List pada HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <title>Belajar Definition List HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar Istilah dalam Pemrograman Web</h3> <dl> <dt><b>Web Browser</b></dt> <dd>Suatu program atau software yang digunakan untuk menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer.</dd> <dt><b>Web Server</b></dt> <dd>Perangkat lunak yang berfungsi sebagai penerima permintaan yang dikirimkan melalui browser kemudian memberikan tanggapan permintaan dalam bentuk halaman situs web atau lebih umumnya dalam dokumen HTML.</dd> </dl> </body> </html> Hasil dari kode di atas adalah sebagai berikut. Hasil Definition List HTML Itulah Cara Membuat List di HTML untuk menyajikan informasi dalaman bentuk daftar/list. Mudah-mudahan bermanfaat. Apa itu list dalam HTML?List merupakan cara penulisan yang sering digunakan untuk membuat daftar berurutan. Terdapat 3 macam list yang ada di HTML yaitu ordered list, unordered list dan description list.
Berapa banyak tipe list dalam unordered list?Beberapa type yang bisa digunakan pada tag UL atau Unordered List ada 4 yakni type disc, circle, square dan none.
Apa itu ul dan li di HTML?Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li> . Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc).
|
Berapa jenis list di html?
Pos Terkait
Copyright © 2024 kemunculan Inc.
