xZee Blog



Membuat List atau Daftar di HTML

Plsy Store Street Fight
Zen Sama
xZee Blog
HTML Tutorial

HTML CODE

TENTANG

digunakan untuk membuat sebuah Daftar atau List pada file atau dokumen HTML.
kode utama adalah <li></li> sementara <ul></ul>memberikan sebuah ruang dengan jarak pada sisi kiri dan dapat mengubah gaya list dari awalnya hanya bulat menjadi kotak dan lingkaran.

sementara untuk <ol></ol> sendiri berguna untuk mengubah gaya bulat pada list menjadi sebuah angka urut Order yang sama juga memberikan sebuah ruang dengan jarak di bagian kiri dan bisa mengubah gaya list.

CONTOH

<ul> <li>Daftar tidak urut 1</li> <li>Daftar tidak urut 2</li> <li>Daftar tidak urut 3</li> </ul> <ol> <li>Daftar dengan order</li> <li>Daftar dengan order</li> <li>Daftar dengan order</li> </ol>
contoh list html ul li

Gaya list kotak
gaya list kotak
Gaya list lingkaran
gaya list lingkaran
Daftar urut huruf
gaya list kotak
Daftar urut upper roman
gaya list kotak

membuat gaya list berada didalam


Untuk melihat efek gaya list kotak berada didalam harus menambah sebuah warna latar belakang atau background pada ul dan li.
bebas mau menggunakan <ul> atau <ol> sebagai induk kode <li>

contoh seperti tampilan kode list template Cute Tab dari xZee Team ini.

  • Daftar List Cute Tab
  • Daftar List Cute Tab
  • Daftar List Cute Tab
  1. List Urut Cute Tab
  2. List Urut Cute Tab
  3. List Urut Cute Tab

berikut adalah list style dengan latar belakang sama seperti diatas
tidak dengan efek lanjut karena terlalu panjang nanti isi posting ini.

<style>ul { background: #FFFC5F; padding: 5px; list-style: square inside; } li { background: #48CC58; margin: 2px 0; padding: 5px; } </style> <ul> <li>Teks</li> <li>teks</li> </ul>

kunjungi posting xZee Blog tentang kumpulan kode style untuk memperbagus posting Blog jika ingin tampilan gaya yang lain.
Share This Post

Post Detail


Posted By: Zen Sama
Posted On: 04 Nov 2017 22:06
Category: Belajar HTML dan CSS


Leave a Comment

Lenna Gracie
Lenna Gracie
04 Nov 2017 22:06
Hello.. No comments yet on "Membuat List atau Daftar di HTML"
Why not to be first user comment?

Please Login first for post a comment

Please switch off your AdBlock and refresh this page :)