HTML DAFTAR URUTAN (Element OL(ordered list), Element UL(unordered list), Element LI(list item))

Posted: 24 Juni 2010 in campuran, Element LI(list item)), Element UL(unordered list), HTML, Mengenal Format Teks Dalam HTML, Tutorial Dasar-Dasar Belajar Buat web, Tutorial HTML DAFTAR URUTAN (Element OL(ordered list)
Tag:, ,

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.

MATERI:
Element OL(ordered list), Element UL(unordered list), Element LI(list item).

ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start=”1″ type=”1″ ). Dalam element OL harus terdapat beberapa element LI.

Sintaks:
<ol start=”number” type=”A”|”a”|”I”|”i”|”1″>
……………………
</ol>

ELEMENT UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah “circle”, “square” dan “disc” . Dalam element UL harus terdapat beberapa element LI.

Sintaks:
<ul |”square”|”disc”>
……………………..
</ul>

ELEMENT LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.

Sintaks:
<li type=”A”|”a”|”I”|”i”|”1″|”circle”|”square”|”disc”>
……………………..
</li>

LATIHAN

Gunakan teks editor misalkan “Notepad” untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser.

Latihan 1:
Menampilkan teks dengan daftar urut (element OL):

Daftar Menu Masakan:
1. Nasi Goreng
2. Lalapan Belut
3. Lalapan Ikan Mujaer
4. Cap cay
5. Soto Ayam
6. Mie Ayam
7. Rujak Cingur

Nama file: latihan Pertama.html

<html>
<head>
<title>Latihan Pertama</title>
</head>
<body>
Daftar Menu Masakan:
<ol>
<li>Nasi Goreng</li>
<li>Lalapan Belut</li>
<li>Lalapan Ikan Mujaer</li>
<li>Cap Cay</li>
<li>Soto Ayam</li>
<li>Mie Ayam</li>
<li>Rujak Cingur</li>
</ol>
</body>
</html>

Latihan 2:
Menampilkan teks dengan daftar urut (element OL):

Daftar Menu Masakan:
a. Nasi Goreng
b. Lalapan Belut
c. Lalapan Ikan Mujaer
d. Cap cay
e. Soto Ayam
f. Mie Ayam
g. Rujak Cingur

Nama file: latihan Kedua.html

<html>
<head>
<title>Latihan Kedua</title>
</head>
<body>
Daftar Menu Masakan
<ol start=”1″>
<li>Nasi Goreng</li>
<li>Lalapan Belut</li>
<li>Lalapan Ikan Muajer</li>
<li>Cap Cay</li>
<li>Soto Ayam</li>
<li>Mie Ayam</li>
<li>Rujak Cingur</li>
</ol>
</body>
</html>

Latihan 3:
Menampilkan teks dengan daftar urut (element OL):

I. Daftar Menu Masakan:
a. Nasi Goreng
b. Lalapan Belut
c. Lalapan Ikan Mujaer
d. Cap cay
e. Soto Ayam
f. Mie Ayam
g. Rujak Cingur

<html>
<head>
<title>Latihan Ketiga</title>
</head>
<body>
<ol start=”1″>
<li>Daftar Menu Masakan :</li>
<ol start=”1″>
<li>Nasi Goreng</li>
<li>Lalapan Belut</li>
<li>Lalapan Ikan Mujaer</li>
<li>Cap Cay</li>
<li>Soto Ayam</li>
<li>Mie Ayam</li>
<li>Rujak Cingur</li>
</ol>
</ol>
</body>
</html>

Selamat Mencoba!!!:)

Email: inee_e@yahoo.com

FB: http://www.sunesti.wordpress.com

Komentar
  1. IGUST PRATAMA mengatakan:

    KLO MO MENCOBA BUAT HTTP DIMANA TANTE

  2. yonapratiwi mengatakan:

    Makasih Mbak, penjelasannya mudah dimengerti🙂

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