Pemrograman HTML

PEMROGRAMAN BERBASIS WEB

Rumpun bahasa pemrograman berbasis web:
1.

Client side

bisa

langsung

dijalankan

pada

komputer (PC) tanpa memerlukan server web.

Contoh: HTML, Java Script, Visual Basic Script (Vbs), dll
2.

Server side

: program harus diletakkan pada direktori

server web dan segala operasionalnya diatur oleh server web.

Contoh : PHP (freeware), ASP (microsoft), JSP (Java Sun Micro System),dll

Catatan: dalam pembuatan suatu programan aplikasi berbasis web dimungkinkan

menggunakan banyak bahasa pemrograman.

Contoh kolaborasi berbagai bahasa pemrograman web dalam suatu aplikasi:

Penanganan logika pemrograman ( IF, LOOP, dll)

menggunakan PHP

HTML

Menampilkan gambar, tabel, hyperlink menggunakan

Mempercantik

menggunakan Java Script.

tampilan

seperti

Menu

PullDown

KEBUTUHAN APLIKASI UNTUK PEMROGRAMAN WEB

1.

Editor : sebagai media untuk menulis program, bisa

berupa editor text atau editor program.

contoh :

Notepad (Editor Text pada Windows)

Side Kick (Editor Text pada DOS)
PHPed (Editor Program pada Windows)
Editor Frontpage (Editor Script pada aplikasi Fontpage)
Quanta, Bluefish, Screem (Editor web di Linux)

1.

Browser : media untuk melihat hasil tampilan

Internet Explorer, MSN browser (Windows)

Netscape, Mozilla, Firefox, Opera (berbagai sistem

pemrograman.
Contoh :

operasi ada)

Konqueror, Dillo (Linux)

LYNX (browser dengan tampilan berbasis text, bisa untuk

browsing internet di Linux dan berbagai sistem operasi dengan mode kerja Text)

Mosaic (browser pertama yang merupakan cikalbakal

browser yang ada sekarang).

Catatan: Dalam pengetesan hasil pemrograman sebaiknya diuji menggunakan

lebih dari satu browser, misalnya Internet Explorer dan Netscape.

NAVIGASI PADA BROWSER

1
3
4
5
6
2
7

Keterangan:
Tombol Back:

tombol untuk membuka halaman

web yang telah dibuka sebelumnya.

2.
Tombol Next :

tombol untuk membuka kembali

1.

halaman web yang telah dibuka sebelumnya dari halaman web yang ditampilkan
dengan menekan tombol Back.
3.
Tombol Stop :

Menghentikan

proses

menampilkan (loading) halaman web.

4.
Tombol Refresh

Mengulang

proses

menampilkan (loading) halaman web.

5.
Tombol Home

Memanggil

halaman

web yang diset sebagai halaman web yang otomatis tampil ketika browser
diaktifkan.
Pengesetan halaman web Home pada
browser Internet Explorer:
1.

perintah:
hingga

Menu:\
muncul

Aktifkan

Internet

option

tampilan

seperti

gambar samping
2.

Ketik

alamat web di kotak Address

3. Klik tombol Apply lalu Ok.

6.

Kotak Address : Tempat untuk menuliskan halaman web

yang akan ditampilkan

7.

Tombol GO :

Tombol

yang

digunakan

untuk

mengawali proses menampilkan website yang didefinisikan di kotak address

dengan cara di-klik.

DOKUMEN HTML
Setiap dokumen HTML memiliki extensi file *.HTML atau *.HTM. Maka dari itu
untuk setiap penyimpanan program HTML harus disimpan dengan format penamaan file:
namafileprogram.HTML
HTML kepanjangan dari Hyper Text Markup Language yang dapat diartikan
sebagai Bahasa untuk menampilkan Tulisan / Text yang bersifat Hyper. HTML adalah
sebuah format dokumen. Dokumen HTML dapat ditampilkan dimedia Internet
menggunakan aplikasi browser. Karena bisa ditampilkan di Internet maka dokumen ini
bersifat publik atau bisa digunakan bersama-sama dalam sekali waktu. Sifat ini berbeda
dengan Dokumen Ms. Word yang bersifat Personal, hal ini karena fungsi dari dokumen
Ms.Word adalah untuk dicetak dan digunakan (dibaca) oleh orang perorang.
Dari pemahaman diatas dapat diketahui bahwa pemrograman HTML adalah
bahasa pemrograman untuk membuat sebuah dokumen. Jadi pemrograman HTML
bukanlah pemrograman logika komputer. Hal ini berarti pada HTML tidak mengenal
perintah-perintah logika komputer seperti: pencabangan (IF .. Else), perulangan/looping
(Do While / For Next, dll) dan bahkan juga tidak bisa memproses penjumlahan,
pengurangan, pengalian maupun pembagian.
Perintah-perintah pemrograman HTML adalah perintah untuk mengatur tampilan
dan isi suatu dokumen untuk keperluan web di internet. Isi dari dokumen HTML antara lain:

Text dan Paragrap

Gambar, suara dan berbagai bentuk multimedia lainnya
Tabel dan Frame
Hyperlink (penghubung antar halaman web), dll

Dokumen HTML memiliki 2 bagian yaitu bagian HEAD dan BODY. Bagian HEAD adalah
bagian dokumen untuk menempatkan perintah-perintah yang berhubungan dengan
informasi dokumen seperti perintah TITLE, META, dll. Sedangkan untuk bagian BODY
adalah untuk menempatkan perintah pendefinisian dan pengaturan isi dokumen seperti:
Text, Paragrap, Gambar, Tabel, Frame, Hyperlink, dll.PEMROGRAMAN HTML
Latih1.html
<HTML>
<HEAD>

<TITLE> Mencoba HTML </TITLE>

</HEAD>
<BODY>
Hallo, Tulisan ini dibuat dengan perintah HTML
</BODY>
</HTML>

Keterangan:
1.

Ketik perintah diatas dengan

2.

Simpan

Notepad atau sembarang Editor

dengan

nama

file

beserta extensinya: .html ( wajib ! ) dan jangan hanya nama filenya saja.
Contoh:

filename= Latih1.html
3.

pilih salah satu cara:

a.
Buka

folder

tempat

Untuk menampilkan di browser,

menyimpan

file

html

yang

bersangkutan kemudian cari filenya, jika sudah ketemu klik 2x hingga secara
otomatis akan ditampilkan dibrowser.
b.
Aktifkan browser (misal:internet explorer). Dari Menu pilih
File\Open kemudian ketik lokasi file html pada kotak Open atau klik tombol
Browse untuk mencari lokasi file secara interaktif.

Penulisan perintah HTML tidak bersifat Case Sensitife.

Hal ini berarti perintah HTML dapat diketik dengan huruf besar atau kecil. Namun
sudah menjadi standar pada umumnya Website profesional, perintah HTML
diketik dengan huruf Kapital.

Perintah HTML diapit dengan tanda kurung < dan > .

Hampir semua perintah HTML berupa perintah pasangan

pembuka dan penutup. Perbedaan perintah pembuka dengan penutup adalah
untuk perintah penutup ditambahkan tanda slash ( / ) pada awal perintah. Setiap
objek yang diatur oleh perintah yang berpasangan harus diletakkan diantara
perintah pembuka dan penutup.
Perintah pembuka
Perintah penutup

Contoh: <center> perintah menengahkan </center>

Hampir semua perintah HTML memiliki atribut (perintah

pelengkap), format penulisannya adalah sebagai berikut:

<Perintah atribut1=nilai atribut2=nilai atributn=nilai>
. . . objek yang diatur
</Perintah>

Atribut bersifat optional. Sebuah Atribut bisa digunakan

oleh beberapa perintah. Ada perintah HTML yang dapat digunakan bila ditulis
dengan atributnya, namun ada pula perintah HTML yang memang tidak memiliki
atribut. Perintah yang memiliki atribut bisa digunakan semua atributnya atau
hanya sebagian saja.
Setiap atribut memiliki nilai, jika nilai berupa kata-kata dalam huruf maka cara
mendefinisikan nilainya harus diapit dengan petik ganda ( ), sedangkan bila nilainya
adalah angka atau persen maka cara mendefinisikannya tanpa perlu diapit oleh tanda
petik ganda.Contoh mendefinisikan atribut pada sebuah perintah HTML:
Perintah utama = BODY
Atribut
= Bgcolor
Nilai atribut
= Orange
Latih1.html

<HTML>
<HEAD>
<TITLE> Mencoba HTML </TITLE>
</HEAD>
<BODY Bgcolor= Orange>
Hallo, Tulisan ini dibuat dengan perintah HTML
</BODY>
</HTML>
Keterangan:
1.

Editlah file latih1.html

dengan menambahkan contoh atribut diatas kemudian disimpan

(Notepad = File/Save atau tekan tombol Ctrl dan s)
2. Aktifkan

Browser

(Internet Explorer) yang menampilkan Latih1.html kemudian klik

tombol refresh untuk melihat perubahan tampilan dokumen setelah
ditambahkan perintah atribut diatas.
Catatan:

Salahsatu

atribut

pada

perintah

BODY

adalah

Fungsi dari Background adalah untuk mengatur warna

Background juga merupakan atribut pada perintah

Background.
latar belakang.
<TABLE>, <TR>, <TD>, dll

Nilai dari atribut Background adalah warna. Untuk

mendefinisikan warna bisa dengan cara disebutkan menggunakan sebutan warna
dalam bahasa Inggris (Merah=Red, Ungu=Purple, Coklat=Brown,dll) atau
dengan menyebutkan dengan kode warna RGB.

Penulisan kode warna RGB= # x x x x x x ( x = angka

hexadesimal), 2 angka I mendefinisikan intensitas warna Merah, 2 angka II
mendefinisikan intensitas warna Hijau dan 2 angka III mendefinisikan intensitas
warna Biru.

Contoh mendefiniskan warna dengan kode warna RGB:

#000000
= Hitam
#00ff00
= Hijau
#ffffff
= Putih
#ff0000
= Merah
#0000ff
= Biru
#ff9227 = Orange

Kode warna RGB dapat mendefinisikan 16 juta warna

Dalam mendefinisikan warna disarankan menggunakan

pendefinisian menggunakan kode warna RGB untuk ketepatan warna yang
dimunculkan.
I. Sifat

Pengaturan Text

Penggunakan Perintah Pemrograman pada Dokumen HTML

Fungsi tombol enter pada penulisan program di editor

(Notepad) tidak dianggap sebagai perintah ganti baris.

Perintah untuk ganti baris pengetikan menggunkan

perintah <BR>.
Contoh:
Latih1.html
<HTML>
<HEAD>
<TITLE> Mencoba HTML </TITLE>
</HEAD>
<BODY Bgcolor= Orange>
Hallo, Tulisan ini dibuat dengan perintah HTML
Hallo, Tulisan ini dibuat dengan perintah HTML
Hallo, Tulisan ini dibuat dengan perintah HTML
Hallo, Tulisan ini dibuat dengan perintah HTML
Hallo, Tulisan ini dibuat dengan perintah HTML
</BODY>
</HTML>
Hasilnya:

Keterangan: Walaupun di editor satu kalimat deketik satu baris sendiri, tapi ketika
ditampilkan di browser tulisan kalimat akan dilanjutkan dikanannya, baru kemudian
diletakkan ke baris dibawahnya bila sudah tidak muat.
Ditambahkan perintah <BR>

Latih1.html
<HTML>
<HEAD>
<TITLE> Mencoba HTML </TITLE>
</HEAD>
<BODY Bgcolor= Orange>
Hallo, Tulisan ini dibuat dengan perintah HTML <BR>
Hallo, Tulisan ini dibuat dengan perintah HTML <BR>
Hallo, Tulisan ini dibuat dengan perintah HTML <BR>
Hallo, Tulisan ini dibuat dengan perintah HTML <BR>
Hallo, Tulisan ini dibuat dengan perintah HTML <BR>
</BODY>
</HTML>
Hasilnya:

Keterangan: Karena disetiap ujung baris kalimat ditambahkan perintah <BR> maka
kalimat berikutnya diletakkan pada baris dibawahnya.
Fungsi tombol spacebar untuk memunculkan karakter kosong ( ) pada penulisan
program di editor (Notepad) dianggap hanya sebagai pemisah kata dalam kalimat dan
hanya ditampilkan 1 karakter kosong saja jika ditampilkan dibrowser. Karakter kosong dari
spacebar hanya bisa ditampilkan jika diletakkan di tengah diantara kata dan tidak bisa
ditampilkan jika diletakkan di awal atau di akhir kalimat atau ketikan kedua dan seterusnya.

Jarak antar huruf 2 karakter kosong yang diketik dari tombol Spacebar

<HTML>
<HEAD>
<TITLE> Mencoba HTML</TITLE>
</HEAD>
<BODY>
S o l o B e r s e r i
</BODY>
</HTML>
Hasilnya:
Jarak antar huruf hanya ditampilkan
1 karakter kosong

Untuk menampilkan karakter kosong yang diletakkan di

awal atau akhir baris kalimat atau diletakkan di tengah untuk karakter kosong
kedua dan seterusnya, diwakilkan dengan perintah kode: &nbsp (harus diketik
dengan huruf kecil semua)
Setiap huruf diapit 2 perintah &nbsp

Contoh:
<HTML>
<HEAD>
<TITLE> Mencoba HTML</TITLE>
</HEAD>
<BODY>
&nbsp&nbspS&nbsp&nbspo&nbsp&nbspl&nbsp&nbspo&nbsp&nbsp

B&nbsp&nbspe&nbsp&nbspr&nbsp&nbsps&nbsp&nbspe&nbsp&nbsp
r&nbsp&nbspi&nbsp&nbsp
</BODY>
</HTML>

Jarak antar huruf 2 karakter kosong

Panjang

baris

dipengaruhi oleh lebar windows browser penampil.

Panjang baris kalimat mengikuti lebar windows browser penampil

kalimat

PADA PEMROGRAMAN HTML

I. Pengaturan

tampilan

default (standar) pada dokumen HTML dengan perintah BODY.

Fungsi dari perintah BODY adalah untuk tempat mendefinisikan isi dari
suatu dokumen HTML. Setiap isi yang ditampilkan pada dokumen yang bersangkutan
harus ditulis diantara penulisan perintah <BODY> </BODY>.
Pada perintah ini memiliki beberapa atribut antara lain:

Background=file_gambar

Menampilkan dokumen dengan latar belakang gambar bitmap.

Bgcolor=warna

Mengatur warna latar belakang dokumen, jika tidak didefinisikan dokumen

ditampilkan dengan warna putih.

Link=warna

Mengatur warna Hyperlink (menu dalam bentuk tulisan yang jika di-klik maka
tampilan akan berubah sesuai tujuan definisi hyperlink) yang belum pernah
digunakan / di-klik. Jika tidak didefinisikan maka menggunakan warna biru.

VLink=warna

Mengatur warna Hyperlink (menu dalam bentuk tulisan yang jika di-klik maka
tampilan akan berubah sesuai tujuan definisi hyperlink) yang sudah pernah
digunakan / di-klik. Jika tidak didefinisikan maka menggunakan warna ungu.

Text=warna

Contoh sebuah hyperlink

Jika kursor melintas diatasnya bentuk kursor akan berubah dari
ke

Mengatur warna tulisan dokumen, jika tidak didefinisikan menggunakan warna

hitam.

Contoh penggunaan atribut pada perintah BODY:

<HTML>
<HEAD>
<TITLE> Mencoba HTML </TITLE>
</HEAD>
<BODY link="yellow" vlink="blue" text="white" bgcolor="black">
<A href="latih2.html"> Ini Hyperlink </A> <br>
Yang ini hanya tulisan biasa
</BODY>
</HTML>
Keterangan:
Pada penggunaan perintah BODY diatas diatur tampilan pada dokumen untuk warna
tulisan berwarna putih (text="white") dengan latar belakang dokumen berwarna hitam
(bgcolor="black") dan sebagai penanda jika suatu hyperlink belum pernah di-klik berwarna
kuning (link="yellow") dan penanda jika hyperlink sudah pernah di-klik berwarna biru
(vlink="blue").
Catatan:
Jika perintah BODY didefinisikan tanpa atribut apapun maka bentuk tampilan dokumennya
adalah:

ungu dengan garis bawah

Warna latar belakang dokumen putih

Warna huruf hitam
Warna hyperlink biru dengan garis bawah
Warna hyperlink yang sudah diklik berwarna

II.

Pengaturan

tampilan huruf tulisan dokumen dengan perintah FONT.

Penggunaan perintah FONT harus menggunakan atribut yang dimilikinya. Berikut ini
atribut pada perintah FONT:

Face=jenis font.

Mengatur tampilan jenis font yang digunakan pada tulisan yang diapit oleh
perintah font.
Contoh:
<FONT face=Arial, Helvetica, San Serif> ini tulisannya </FONT>
Keterangan:
Pada contoh diatas diatur tampilan tulisan yang diapit oleh perintah FONT
menggunakan type huruf Arial, jika type huruf tersebut tidak ada dikomputer
pengguna maka menggunakan type huruf Helvetica dan jika keduanya tidak
ada maka menggunakan type huruf San Serif. Namun jika ketiga huruf tersebut
tidak ada pada komputer pengguna maka menggunakan seting jenis huruf
default pada masing-masing browser penampil dokumen.
Pengaturan tampilan jenis font default pada browser:

Internet

Explorer:

Menu:\Tools \Internet Options \Tab General \Tombol Font

Mozilla FireFox: Menu \Tools

\Options \Tab General \Font & Colors

Opera : Menu \Tools \Options

\Preferences \Web Pages \ Tombol Normal Font.

Catatan:
Pengaturan type font pada dokumen HTML sebaiknya menggunakan type font
standar, yaitu type font yang ada disetiap komputer baik windows, linux,
macintosh, dll. Jika terpaksa harus menggunakan tampilkan huruf yang tidak
standar, misalnya tulisan dengan bentuk, sebaiknya tulisan tersebut

ditampilkan dalam bentuk gambar.

Tulisan seperti ini sebaiknya dibuat dalam bentuk gambar sehingga terhindar dari permasalahan
perbedaan tampilan dikomputer.

Tulisan Indah

Color=Warna.

Mengatur tampilan warna tulisan yang diapit oleh perintah font.

Contoh:
<FONT color=Blue> tulisan ini berwarna biru </FONT>

Size= angka 1 s/d 7

Mengatur ukuran huruf tulisan yang diapit oleh perintah font. Semakin besar
angkanya semakin besarpula tulisannya
Contoh:
<FONT Size=3> ini tulisan berukuran sedang </FONT>
Catatan:
Nilai atribut size pada perintah font bisa juga bernulai +n atau -n jika
sebelumnya telah didefinisikan ukuran standar huruf pada dokumen dengan
perintah <BASEFONT Size=angka>. + jika ukuran dibesarkan dari ukuran
standar dan - untuk mengecilkan.
Contoh:
<BASEFONT Size=5 >.
<FONT Size= +2> tulisan ini dibesarkan dari ukuran standar </FONT> <br>
<FONT Size= -3> tulisan ini dikecilkan dari ukuran standar </FONT>

Contoh penggunaan atribut pada perintah FONT:

<FONT Color=Purple Size=5 Face=Arial Narrow>
Mencoba perintah pengaturan tampilan <FONT Color=red> tulisan </FONT>
</FONT>
Keterangan:
Pada contoh diatas diatur tampilan tulisan menggunakan ukuran 5 (agak besar)
dengan bentuk huruf Arial Narrow. Mencoba perintah pengaturan tampilan
ditampilkan dengan warna ungu (puple) sedangkan tulisan menggunakan warna
merah (red).
III.

Perintah-

perintah pengaturan tampilan style tulisan pada dokumen.

Pada perintah pemrograman HTML juga memiliki pengaturan style tulisan seperti
menebalkan, memiringkan, memberi garis bawah, dll. Berikut ini perintah-perintah style
tulisan pada program HTML:

<B> Menebalkan </B>

<I> Memiringkan </I>
<U> Memberi garis bawah </U>
<S> Memberi coret ditengah </S>
<TT> Menampilkan tulisan seperti huruf mesin

<BIG> Membesarkan ukuran tulisan </BIG>

<SMALL> Mengecilkan ukuran tulisan</SMALL>
<SUP> Superscript-tampilan pangkat atas

<SUB>

ketik manual </TT>

</SUP>
Subscript-tampilan

</SUB>
Contoh penggunaan:
2<SUB><U> a. <I>b </I></U></SUB> = X <SUP>2</SUP> . Y

pangkat

bawah

IV.

Perintah

perataan tampilan tulisan pada dokumen.

Untuk tulisan biasa bukan paragrap atau suatu judul (heading) pada dokumen HTML
hanya bisa diatur dua posisi perataan yaitu:

Rata kiri (default)

<LEFT> Tulisan yang diatur perataannya </LEFT>

Rata tengah

<CENTER> Tulisan yang diatur perataannya </CENTER>

V.

Perintah

mendefinisikan suatu paragrap.

Dalam suatu dokumen HTML pentuk tulisan dibedakan antara lain berupa Tulisan biasa
dan tulisan paragrap. Tulisan paragrap biasanya terdiri dari beberapa kalimat yang
menyatu. Suatu kalimat yang didefinisikan sebagai suatu paragrap bisa diatur
perataannya kalimatnya antara lain rata kiri (default), tengah dan kanan. Sedangkan
rata kanan-kiri (justify) tidak bisa didefinisikan menggunakan perintah HTML. Berikut ini
format penggunaan perintah pengaturan suatu paragrap:
<P Align=posisi perataan> isi paragrap yang diatur </P>
Nilai atribut Align (posisi perataan):

Left

= Perataan isi paragrap rata kiri

Center = Perataan isi paragrap rata tengah

Right = Perataan isi paragrap rata kanan

(default)

Keterangan:
Jika atribut Align tidak didefinisikan, atau hanya didefinisikan seperti berikut ini:
<P> isi paragrap yang diatur </P>, maka paragrap tersebut ditampilkan
dengan perataan kiri.
VI.

Perintah

mendefinisikan suatu judul.

Setiap dokumen pasti memerlukan suatu judul. Judul suatu bab pada dokumen, judul
sub bab dan berbagai bentuk judul lainnya. Untuk membuat tampilan judul pada
perintah HTML menggunakan perintah Heading. Karena sudah ada fasilitas
pendefinisian judul para HTML maka untuk setiap tampilan judul jangan didefinisikan
sebagi tulisan biasa. Dengan mengguakan perintah heading posisi perataan judul
tersebut bisa diatu rata kiri, tengah atau kanan. Berikut ini format pendefinisian perintah
Heading:
<Hx Align=posisi perataan> Judul yang ditampilkan </Hx>
Keterangan:

x ( pada Hx ) : didefinisikan menggunakan angka

1 s/d 7.
Semakin besar angkanya, tulisan judul akan semakin mengecil.

Align =posisi perataan : atribut pengatur

posisi perataan judul, nilai untuk atribut ini adalah: Left untuk rata kiri,
Center untuk rata tengah, Right untuk rata kanan.
Berikut ini listing perintah HTML untuk melihat perbedaan jenis Heading:
1
2
3
4
5
6
7
1
2
3
4
5
6
7

<B><U>Tampilan heading:</U></B>
<H1> heading 1 </H1>
<H2> heading 2 </H2>
<H3> heading 3 </H3>

<H4> heading 4 </H4>

<H5> heading 5 </H5>
<H6> heading 6 </H6>
<H7> heading 7 </H7>
VII.

Pengaturan

tampilan tulisan menggunakan Preformated Text.

Dengan perintah Preformated Text membuat browser dalam menampilkan isi tulisan
dokumen akan ditampilkan seperti yang ditulis pada program. Hal ini berarti setiap
karakter apapun yang diketik akan dimunculkan apa adanya termasuk menekan
tombol Enter akan dianggap sebagai perintah ganti baris kalimat dan karakter kosong
dari menekan tombol Spacebar akan ditampilkan sejumlah karakter kosong yang
diketik diprogram. Namun demikian tampilan huruf yang digunakan adalah jenis
Monospaced (setiap karakter memiliki lebar karakter yang sama), tampilan jenis ini
seperti halnya huruf yang digunakan pada mesin ketik manual. Tapi walaupun
demikian pengaturan style tulisan masih bisa digunakan seperti menebalkan <B>,
memiringkan <I> dan garis bawah <U>. Berikut ini adalah format penggunaan
perintah Preformated Text:
<PRE> isi tulisan yang diatur </PRE>
Contoh penggunaan:
<B><U>Preformated Text:</U></B>
<PRE>
Ganti baris menggunakan tombol <B><I>ENTER</I></B>
S p a c e
B a r tanpa <B>&NBSP</B>

------------/ ..........\ /////

/ |...........\/////
/-|| B O M |)))###
\-|| A T o M |====###
\ |=========== |)))###
\|========== /\\\\\
==========/ \\\\\
----

</PRE>

Hasilnya:

VIII.

Menampilkan

asesoris garis horiontal

Agar tampilan dokumen menarik, dapat digunakan asesoris garis horisontal. Untuk
menampilkan garis horisontal dapat menggunakan perintah <HR> , dengan atribut
antara lain:

Size

= Angka. Mengatur ketebalan garis,

semakin besar angka semakin tebal garis.

Width = Angka (pixel) atau Persen. Mengatur

lebar garis, jika menggunakan angka berarti menggunakan satuan pixel
sedangkan persen berbanding dengan lebar window browser penampil.

Align = Left/ Center / Right. Mengatur

tampilan perataan garis. Nilai defaultnya adalah rata tengah.

Color = warna. Mengatur warna garis yang

ditampilkan.

Noshade. Garis ditampilkan tanpa bayangan

Contoh penggunaan:
2

<HR>
3

<HR Width=150 Color="blue">

4

<HR Width=50% Size=5 Align="left">

2

<HR Size=10 Noshade>

Hasilnya:
1
2
3
4

PADA PEMROGRAMAN HTML

Dalam membuat tampilan sebuah tabel pada perintah HTML memiliki 3 komponen perintah
antara lain:
1.

<TABLE> </TABLE>

Berfungsi untuk memulai perintah mendefinisikan tampilan tabel.

2.

<TR> </TR>

Berfungsi untuk mendefinisikan baris dalam tabel.

3.

<TD> </TD> atau <TH> </TH>

Berfungsi untuk mendefinisikan kolom dalam baris tabel.

Contoh Pendefinisian Tampilan Tabel :
<table border=1>
<tr>
<th> Judulkolom1</th>
<th> Judulkolom2</th>
<th> Judulkolom3</th>
<th> judulkolom4</th>
</tr>
<tr>
<td> baris2,kolom1</td>
<td> baris2,kolom2</td>
<td> baris2,kolom3</td>
<td> baris2,kolom4</td>
</tr>
<tr>
<td> baris3,kolom1</td>
<td> baris3,kolom2</td>
<td> baris3,kolom3</td>
<td> baris3,kolom4</td>
</tr>
</table>
Hasilnya:

Dari contoh diatas dapat dipahami bahwa dalam membuat sebuah tampilan tabel pada

HTML dengan cara mendefinisikan baris tabel dengan perintah <TR> terlebih dahulu
kemudian baru mendefinisikan cell isi dari baris tabel yang bersangkutan dengan perintah
<TD> atau <TH>.

Catatan:

Untuk mendefinisikan tabel dengan tampilan 1 baris dan 1 kolom, ketiga komponen
perintah HTML wajib didefinisikan.

I.

Perbedaan dari perintah <TD> dengan <TH>:

Gunakan perintah <TH> jika akan mendefinisikan cell yang berfungsi sebagai judul
kolom tabel (biasanya cell-cell isi baris pertama pada tabel). Kelebihannaya adalah
jika isi kolom diapit dengan perintah <TH> </TH> maka isi kolom tersebut
ditampilkan dengan huruf tebal dan rata tengah. Sedangkan <TD> digunakan untuk
mendefinisikan isi kolom biasa dimana nanti akan ditampilkan dengan huruf tidak
ditebalkan dan rata kiri.
II.

Atribut pada komponen-komponen perintah tabel:

Border = Angka, Atribut pada perintah TABLE untuk

mengatur ketebalan bingkai tabel. Semakin besar angkanya maka garis bingkai
akan semakin besar pula.

Bordercolor = warna, Atribut pada perintah TABLE

untuk mengatur warna bingkai tabel.

Bgcolor= warna, Atribut untuk mengatur warna latar

belakang. Atribut ini bisa diletakkan pada ketiga komponen perintah tabel.
<Table Bgcolor=warna> berpengaruh pada satu tabel.
<TR Bgcolor=warna> berpengaruh pada satu baris tabel.
<TD Bgcolor=warna> berpengaruh pada satu cell tabel saja.

Background= filegambar, Atribut untuk mengatur warna

latar belakang dengan tampilan gambar. Atribut ini bisa diletakkan pada ketiga
komponen perintah tabel

CellSpacing=angka, Jarak antar cell dalam tabel

Cellspacing
CellPadding=angka, Jarak antara isi cell dengan bingkai

cell
Cellpadding

isi cell

Bingkai tabel

Kotak cell

Width=angka atau persen, menentukan lebar tabel. Jika

didefinisikan dengan angka berarti mendefinisikan lebar tabel dengan

menggunakan satuan pixel dan jika menggunakan persen berarti lebar tabel
adalah sebanding dengan persentase lebar windows browser penampil. Atribut ini
juga bisa digunakan pada perintah <TD> atau <TH> untuk menentukan lebar
kolom pada tabel. Jika atribut ini tidak didefinisikan maka lebar tabel mengikuti
lebar cell yang bergantung pada panjangnya isi pada masing-masing cell.

Height=angka atau persen, menentukan tinggi tabel.

Pendefinisiannya sama dengan penggunaan atribut Width.
III.

Menggabung Cell

Pada pemrograman HTML hanya mengenal perintah menggabung cell (merge cell)
tetapi tidak mengenal perintah memecah cell. Perintah pendefinisiannya adalah
sebagai atribut perintah <TD> atau <TH>.

<TD Colspan=angka> menggabung cell beda kolom

<TD Rowspan=angka> menggabung cell beda baris

Contoh penggunaan perintah menggabung cell:

<table border=1>
Baris 1
<tr bgcolor=green>
<th> Judulkolom1</th>
<th> Judulkolom2</th>
<th> Judulkolom3</th>
<th> judulkolom4</th>
</tr>
<tr>
<td bgcolor="pink"> baris2,kolom1</td>
Baris 2
<td rowspan=2> baris2&3,kolom2</td>
<td rowspan=2 colspan=2> baris2&3,kolom3&4 </td>
</tr>
Baris 3
<tr>
<td bgcolor="pink"> baris3,kolom1</td>
</tr>
<tr>
<td colspan=2> baris4,kolom1&2</td>
<td> baris4,kolom2</td>
<td> baris4,kolom3</td>
Baris 4
</tr>
</table>
Width

Hasilnya:
Judulkolom1 Judulkolom2 Judulkolom3 judulkolom4
baris2,kolom1
baris2&3,kolom2 baris2&3,kolom3&

4
baris3,kolom1
baris4,kolom1&2

baris4,kolom2

baris4,kolom3

Contoh Listing Membuat Tampilan Tabel:

Tabel.html
<HTML>
<HEAD></HEAD>
<BODY>
<font face="arial narrow">
<table border=1 cellspacing=0 cellpadding=2 bodercolor=black>
<tr bgcolor="black">
<th colspan=3>
<font color="White">
Harga Komoditas Beras <br>
di Kota Surakarta
</font>
</th>
</tr>
<tr bgcolor="gray">
<th width=150>
<font color="White">Komoditas </font>
</th>
<th width=50>
<font color="White">Satuan </font>
</th>
<th width=100>
<font color="White">Harga </font>
</th>
</tr>
<tr>
<td> Beras C4 Super</td>
<td align="center"> 1 kg</td>
<td align="right"> Rp. 4.600,- </td>
</tr>
<tr>
<td> Beras C4 Biasa</td>
<td align="center"> 1 kg</td>
<td align="right"> Rp. 4.400,- </td>
</tr>
<tr>
<td> Mentik Wangi</td>
<td align="center"> 1 kg</td>
<td align="right"> Rp. 4.500,- </td>
</tr>

</table>
</font>
</BODY>
</HTML>

Hasilnya:
Baris no.14 s/d no.23
Baris no.6 s/d no.13
Harga Komoditas Beras
di Kota Surakarta

Komoditas

Baris no.24 s/d

Satuan no.28
Harga

Beras C4 Super

1 kg

Baris no.29 s/d

no.32
Rp. 4.600,-

Beras C4 Biasa

1 kg

Baris no.33 s/d

no.36
Rp. 4.400,-

Mentik Wangi

1 kg

Rp. 4.500,-

100 pixel
150 pixel
50 pixel