OL dan UL di HTML
<ol> (Ordered List) dan <ul> (Unordered List) adalah elemen HTML yang digunakan untuk membuat daftar item dalam dokumen web. Berikut definisi masing-masing elemen
1. <ol>(Ordered List):
<ol> digunakan untuk membuat daftar terurut (ordered list) dalam dokumen HTML.
Item dalam daftar terurut diurutkan dengan nomor atau huruf, secara default menggunakan nomor desimal (1, 2, 3, dst.).<ul>
2. (Unordered List)
<ul> digunakan untuk membuat daftar tidak terurut (unordered list) dalam dokumen HTML.
Item dalam daftar tidak terurut ditampilkan dengan poin atau simbol lainnya, secara default menggunakan poin bulat hitam.
Contoh OL
<!DOCTYPE html>
<html>
<head>
<title>Contoh Ordered List</title>
</head>
<body>
<h1>Daftar Belanja</h1>
<ol>
<li>Susu</li>
<li>Telur</li>
<li>Roti</li>
<li>Apel</li>
</ol>
</body>
</html>
Contoh UL
<!DOCTYPE html>
<html>
<head>
<title>Contoh Unordered List</title>
</head>
<body>
<h1>Pekerjaan Rumah</h1>
<ul>
<li>Mencuci piring</li>
<li>Menyapu lantai</li>
<li>Mengurus taman</li>
<li>Menyusun buku</li>
</ul>
</body>
</html>
Contoh Dengan CSS
<!DOCTYPE html>
<html>
<head>
<title>Contoh Ordered List dan Unordered List</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Menghubungkan file CSS eksternal -->
</head>
<body>
<h1>Daftar Belanja</h1>
<ol>
<li>Susu</li>
<li>Telur</li>
<li>Roti</li>
<li>Apel</li>
</ol>
<h1>Pekerjaan Rumah</h1>
<ul>
<li>Mencuci piring</li>
<li>Menyapu lantai</li>
<li>Mengurus taman</li>
<li>Menyusun buku</li>
</ul>
</body>
</html>
===
CSS OL
ol {
list-style-type: decimal; /* Menggunakan angka desimal sebagai penomoran */
margin-left: 20px; /* Membuat indentasi dari kiri */
}
CSS UL
ul {
list-style-type: disc; /* Menggunakan poin sebagai penanda daftar */
margin-left: 20px; /* Membuat indentasi dari kiri */
}
Berita Terkait
- Definisi Teknologi Informasi
- Materi Informatika Kelas 8 Updater
- Contoh Projek Scratch Mapel Informatika
- Materi Scratch dan Scratch Jr Lengkap
- Apa itu Scratch Junior? Download Modul Scratch Junior
