P. 1
MODUL 3

MODUL 3

|Views: 27|Likes:
Published by Adhitya Franager

More info:

Published by: Adhitya Franager on Nov 03, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/03/2011

pdf

text

original

___________________________________________________________________________

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 Atribut Value Keterangan
<UL> TYPE SQUARE Bulat Kotak
DISC Bulat Titik
CIRCLE Bulat Lingkaran
<OL> TYPE I Huruf Besar Romawi
i Huruf Kecil Romawi
A Huruf Besar Latin
a Huruf Kecil Latin
<OL> TYPE START 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


Daftar dan Tabel
___________________________________________________________________________

3.3. Daftar Menggunakan Nomor
Untuk keperluan lain, daftar dengan penomoran dapat digunakan
dengan metode penomoran(1,2,3,…,n, atau a,b,c,…,z) atau dengan
menggunakan huruf Romawi. Berikut adalah sintaksnya :
<ol type=A,a,I,i>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>Daftar 3</li>
<li>Daftar 4</li>
</ol>

Contoh Script list_abjad.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



Daftar dan Tabel
___________________________________________________________________________
Contoh Script list_abjad.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.4. Membuat Sub Daftar
Dengan menggunakan tag <UL> dan <OL> dapat dibuat sub daftar,
maksudnya adalah daftar dalam daftar.
Contoh Script sub_list.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



Daftar dan Tabel
___________________________________________________________________________
3.5. Membuat Daftar Header
List Header atau <LH> merupakan suatu cara dimana bentuk tampilan
dapat berbentuk Header di dalam list, adapun cara penulisannya adalah
sebagai berikut :
<OL>
<LH>Header
<LI>Daftar 1</LI>
<LI>Daftar 2</LI>
<LI>Daftar 1</LI>
<LI>Daftar 2</LI>
</OL>

Contoh Script list_abjad.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.6. 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, yaitu dengan menggunakan tag <DL> dan
<DD>.
___________________________________________________________________________ 21
D3 Komputer & Sistem Informasi



Daftar dan Tabel
___________________________________________________________________________
Contoh Script list_bullet.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=”../PBUD/image/edit.gif”>Matematika </dd>
<dd><img src=”../PBUD/image/edit.gif”>Fisika </dd>
<dd><img src=”../PBUD/image/edit.gif”>Kimia </dd>
<dd><img src=”../PBUD/image/edit.gif”>Biologi </dd>
</dl>
</body>
</html>

Akhir Script



3.7. Mengenal Tabel

Tabel adalah komponen yang paling utama dalam membuat web site.
Pada saat pembuatan sebuah halaman web table dijadikan sebagai media
yang berfungsi sebagai kerangka untuk meletakan komponen-omponen isi
web.

Selain sebagai kerangka kerja, table juga dijadikan sebagai media untuk
merapikan semua content(isi web) yang ada di dalam halaman web. Jadi,
sebagai seoarng desainer web atau web master, anda tidak dapat
meninggalkan tabel. Berikut adalah contoh penggunaan tabel dalam membuat
halaman web.




___________________________________________________________________________ 22
D3 Komputer & Sistem Informasi



Daftar dan Tabel
___________________________________________________________________________

HEADER/BAGIAN KEPALA HALAMAN WEB

MENU KIRI ISI/CONTENT MENU KANAN

FOOTER/BAGIAN BAWAH HALAMAN WEB

3.8. 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).
• Tag <TABLE> adalah tag yang menerangkan kepada browser bahwa
itu adalah sebuah tabel, dan di dalam tag <TABLE> dapat
ditambahkan beberapa atribut yang sering digunakan di dalam
membuat sebuah tabel.
• 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.
• Tag <TD> adalah tag yang digunakan untuk menempatkan isi/data
yang ada di dalam sebuah tabel. Tag <TD> dapat diartikan sebagai
kolom.
Di dalam tag <TABLE> ada beberapa atribut yang sering diletakan di
dalam tag <TABLE> slah satunya adalah atribut BORDER.

Contoh Script Tabel_1.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



Daftar dan Tabel
___________________________________________________________________________

3.8.1. Tabel dengan beberapa kolom dan baris

Untuk dapat membuat sebuah tabel dengan dua buah kolom, maka harus
ada dua buah tag <td> dan </td> dalam tag <tr> dan </tr>. Baik jumlah
<tr> maupun jumlah <td> akan mempengaruhi banyaknya baris dan kolom
yang ada dalam tabel.

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, sedangkan tag <TD> terdapat tiga pasang pada setiap barisnya,
sehingka tabel di atas akan menghasilkan dua baris tiga kolom, seperti
tampilan berikut :

___________________________________________________________________________ 24
D3 Komputer & Sistem Informasi



Daftar dan Tabel
___________________________________________________________________________






3.9. Pengaturan Tabel

Dengan menggunakan beberapa atribut, tabel dapat dibuat lebih
menarik dan dapat diatur sesuai dengan keinginan. Berikut adalah beberapa
atribut yang dapat digunakan dalam pengaturan tabel:
3.9.1. Atribut pada Tag <Table> …</Table>
Tag <TABLE> mempunyai atribut yang dapat dilihat seperti di bawah ini :

Atribut Value Keterangan
Align
Left,Center
Right
Digunakan untuk meratakan posisi tabel ke
kiri, ke tengah atau ke kanan
Border 1,2,…,n
Digunakan untuk mengatur ketebalan garis
pembatas antar sel-dalam tabel
Width n% Digunakan untuk menentukan lebar tabel
Height N% Digunakan untuk menentukan tinggi tabel
Cellspacing 1,2,…,n
Digunakan untuk menyatakan jarak sapasi
antar sel satu dengan lainnya serta antar sel
dengan pembatas tabel
Cellpadding
1,2,…,n
Digunakan untuk mengatur jarak is isle
dengan batas sel
Bgcolor #ffffff-#000000
Digunakan untuk memberikan warna latar
belakang semua isi sel pada atribut tabel
Bordercolor #ffffff-#000000
Digunakan untuk memberikan warna pada
border.


___________________________________________________________________________ 25
D3 Komputer & Sistem Informasi



Daftar dan Tabel
___________________________________________________________________________
3.9.2. Atribut pada Tag <Tr>….</Tr>
Tag <Tr> mempunyai atribut sebagai berikut :
Atribut Value Keterangan
Align Left,Center,Right
Digunakan untuk meratakan tabel ke kiri, ke
tengah atau ke kanan
Width n% Digunakan untuk menentukan lebar baris
Height N% Digunakan untuk menentukan tinggi baris tabel
Bgcolor #ffffff-#000000
Digunakan untuk memberikan warna latar
belakang pada baris tabel
3.9.3. Atribut pada Tag <Td>….</Td>
Tag <Td> mempunyai atribut sebagai berikut :
Atribut Value Keterangan
Align Left,Center,Right
Digunakan untuk meratakan tabel ke kiri, ke
tengah atau ke kanan
Width n% Digunakan untuk menentukan lebar kolom
Height N% Digunakan untuk menentukan tinggi kolom
Bgcolor #ffffff-#000000
Digunakan untuk memberikan warna latar
belakang pada kolom/sel
3.10. Penggabungan Sel
3.10.1. Menggabungkan Beberapa Kolom
Sel di dalam tabel dapat digabungkan dengan menggunakan atribut
colspan atau rowspan. Colspan ini digunakan untuk menggabungkan
beberapa kolom yang terdapat pada satu tabel dengan nilai integer. Rowspan
digunakan untuk menggabubgkan bebrapa baris yang terdapat dalam stau
tabel dengan nilai integer.

Contoh Script Tabel_2.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



Daftar dan Tabel
___________________________________________________________________________























___________________________________________________________________________ 27
D3 Komputer & Sistem Informasi



Daftar dan Tabel
___________________________________________________________________________
Latihan Modul 3
1. Buatlah sebuah halaman web yang dapat menampilkan halaman seperti di
bawah ini.

2. Buatlah sebuah tabel yang dapat menampilkan halaman seperti berikut ini
DAFTAR STOK BARANG PADA PT. SEDIA SELALU
No Nama Barang Merk Jumlah Harga/ITEM
1 Televisi 14 “
Sony
Toshiba
Polytron
LG
5
3
7
8
1.400.000
1.350.000
1.300.000
1.200.000
2 Lemari Es 6 2.100.000
3 Computer LG 5 3.500.000
Jumlah 34

3. Buatlah sebuah tabel seperti tampilan di bawah ini

NO DAFTAR STOK BARANG Jumlah


A
No NAMA BARANG STOK
1 Lemari es 8
2 Televisi 21 “ 7
3 LCD Projector 3


18

___________________________________________________________________________ 28
D3 Komputer & Sistem Informasi



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

c.…. Berikut adalah sintaksnya : <ol type=A.2.n.3.Daftar dan Tabel ___________________________________________________________________________ 3.….b.i> <li>Daftar 1</li> <li>Daftar 2</li> <li>Daftar 3</li> <li>Daftar 4</li> </ol> Contoh Script list_abjad.3. atau a.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.I.a.misalnya “D” maka dapat digunakan atribut start di dalam tag <OL> dengan sintaks dan cara sebagai berikut : ___________________________________________________________________________ 19 D3 Komputer & Sistem Informasi . daftar dengan penomoran dapat digunakan dengan metode penomoran(1.z) atau dengan menggunakan huruf Romawi. Daftar Menggunakan Nomor Untuk keperluan lain.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->