Writen By: Ferry Gustiawan
Edited by : Hartono Gunawan
HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang menyebutnya
sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa pemrograman, tapi
merupakan bahasa markup (penandaan), terhadap sebuah dokumen teks.
Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda
lebih besar ( > ) , dan disebut tag.
1 Struktur Dasar HTML
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan
file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya
Notepad. Dapat juga menggunakan HTML editor yang bersifat Visual, misalnya Frontpage.
Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak
jelas adalah ekstensi filenya, yaitu .htm atau .html.
Struktur Dasar
<HTML>
<HEAD>
………………………………
</HEAD>
<BODY>
…………………………………
</BODY>
</HTML>
Contoh :
Gunakanlah teks editor (notepad), tuliskan kode dibawah ini :
<HTML>
<HEAD>
<TITLE> Web Sederhana </TITLE>
</HEAD>
<BODY>
Ini halaman web pertama saya
</BODY>
</HTML>
Simpan dengan nama coba.htm, pada bagian save as type ubah menjadi all files. Setelah
disimpan, buka internet explorer, klik File > Open > browse (cari file coba.htm) > Open
2 Bagian HEAD
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang
benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head – kecuali judul
dokumen – tidak akan terlihat oleh pembaca dokumen tersebut.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
· Menyediakan judul dokumen
· Menjembatani hubungan antar dokumen
· Memberitahu browser untuk membuat form pencarian
· Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head :
· Tag <TITLE>, digunakan untuk memberi judul dokumen.
Penggunaannya adalah sebagai berikut :
<TITLE> Judul </TITLE>
· Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar HTML Informasi
meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum
didukung ileh HTML.
Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik, kemudian panggil
dokumen baru pada http://www.alamat.com”. Jika atribut URL tidak disertakan, maka halaman itu
sendiri yang akan dipanggil, jadi setara dengan mengklik tombol Refresh/Reload pada browser.
Penggunaan elemen <META> yang paling populer adalah penggunaan properti Keyword dan
Description. Kedua properti ini sangat berguna untuk membantu kerja search engine. Biasanya
search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk
mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk
mendeskripsikan indeks tersebut.
Contoh :
<HTML>
<HEAD>
<TITLE> General Officers of the US Army in the Civil War </TITLE>
<META NAME=”Keywords” CONTENT=”Yankee, Grand Army of the Republic, War Between
the Satates”>
<META NAME=”Description” CONTENT=”A Listing of the General officers of the US Army in
the Civil WAR”>
</HEAD>
3 Bagian BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai
dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah
disebutkan di atas, bagian BODY diawali oleh tag <BODY> dan ditutup </BODY>.
Contoh :
<HTML>
<HEAD>
<TITLE> Penggunaan BODY </TITLE>
</HEAD>
<BODY BGCOLOR=”Silver” TEXT=”Blue” ALINK=#000000 VLINK=#FF0000
LINK=”Green”>
ini adalah contoh penggunaan body
ini adalah sebuah <A href=””> link </A>
</BODY>
</HTML>
Tabel Warna
WARNA NILAI
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
Yellow #FFFF00
Blue #0000FF
Fuchsia #FF00FF
Aqua #00FFFF
White #FFFFFF
4 Memberi Komentar
Untuk mempermudah pembacaan kembali kode-kode HTML, kadang-kadang ditambahkan
komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca pada browser, maka
harus digunakan tanda khusus, yaitu <!– dan diakhiri dengan tanda –> .
Contoh :
<HTML>
<HEAD>
<!– ini adalah bagian head –>
</HEAD>
<BODY BGCOLOR=#FF0000 >
<!– warna background adalah merah –>
</BODY>
</HTML>
5 Memberi Identitas
Kadang-kadang orang yang merancang suatu halaman web ingin mencantumkan namanya pada
dokumen web tersebut atau mungkin mencantumkan hak cipta terhadap dokumen tersebut.
Untuk mencantumkan informasi-informasi tersebut digunakan tag <ADDRESS>. Umumnya
informasi tersebut diletakkan pada bagian paling akhir suatu dokumen.
Contoh :
<HTML>
<HEAD>
<TITLE> Penggunaan Address </TITLE>
</HEAD>
<BODY>
Selamat datang di web amatir
<ADDRESS>
Dokumen ini di rancang oleh Ferry Gustiawan <BR>
Pada tanggal 13 Sept 2005
</ADDRESS>
</BODY>
</HTML>
6 Memformat Dokumen HTML
Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen. Tag-tag
tersebut diantaranya adalah :
¨ Tag <BR>, membuat baris baru
Tidak memerlukan penutup </BR>
¨ Tag <P>, memulai paragaraf baru
Tidak memerlukan penutup </P>
¨ Tag <HR>, membuat garis batas horizontal
Contoh :
<HTML>
<HEAD>
<TITLE> Format Dokumen HTML </TITLE>
</HEAD>
<BODY>
Ini Web coba-coba saya <BR>
Nama saya Ferry
<P>
Saya belajar web di UNSRI
Jl. Mayor Salim Batubara, Bukit Besar
<P>
Hobbi saya travelling, olahraga dan komputer
<HR>
Terima kasih
<HR>
<H1> Bab I HTML </H1>
ini adalah isi bab 1
<H2> 1.1 subbab HTML </H2>
ini adalah isi subbab 1.1
<H3> 1.1.1 Sub-subbab HTML </H3>
ini adalah isi sub subbab 1.1.1
</BODY>
</HTML>
¨ Tag <PRE>, membuat tampilan dokumen HTML pada browser sama dengan tampilan pada
teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR> jadi tidak diperlukan lagi.
Contoh :
<HTML>
<HEAD>
<TITLE> Web Sederhana </TITLE>
</HEAD>
<BODY>
<PRE>
Tampilan ini sma dengan tampilan di teks editor.
Klasemen
Team Main Menang Seri Kalah
==============================================
Team A 3 2 1 0
Team B 3 2 0 1
Team c 3 1 1 1
==============================================
kode program :
For I = 1 to 10
For J = 1 to 5
A(I,J)=I*J
Next
Next
</BODY>
</HTML>
PDF created with pdfFactory Pro trial version http://www.pdffactory.com
¨ Tag <CENTER>, Teks rata tengah
Contoh :
<HTML>
<HEAD>
<TITLE> Web Sederhana </TITLE>
</HEAD>
<BODY>
<Center>
Teks ini rata tengah
</CENTER>
</BODY>
</HTML>
¨ Tag <UL> dan <OL>
Suatu cara pemformatan lain yang akan sangat banyak berguna adalah LIST (daftar). Ada dua
macam daftar, yaitu ORDERED lists (OL) dan UNORDERED lists (UL).
Ini adalah ordered list
1. Puntadewa
2. Bima
3. Arjuna
4. Nakula
5. Sadewa
Ini adalah unordered list
· merah
· biru
· lama
· baru
· ungu
Contoh 1:
<HTML>
<HEAD>
<TITLE>Order List</TITLE>
</HEAD>
<BODY>
Kepribadian yang saya sukai
<UL>
<LI>pribadi yang jujur
<LI>pribadi yang ramah
<LI>rumah pribadi
<LI>mobil pribadi
<LI>sekretaris pribadi
</UL>
</BODY>
</HTML>
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Order List</TITLE>
</HEAD>
<BODY>
Kepribadian yang saya sukai
<OL>
<LI>pribadi yang jujur
<LI>pribadi yang ramah
<LI>rumah pribadi
<LI>mobil pribadi
<LI>sekretaris pribadi
</OL>
</BODY>
</HTML>
¨ Tag <ACRONYM>, untuk memberi keterangan atau screen tips
Contoh :
<html>
<head>
<title>Singkatan</title>
</head>
<body>
<acronym title=”word wide web”>
www
</acronym>
<p>Bila kita meletakkan kursor di atas kata www
maka muncul kata word wide web pada screen tips</p>
</body>
</html>
7 Memformat Karakter
Format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat sebuah
dokumen HTML yang menarik.Pemformatan karakter tersebut mencakup beberapa hal :
· Logical Format
· Physical Format
· Tag <BLOCKQUOTE>
· Tag <FONT>
· Karakter Khusus
Logical Format
Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Tag-tag yang
termasuk logical format adalah sebagai berikut :
<CITE>, digunakan untuk menandai suatu kutipan (Citation).
<CODE>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C.
<EM>, digunakan untuk menandai suatu teks yang ditekankan oleh penulis.
<KBD>, dugunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui
keyboard.
<SAMP>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
<STRONG>, digunakan untuk menandai bagian yang terpenting dari suatu teks.
<VAR>, digunakan untuk menampilkan nama variabel.
<DFN>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.
Semua tag tersebut memerlukan tag penutupnya masing-masing.
Contoh :
<HTML>
<HEAD>
<TITLE> Logical Format </TITLE>
</HEAD>
<BODY>
<CITE> Tom Sawyer </CITE> adalah salah satu tokoh penting di dunia satra amerika.
<BR><BR>
Kode yang paling pertama dipelajari oleh programmer C adalah :
<CODE>puts (“Hello World!”);</CODE> <BR><BR>
Ia berkata , “Sekali tidak tetap <EM>tidak</EM>.” <BR> <BR>
Untuk berpindah ke direktor root , ketikkan <KBD>cd / </KBD>. <BR> <BR>
Pada abjad terdapat 5 huruf vokal, yaitu <SAMP>AEIUO</SAMP>. <BR> <BR>
Hal yang harus diingat-ingat adalah <STRONG>Jangan Panik !</STRONG> <BR> <BR>
Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali . <BR> <BR>
<DFN>Trenggiling adalah hewan pemakan semut. </DFN>
</BODY>
</HTML>
Physical Format
Physical format adalah format terhadap fisik suatu font. Tag-tag yang termasuk physical format
adalag sebagai berikut :
<B>, untuk menampilkan huruf tebal.
<I>, untuk menampilkan huruf miring.
<U>, untuk menampilkan garis bawah pada teks.
<TT>, untuk menampilkan huruf seperti huruf mesin ketik.
<STRIKE>, untuk menampilkan garis horizontal pada bagian tengah huruf.
<BIG>, untuk menampilkan ukuran huruf yang lebih besar.
<SMALL>, untuk menampilkan ukuran huruf yang lebih kecil.
<SUB>, untuk menampilkan subscript.
<SUP>, untuk menampilkan superscript.
Semua tag-tag tersebut memerlukan penutupnya masing-masing.
Contoh :
<HTML>
<HEAD>
<TITLE> Memformat Karakter </TITLE>
</HEAD>
<BODY>
<B> kalimat ini akan dicetak tebal. </B><BR>
<I> kalimat ini akan dicetak miring </I><BR>
<U> kalima ini akan bergaris bawah </U><BR>
<STRIKE> kalimat ini akan bergaris tengah </STRIKE>
</BODY>
</HTML>
Tag <BLOCKQUOTE>
Digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen, misalnya kutipan
kitab suci, kata mutiara dll. Teks yang diberi ini akan menjorok ke dalam.
Contoh :
<HTML>
<HEAD>
<TITLE> Penggunaan Blockquote </TITLE>
</HEAD>
<BODY>
<PRE>
Definisi Sistem menurut Steven B Shop adalah :
<BLOCKQUOTE>Sistem adalah kumpulan dari komponen-komponen yang
saling bekerjasama untuk mencapai suatu tujuan.
</BLOCKQUOTE>
</BODY>
</HTML>
Tag <FONT>
Digunakan untuk mengatur jenis, ukuran dan warna font
C
ontoh :
<HTML>
<HEAD>
<TITLE> Memformat Font </TITLE>
</HEAD>
<BODY>
<PRE>
<FONT FACE=”Arial” SIZE=1 COLOR=#FF0080>
Jenis font ini adalah Arial,berwarna biru,ukurannya 1
</FONT>
<FONT FACE=”Monotype Corsiva” SIZE=5 COLOR=BLUE>
Jenis font ini adalah Arial,berwarna biru,ukurannya 5
</FONT>
</BODY>
</HTML>
Karakter Khusus
Kadang-kadang dalam suatu dokumen HTML ingin ditampilkan karakter-karakter tertentu,
misalnya tanda lebih besar, lebih kecil dan lain-lain.
Karakter ISO Latin-1
À À capital A, grave accent ï ï small i, diæresis/umlaut
à à small a, grave accent Ð Ð capital Eth, Icelandic
Á Á capital A, acute accent ð ð small eth, Icelandic
á á small a, acute accent Ñ Ñ capital N, tilde
  capital A, circumflex ñ ñ small n, tilde
â â small a, circumflex Ò Ò capital O, grave accent
à à capital A, tilde ò ò small o, grave accent
ã ã small a, tilde Ó Ó capital O, acute accent
Ä Ä capital A, diæresis/umlaut ó ó small o, acute accent
ä ä small a, diæresis/umlaut Ô Ô capital O, circumflex
Å Å capital A, ring ô ô small o, circumflex
å å small a, ring Õ Õ capital O, tilde
Æ Æ capital AE ligature õ õ small o, tilde
æ æ small ae ligature Ö Ö capital O, diæresis/umlaut
Ç Ç capital C, cedilla ö ö small o, diæresis/umlaut
ç ç small c, cedilla Ø Ø capital O, slash
È È capital E, grave accent ø ø small o, slash
è è small e, grave accent Ù Ù capital U, grave accent
É É capital E, acute accent ù ù small u, grave accent
é é small e, acute accent Ú Ú capital U, acute accent
Ê Ê capital E, circumflex ú ú small u, acute accent
ê ê small e, circumflex Û Û capital U, circumflex
Ë Ë capital E, diæresis/umlaut û û small u, circumflex
ë ë small e, diæresis/umlaut Ü Ü capital U, diæresis/umlaut
Ì Ì capital I, grave accent ü ü small u, diæresis/umlaut
ì ì small i, grave accent Ý Ý capital Y, acute accent
Í Í capital I, acute accent ý ý small y, acute accent
í í small i, acute accent Þ Þ capital Thorn, Icelandic
Î Î capital I, circumflex þ þ small thorn, Icelandic
î î small i, circumflex ß ß small sharp s, German sz
Ï Ï capital I, diæresis/umlaut ÿ ÿ small y, diæresis/umlaut
Karakter-karakter ISO 8859-1
non-breaking space ± ± ± plus-or-minus sign
¡ ¡ ¡ inverted exclamation mark ² ² ² superscript two
¢ ¢ ¢ cent sign ³ ³ ³ superscript three
£ £ £ pound sign ´ ´ ´ acute accent
¤ ¤ ¤ general currency sign µ µ µ micro sign
¥ ¥ ¥ yen sign ¶ ¶ ¶ pilcrow (paragraph sign)
¦ ¦ ¦ broken (vertical) bar · · · middle dot
§ § § section sign ¸ ¸ ¸ cedilla
¨ ¨ ¨ umlaut/dieresis ¹ ¹ ¹ superscript one
© © © copyright sign º º º ordinal indicator, male
ª ª ª ordinal indicator, fem » » » angle quotation mark,
right
« « « angle quotation mark, left ¼ ¼ ¼ fraction one-quarter
¬ ¬ ¬ not sign ½ ½ ½ fraction one-half
soft hyphen ¾ ¾ ¾ fraction three-quarters
® ® ® registered sign ¿ ¿ ¿ inverted question mark
¯ ¯ ¯ macron × × × multiply sign
° ° ° degree sign ÷ ÷ ÷ division sign
8 Menambahkan Gambar
Dokumen HTML akan menarik bila ditambah gambar. Format gambar yang dapat ditampilkan :
GIF, JPEG, PCX, PNG, WMF, dll. Format gambar yang dikenal oleh hampir semua browser
adalah GIF dan JPEG.
Untuk menambah gambar digunakan tag <IMG>.
Contoh :
<HTML>
<HEAD>
<TITLE> Menambah Gambar </TITLE>
</HEAD>
<BODY>
<IMG src=”c:\windows\bubbles.bmp” ALT=”Gambar Gelembung”
ALIGN=Middle>
Gambar ini terdapat pada windows 98 secara default, anda boleh
menggantinya.
</BODY>
</HTML>
9 Menggunakan LINK
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika Link
diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan Anchor, yaitu tag
<A>.
Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribut HREF digunakan jika sebuah
anchor akan digunakan sebagai link, sedangkan atribut NAME digunakan jika anchor akan
digunakan sebagai tujuan.
Contoh :
<HTML>
<HEAD>
<TITLE> Penggunaan Link </TITLE>
</HEAD>
<BODY>
<A href=”http://www.yahoo.com”> klik disini </A> untuk menuju situs
yahoo.com. <BR>
atau dapat juga mengklik gambar ini :
<A href=”http://www.yahoo.com”>
<IMG src=”c:\windows\tintin.jpg” ALT=”www.yahoo.com”></A>
<BR><BR>
</BODY>
</HTML>
10 Menggunakan Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu :
Tag <TABLE> : untuk mendefinisikan sebuah tebel
Tag <TR> : untuk mendefinisikan baris tabel
Tag <TH> : untuk mendefinisikan judul tiap kolom atau baris
Tag <TD> : untuk mendefinisikan isi tiap kolom
Contoh :
<HTML>
<HEAD>
<TITLE> Menggunakan Tabel </TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH> Kolom 1 </TH>
<TH> Kolom 2 </TH>
<TH> Kolom 3 </TH>
</TR>
<TR>
<TD> Baris 1 kolom 1 </TD>
<TD> Baris 1 kolom 2 </TD>
<TD> Baris 1 kolom 3 </TD>
</TR>
<TR>
<TD> Baris 2 kolom 1 </TD>
<TD> Baris 2 kolom 2 </TD>
<TD> Baris 2 kolom 3 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Atribut untuk tag <TABLE> adalah sebagai berikut :
ATRIBUT KETERANGAN
ALIGN Posisi horizontal tabel
BACKGROUND Menentukan gambar latar belakang tabel
BGCOLOR Menentukan warna latar belakang tabel
BORDER Menentukan tebal bingkai tabel
BORDERCOLOR Menentukan warna bingkai tabel
BORDERCOLORLIGHT Menentukan warna depan bingkai tabel
BORDERCOLORDARK Menentukan warna bayangan bingkai tabel
CELLSPACING Menentukan jarak spasi antar sel
CELLPADDING Menentukan jarak isi sel dengan bingkai
HEIGHT Menentukan tinggi tabel
WIDTH Menentukan lebar tabel
VALIGN Menentukan posisi vertikal teks dalam sel
Sedangkan atribut tag <TD> adalah :
ATRIBUT KETERANGAN
ALIGN Posisi horizontal teks dalam sel
BACKGROUND Menentukan gambar latar belakang sel
BGCOLOR Menentukan warna latar belakang sel
BORDER Menentukan tebal bingkai sel
BORDERCOLOR Menentukan warna bingkai sel
BORDERCOLORLIGHT Menentukan warna depan bingkai sel
BORDERCOLORDARK Menentukan warna bayangan bingkai sel
COLSPAN Menentukan jumlah kolom yang digabung
HEIGHT Menentukan tinggi sel
NOWRAP Menentukan teks agar tetap satu baris
ROWSPAN Menentukan lebar tabel
VALIGN Menentukan posisi vertikal teks dalam sel
11 Menggunakan Form
Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user untuk
kemudian diolah. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip
yang bersifat server-side.
Untuk membuat sebuah form, tag-tag yang diperlukan adalah :
· Tag <FORM>
· Tag <TEXTAREA>
· Tag <SELECT>
· Tag <INPUT>
Tag <FORM>
Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form. Tag ini
mempunyai dua atribut, yaitu METHOD dan ACTION.
ATRIBUT KETERANGAN
METHOD Untuk menentukan metode pengolahan form
ACTION Untuk menentukan URL atau direktori dari file yang digunakan untuk
mengolah form tersebut
Tag <TEXTAREA>
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai
beberapa atribut, yaitu :
ATRIBUT KETERANGAN
NAME Mendefinisikan nama objek textarea
ROWS Menentukan jumlah baris textarea
COLS Menentukan lebar textarea
Contoh :
<HTML>
<HEAD>
<TITLE>Text Area</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME=teksarea1 ROWS=10 COLS=40>
Teks ini akan tertulis di dalam textarea
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa
atribut, yaitu :
ATRIBUT KETERANGAN
NAME Mendefinisikan nama dari objek select
SIZE Menentukan berapa pilhan yang akan ditampilkan. Jika atribut ini tidak
disertakan atau diberi nilai 1, pilihan akan ditampilkan sebagai dropdown
list. Jika diberi nilai 2 atau lebih, pilihan akan ditampilkan
sebagai scroll box. Jika nilai SIZE lebih besar dari jumlah pilihan yang
ada pada <SELECT>, pilihan kosong akan ditambahkan. Jika user
memilih pilihan ini maka nilainya adalah kosong.
MULTIPLE Mengizinkan untuk memilih lebih dari satu
Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>. Tag <OPTION>
sendiri mempunyai dua atribut yaitu VALUE yang digunakan untuk memberi nama item pilihan
dan SELECTED yang menunjukkan pilihan yang terpilih secara deafult. Tag <OPTION> tidak
perlu ditutup dengan </OPTION>.
Contoh :
<HTML>
<HEAD>
<TITLE>SELECT</TITLE>
</HEAD>
<BODY>
Berapa besar memori yang Anda pakai :
<FORM>
<SELECT NAME=”memori”>
<OPTION SELECTED VALUE=”16 MB”>16 MB
<OPTION VALUE=”32 MB”>32 MB
<OPTION VALUE=”64 MB”>64 MB
<OPTION VALUE=”128 MB”>128 MB
<OPTION VALUE=”128keatas”>Lebih 128 MB
</SELECT>
</FORM>
</BODY>
</HTML>
Tag <INPUT>
Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta
informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak
memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :
ATRIBUT KETERANGAN
NAME Mendefinisikan nama dari objek input. Atribut ini harus dituliskan
kecuali untuk tipe submit dan clear
SIZE Menentukan ukuran kotak teks
MAXLENGTH Menentukan jumlah maksimum karakter yang dapat dimasukkan pada
kotak teks
VALUE Untuk kotak teks, menentukan teks yang tertulis. Untuk check box atau
radio, menentukan nilai item yang dipilih. Untuk Submit dan Reset,
menentukan teks yang tertulis pada tombol
CHECKED Hanya digunakan untuk check box atau radio. Menentukan pilihan yang
terpilih secara default.
TYPE Menentukan tipe input yang dibuat
Tipe input yang dapat dibuat adalah :
· Text, digunakan untuk membuat kotak teks
· Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan
ditampilkan dengan tanda *.
· Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari
satu.
· Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu
saja.
· Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian
form yang telah diberikan.
· Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data
form agar diolah.
Contoh :
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM>
<PRE>
Silakan masukkan data pribadi Anda :
Nama :<INPUT TYPE=text NAME=txtnama>
Alamat :<INPUT TYPE=text NAME=txtalamat SIZE=50>
No Telpon :<INPUT TYPE=text NAME=txttelpon SIZE=10>
Masukkan Password Anda : <INPUT TYPE=password MAXLENGTH=6>
Hobby Anda (boleh lebih dari satu) :
<INPUT TYPE=checkbox NAME=hobby VALUE=baca> Membaca
<INPUT TYPE=checkbox NAME=hobby VALUE=ORaga> Olah Raga
<INPUT TYPE=checkbox NAME=hobby VALUE=nonton> Nonton Film
<INPUT TYPE=checkbox NAME=hobby VALUE=travel> Travelling
<
!–perhatikan bahwa untuk satu kelompok pilihan yang sama nilai atribut NAME harus
sama–>
Jenis Kelamin :
<INPUT TYPE=radio NAME=jk VALUE=pria> Laki-laki
<INPUT TYPE=radio NAME=jk VALUE=wanita> Perempuan
<HR>
<INPUT TYPE=submit VALUE=kirim> <INPUT TYPE=Reset VALUE=hapus>
</FORM>
</BODY>
</HTML>
12 Menggunakan Frame
Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-masing
bagian terdiri dari dokumen HTML tersendiri. Frame pertama kali diperkenalkan oleh Netscape
Navigator 2.0.
Untuk membuat sebuah frame, tag yang digunakan adalah :
· Tag <FRAMESET>
· Tag <FRAME>
· Tag <NOFRAME>, digunakan untuk menampilkan sebuah alternatif dokumen jika
browser tidak mendukung penggunaan frame. Sebuah frame dapat didefinisikan di
dalam frame lain.
Tag <FRAMESET> mempunyai beberapa atribut :
ATRIBUT KETERANGAN
ROWS Membuat frame secara mendatar (baris) sekaligus mendefinisikan labar
masing-masing
COLS Membuat frame secara vertikal (kolom) sekaligus mendefinisikan labar
masing-masing
BORDERCOLOR Mendefinisikan warna bingkai frame
Untuk mendefinisikan lebar frame pada atribut ROWS dan COLS ada tiga cara yang dapat
digunakan, yaitu dengan nilai tetap, nilai persentase, dan nilai proporsional. Misalnya ingin
dibuat tiga buah frame, maka penggunaannya adalah sebagai berikut :
· Dengan nilai tetap
<FRAMESET ROWS=”100,240,400”>
· Dengan nilai persentase
<FRAMESET COLS=”30%,40%,30%”>
· Dengan nilai proporsional
<FRAMESET ROWS=” *,2*,3*”>
Dengan nilai tetap, setiap frame didefinisikan dalam ukuran pixel. Cara ini kurang baik karena
jika resolusi monitor user tidak sama dengan resolusi monitor pada saat perancangan frame,
maka frame yang terbentuk akan menjadi kacau.
Dengan nilai persentase, lebar setiap frame didefinisikan sebagai persentase dari lebar jendela
browser sehingga resolusi monitor tidak akan berpengaruh.
Dengan nilai proporsional, lebar setiap frame juga didefinisikan sebagai persentase dari lebar
jendela browser, hanya saja pembacaannya agak berbeda. Misalnya nilai proporsionalnya
adalah “*,2*,*”, jumlah bintang seluruhnya adalah 1+2+1=4, frame pertama akan memiliki lebar
¼ dari jendela browser, frame kedua 2/4 atau ½ dari jendela browser, dan frame ketiga ¼ dari
jendela browser.
Tag <FRAME> mempunyai atribut :
ATRIBUT KETERANGAN
SRC Menentukan nama file HTML yang digunakan sebagai isi frame
MARGINHEIGHT Menentukan batas atas dan bawah antara dokumen dengan bingkai
dalam pixel
MARGINWIDTH Menentukan batas kiri dan kanan antara dokumen dengan bingkai
dalam pixel
SCROLLING Menentukan apakah frame dapat memiliki scroll bar. Nilainya adalah
YES, NO, AUTO
NORESIZE Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya
NAME Mendefinisikan nama dari objek frame. Nama ini dapat digunakan
sebagai tujuan sebuah link
BORDER Menentukan ukuran bingkai frame
Contoh :
<html>
<head>
<title>Frame Kiri</title>
</head>
<body bgcolor = “white”>
<h1>Frame di Sebelah Kiri</h1>
</body>
</html>
Simpan dengan nama : framekiri.htm
<html>
</head>
<title>Frame Kanan</title>
<head>
<body bgcolor = “white”>
<h1>Frame di Sebelah Kanan</h1>
</body>
</html>
Simpan dengan nama : framekanan.htm
<html>
<head>
<title>Contoh Penggunaan Frame</title>
</head>
<frameset cols=30%,*”>
<frame src=”framekiri.htm”>
<frame src=”framekanan.htm”>
</frameset>
</html>
Simpan dengan nama : frame.htm
Selamat Mencoba 🙂
Posted in Uncategorized
Suarajangkrik's Weblog 