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. Gambar 2.1. Struktur HTML 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. Gambar 2.2. Contoh dokumen HTML 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> 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. 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. 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. Agar tidak membosankan, ada baiknya bila kita juga menempatkan image (gambar) dalam homepage yang dibuat. 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. 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> 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. 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> Formulir (form) pada suatu web site disediakan untuk diisi oleh user sehingga memungkinkan untuk bisa berinteraksi dengan pihak penyedia informasi Web. 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. 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. 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> Gambar 2.3. Contoh Select 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> 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"> 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"> 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 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. 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. Gambar 2.4. Halaman dengan tabel 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. 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. 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: Gambar 2.6. Halaman dengan 5 frame 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).
Headline
Format Teks
Blockquote
Font
Image
Format Image
Menempatkan Image
Atribut Image
Hypertext Link
Membuat Link
Form
Merancang Form untuk Dokumen
TextArea
Select
Input
Checkbox
Submit
Password
Tabel
Dasar-dasar Tabel
Frame
Membuat frame
