Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Membuat daftar pada HTML.
Unordered List HTML
Daftar unordered dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>.
Daftar item akan ditandai dengan peluru (lingkaran hitam kecil) secara default.
Contoh
<!DOCTYPE html><html><body><h2>Unordered List HTML</h2><ul><li>Kopi</li><li>Teh</li><li>Susu</li></ul></body></html>
Hasil:
Unordered List HTML - Pilih Daftar Barang Marker
CSS list-style-type properti digunakan uantuk menentukan gaya item daftar penanda.
Nilai Keterangan
disc Set item daftar penanda untuk peluru (default)
circle Set item daftar penanda ke lingkaran
square Set item daftar penanda untuk persegi
none Daftar item tidak akan ditandai
Contoh - Disc
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List dengan bullet disk</h2>
<ul style="list-style-type: disc;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasil :
Contoh - Circle
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List dengan Bullet Lingkaran</h2>
<ul style="list-style-type: circle;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasil:
Contoh - Square
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List dengan Bullet Kotak</h2>
<ul style="list-style-type: square;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasil:
Contoh - None
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List Tanpa Bullet</h2>
<ul style="list-style-type: none;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasil :
Ordered List HTML
Daftar memerintahkan dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>.
Daftar item akan ditandai dengan nomor secara default.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List HTML</h2>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil:
Ordered List HTML - Tag type atribut
Tag type atribut dari tag <ol>, mendefinisikan jenis item daftar penanda.
Jenis Keterangan
type="1" Daftar item akan diberi nomor dengan angka (default)
type="A" Daftar item akan diberi nomor dengan huruf besar
type="a" Daftar item akan diberi nomor dengan huruf kecil
type="I" Daftar item akan diberi nomor dengan angka romawi huruf besar
type="i" Daftar item akan diberi nomor dengan angka romawi huruf kecil
Contoh - Nomor:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List dengan Number</h2>
<ol type="1">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil:
Contoh - Huruf Besar
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List dengan Letters</h2>
<ol type="A">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil:
Contoh - Huruf Kecil
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List dengan Letters kecil</h2>
<ol type="a">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil:
Contoh - Huruf Besar Angka Romawi
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List dengan Angka Romawi</h2>
<ol type="I">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil:
Contoh - Huruf kecil Angka Romawi
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List dengan Angka Romawi kecil</h2>
<ol type="i">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil:
Deskripsi HTML
HTML juga mendukung daftar deskripsi.
Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
Tag <dl> mendefinisikan daftar deskripsi, yang tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Daftar Deskripsi</h2>
<dl>
<dt>Kopi</dt>
<dd>Minuman Hitam Hangat</dd>
<dt>Susu</dt>
<dd>Minuman Putih Dingin</dd>
</dl>
</body>
</html>
Hasil:
Daftar HTML Bersarang
Daftar dapat bersarang (daftar dalam daftar).
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Daftar Bersarang</h2>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh Hitam</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
</body>
</html>
Hasil:
Catatan: Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll.
Daftar Horizontal
Daftar HTML bisa ditata dalam berbagai cara dengan CSS.
Salah satu cara yang populer adalah gaya daftra horizontal, untuk membuat menu.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover{
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Berita</a></li>
<li><a href="#contact">Kontak</a></li>
<li><a href="#about">Tentang</a></li>
</ul>
</body>
</html>
Hasil:
Kesimpulan
- Tag HTML <ul> digunakan untuk mendefinisikan daftar unordered
- Tag CSS list-style-type digunakan untuk menentukan item daftar penanda.
- Tag HTML <ol> digunakan untuk menentukan daftar memerintahkan.
- Tag HTML type digunakan untuk menentukan jenis penomoran.
- Tag HTML <li> digunakan untuk menentukan item daftar.
- Tag HTML <dl> digunakan untuk menentukan daftar deskripsi.
- Tag HTML <dt> digunakan untuk mendefinisikan istilah deskripsi.
- Tag HTML <dd> digunakan untuk menggambarkan istilah dalam daftar deskripsi.
- Daftar dapat bersarang di dalam daftar.
- item daftar dapat berisi elemen HTML lainnya.
- Menggunakan properti CSS float: left atau display: inline untuk menampilkan daftar horizontal.
REFERENSI
No comments:
Post a Comment