PENGENALAN HTML

WWW adalah kependekan dari World Wide Web atau lebih dikenal web. Web adalah layanan
yang didapat oleh pemakai komputer apabila komputernya tersambung dengan internet.

Cara kerja WWW adalah :

 Pertama, informasi yang yang dibuat disimpan dalam sebuah dokumen web pages pada
sebuah tempat penyimpanan yaitu harddisk.
 Dokumen web yang disimpan dalam sebuah harddisk pada sebuah komputer dapat
disebut dengan web server apabila komputer yang dimaksud telah dilengkapi denagn
dengan web server seperti Iis, PWS, atau Aphace Server. Dalam hal ini komputer
bertugas sebagai Server sekaligus menyimpan informasi “Reply” pada komputer Server.
 Komputer yang bertugas sebagai Client atau Web Client membaca informasi yang
terdapat pada web pages melalui sebuah jaringan internet /intranet dengan mengambil
“get” informasi yang tersimpan pada komputer yang bertugas sebagai Server.
 Computer Web Client menampilkan halaman web dengan menggunakan sebuah
program khusus, yaitu web browser.

Browser Web adalah program yang digunakan untuk menampilkan informasi dari suatu
halaman web yang tersimpan dalam komputer. Dengan menerapkan GUI(Grafik User Interface),
maka para pengguna internet dengan mudah mengakses informasi-informasi yang terdapat di
dalam internet.

HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan
yang digunakan dalam dokumen web. Dokumen HTML adalah sebuah sebuah dokumen teks
murni yang dapat dibuat dengan text editor web seperti Frontpage, Dreamweaver, Notepad,
Wordpad, Kwrite, Microsoft Word. Kemudian dieksekusi oleh sebuah web browser seperti
Internet Explorer, Mozila, Opera, Netscape Navigator.

HTML merupakan salah satu standar varian dari SGML (Standar Generalized Markup Language),
yaitu sebuah standarisasi untuk pertukaran dokumen secara elektronik yang telah ditetapkan
oleh international Organization For Standardization(ISO).

Istilah – istilah yang sering digunakan dalam pemrograman web antara lain:
 Internet(International Networking) artinya jaringan komputer berskala
international/globalyang dapat membuat masing2 komputer salling berkomunikasi.
 Intranet merupakan jaringan komputer berskala kecil, hanya memiliki beberapa Web
Server yang diperutukan organisasi atau perusahaan, dan digunakan sebagai sarana
berkomunikasi antara komputer dalam organisasi tersebut.
 TCP/IP(Transmission Control Protokol/Internet Protokol) artinya ptokol yang terdiri dari
sub protokol yang beropersai pada lapisan yang berbeda. Ini merupakan protokol
standar internetProtokol ini memberikan nomor unix pada setiap komputer yang
terkoneksi.
  URL(Uniform Resource Locators)artinya sebuah alamat didalam internet yang terdiri
atas 2 bagian. Bagian pertama adalah pengenal protokol dan bagian kedua adalah
pengenal domain.
 HTTP(HyperText Markup Language) artinya protokol yang berfungsi untuk
mendefinisikan dan menjelaskan bagaimana server dan client berinteraksi dalam
mengirim dan menerima dokumen web.
 FTP(File Transfer Protokol) artinya sebuah protokol yang dipergunakan untuk mengirim
berkas diantara dua komputer.

Untuk dokumen yang disimpan dengan menggunakan format HTML, maka setiap dokumrn yang
disimpan harus ditambahkan sebuah akhiran .html/.htm. Karena pada dasarnya tiap dokumen
html akan dieksekusi pada sebuah browser yang didalamnya dapat mengenali extention
.htm/.html.

Dokumen yang dibuat dengan format html terdiri dari beberapa elemen yang saling berkaitan
antara satu dengan yang lainnya untuk membentuk satu dokumen html yang utuh. Elemen
tersebut antara lain, elemen html, elemen head, elemen title, elemen body. Masing2 elemen
diapit oleh sebuah tanda atau disebut juga dengan delimiter, yaitu tanda lebih kecil (<) dan
lebih besar (>).Elemen yang telah diapit oleh tanda tersebut disebut dengan tag.

Dasar konstruksi html terdiri dari elemen dan entity. Elemen disebut dengan, entity merupakan
perintah untuk menghasilkan karakter2 khusus. Tag merupakan perintah – perintah yang
diberikan kepada browser untuk melakukan suatu tugas tertentu.

Tag html :
 Dikelilingi oleh tanda < dan >
 Umumnya memiliki tag memiliki pasangan, misalnya <b> dengan </b>
 Tag pertama <b> disebut dengan Start Tag
 Tag kedua </b> disebut dengan End Tag
 Tidak bersifat Case Sensitive artinya tidak mempengaruhi terhadap penulisan text huruf
besar dan huruf kecil dapat digunakan.

Tag atau elemen terdiri dari dua macam yaitu Container Tag dan Stand Alone Tag. Container
Tag menandai suatu bagian dari dokumen diawal dan diakhir. Sedangkan Stand Alone Tag tidak
memerlukan tanda awal dan akhir.
Secara utuh struktur dokumen dan elemen pendukungnya dapat ditulis sebagai berikut:

<html>
<head>
<title>…..isi dari title…..</title>
</head>
<body>
….. isi /informasi body yang akan
ditampilkan pada browser web…..
</body>
</html>

TAG <BODY>
Tag ini menyuruh browser untuk menampilkan semua elemen yang berada dalam tag <body>.
Atributnya:
 Alink=”warna”  warna link(aktif)
 background=”nama_file/url”  berupa image
 bgcolor=”warna” berupa warna
 link=”warna”  warna link(umum)
 text=”nama warna” warna text
 vlink=”nama warna”  warna link(sudah dikunjungi)

TAG UTAMA HTML

Tag dasar html sangat mutlak diperlukan browser untuk mengenali sebuah dokumen html
karena pada dasarnya html merupakan teks murni, artinya dokumen html tidak akan memiliki
keiistimewaan apapun apabila tidak dieksekusi pada sebuah browser. Sedangkan browser
hanya dapat mengeksekusi sebuah dokumen html apabila didalam dokumen tersebut telah
dilengkapai dengan tag-tag dasar html yang meliputi <html>, <head>, <title>, <body>.

Tag utama html adalah tag yang digunakan untuk memanipulasi dokumen html, terdiri dari:

1. Heading
Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen
html. Tag heading memiliki 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6.
Masing2 bilangan berfungsi untuk mewakili ukuran terbesar(H1) dan terkecil(h6).

Sintaksnya:

<hn[properti]>……………..</Hn>
ket:

n adalah bilangan yang terdiri dari 1 sampai dengan 6.

properti adalah kemampuan tambahan yang dimiliki tag heading.
Properti  align adalah pengaturan letak heading

2. Paragraf
Sintaks:
<p[properti]>…………….</p>

ket:
 properti align adalah pengaturan letak paragraf(center, left, right, dan justify).

3. Font
Tag yang digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam
dokumen.Sintaksnya:
<font[properti]>…………….</font>

properti  face adalah bentuk tulisan dan nama huruf

size adalah ukuran huruf
color adalah warna huruf

4. Break line
Tag yang digunakan untuk memotong kalimat didalam dokumen html.
Sintaksnya:
……kalimat……<br>……….kalimat………….<br>

5. Horizontal line
Tag yang digunakan untuk pemisah/garis antar paragraf dalam dokumen html.
Sintaksnya:
<hr[properti]>

ket:
properti  align adalah letak garis(center, left, right dan justify)
size adalah ukuran ketebalan, defaultnya 2.
width adalah lebar garis, satuanya dalam pixels atau persen
color adalah warna garis
noshade adalah efek bayangan (shading)

6. Marquee
Adalah sebuah text berjalan pada dokumen html. Sintaksnya:
<marquee[properti]>………isi/text marquee….</marquee>

ket:
properti  behavior adalah cara atau teknik dari marquee untuk berjalan(scroll, slide,
dan alternate.
Direction adalah arah teks berjalan(left, right)
Height adalah tinggi marquee nilainya dlm presentase/pixels
Width adalaha lebar marquee nialainya dlm persetase/pixels
Continously adalah pengulang teks secara terus menerus, nilainya adalah
loop sebanyak n kali.
Bgcolor adalah warna background marquee.
Style adalah untuk memformat font, paragraf, border, numbering dan
position.
 FORMAT TEXT
Ada tiga kelompok dalam pemformatan teks pada dokumen html, diantaranya:

1. Format Text
a. Cetak Tebal <b>….teks…</b>
b. Cetak miring  <I>….teks….</I>
c. Cetak Garis bawah  <u>….teks…</u>
d. Mengecilkan huruf  <small>….teks…</small>
e. Membesarkan huruf  <big>…teks….</big>
f. Teks yang ditebalkan(sama dgn <b>) <strong>…..teks…..</strong>
g. Penekanan teks(sama dgn <I>)  <emphasis>…teks…</emphasis>
h. Mencoret teks  <strike>….teks….</strike>
i. Subscript dan superscript  _{……teks….…} dan ^{……..teks….…}
j. Penyisipan teks dan penghapusan teks/insert dan delete
Umumnya browser akan mencoret teks yang dihapus dan menggaris bawahi
yang diinsert.
Delete  <del>….teks…</del>
Insert  <ins>….teks…</ins>

2. Computer Output
1. Code
Untuk mendefinisikan pengkodean pada sebuah teks dlm dokumen html. Digunakan
sebuah tag <code> agar tampak berbeda dengan dengan teks yang lainnya. Sintaks:
<code>…………teks…………….</code>
2. Keyboard  <kbd>………teks……….</kbd>
3. Contoh/Samp  <samp>…………..teks……….</samp>
4. Text teletype/tt <tt>………teks………..</tt>
5. Variabel/var  <var>……….teks………….</var>
6. Preformated text/pre  <pre>………..teks………….</pre>
7. Listing
Biasanya hasil yang dari sebuah text dilisting dlm satu paragraf akan digabungkan
menjadi satu paragraf, tapi apabila ditambahkan tag paragraf tidak akan tampak
hasilnya.  <listing>………..teks…………..</listing>
8. Plaintext
 Menampilkan seluruh teks beserta tagnya dalam sebuah browser. Sintaksnya:
<plaintext>……….teks………..</plaintext>
9. Xmp
<xmp>…………..teks………….</xmp>

LIST HTML

List adalah sebuah uraian yang terdiri atas item-item dari suatu daftar yang dilengkapi dengan
nomor baik nomor alpabetik atau numerik. Dalam dokumen terdapat dua bentuk daftar atau
list, yaitu:

1. Ordered List / List Bernomor

Model dari suatu daftar yang setiap itemnya diberikan nomor.
Sintaksnya:
<ol [atribut]>
<li>........isi list...........</li>
<li>........isi list...........</li>
<li>........isi list...........</li>
</ol>

keterangan:
 Tag OL diambil dari nama bentukOrdered List.
 Atribut berisi type atau start / mulai penomoran list.
 Ada empat bentuk type: a, A, i, I.

2. Unordered List / List Tanpa Nomor

Model dari suatu daftar yang setiap itemnya tidak diberikan nomor, akan tetappi
digantikan dengan bulleted list.
Sintaksnya:
<ul [atribut]>
<li>........isi list...........</li>
<li>........isi list...........</li>
<li>........isi list...........</li>
</ul>

ket:
 Tag OL diambil dari nama bentukOrdered List.
 Atribut berisi type atau start / mulai penomoran list.
 Ada tiga bentuk type: disc(), square(), circle().
 TABLE/TABEL
 Tabel adalah sebuah sarana untuk menginformasikan data berupa baris dan kolom.
 Sebuah tabel dimulai dengan tag <TABLE> dan diakhiri dengan </TABLE>.
 Setiap baris tabel dibentuk dengan tag <TR>……….</TR>, dan setiap kolom tabel
dibentuk dengan tag <TD>…….</TD>.
 Tiap kotak dalam tabel disebut cell. <TH> berfungsi untuk membuat header dari tabel.
 Atribut BORDER pada tag <TABLE> akan membentuk border di sekeliling tabel. Default
atribut adalah BORDER=0 yang berarti tidak menggunakan border. Tabel dengan border
dimatikan bisa dimanfaatkan untuk me-layout halaman dengan banyak gambar.

 Selain border, berikut adalah atribut lain yang dapat dipakai dalam <TABLE>, yaitu:
 Bordercolor=”kode_warna”  mengatur warna border, jika border digunakan.
 Align=”left|center|right”  mengatur posisi tabel di layar.
 Cellpadding=”angka”  mengatur jarak antara border dengan isi sel (vertikal
dan horizontal) dalam satuan pixel.
 Cellspacing=”angka”  mengatur tebal frame dalam satuan pixel.
 Width=”angka”  mengatur lebar tabel dalam satuan pixel atau persen.

 Sedangkan berikut ini adalah beberapa atribut dalam tag <TD> yang sering digunakan:
 Bgcolor=”kode_warna”  mengatur warna latar belakang cell.
 Background=”gambar.gif”  menggunakan gambar sekaligus sebagai
latar belakang cell.
 Align=”left|right|center”  mengatur perataan isi cell (teks, gambar,
dan lain-lain) secara horizontal.
 Valign=”top|bottom|middle”  mengatur perataan isi cell (teks,
gambar, dan lain-lain) secara vertikal.
 Colspan=”angka”  untuk menggabung cell kosong.
 Width=”angka”  mengatur lebar cell dalam satuan pixel atau persen.

Catatan:
Anda dapat mengganti kode <td>....</td> dengan <th>....</th> agar teks di dalam cell dicetak
dengan huruf tebal. Ini akan menghemat beberapa byte ukuran file karena Anda tidak
perlu menggunakan tag <b>.....</b> lagi untuk membuat huruf tebal dalam sebuah cell.
Contoh dokumen HTML membuat Tabel Colspan

<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="2" cellpadding="5" width=50% height=50% >
<tr>
</tr>
<th colspan="3" align="center">baris1, kolom1</th>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom1</td>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>

Contoh Dokumen HTML membuat Tabel Rowspan

<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% >
<tr>
<td rowspan="3" align="center">baris1, kolom1</td>
<td>baris1, kolom2</td>
<td>baris1, kolom3</td>
</tr>
<tr>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>

PENGATURAN BORDER
Border adalah garis yang mengelillingi sebuah tabel. Sintaksnya:
<table border=”angka”>
................
</table>

CELLPADDING DAN CELLSPACING

Cellpading digunakan untuk mengatur jarak antara tepi tabel dengan isi sel baik vertikal
maupun horisontal dalam satuan pixel.
Cellspasing digunkanan untuk mengatur tebal frame dalam satuan pixel.
Sintaksnya:
<table border=”angka” cellpadding=”angka” cellspasing=”angka”>
..........................
</table>

COLSPAN DAN ROWSPAN

Colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom atau satu sel
kolom.
Rowspan digunakan untuk menggabungkan beberapa baris menjaadi satu baris atau satu sel
baris. Sintaksnya:
<th rowspan/colspan=”jumlah kolom/baris”> atau
<td rowspan/colspan=”jumlah kolom/baris”>
...........................
</th> atau
</td>

PERATAAN ISI SEL, BACKGROUND ISI SEL, DAN BACKGROUND TABEL

Digunakan apabila menginginkan isi sel yang ditampilkan tertata rapi dan menarik. Sintaksnya:
<th align=”left/center/right” bgcolor=”warna”> atau
<td align=”left/center/right” bgcolor=”warna”>
....................
</th> atau
</td>
sedangkan untuk tabel, sintaksnya:
<table border=”angka” bgcolor=”warna”>
....................
</table>

FRAME HTML
Adalah layout sebuah HTML untuk menampilkan beberapa halaman web secara bersamaan dan
ditampilkan dalam sebuah window browser.

Berdasarkan fungsinya, frame terbagi atas:

1. Frame Kolom
adalah Frame yang menampilkan informasi dalam sebuah web browser dalam bentuk
kolom. Misalnya kita akan membuat tiga buah frame kolom dengan ukuran masing-
masing frame adalah 30, 40, dan 30 (dilustrasikan 1 browser web memiliki ukuran total
adalah 100). Kita akan membuat 4 buah halaman web, dengan komposisi 1 halaman
web dan 3 halaman pendukung.
Sintaksnya: (halaman utama)
<frameset cols=”#,#,...”>
<frame name=”namaframe” src=”lokasi web”>
...................
</frameset>
contohnya:
<html>
<head>
<title>
contoh frame kolom</title>
</head>
<frameset cols="30,40,30">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>

2. Frame Baris
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk
baris.
Sintaksnya: (halaman utama)
<html>
<head>
<title>
contoh frame baris</title>
</head>
 <frameset rows="30,50,20">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>

3. Frame Campuran
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk
baris dan kolom.
Sintaksnya: (halaman utama)

4. Frame Navigasi

5. Frame Inline

FORMAT IMAGE
Image atau gambar adalah semua jenis file yang disusun dari pixels. Yang berfungsi untuk
menambah daya tarik dari sebuah halaman web. Pada umumnya yang ditampilkan mempunyai
format gambar GIF(Graphics Interchange Format) dan JPEG(Joint Photographics Experts Group).
Fungsi pengolahan gambar terdiri atas:

1. Image Alignment/Perataan Teks Pada Gambar

Perataan teks pada gambar terdiri dari dua bagian yaitu Horisontal(left/center/right) dan
Vertikal(Top/Middle/Bottom). Sintaksnya:
<img scr=”Gambar/Sumber Data Gambar” align=”left/center/right”>
<img scr=”Gambar/Sumber Data Gambar” align=”top/middle/bottom”>

2. Image Adjustment/Ukuran Gambar

Digunakan untuk mengatur lebar dan tinggi dari sebuah gambar dalam sebuah halaman
web. Sintaksnya:
<img border=”ukuran/angka” scr=”Gambar/Sumber Data Gambar” width=”angka”
height=”angka”>

3. Image Alternate/Teks Gambar

Digunakan untuk menampilkan teks pada saat kursor mouse berada diatas gambar.
Sintaksnya:
<img scr=”Gambar/Sumber Data Gambar” width=”angka” height=”angka” alt=”…..isi
teks……”>
4. Image Link/Link Gambar
Digunakan untuk mengaitkan gambar dengan halaman tertentu didalam sebuah halaman
web. Sintaksnya:
<p align=”left/center/right”><a href=”nama_file.html”><img scr=”Gambar/Sumber Data
Gambar” width=”angka” height=”angka”></p></a>

5. Image Map/Pemetaan Gambar

Digunakan satu untuk memasang beberapa link dalam satu gambar. Hal tersebut akan
memudahkan kita memanggil sebuah halaman web dengan hanya menempatkan
sekelompok gambar menjadi satu gambar. Sintaksnya:
<map>
<img scr=”Gambar/Sumber Data Gambar” usemap=”#nama_map”>
<map name=”nama_map”>
<area shape=”default/rect/cicr/poly” coords=”keterangan” href=”link” alt=”ket_link”>
</map>
Keterangan:
 Apabila shape=”default”, digunakan untuk menyatakan kemana link akan pergi, jika link
khusus tidak didefinisikan didalam area. Coords tidak digunakan.
 Apabila shape=”rect” maka coord=”x, y, w, z” dimana x, y adalah titik koordinat kiri atas
dan w, z adalah koordinat kanan bawah area link.
 Apabila shape=”circ” maka coord =”x, y, w” dimana x, y adalah titik koordinat pusat
lingkaran dan w adalah radius llingkarannya.
 Apabila shape=”poly” maka coords =”w, z, w, z…” dimana w, z adalah koordinat setiap
titik poligon.

LINK HTML
Link adalah fasilitas dimana dapat berpindah tempat dari halamn satu ke halaman lain yang
ditandai dengan menggarisbawahi teks yang akan dilink, atau pointer mouse akan
berubah menjadi bentuk jari apabila berada pada objek link (gambar/teks) yang
diikuti dengan tersorotnya objek link (gambar/teks) .

Hyperlink dalam sebuah dokumen HTML menggunakan tag Anchor<a> dan diakhiri dengan
</a>. Sintaksnya:
<a href=”nama_dokumen yang dilink” [atribut]>……..teks/gambar,,,,,,</a>
Dalam dokumen HTML hperlink secara garis besar dibagi menjadi 3, yang terdiri dari:

1. Link Absolut
adalah link yang digunakan untuk mengaitkan halaman web yang sate dengan halaman
web yang lainnya di dalam situs internet. Contoh
<a href=http://www.ikmi.ac.id>Pusat Pengolahan Data Akademik</a>

2. Link Relatif
 adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan halaman
web yang lainnya didalam satu situs internet seperti pada link absolut. Contoh:
<a href =“Contoh Latihan_link”>Ke latihan_link</a>

3. Link Self
adalah link yang digunakan untuk mengaitkan bagian yang satu dengan yang lainnya di
dalam satu halaman web. Contoh:
<a href=”#bab1”>Lihat bab1</a>

FORM

Adalah Input/masukkan dari pengguna yang kemudian diproses untuk mendapatkan hasil yang
diinginkan pengguna, proses penyimpanan, proses sunting atau edit, proses hapus dan browse.
Sintaksnya:

<Form Name=”Nama_Form” Methode=”Post/Get” action=”URL”>

.....
</Form>

Keterangan:
1. Nama Form adalah nama form yang sedang digunakan.
2. Methode adalah metode yang digunakan dalam penyimpanan ke dalam server.
3. Action adalah alamat yang digunakan untuk pemrosesan input form di dalam server.

Form memiliki kontrol form yang digunakan untuk mengklasifikasikan input/masukkan dari
pengguna. Kontrol Form terdiri dari :
1. Kontrol Text digunakan untuk memberikan input atau masukkan berupa kotak isian.
Sintaksnya :
<Input Type=”Text” [Properti]>
Ket properti:
– Name : Nama dari kontrol text
– Size : Ukuran dari kontrol text
– Value : Text yang tertulis pada kontrol text
– Maxlength : Panjang maximal karakter yang diijinkan
– Style : Pengaturan Style dalam kontrol text, nilainya bisa berupa font, paragraf,
numbering, border, position.
– Dir : Pengaturan arah text dari kontrol text, seperti rlt(right to left)/kanan ke
kiri dan kebalikannya yaitu ltr(left to right).

Contoh :
....
 <body>
<form>
<input type=”text” name=”text1” size=”40” maxlength=”50” style=”font-family:Comic San
Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....
2. Kontrol Password adalah sebuah kontrol html yang penggunaanya mirip dengan kontrol text
akan tampil dengan text biasa, sedangkan kontrol password akan ditampilkan dengan tanda
asteris(*).
Sintaksnya :
<Input Type=”Password” [Properti]>
ket properti:
– Name
– Size
– Value
– Maxlength
– Style
– Dir
Contoh:
....
<body>
<form>
<input type=”Password” name=”pass” size=”40” maxlength=”50” style=”font-family:Comic
San Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....

3. Kontrol Radio digunakan untuk menampilkan salah satu pilihan dari satu kumpulan/grup
pilihan.
Sintaksnya :
<Input Type=”Radio” [Properti]>
Ket properti:
- Name
- Value
- Checked adalah Kontrol radio yang menjadi pilihan
- Default adalah Kontrol radio yang terpilih secara default.
Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Jenis Kelamin Anda :<br>
 <input type=”Radio” name=”OptJenis” Value=”Pria” checked>Pria<br>
<input type=”Radio” name=”OptJenis” Value=”Wanita” >Wanita<br>
</form>
....

4. Kontrol CheckBox digunakan untuk memilih beberapa pilihan dari pilihan yang tersedia.
Pengunaanya sama dengan dengan kontrol radio, perbedaanya terletak pada pilihan yang
dimungkinkan lebih dari satu.
<Input Type=”CheckBox” [Properti]>
Ket properti:
- Name
- Value
- Checked
- Default
Contoh:
....
<body>
<form>
<font face=”Comic San Ms”>
Hobby Anda Adalah :<br>
<input type=”CheckBox” name=”C1” Value=”ON” >Olah Raga<br>
<input type=”CheckBox” name=”C2” Value=”ON” >Musik<br>
</form>
</body>
....

5. Kontrol Select digunakan untuk membuat sebuah daftar pilihan.

Sintaksnya:
<select [properti]>
...<option> item 1
...<option> item2
....
....
</select>
Ket properti:
- name
- value
- selected adlah item yang dipilih
- Size adalah banyaknya item yang ditampilkan pada layar monitor(defaultnya 1).
- Multiple adalah Tampilan dari drop down box, seperti tombol spinner.
- Dir
Contoh :
....
<body>
 <form>
<font face=”Comic San Ms”>
Agama Yang Ada Di Indonesia Adalah :<br>
<Select size=”1” name=”CBOAgama” >
<option selected value=”Islam”>Islam</option>
<option value=”Kristen”>Kristen</option>
<option value=”Katolik”>Katolik</option>
<option value=”Hindu”>Hindu</option>
<option value=”Budha”>Budha</option>
<option value=”Keyakinan”>Keyakinan</option>
</select></font></p>
</form>
</body>
.....

6. Kontrol Text Area merupakan kontrol text yang dapat menliskan text lebih banyak karena
memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text.
Sintaksnya:
<TextArea [properti]>
....Isi text area....
</textarea>
Ket Properti:
- Name
- Value
- Cols adalah jumlah kolom dari kontrol text area
- Rows adalah jumlah baris dari kontrol text area
- Maxlength
- Dir
Contoh :

...
<body>
<form
<font face=”Comic San MS”> Komentar Anda :
<textarea rows=”4” name=”Area1” cols=”40”></text area></font>
</form>
</body>
...

7. Kontrol Button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur /
event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button, Submit, Reset. Button
digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari VBScript.
Submit digunakan utnuk mengirim data-data ke server (lebih banyak berhubungan dengan
 pemrogramman yang berbasis Server Side seperti ASP), Sedangkan Reset digunakan untuk
meghapus data-data yang ada pada suatu form.
Sintaksnya:
<Input Type=”Button” [properti]>
<Input Type=”Submit” [properti]>
<Input Type=”Reset” [properti]>
Ket properti:
- Name
- Value
- Dir

8. Kontrol Image digunakan untuk mengolah /mengelola gambar.

Sintaksnya:
<Input Type=”Image” [properti]>
Ket properti:
- Align : meratakan teks di sekeliling gambar
- Alt : teks yang muncul jika tombol mouse berada diarea gambar
- Border : Batas tepi dari kontrol image
- Heigth : Ketinggian dari gambar
- Hspace : Pengatran batas(margin) horisontal gambar
- Ismap : Penentuan gambar sebagai imagemap
- Lowsrc : Pengaturan gambar dengan resolusi rendah
- Name
- Src
- Usemap :Penentuan gambar sebagai imagemap
- Vspace : Pengaturan batas(margin) vertikal gambar
- Width : Lebar dari gambar