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

1 3 4 5 6 2 7 

 

 

 

 

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 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 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. 

I.  

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 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 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 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.           

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: &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> 

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 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: 

● Warna latar belakang dokumen putih 

● Warna huruf hitam 

● Warna hyperlink biru dengan garis bawah 

● Warna hyperlink yang sudah diklik berwarna ungu dengan garis bawah 

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 ketik manual </TT>

● <BIG> Membesarkan ukuran tulisan </BIG>

● <SMALL> Mengecilkan ukuran tulisan</SMALL>

● <SUP> Superscript­tampilan pangkat atas </SUP>

● <SUB> Subscript­tampilan pangkat bawah </SUB>

Contoh penggunaan: 

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

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 (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:

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 

 

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: 

1 2 3 4 

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 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

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 Surakarta 11. </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>

Hasilnya:  Baris no.14 s/d no.23 Baris no.6 s/d no.13 

Harga Komoditas Beras di Kota Surakarta

Komoditas Satuan Baris no.24 s/d 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