bukumodulmatakuliahpemrogramanweb1.doc
DESCRIPTION
pemwebTRANSCRIPT
Pemrograman HTML
disusun oleh:Indra Rahadi, S. KomPEMROGRAMAN 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
● Menampilkan gambar, tabel, hyperlink menggunakan HTML
● Mempercantik tampilan seperti Menu PullDown menggunakan Java Script.
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 pemrograman.
Contoh :
● Internet Explorer, MSN browser (Windows)
● Netscape, Mozilla, Firefox, Opera (berbagai sistem 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
1345627
Keterangan:
1. Tombol “Back” : tombol untuk membuka halaman web yang telah dibuka
sebelumnya.
2. Tombol “Next” : tombol untuk membuka kembali 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. Aktifkan perintah: Menu:\ Internet
option hingga muncul 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 diklik.
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 bersamasama 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
perintahperintah logika komputer seperti: pencabangan (IF .. Else),
perulangan/looping (Do … While / For … Next, dll) dan bahkan juga tidak bisa
memproses penjumlahan, pengurangan, pengalian maupun pembagian.
Perintahperintah 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 perintahperintah 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 Notepad atau sembarang Editor
2. Simpan dengan nama file beserta extensinya: “.html” ( wajib ! ) dan jangan
hanya nama filenya saja.
Contoh: filename= Latih1.html
3. Untuk menampilkan di browser, pilih salah satu cara:
a. Buka folder tempat 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.
Sifat Penulisan Perintah HTML
● 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 pembukaPerintah 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 katakata 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 = BODYAtribut = BgcolorNilai 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 Background.
● Fungsi dari Background adalah untuk mengatur warna latar belakang.
● Background juga merupakan atribut pada perintah <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.
II. 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 HTMLHallo, Tulisan ini dibuat dengan perintah HTMLHallo, Tulisan ini dibuat dengan perintah HTMLHallo, Tulisan ini dibuat dengan perintah HTMLHallo, 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.
Contoh:
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:   (harus diketik dengan
huruf kecil semua)
Setiap huruf diapit 2 perintah  
Contoh:
<HTML><HEAD>
<TITLE> Mencoba HTML</TITLE></HEAD><BODY>
  S  o  l  o  
B  e  r  s  e  r  i  
</BODY>
Hasilnya:
Jarak antar huruf 2 karakter kosong
● Panjang baris kalimat dipengaruhi oleh lebar windows browser penampil.
Panjang baris kalimat mengikuti lebar windows browser penampil
PERINTAH PENGATURAN TEXT DAN PARAGRAPH
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 diklik
maka tampilan akan berubah sesuai tujuan definisi hyperlink) yang belum
pernah digunakan / diklik. Jika tidak didefinisikan maka menggunakan
warna biru.
● VLink=”warna”
Mengatur warna Hyperlink (menu dalam bentuk tulisan yang jika diklik
maka tampilan akan berubah sesuai tujuan definisi hyperlink) yang sudah
pernah digunakan / diklik. Jika tidak didefinisikan maka menggunakan
warna ungu.
● Text=”warna”
Contoh sebuah hyperlinkJika 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 diklik
berwarna kuning (link="yellow") dan penanda jika hyperlink sudah pernah diklik
berwarna biru (vlink="blue").
Catatan:
Jika perintah BODY didefinisikan tanpa atribut apapun maka bentuk tampilan
dokumennya adalah:
● Warna latar belakang dokumen putih
● Warna huruf hitam
● Warna hyperlink biru dengan garis bawah
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 masingmasing 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 daripermasalahan 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. Perintahperintah pengaturan tampilan style tulisan pada dokumen.
Pada perintah pemrograman HTML juga memiliki pengaturan style tulisan seperti
menebalkan, memiringkan, memberi garis bawah, dll. Berikut ini perintahperintah
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 ketik manual </TT>
● <BIG> Membesarkan ukuran tulisan </BIG>
● <SMALL> Mengecilkan ukuran tulisan</SMALL>
● <SUP> Superscripttampilan pangkat atas </SUP>
● <SUB> Subscripttampilan pangkat bawah </SUB>
Contoh penggunaan:
2<SUB><U> a. <I>b </I></U></SUB> = X <SUP>2</SUP> .
Y
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 kanankiri (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 (default)
● Center = Perataan isi paragrap rata tengah
● Right = Perataan isi paragrap rata kanan
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:
12345671234567
<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>
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
1
Contoh penggunaan:
2
<HR>
3
<HR Width=150 Color="blue">
4
<HR Width=50% Size=5 Align="left">
2
<HR Size=10 Noshade>
Hasilnya:
1234
PERINTAH PENGATURAN TABEL
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 cellcell 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 komponenkomponen 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
masingmasing 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>
WidthHasilnya:
Judulkolom1 Judulkolom2 Judulkolom3 judulkolom4
baris2,kolom1 baris2&3,kolom2baris2&3,kolom3
&4
baris3,kolom1
baris4,kolom1&2 baris4,kolom2 baris4,kolom3
Contoh Listing Membuat Tampilan Tabel:
Tabel.html
1. <HTML>
2. <HEAD></HEAD>3. <BODY>4. <font face="arial narrow">5. <table border=1 cellspacing=0 cellpadding=2 bodercolor=”black”>6. <tr bgcolor="black">7. <th colspan=3>8. <font color="White">9. Harga Komoditas Beras <br>10. di Kota Surakarta11. </font>12. </th>13. </tr>14. <tr bgcolor="gray">15. <th width=150>16. <font color="White">Komoditas </font>17. </th>18. <th width=50>19. <font color="White">Satuan </font>20. </th>21. <th width=100>22. <font color="White">Harga </font>23. </th>24. </tr>25. <tr> <td> Beras C4 Super</td>26. <td align="center"> 1 kg</td>27. <td align="right"> Rp. 4.600, </td>28. </tr>29. <tr> <td> Beras C4 Biasa</td>30. <td align="center"> 1 kg</td>31. <td align="right"> Rp. 4.400, </td>32. </tr>33. <tr> <td> Mentik Wangi</td>34. <td align="center"> 1 kg</td>35. <td align="right"> Rp. 4.500, </td>36. </tr>37. </table>38. </font>39. </BODY>40. </HTML>