Membuat List Item pada HTML

List item digunakan untuk mengelompokan data baik yang berurutan maupun yang tidak.

Ada dua macam list yang bisa digunakan :
1. Tidak berurutan (Bullet) – Unordered List

TAG ATTRIBUTE VALUE DESCRIPTION
<ul> type Square Bullet kotak
Disc Bullet titik
Circle Bullet lingkaran

Langkah :

1. Tulislah script diatas ini pada dreamwaver atau notepad :

List Terurut

Tidak berurutan
<h2>Menu Makanan</h2>
<ul type="”circle”">
	<li>Bakso</li>
	<li>Mie Ayam</li>
	<li>Soto</li>
</ul>

2. Lalu save dengan nama MenuMakanan.html
3. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

gakur

2. Berurutan (Numbering) – Ordered List

TAG ATTRIBUTE VALUE DESCRIPTION
<ol> Start n Begin number
type I Upper Roman
I Lower Roman
A Uppercase
A Lowercase

Langkah :
1. Tulislah script dibawah ini pada dreamwaver atau notepad :

List Terurut

Al-Qur’an juga mengajarkan kita menjaga kesehatan, seperti membuat amalan antara lain :
<ol>
	<li>Mandi pagi sebelum subuh, sekurang-kurangnya sejam sebelum matahari terbit.  Air sejuk yang meresap ke dalam badan dapat mengurangi penimbunan lemak. Kita boleh saksikan orang yang mandi pagi kebanyakan badan tak gemuk.</li>
	<li>Rasulullah mengamalkan minum segelas air sejuk (bukan air es) setiap pagi. Mujarabnya, Insya Allah jauh dari penyakit (susah mendapat sakit).</li>
	<li>Waktu solat subuh, kita disunahkan bertafakur (yaitu sujud sekurang-kurangnya semenit setelah membaca doa). Kita akan terhindar dari sakit kepala atau migrain.</li>
</ol>

2. Lalu save dengan nama Kesehatan.html
3. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

urut

OK semoga berhasil, tetap semangat teman- teman, masih banyak hal yang harus dan bisa kita pelajari. jangan malas ya😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s