11
MATERI HTML DAFTAR URUTAN (BULLET AND NUMBERING) PEMBIMBING OLEH : DEKA M WILDAN TAHUN AJARAN 2013/2014

03 html daftar urutan

Embed Size (px)

DESCRIPTION

Membuat daftar urutan atau bullet and numbering pada html pada dasarnya hampir sama di microsoft word

Citation preview

Page 1: 03   html daftar urutan

MATERI HTML DAFTAR URUTAN (BULLET AND NUMBERING)

PEMBIMBING OLEH :

DEKA M WILDAN

TAHUN AJARAN 2013/2014

Page 2: 03   html daftar urutan

Daftar urutan atau biasa disebut dengan Bullet And Numbering terdiri atas 2 elemen, yaitu elemen <OL> (Ordered List) dan <UL> (Unordered List). Sedangkan elemen tambahannya adalah <li> atau List. Elemen <li> merupakan sub elemen atau isi dari elemen dari daftar urutan tersebut.

1. Elemen <OL> (Ordered List). Elemen <OL> berfungsi untuk membuat nomor daftar urut. Elemen ini

mempunyai properti “star t” dan “type”. Properti star t berfungsi untuk memberikan nilai awal dari daftar urutan, properti type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf kapital, a untuk abjad huruf kecil, lalu I untuk membuat angka romawi besar, i untuk membuat angka romawi kecil, dan 1 untuk membuat angka decimal (default start=“1” type=“1”). Setiap elemen OL atau UL selalu terdapat sub elemen List atau <LI>. Syntax atau perintah untuk membuat <OL> :

<ol start=“nomor mulai” type=“A”|”a”|”I”|”i”|”1”> <li>..........................</li></ol>

Copyright©[email protected]

Page 3: 03   html daftar urutan

Contoh latihanpenggunaan Elemen <OL>. Buatlah halaman web dengan nama “numbering.html” menggunakan aplikasi notepad dan isikan kode seperti di bawah ini :

<html><head> <title>Latihan HTML Daftar urutan Angka</title></head><body><ol start=“1” type=“A”> <li>Ini daftar urutan angka pertama</li> <li>Ini daftar urutan angka kedua</li> <li>Ini daftar urutan angka ketiga</li></ol></body></html>

Copyright©[email protected]

Page 4: 03   html daftar urutan

Dan hasilnya akan terlihat seperti gambar di bawah ini :

Copyright©[email protected]

Page 5: 03   html daftar urutan

Penggunaan <OL> bisa dimanipulasi menjadi sub menu daftar atau membuat daftar di dalam daftar. Contoh buat latihan halaman web dengan nama”daf tar2.html” menggunakan aplikasi notepad dan ketikkan kode seperti di bawah ini :

<html><head> <title>Latihan HTML Daftar urutan Angka</title></head><body><ol start=“1” type=“A”> <li>Ini daftar urutan angka pertama</li> <li>Ini daftar urutan angka kedua</li> <li>Ini adalah sub menu daftar<ol start=“1” type=“1”> <li>Ini adalah Sub menu daftar</li> <li>Latihan HTML Daftar Urutan</li> </ol></li></ol></body></html>

Copyright©[email protected]

Page 6: 03   html daftar urutan

Dan hasilnya akan terlihat seperti gambar di bawah ini :

Copyright©[email protected]

Page 7: 03   html daftar urutan

2. Elemen <UL> (Unordered List) .

Elemen <UL> berfungsi untuk membuat daftar urutan tanpa nomor urut (dalam format bullet). Elemen ini hanya mempunyai properti “type”. Properti “type” berfungsi untuk memilih bentuk bullet yang digunakan. Nilai atribut dari properti “type” ini adalah “circle” untuk membuat tanda lingkaran, “square” untuk membuat tanda kotak dan “disc” untuk membuat tanda cakram. Contoh syntax atau perintah membuat elemen <UL> :

<ul type=“circle”|”square”|”disc”>

<li>...........</li>

</ul>

Copyright©[email protected]

Page 8: 03   html daftar urutan

Contoh latihan, buatlah halaman web dengan nama “daf tar3.html” menggunakan aplikasi notepad, kemudian ketikkan kode di bawah ini :<html><head> <title>Latihan HTML Daftar urutan Angka</title></head><body><ul type=“disc”> <li>Pemrograman web dengan html</li> <li>Pemrograman web dengan PHP</li> <li>Pemrograman web dengan JSP</li></ul></body></html>

Copyright©[email protected]

Page 9: 03   html daftar urutan

Dan hasilnya akan terlihat seperti gambar di bawah ini :

Copyright©[email protected]

Page 10: 03   html daftar urutan

3. ELEMEN <LI> atau LIST

Elemen <LI> merupakan isi dari pada daftar. Elemen ini harus berada di dalam elemen “<OL>” atau “<UL>”. Elemen ini juga mempunyai properti “type” dan “value”. Nilai properti “type” adalah “A,a,i , I ,1,circle,square,disc” dan properti “value” berisikan nomor urutan dari properti “type”. Contoh syntax :

<li type=“A”|”a”|”i”|”I”|”1”|”circle”|”square”|”disc”>

......................................

</li>

Copyright©[email protected]

Page 11: 03   html daftar urutan

Buatlah halaman web dengan nama “tugasdaf tar.html” menggunakan aplikasi notepad dengan hasil seperti gambar di bawah ini :

Copyright©[email protected]