Apakah HTML ?
HTML (Hypertext Markup Language) adalah bahasa dari World Wide Web yang dipergunakan untuk menyusun dan membentuk
dokumen agar dapat ditampilkan pada program browser. Tiap kali kita mengakses
dokumen web, maka sesungguhnya kita mengakses dokumen seseorang yang ditulis
dengan menggunakan format HTML. Beberapa orang merasa
keberatan jika dikatakan HTML adalah sebuah bahasa pemrograman karena struktur
yang dimilikinya dianggap terlalu sederhana, kode-kode dibaca oleh browser baris
per baris, dari atas ke bawah. HTML juga tidak memiliki ‘looping’
seperti bahasa pemrograman lain.
Pada HTML dipergunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan
demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.
Web Server
Server World Wide Web
berfungsi untuk menyediakan dokumen HTML yang kita buat. Tanpa server, tidak akan ada web dan tidak akan ada kebutuhan HTML lagi.
Komunikasi antara browser ke server menggunakan http (Hypertext Transfer Protocol)
Perangkat lunak server World
Wide Web tersedia dalam berbagai sistem komputer, dalam bentuk paket komersial
maupun non komersial. beberapa diantaranya :
Perangkat lunak Unix
Protokol http, client dan server Web pertama kali
dibangun oleh CERN di Swiss pada European Particle Physics Lab sehingga suatu
saat pembangunan “httpd” berhasil
dipindahkan ke sistem mana saja. Dalam konteks ini, “http” menjadi “httpd”,
karena program server UNIX selalu menggunakan nama “daemon”, sehingga penambahan “d” pada “httpd” menunjukkan bahwa ia adalah daemon atau perangkat lunak
server, sedangkan http mengarah kepada protokolnya itu sendiri.
Server httpd yang paling
banyak digunakan adalah Aphace, kemudian server httpd NCSA (National Center of Supercomputer Application).
Perangkat lunak server Web pada PC
Bagi PC yang menjalankan Microsoft Windows, beberapa
waktu yang lalu banyak digunakan versi shareware dari server httpd NCSA dan
yang terpaket dalam Windows 95 dan 98 adalah Personal Web Server. Paket komersial dan tidak yang tersedia bagi Windows NT, misalnya
seperti Website, Microsoft Internet Information Server. Apache dan IBM
Internet Connection Server bagi komputer yang menjalankan OS/2 sedangkan MACHTTPD, httpd4Mac dan
EasyServe untuk Macintosh.
Web browser
Sebagai user kita
menggunakan program browser untuk membaca halaman-halaman dokumen yang kita
minta dari server di web site. Browser mengirimkan request kepada server akan suatu dokumen
atau layanan tertentu, dan jika ada maka server akan memberikan dokumen
tersebut dan kemudian hubungan antara keduanya akan terputus. Hubungan akan terjalin kembali bila browser mengirimkan request lagi.
Dokumen yang kemudian tiba
pada komputer kita, diterjemahkan oleh program browser dan ditampilkan dilayar
monitor.
Dokumen tersebut dapat berupa tulisan (teks), gambar, suara
(dalam bentuk digital) dan bahkan video.
Ada banyak program browser yang
dapat digunakan. Semuanya memiliki kesamaan dalam penggunaan HTML dan
pemakaian protokol http. Contoh program browser adalah NCSA Mosaic, Netscape Navigator,
Internet Explorer.
Internet Programming language
Bahasa pemrograman internet
mulai dikembangkan sejak adanya keinginan untuk membuat halaman yang aktif. Misalnya
adanya animasi, form isian.
Hingga saat ini teknologi
yang bersaing dalam bahasa pemrograman internet yaitu Common Gateway Interface,
Java, dan ActiveX. Pengembangan aplikasi dengan CGI sangat mahal
biayanya, sukar dipelajari dan tidak
platform independent. Sebaliknya java, dengan
teknologi virtual machine, dan object oriented, menjadikannya bahasa
pemrograman internet yang ampuh dan platform
independent. Adapun teknologi ActiveX dari microsoft
telah diimplementasikan oleh pengembang software web client dengan model
Distributed COM, menjadikan teknologi ini juga platform independent.
Sebuah dokumen HTML pada
dasarnya berstruktur seperti gambar 2.1. Dokumen dibagi menjadi dua
bagian besar, yaitu HEADER (bagian atas) dan bagian BODY (tubuh dokumen).
Masing-masing ditandai oleh pasangan tag <HEAD> dan <BODY>. Bagian
HEAD berisikan judul dokumen dan informasi-informasi dasar lain,
sedangkan bagian BODY adalah data dokumennya.
Untuk mengetikkan dokumen, kita menggunakan Notepad
atau text editor yang lain.
Kedua instruksi yang pertama kali harus dituliskan adalah :
<HTML>
….
</HTML>
Instruksi ini yang akan
memberi tanda awal dan akhir suatu dokumen HTML. Kemudian
kita buat bagian HEAD dokumen denga perintah <HEAD> dan </HEAD>.
Didalam tag ini kita akan meletakkan judul dokumen ,
dengan perintah <TITLE> dan </TITLE>.
<HTML>
<HEAD>
<TITLE>
The Title of the Document
</TITLE>
</HEAD>
<BODY>
My first HTML Document
</BODY>
</HTML>
Contoh kecil dokumen HTML
sekarang telah lengkap, berisi semua tag dokumen HTML yang harus ada. Simpan file tersebut dengan
nama- misalnya “first.html” dan selanjutnya dapat ditampilkan dalam browser
web.
Untuk melihat dokumen HTML secara lokal melalui
browser Web (misalkan Internet Explorer) kita buka file tersebut dengan memilih
menu FILE dan OPEN FILE.
Headline
Dokumen yang kita buat dapat diperbaiki tampilannya
dengan menggunakan tag headline. HTML mendukung enam tingkat headline
<H1> sampai dengan <H6>. Untuk headline dengan ukuran kecil,
digunakan nomor yang lebih besar misalnya <H2> atau <H5>. Headline
secara otomatis akan melakukan pergantian baris dalam
dokumen. Untuk menengahkan headline, gunakan kode berikut :
<H1><ALIGN=”CENTER”>Level
One Headline</H1>
Format Teks
Dokumen yang kita buat
sejauh ini belum mengenal pemisah baris dan paragraf. Instruksi <P>
merupakan tag yang dipakai untuk mencegah berkumpulnya seluruh teks dokumen
menjadi satu paragraf besar juga memberikan jarak antar paragraf. Untuk pergantian baris kita pergunakan instruksi <BR>.
Hanya saja instruksi <P> dan <BR> ini bisa sangat
melelahkan untuk dokumen yang panjang. Tag <PRE> akan mempermudahnya dengan membuat browser menampilkan teks
dalam format aslinya, termasuk spasi dan carriage return. Perintah <PRE> akan sangat bermanfaat untuk membuat dokumen –dokumen yang
membutuhkan banyak kolom, seperti tabel.
Blockquote
Tag <Blockquote>
memungkinkan untuk meletakkan suatu blok
terindentasi sehingga memisahkannya dari tubuh teks. Tidak seperti <PRE>,
<Blockquote> tidak
mempertahankan carriage return atau spasi kosong yang Anda buat, namun hanya
membuat blok teks yang didalamnya sedikit tergeser ke
dalam.
Font
Seperti program pengolah kata, HTML mengenal
kemampuan untuk membuat teks tebal dengan tag <B>, teks miring dengan
<I> dan teks bergaris bawah dengan tag <U>. Untuk memanipulasi
ukuran font dengan menggunakan tag <FONT> yang diikuti sebuah atribut
SIZE. Misalkan <FONT SIZE =+4> berarti teks yang akan
ditampilkan dalam ukuran 4. Ukuran berada diantara angka 1
sampai dengan 7. Tanda + didepan angka jika
menginginkan ukuran font yang lebih besar daripada normal. Demikian juga tanda – untuk sebaliknya.
Image
Agar tidak membosankan, ada
baiknya bila kita juga menempatkan image (gambar) dalam homepage yang dibuat.
Format Image
Format yang paling terkenal
adalah GIF dan JPG. Keduanya banyak sekali dipergunakan dalam
dokumen-dokumen HTML sehingga sering disebut sebagai format standar untuk
grafik. Secara umum, sebaiknya gunakan GIF bila Anda berencana menaruh terlalu banyak
gambar di dalam dokumen. JPG baik dipergunakan jika Anda
berkeinginan untuk meletakkan gambar berupa foto yang memiliki lebih dari 256
warna.
Menempatkan Image
HTML menyediakan suatu mekanisme sederhana untuk
memadukan file gambar dengan dokumen web Anda. Instruksi
<IMG> adalah sebuah open tag, yang artinya tidak memerlukan tanda
penutup. Adapun cara penulisan perintah<IMG> adalah sebagai berikut :
<IMG
SRC=”/URL/nama_file”>
Tag <IMG> selalu diikuti dengan atribut SRC
yang menunjukkan lokasi dan nama file grafik yang
ingin kita tampilkan. URL (universal
Resources Locator) adalah alamat absolut dari file grafik tersebut.
Atribut tambahan untuk instruksi <IMG> adalah
ALIGN. Atribut ini
mengendalikan letak (alignment) teks yang berada di baris yang
sama dengan grafik terhadap sisi vertikal gambar. Atribut ALIGN ditulis dengan
cara sebagai berikut :
<IMG SRC=”MyImage.gif”
ALIGN=TOP>
Atribut Image
·
WIDTH dan HEIGHT memberikan informasi mengenai ukuran gambar kepada
browser sebelum file grafiknya sendiri dikirimkan.
·
VSPACE dan HSPACE yang menentukan jarak diatas dan dibawah (VSPACE)
atau di kiri dan di kanan (HSPACE) dari sebuah gambar.
·
BORDER menentukan garis pinggir di sekitar gambar. Bila BORDER diset
sama dengan 0, garis pinggir akan dihilangkan dari dokumen .
Hypertext Link
Hypertext atau sering disebut teks interaktif,
memungkinkan kita untuk membuat link (sambungan) antara dokumen-dokumen
sehingga user dapat memperoleh dokumen-dokumen lain di luar dokumen yang sedang diakses. Suatu
link hypertext, dalam suatu dokumen Web, dapat berupa
gambar atau teks. Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan
oleh link tersebut.
Membuat Link
Buatlah contoh file berikut :
<HTML>
<HEAD>
<TITLE>
The Title of the Document
</TITLE>
</HEAD>
<BODY>
<A HREF
=”MyLink.htm”>Click Here</A>
</BODY>
</HTML>
Tag <A HREF =”MyLink.htm”> menyatakan bahwa
bagian dokumen yang berada didalam tag ini adalah suatu link yang menuju ke
sebuah dokumen HTML lain, yang dalam contoh diatas, bernama ”MyLink.htm”.
Sembarang teks atau gambar yang berada diantara tag <A HREF=> dan
</A> akan ditampilkan browser dalam bentuk yang
berbeda dari bagian dokumen lain. Biasanya browser akan
menandai link ini dengan garis bawah pada teks atau garis pinggir berwarna pada
gambar. User dapat mengklikkan mousenya pada link ini untuk
menuju ke dokumen “MyLink.htm”.
Anda dapat mengkaitkan suatu
dokumen atau lokasi di Internet yang berada di luar sistem dimana dokumen
sekarang berada. Anda dapat menerapkan link dari dokumen Anda ke suatu dokumen yang
berada di Web site lain, FTP site, Gopher
site atau ke sembarang sumber daya yang ada di Internet. Cobalah macam
link berikut :
<A HREF
=”http://www.microsoft.com”> Web Microsoft</A>
<A HREF
=”ftp://ftp.netscape.com”>FTP Server Netscape</A>
Form
Formulir (form) pada suatu
web site disediakan untuk diisi oleh user sehingga memungkinkan untuk bisa
berinteraksi dengan pihak penyedia informasi Web.
Merancang Form untuk Dokumen
Form dalam HTML ditandai dengan tag <FORM> dan
</FORM>. Sewaktu kita membuat elemen form, kita perlu menentukan
bagaimana dan kemana data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web server.
Hal ini dilakukan dengan
pernyataan ACTION dan METHOD. ACTION menunjukkan lokasi tempat
program CGI yang hendak dijalankan. METHOD menunjukkan bagaimana
informasi yang diisikan dalam form harus dikirimkan ke Web server. METHOD yang umum adalah GET dan POST.
TextArea
Ada beberapa elemen form yang
dapat kita pergunakan dengan <FORM> yaitu TEXTAREA, SELECT dan INPUT. TEXTAREA dipakai terutama bila kita menginginkan tempat bagi user
Web untuk memasukkan informasi yang panjangnya beberapa baris. Perintah
yang dipergunakan adalah :
<TEXTAREA NAME=”nama” ROWS=n
COL=n>
NAME menyatakan nama data
yang akan dimasukkan ke dalam textarea ini. COLS dan ROWS
berturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam
textarea. BIla COLS dan ROWS tidak ditentukan dalam kode TEXTAREA, maka
nilai yang akan dipergunakan adalah 40 karakter lebar
dan 4 baris tinggi.
Select
Terkadang Anda ingin
menyediakan beberapa pilihan kepada user dokumen Web Anda sebagai masukan. <SELECT> akan
menampilkan suatu daftar yang dapat dipilih oleh user ,
baik dalam bentuk menu pop-up maupun menu gulung. Perhatikan contoh berikut :
<HTML>
<HEAD>
<TITLE>
The Title of the Document
</TITLE>
</HEAD>
<BODY>
<FORM>
<SELECT NAME=”pilih”>
<OPTION SELECTED
VALUE=”bagus”>Bagus !
<OPTION
VALUE=”lumayan”>Lumayan
<OPTION
VALUE=”biasa”>Biasa saja
<OPTION
VALUE=”jelek”>Jelek
</SELECT>
</FORM>
</BODY>
</HTML>
Input
Input adalah elemen form yang mungkin paling banyak
dipakai. <INPUT> Dibentuk dalam beragan bentuk, yang dapat berupa kotak
teks, tombol-tombol dan checkbox.
Macam-macam bentuk <INPUT> adalah
:
TEXT, dipergunakan untuk
menampilkan kotak teks sebagai masukan dari user. Panjang
kotak teks ini dibatsi satu baris saja. Perintah yang dipergunakan
adalah:
<INPUT TYPE=”text”>
TOMBOL, tombol-tombol pilihan dapat ditampilkan
dengan perintah :
<INPUT TYPE=”radio”>
Tombol-tombol akan nampak
seperti sebuah lingkaran kosong yang bilamana dipilih, akan berisi lingkaran
lain yang berwarna lain yang berwarna hitam didalamnya.
<FORM>
Apakah Anda setuju
? <BR>
<INPUT TYPE=”radio”
NAME=”pilihan” VALUE=”ya”> Ya>
<INPUT
TYPE=”radio”NAME=”pilihan”VALUE=”tidak”> Tidak>
</FORM>
Checkbox
Serupa dengan tombol,
Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari beberapa
pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih dari
satu pilihan. Perintah yang digunakan :
<INPUT TYPE=”checkbox”>
Submit
Pada akhir sebuah form,
haruslah terdapat satu tombol yang dipergunakan untuk mengirimkan data-data
yang telah dimasukkan ke dalam form. Biasanya tombol ini diberi tulian
“SUBMIT”. Perintahnya :
<INPUT TYPE=”submit”>
Password
Bentuk input yang lain
adalah PASSWORD, yang sebenarnya adalah kotak teks biasa namun tidak
menampilkan ke layar data yang dimasukkan didalamnya.
<INPUT TYPE=”password”>
Tabel
Tabel bermanfaat untuk
menyajikan informasi yang memerlukan banyak kolom dan baris. Namun
lebih daripada itu, tabel dapat menjadi alat utama dalam HTML untuk
mengendalikan tataletak dokumen Web kita.
Dasar-dasar Tabel
Tabel dibuat dari tag<TABLE> dan
</TABLE>. Didalam tag ini dapat dibuat baris-baris tabel dengan perintah
<TR> dan </TR>. Didalam <TR> ini kemudian
kita dapat menenpatkan perintah <TD> dan </TD>. Sebuah
contoh sederhana untuk membuat tabel dengan dua baris dan tiga kolom :
<TABLE BORDER=1>
<TR>
<TD>one</TD>
<TD>two</TD>
<TD>three</TD>
</TR>
<TR>
<TD>four</TD>
<TD>five</TD>
<TD>six</TD>
</TR>
</TABLE>
Perintah BORDER menentukan
besarnya garis pinggir dalam tabel. Bila BORDER dipasang sama
dengan nol, maka garis pinggir akan hilang.
Lebar tabel keseluruhan dapat diatur dengan
menentukan lebar tabel dalam pixel atau persentase di dalam
<TABLE WIDTH=x>
Sebagai contoh kita akan membuat tabel dengan lebar
80% lebar layar browser, maka perintahnya adalah :
<TABLE BORDER=1
WIDTH=80%>
Untuk meletakkan data agar berada di tengah-tengah
sel tabel, kita memberikan pernyataan ALIGN=CENTER pada <TR>. Atau dapat
pula dibuat rata kiri atau rata kanan dengan pernyataan ALIGN=LEFT atau
ALIGN=RIGHT. Untuk menentukan tata letak vertikal, digunakan
VALIGN. Nilai yang diberikan adalah CENTER, TOP atau
BOTTOM. Misalnya:
<TR VALIGN=BOTTOM>
akan meletakkan teks pada bagian
bawah sel tabel.
Frame
Window browser dapat dibagi
menjadi beberapa frame. Artinya,
sebuah frame adalah daerah segiempat yang berada di dalam window
browser. Setiap frame menampilkan isi dokumennya masing-masing.
Membuat frame
Untuk membuat frame, kita
perlu ada tag <frameset>
dan <frame>. Halaman HTML untuk membuat dua
frame bisa seperti berikut:
<HTML>
<FRAMESET ROWS="50%,50%">
<FRAME SCR="page1.htm"
NAME="frame1">
<FRAME SCR="page2.htm"
NAME="frame2">
</FRAMESET>
</HTML>
Kode di atas akan menghasilkan dua frame. Perhatikan bahwa
property rows digunakan pada tag
<FRAMESET>. Artinya kedua frame akan tersusun
dalam susunan atas-bawah. Frame atas me-load halaman HTML page1.htm dan frame bawah menampilkan
halaman page2.htm. Hasilnya akan terlihat seperti
gambar 2.5.
Jika hendak menyusun frame pada susunan kolom kita
dapat tuliskan cols sebagai
pengganti rows pada tag
<FRAMESET>. Bagian “50%,50%” menentukan
seberapa besar ukuran kedua frame. Kita dapat juga menuliskan “50%,*” jika tidak mau menghitung berapa
besar frame kedua (dengan ukuran total keduanya 100%). Ukuran juga dapat ditentukan dalam satuan pixel dengan
menghilangkan tanda %. Setiap frame harus memiliki nama
yang unik melalui property name
pada tag <FRAME>.
Gambar 2.5. Halaman dengan 2 frame
Kita dapat juga membuat tag <FRAMESET> yang
berlapis. Berikut ini contohnya:
<HTML>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SCR="cell.htm">
<FRAME SCR="cell.htm">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SCR="cell.htm">
<FRAME SCR="cell.htm">
<FRAME SCR="cell.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Hasilnya akan seperti
berikut:
Menentukan ukuran border dapat dilakukan melalui
property border pada tag
<FRAMESET>. Jika border=0
berarti tidak digunakan border di antara frame (tidak berlaku pada Netscape
2.x).
Dokumen HTML yang Anda buat, sampai sejauh ini masih
merupakan dokumen statis. Anda mungkin menginginkan halaman web Anda lebih
interaktif. Menggunakan JavaScript yang merupakan sebuah bahasa scripting yang dikembangkan oleh
Netscape, akan lebih memudahkan Anda untuk bisa mewujudkannya. JavaScript
bersifat Object Oriented, menggunakan
banyak karakteristik seperti pada pemrograman C++ dan tentu saja bahasa Java
itu sendiri