___________________________________________________________________________

MODUL 3
3. Membuat Daftar
3.1. Memahami Daftar
List adalah sebuah metode untuk menampiljan sekumpulan data dengan
cara penomoron atau dengan symbol. Dalam membuat daftar(list) digunakan
Tag <LI>, dan ditambah lagi dengan tag <UL> (Unordered List/List tak
bernomor urut) atau <Ol> (Ordered List/List dengan nomor urut). Berikut
adalah beberapa daftar tag yang digunakan beserta dengan atributnya :
Tag
<UL>

Atribut
TYPE

<OL>

TYPE

<OL>

TYPE

Value
SQUARE
DISC
CIRCLE
I
i
A
a
START

Keterangan
Bulat Kotak
Bulat Titik
Bulat Lingkaran
Huruf Besar Romawi
Huruf Kecil Romawi
Huruf Besar Latin
Huruf Kecil Latin
Nilai awal Penomoran

3.2. Daftar Menggunakan Simbol (UL)
Untuk membuat sebuah daftar dapat digunakan symbol, symbol yang
digunakan dalam HTML adalah bulat. Berikut adalah contohnya :
Contoh Script list_bullet.html
<html>
<head>

<title>Contoh Membuat List</title>
</head>
<body>Berikut adalah daftar jurusan yang ada di FMIPA UNRI
<ul>
<li>Matematika</li>
<li>Fisika
</li>
<li>Kimia
</li>
<li>Biologi
</li>
</ul>
</body>
</html>
Akhir Script

Hasilnya dapat dilihat menggunakan browser sebagai berikut :

___________________________________________________________________________
D3 Komputer & Sistem Informasi

html <html> <head><title>Contoh Membuat List Abjad</title> </head> <body> Berikut adalah daftar jurusan yang ada di FMIPA UNRI <ol type=”A”> <li>Matematika </li> <li>Fisika </li> <li>Kimia </li> <li>Biologi </li> </ol> </body> </html> Akhir Script Untuk membuat daftar mulai dengan yang kita inginkan.misalnya “D” maka dapat digunakan atribut start di dalam tag <OL> dengan sintaks dan cara sebagai berikut : ___________________________________________________________________________ 19 D3 Komputer & Sistem Informasi .…. Berikut adalah sintaksnya : <ol type=A.i> <li>Daftar 1</li> <li>Daftar 2</li> <li>Daftar 3</li> <li>Daftar 4</li> </ol> Contoh Script list_abjad.c. daftar dengan penomoran dapat digunakan dengan metode penomoran(1. Daftar Menggunakan Nomor Untuk keperluan lain.3.2.I.Daftar dan Tabel ___________________________________________________________________________ 3.z) atau dengan menggunakan huruf Romawi.b.n.3.a. atau a.….

Membuat Sub Daftar Dengan menggunakan tag <UL> dan <OL> dapat dibuat sub daftar.html <html> <head><title>Contoh Membuat Sub List</title></head> <body> Jenis prosesor yang sering digunakan : <ol> <li>INTEL </li> <ul> <li>Pentium </li> <li>Celeron </li> </ul> <li>AMD </li> <ul> <li>Atlon XP </li> <li>Duron </li> <li>Baltron </li> </ul> </ol> </body> </html> Akhir Script ___________________________________________________________________________ 20 D3 Komputer & Sistem Informasi . maksudnya adalah daftar dalam daftar.Daftar dan Tabel ___________________________________________________________________________ Contoh Script list_abjad.4. Contoh Script sub_list.html <html> <head><title>Contoh Membuat List Abjad</title> </head> <body>Berikut adalah daftar jurusan yang ada di FMIPA UNRI <ol type=”A” start=”4”> <li>Matematika </li> <li>Fisika </li> <li>Kimia </li> <li>Biologi </li> </ol> </body> </html> Akhir Script 3.

___________________________________________________________________________ 21 D3 Komputer & Sistem Informasi .Daftar dan Tabel ___________________________________________________________________________ 3.6.5. Membuat Daftar Header List Header atau <LH> merupakan suatu cara dimana bentuk tampilan dapat berbentuk Header di dalam list.html <html> <head><title>Contoh Membuat Header List</title></head> <body> Berikut adalah daftar jurusan yang ada di FMIPA UNRI <ol type=”1”> <lh><b>FMIPA UNRI</b> <li>Matematika </li> <li>Fisika </li> <li>Kimia </li> <li>Biologi </li> </ol> </body> </html> Akhir Script 3. Daftar Dengan Gambar Untuk membuat sebuah daftar dengan bentuk symbol yang dibuat sendiri atau berupa gambar dapat digunakan metode yang dilakukan saat membuat daftar tanpa sombol. adapun cara penulisannya adalah sebagai berikut : <OL> <LH>Header <LI>Daftar <LI>Daftar <LI>Daftar <LI>Daftar </OL> 1</LI> 2</LI> 1</LI> 2</LI> Contoh Script list_abjad. yaitu dengan menggunakan tag <DL> dan <DD>.

table juga dijadikan sebagai media untuk merapikan semua content(isi web) yang ada di dalam halaman web.html <html> <head><title>Contoh Membuat Daftar Dengan Gambar</title> </head> <body> Berikut adalah daftar jurusan yang ada di FMIPA UNRI <dl> <dd><img src=”.gif”>Matematika </dd> <dd><img src=”./PBUD/image/edit. Jadi.. ___________________________________________________________________________ 22 D3 Komputer & Sistem Informasi .Daftar dan Tabel ___________________________________________________________________________ Contoh Script list_bullet..gif”>Kimia </dd> <dd><img src=”.gif”>Fisika </dd> <dd><img src=”.7. Mengenal Tabel Tabel adalah komponen yang paling utama dalam membuat web site. sebagai seoarng desainer web atau web master. anda tidak dapat meninggalkan tabel../PBUD/image/edit. Pada saat pembuatan sebuah halaman web table dijadikan sebagai media yang berfungsi sebagai kerangka untuk meletakan komponen-omponen isi web./PBUD/image/edit. Berikut adalah contoh penggunaan tabel dalam membuat halaman web../PBUD/image/edit.gif”>Biologi </dd> </dl> </body> </html> Akhir Script 3. Selain sebagai kerangka kerja.

• Tag <TABLE> adalah tag yang menerangkan kepada browser bahwa itu adalah sebuah tabel. • Tag <TD> adalah tag yang digunakan untuk menempatkan isi/data yang ada di dalam sebuah tabel.html <html> <head><title>Contoh Membuat Tabel</title> </head> <body> <table border=”1” bordercolor=”black”> <tr> <td>Ini Tabel Pertama Satu Baris Satu Kolom</td> </tr> </table> </body> </html> Akhir Script ___________________________________________________________________________ 23 D3 Komputer & Sistem Informasi . Tag <TD> dapat diartikan sebagai kolom.Daftar dan Tabel ___________________________________________________________________________ HEADER/BAGIAN KEPALA HALAMAN WEB MENU KIRI ISI/CONTENT MENU KANAN FOOTER/BAGIAN BAWAH HALAMAN WEB 3.8. Contoh Script Tabel_1. • Tag <TR> adalah tag yang digunakan untuk membuat sebuah baris di dalam tabel dan di dalam tag <TR> dapat ditambahkan beberapa atribut yang sering digunakan di dalam membuat sebuah tabel. dan di dalam tag <TABLE> dapat ditambahkan beberapa atribut yang sering digunakan di dalam membuat sebuah tabel. Pembuatan Tabel Untuk membuat tabel digunakan tag <TABLE> dan diakhiri dengan tag </TABLE> yang kemudian diikuti dengan tag <TR> (Table Row/baris tabel) dan <TD>(Table data/data tabel). Di dalam tag <TABLE> ada beberapa atribut yang sering diletakan di dalam tag <TABLE> slah satunya adalah atribut BORDER.

sedangkan tag <TD> terdapat tiga pasang pada setiap barisnya. maka harus ada dua buah tag <td> dan </td> dalam tag <tr> dan </tr>. sehingka tabel di atas akan menghasilkan dua baris tiga kolom. seperti tampilan berikut : ___________________________________________________________________________ 24 D3 Komputer & Sistem Informasi . Contoh Script Tabel_2.html <html> <head><title>Contoh Membuat Tabel</title> </head> <body> <table border=”1” bordercolor=”black”> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> <td>Baris 1 Kolom 3</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> <td>Baris 2 Kolom 3</td> </tr> </table> </body> </html> Akhir Script Pada contoh di atas terdapat tag <TR> dua pasang terdiri dari dua baris. Baik jumlah <tr> maupun jumlah <td> akan mempengaruhi banyaknya baris dan kolom yang ada dalam tabel.8.1.Daftar dan Tabel ___________________________________________________________________________ 3. Tabel dengan beberapa kolom dan baris Untuk dapat membuat sebuah tabel dengan dua buah kolom.

….2.….n Width Height n% N% Cellspacing 1. Atribut pada Tag <Table> …</Table> Tag <TABLE> mempunyai atribut yang dapat dilihat seperti di bawah ini : Atribut Align Value Left.2.n Cellpadding 1. Berikut adalah beberapa atribut yang dapat digunakan dalam pengaturan tabel: 3.n Bgcolor #ffffff-#000000 Bordercolor #ffffff-#000000 Keterangan Digunakan untuk meratakan posisi tabel ke kiri.1. ___________________________________________________________________________ 25 D3 Komputer & Sistem Informasi .Daftar dan Tabel ___________________________________________________________________________ 3.9. tabel dapat dibuat lebih menarik dan dapat diatur sesuai dengan keinginan.9. Pengaturan Tabel Dengan menggunakan beberapa atribut.….Center Right Border 1. ke tengah atau ke kanan Digunakan untuk mengatur ketebalan garis pembatas antar sel-dalam tabel Digunakan untuk menentukan lebar tabel Digunakan untuk menentukan tinggi tabel Digunakan untuk menyatakan jarak sapasi antar sel satu dengan lainnya serta antar sel dengan pembatas tabel Digunakan untuk mengatur jarak is isle dengan batas sel Digunakan untuk memberikan warna latar belakang semua isi sel pada atribut tabel Digunakan untuk memberikan warna pada border.2.

Colspan ini digunakan untuk menggabungkan beberapa kolom yang terdapat pada satu tabel dengan nilai integer. Atribut pada Tag <Td>….</Tr> Tag <Tr> mempunyai atribut sebagai berikut : Atribut Value Align Left. Menggabungkan Beberapa Kolom Sel di dalam tabel dapat digabungkan dengan menggunakan atribut colspan atau rowspan. ke tengah atau ke kanan Digunakan untuk menentukan lebar kolom Digunakan untuk menentukan tinggi kolom Digunakan untuk memberikan warna latar belakang pada kolom/sel 3.html <html> <head><title>Contoh Menggabungkan Sel</title> </head> <body> <table border=”1” bordercolor=”black”> <tr> <td>Baris 1 Kolom 1</td> <td colspan=2>Baris 1 Kolom 2 dan kolom 3</td></tr> <tr> <td rowspan=2>Baris 2 dan 3 Kolom 1</td> <td>Baris 2 dan 3 Kolom 2 </td></tr> <tr> <td>Baris 3 Kolom 2</td> <td>Baris 3 Kolom 3</td></tr> </table> </body> </html> Akhir Script ___________________________________________________________________________ 26 D3 Komputer & Sistem Informasi .10. Rowspan digunakan untuk menggabubgkan bebrapa baris yang terdapat dalam stau tabel dengan nilai integer. ke tengah atau ke kanan Digunakan untuk menentukan lebar baris Digunakan untuk menentukan tinggi baris tabel Digunakan untuk memberikan warna latar belakang pada baris tabel 3.10. Penggabungan Sel 3.Right Width Height n% N% Bgcolor #ffffff-#000000 Keterangan Digunakan untuk meratakan tabel ke kiri.Center.3.Daftar dan Tabel ___________________________________________________________________________ 3.1. Atribut pada Tag <Tr>….9.9. Contoh Script Tabel_2.</Td> Tag <Td> mempunyai atribut sebagai berikut : Atribut Value Align Left.Right Width Height n% N% Bgcolor #ffffff-#000000 Keterangan Digunakan untuk meratakan tabel ke kiri.2.Center.

Daftar dan Tabel ___________________________________________________________________________ ___________________________________________________________________________ 27 D3 Komputer & Sistem Informasi .

000 3.000 3. Buatlah sebuah halaman web yang dapat menampilkan halaman seperti di bawah ini.000 1.500.000 1. SEDIA SELALU No Nama Barang 1 Televisi 14 “ 2 3 Lemari Es Computer Merk Sony Toshiba Polytron LG LG Jumlah Jumlah 5 3 7 8 6 5 34 Harga/ITEM 1.200.100.300. 2.Daftar dan Tabel ___________________________________________________________________________ Latihan Modul 3 1.000 2. Buatlah sebuah tabel seperti tampilan di bawah ini NO A DAFTAR STOK BARANG No 1 2 3 NAMA BARANG Lemari es Televisi 21 “ LCD Projector Jumlah STOK 8 7 3 18 ___________________________________________________________________________ 28 D3 Komputer & Sistem Informasi .400. Buatlah sebuah tabel yang dapat menampilkan halaman seperti berikut ini DAFTAR STOK BARANG PADA PT.000 1.350.

Daftar dan Tabel ___________________________________________________________________________ Diisi oleh Dosen Bersangkutan Nilai Praktek Tanda Tangan Dosen Tuliskan Script Anda Di Sini ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ___________________________________________________________________________ 29 D3 Komputer & Sistem Informasi .

Daftar dan Tabel ___________________________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ___________________________________________________________________________ 30 D3 Komputer & Sistem Informasi .

Sign up to vote on this title
UsefulNot useful