Bagaimana cara membuat daftar poin dan nomor dalam HTML?
Daftar adalah cara terbaik untuk mengatur bagian atau konten di halaman web. Mereka membuat pengalaman pengguna lebih baik dengan mengkategorikan informasi, atau mengelompokkan konsep atau item serupa. Saat menggunakan HTML, ada dua jenis daftar: berpoin dan bernomor. Bagian berikut ini memperlihatkan kepada Anda cara membuat masing-masing, dan mengubah tampilan, penumpukan, dan formatnya.
Cara membuat daftar berpoin
Untuk membuat daftar berpoin, gunakan daftar tidak berurutan tag
dan item daftar
tag seperti yang ditunjukkan pada contoh di bawah ini.
Kode contoh
- Example 1
- Example 2
- Example 3
Contoh di atas akan membuat daftar berpoin seperti yang ditunjukkan di bawah ini.
Hasil contoh
- Contoh
- Contoh2
- Contoh3
Anda juga dapat menggunakan kode HTML yang diperluas &banteng; jika Anda ingin membuat simbol poin (•) tanpa membuat daftar poin yang tidak berurutan.
Cara membuat daftar bernomor
Untuk membuat daftar bernomor, gunakan Daftar pesanan tag
dan item daftar
tag seperti yang ditunjukkan pada contoh di bawah ini.
Kode contoh
- Example 1
- Example 2
- Example 3
Contoh di atas akan membuat daftar berpoin seperti yang ditunjukkan di bawah ini.
Hasil contoh
- Contoh 1
- Contoh 2
- Contoh 3
Menghentikan dan melanjutkan daftar bernomor
Saat membuat daftar bernomor, Anda mungkin perlu “berhenti sebentar” untuk menambahkan objek lain seperti daftar peluru, gambar, atau paragraf. Kode berikut membuat daftar bernomor yang beralih dari satu ke tiga, menampilkan paragraf, dan kemudian melanjutkan daftar bernomor menggunakan atribut start.
Kode contoh
- Example 1
- Example 2
- Example 3
Paragraph example.
- Example 4
- Example 5
- Example 6
Atribut start dapat berupa nilai numerik apa pun dan memberi tahu daftar yang dipesan nomor apa yang akan digunakan sebagai nomor awal.
Hasil contoh
- Contoh 1
- Contoh 2
- Contoh 3
Contoh paragraf.
- Contoh 4
- Contoh 5
- Contoh 6
Cara membuat daftar peluru dalam daftar nomor
Anda juga dapat meletakkan daftar di dalam satu sama lain, membuat sublist. Teknik ini, yang disebut penumpukan, dapat dilakukan dengan memulai daftar setelah salah satu tag item daftar (
Kode contoh
- Example 1
- Example 2
- Example 3
- Bullet 1
- Bullet 2
- Bullet 3
- Example 4
- Example 5
- Example 6
Hasil contoh
- Contoh 1
- Contoh 2
- Contoh 3
- Bullet1
- Peluru 2
- Butir 3
Menerapkan CSS ke poin atau daftar bernomor
Contoh di bawah ini menunjukkan bagaimana menerapkan CSS untuk mengubah gambar peluru dalam daftar.
Kode contoh
#content ul li { list-style-Type: none; padding: 0 0 4px 23px; background: url(https://www.computerhope.com/cdn/arrow.png) no-repeat left center; }
Dalam contoh ini, yang menggunakan file .css eksternal, kami memberi tahu halaman web untuk hanya mengubah item berpoin di bagian
. Jika Anda ingin semua item berpoin berubah, Anda bisa menghapus file #kandungan pada contoh di atas. Di baris kedua, file list-style-Type: none; memberi tahu browser untuk tidak menampilkan peluru. Di baris ketiga, file padding: 0 0 4px 23px; adalah ruang dan indentasi di sekitar peluru. Di baris keempat, file Latar Belakang memberi tahu browser untuk menggunakan gambar sebagai poin dan tempat untuk menampilkannya.
Hasil contoh
- Contoh 1
- Contoh 2
- Contoh 3