Tuesday, March 7, 2017

Daftar Urutan

Diterbitkan 7:12:00 PM

Sobat jamane komputer kali ini saya ingin menyampaikan tentang Daftar Urutan di dalam bahasa pemrograman HTML, silahkan teman-teman untuk menyimak uraian sebagai berikut ya:

Element OL (Orderd List)
Element OL digunakan untuk membuat nomer daftar dengan cara urut. Element ini memiliki atribut yaitu start, dan type. Atribut start digunakan memberi nilai awal dari daftar urutan, atribut type digunakan 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 desimal (defaultny adalah: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.

Sintaks sebagai berikut:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
</ol>

Element UL (Unordered List)
Element UL digunakan untuk membuat daftar tidak menggunakan nomor urut (format bullet). Element ini memiliki atribut yaitu type. Atribut type digunakan untuk memilih bentuk bullet yang digunakan. Nilai dari pada atribut type ini adalah "circle", "square" dan "disc" . Di dalam element UL harus terdapat beberapa element LI.

Sintaks sebagai berikut:
<ul type="circle"|"square"|"disc">
..........................
</ul>

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

Sintaks sebagai berikut:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
..........................
</li>

UJI COBA

Untuk lebih memahami uraian di atas, silahkan sobat jamane komputer untuk mencoba latihan di bawah ini ya:

Uji Coba 1:
Menampilkan teks dengan daftar urut (element OL):

  Bahan Belanja hari ini:
1. Kangkung
2. Kacang Panjang
  3. Timun
4. Cabai
5. Kelapa
6. Tomat
7. Daun Bawang

Nama file: Uji_coba_1.html

<html>
<head>
<title>Uji Coba 1</title>
</head>
<body>
Bahan Belanja hari ini:
<ol>
<li> Kangkung </li>
<li> Kacang Panjang </li>
<li> Timun </li>
<li> Cabai </li>
<li> Kelapa </li>
<li> Tomat </li>
<li> Daun Bawang </li>
</ol>
</body>
</html>

Uji Coba 2:
Menampilkan teks dengan daftar urut (element OL):

Bahan Belanja hari ini:
a. Kangkung
b. Kacang Panjang
c. Timun
d. Cabai
e. Kelapa
f. Tomat
g. Daun Bawang

Nama file: Uji_coba_2.html

<html>
<head>
<title>Uji Coba 2</title>
</head>
<body>
Bahan Belanja hari ini::
<ol start="1" type="a">
<li> Kangkung </li>
<li> Kacang Panjang </li>
<li> Timun </li>
<li> Cabai </li>
<li> Kelapa </li>
<li> Tomat </li>
<li> Daun Bawang</li>
</ol>
</body>
</html>

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

I. Bahan Belanja hari ini:
   a. Kangkung
   b. Kacang Panjang
   c. Timun
   d. Cabai
   e. Kelapa
   f. Tomat
  g. Daun Bawang