You are on page 1of 35

HTML

ISNARDI, S.Kom,M.Kom
STMIK Jayanusa
Padang

Tentang HTML
 HTML : format standar untuk membuat dokumen web
 Spesifikasi HTML standar (HTML 4.01 ) :
http://www.w3.org/TR/html4
 HTML merupakan bahasa bertanda, menggunakan
rangkaian teks tertentu (tag) untuk menandai teks
yang mempunyai interpretasi khusus
 File HTML berupa file teks (plain text file), bukan
binary file, sehingga dapat dibuat menggunakan editor
teks biasa

Skema Dasar Dokumen HTML
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>

• HTML: menandai awal dan akhir dokumen HTML
• HEAD: menandai bagian header dokumen HTML
• TITLE: memberi judul pada dokumen HTML
• BODY: menandai awal dan akhir isi dokumen (yang
ditampilkan)

. </p> </p> </body> </body> </html> </html> <!-- <!-... Contoh Isi Dokumen HTML <html> <html> <head> <head> <title>Homepage <title>Homepage saya</title> saya</title> </head> </head> <body> <body> <h1>Saya</h1> <h1>Saya</h1> <h2>Perkenalan</h2> <h2>Perkenalan</h2> <p>Perkenalkan. karena saya baru belajar tentang saya. nama nama saya saya . cara membuat <b><i>homepage</i></b>....akhir akhir dokumen dokumen HTML HTML --> --> .. <p>Perkenalkan. Ini Ini adalah adalah <i>homepage</i> <i>homepage</i> <b>pertama</b> <b>pertama</b> saya.. karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>. .

Daftar Tag  <html> Dokumen  <head> Header  <title> Judul dokumen  <body> Isi dokumen  <h1>…<h6> Judul paragraf  <p> Paragraf  <b>.<i>.<sub> Atribut  <br> Ganti baris  <font> Font  <li>.<ol>.<u>.<sup>.<frameset>.<ul> Enumerasi  <hr> Garis mendatar  <img> Gambar  <a> Link (kaitan/rujukan)  <table> Tabel  <!-.<div> Pengelompokan elemen dokumen .<textarea>.<select> Komponen isian pada formulir  <map> Link berdasar area pada gambar  <span>.--> Komentar  <frame>.<iframe> Frame (bingkai)  <form> Formulir isian  <input>.

6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1>Judul <h1>Judul Tingkat Tingkat 1</h1> <h2>Judul <h2>Judul Tingkat 1</h1> Tingkat 2</h2> 2</h2> Judul Tingkat 1 <h3>Judul <h3>Judul Tingkat Tingkat 3</h3> 3</h3> <h4>Judul <h4>Judul Tingkat Tingkat 4</h4> 4</h4> Judul Tingkat 2 <h5>Judul <h5>Judul Tingkat Tingkat 5</h5> 5</h5> <h6>Judul Judul Tingkat 3 <h6>Judul Tingkat Tingkat 6</h6> 6</h6> Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 .Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1.3.2.4.5.

sehingga semakin lama dilihat. saya. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p> <p> Ini adalah homepage pertama saya. karena Ini Ini adalah adalah homepage homepage pertama pertama saya baru belajar tentang cara membuat saya. oleh karena itu tampilannya pengembangan. </p> </p> Homepage ini masih dalam tahap <p>Homepage <p>Homepage ini ini masih masih dalam dalam tahap tahap pengembangan.</p><p>Saya sederhana. oleh karena itu pengembangan.</p> semakin menarik untuk dilihat. ini. sederhana. .</p> dilihat. karena saya baru belajar karena saya baru belajar tentang cara membuat homepage. Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. homepage. oleh karena itu tampilannya tampilannya masih masih terlalu terlalu masih terlalu sederhana. tentang cara membuat homepage.</p><p>Saya akan akan berusaha untuk terus memperbaiki berusaha untuk terus memperbaiki homepage Saya akan berusaha untuk terus memperbaiki homepage saya saya ini. sehingga sehingga semakin semakin lama semakin menarik lama semakin menarik untuk untuk homepage saya ini.

<u>garis <u>garis bawah</u>. garis bawah. bawah</u>. <i>miring</i></b>. dan kombinasi di tengah huruf normal . dan/atau digarisbawahi. <b>tebal</b>. <i>miring</i>. Underline) <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal. tebal miring. Italic.Tag Atribut 1 (Bold. dan dan <b><i><u>kombinasi</u></i></b> <b><i><u>kombinasi</u></i></b> di di tengah tengah huruf huruf normal</p> normal</p> Kata dapat dicetak tebal. <i>miring</i>. miring. <p>Kata <p>Kata dapat dapat dicetak dicetak <b>tebal</b>. <b>tebal <b>tebal <i>miring</i></b>. miring.

Tag Atribut 2 (Superscript. <p>(x<sub>1</sub> <p>(x<sub>1</sub> ++ x<sub>2</sub>)<sup>2</sup> x<sub>2</sub>)<sup>2</sup> == x<sub>1</sub><sup>2</sup> x<sub>1</sub><sup>2</sup> ++ x<sub>2</sub><sup>2</sup> x<sub>2</sub><sup>2</sup> ++ 2x<sub>1</sub>x<sub>2</sub></p> 2x<sub>1</sub>x<sub>2</sub></p> <p>2H<sub>2</sub> <p>2H<sub>2</sub> ++ O<sub>2</sub> O<sub>2</sub> == 22 H<sub>2</sub>O H<sub>2</sub>O (x1 + x2)2 = x12 + x22 + 2x1x2 2H2 + O2 = 2 H2O . biasanya untuk rumus matematika atau kimia. Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah.

. Ini adalah adalah<br adalah<br />homepage />homepage pertama pertama homepage pertama saya.<br />/> Perkenalkan.</p> sederhana.</p> . <p>Homepage <p>Homepage ini ini masih masih dalam dalam Homepage ini masih dalam tahap pengembangan.. nama saya . Ini nama saya .<br /> karena saya baru /> karena saya baru belajar tentang cara<br /> karena saya baru belajar tentang cara belajar tentang cara<br /> membuat membuat homepage. terlalu sederhana. Bentuk penulisan lain yang dianjurkan (XML style) : <br /> Ganti baris <p>Perkenalkan.<br saya.. oleh oleh karena itu tampilannya masih terlalu Paragraf karena karena itu itu tampilannya tampilannya masih masih terlalu sederhana.</p> homepage. Paragraf saya...Tag Ganti Baris (Break line) <br> Untuk pindah ke baris berikutnya. oleh tahap pengembangan. tahap pengembangan..<br <p>Perkenalkan..</p> membuat homepage.... Ini nama saya ...

4.</font> <font size="5">lima. 7 (ukuran huruf) m = -2. atau warna tertentu. +3. +4 (ukuran huruf) Ukuran Ukuran <font <font size="1">satu.</font> <font size="3">tiga.</font> size="4">empat. -1. tiga.</font> <font <font size="2">dua. tujuh <font size="7">tujuh</font> Ukuran satu.</font> size="2">dua. 3. 2.</font> size="1">satu. dua. 5. . Tag : font Parameter : size.</font> <font size="5">lima. color Ukura <font size="n"> kalimat </font> <font size="m"> kalimat </font> n n = 1. +1. Tag Font (size) Memformat suatu bagian kalimat dengan ukuran. face. 6.</font> size="6">enam. jenis huruf.</font> <font <font size="4">empat.</font> <font size="7">tujuh</font> enam. empat.</font> <font size="3">tiga. +0. +2.</font> <font <font size="6">enam. lima.

dll. Tag Font (face) Memformat suatu bagian kalimat dengan ukuran. <font <font face="Times face="Times New New Roman">Homepage Roman">Homepage ini ini masih masih dalam dalam tahap tahap pengembangan</font><br pengembangan</font><br /> /> <font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br <font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br /> /> <font <font face="Courier face="Courier New">Homepage New">Homepage ini ini masih masih dalam dalam tahap tahap pengembangan</font><br pengembangan</font><br /> /> <font face="Verdana">Homepage ini masih dalam tahap pengembangan</font> <font face="Verdana">Homepage ini masih dalam tahap pengembangan</font> Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan . face. Arial. Courier New. Tag : font Parameter : size. jenis huruf. Verdana. atau warna tertentu. color Jenis <font face="nama font"> kalimat </font> huruf nama font = Times New Roman.

face. FF (intensitas warna merah dalam heksadesimal) GG = 00 . FF (intensitas warna biru dalam heksadesimal) <b><font <b><font color="#FF0000">Red</font><br color="#FF0000">Red</font><br />/> Red <font color="#800000">Maroon</font><br <font color="#800000">Maroon</font><br />/> Maroon <font <font color="#00FF00">Lime</font><br color="#00FF00">Lime</font><br /> /> Lime <font <font color="#008000">Green</font><br /> color="#008000">Green</font><br /> <font color="#0000FF">Blue</font><br /> Green <font color="#0000FF">Blue</font><br /> <font Blue <font color="#000080">Navy</font><br color="#000080">Navy</font><br /> /> <font <font color="#FFFF00">Yellow</font><br /> color="#FFFF00">Yellow</font><br /> Navy <font <font color="#FF00FF">Fuchsia</font><br /> color="#FF00FF">Fuchsia</font><br /> Yellow <font color="#00FFFF">Aqua</font></b> <font color="#00FFFF">Aqua</font></b> Fuschia Aqua .. Tag Font (color) Memformat suatu bagian kalimat dengan ukuran. Tag : font Parameter : size.. atau warna tertentu.. color Warna <font color="#RRGGBB"> kalimat </font> RR = 00 . jenis huruf. FF (intensitas warna hijau dalam heksadesimal) BB = 00 .

apitlah dengan tag <ol> </ol> Ada Ada beberapa beberapa sektor sektor potensial: potensial: Ada beberapa sektor potensial: <li>Pariwisata</li> <li>Pariwisata</li>  Pariwisata <li>Seni</li> <li>Seni</li>  Seni <li>Budaya</li><br <li>Budaya</li><br /> />  Budaya Sektor Sektor tersebut merupakan . Ordered List) <li>item</li> Untuk menandai suatu item dari daftar (enumerasi). Untuk menomori enumerasi dengan nomor urut (1... tersebut merupakan .. .. Losmen <li>Hotel</li> <li>Hotel</li> Losmen merupakan tempat penginapan <ul> <ul> yang berskala kecil <li>Hotel <li>Hotel melati</li> <li>Hotel melati</li> berbintang</li> 2.. <p>Fasilitas Sektor tersebut merupakan … <p>Fasilitas penginapan penginapan didi Indonesia: Indonesia: <ol> <ol> <li>Losmen</li><br Fasilitas penginapan di Indonesia: <li>Losmen</li><br /> /> Losmen Losmen merupakan tempat merupakan tempat penginapan penginapan yang berskala kecil yang berskala kecil 1. Unordered List... Perkembangan dalam .Tag Enumerasi (List.3).. Hotel <li>Hotel berbintang</li> o Hotel melati </ul> </ul> </ol> o Hotel berbintang </ol> Perkembangan Perkembangan dalam dalam ..2. . diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat..

sederhana.Tag Garis Mendatar (Horizontal Line) <hr> membentuk garis pemisah mendatar. pengembangan. karena saya saya. oleh karena itu tampilannya masih terlalu sederhana.<hr /> Homepage ini masih dalam Homepage ini masih dalam tahap tahap pengembangan. membuat membuat homepage. nama saya .. saya. Ini adalah Ini Ini adalah adalah homepage homepage pertama pertama homepage pertama saya... Perkenalkan. . .. Bentuk penulisan lain yang dianjurkan (XML style) : <hr /> Perkenalkan.. karena karena saya saya baru baru belajar baru belajar tentang cara membuat belajar tentang tentang cara cara homepage. masih masih terlalu terlalu sederhana.<hr /> homepage. nama nama saya saya . Perkenalkan. oleh oleh Homepage ini masih dalam tahap karena karena itu itu tampilannya tampilannya pengembangan..

nama saya . Bentuk penulisan lain yang dianjurkan (XML style) : <img src="NamaFileGambar" /> <img <img src="cover.jpg" align="left" align="left" /> /> Perkenalkan. memperbaiki homepage saya ini.gif" alt="Logo" alt="Logo" /> sederhana.Tag Gambar (Image) <img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai ekstensi . menarik untuk dilihat. oleh karena itu oleh karena itu tampilannya masih terlalu tampilannya masih terlalu <img<img src="logo. saya. homepage.GIF. sehingga semakin lama semakin untuk untuk dilihat. karena saya homepage homepage pertama pertama saya... /> masih terlalu sederhana.JPG. Ini adalah homepage pertama saya. Saya akan berusaha untuk Saya akan berusaha untuk berusaha untuk terus memperbaiki homepage terus terus memperbaiki homepage saya ini.gif" src="logo. Homepage ini masih dalam tahap homepage. Ini adalah Perkenalkan.jpg" src="cover. dilihat. Ini adalah Perkenalkan.PNG. nama saya . oleh karena itu tampilannya pengembangan. karena karena saya baru belajar tentang cara saya membuat baru belajar tentang cara membuat baru belajar tentang cara membuat homepage. atau .. Untuk menampilkan sebuah file gambar. . Saya akan sederhana. sehingga semakin lama semakin menarik sehingga semakin lama semakin menarik saya ini. nama saya . . Homepage Homepage ini ini masih masih dalam dalam tahap tahap pengembangan.. pengembangan...

Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td> <table <table border="1"> border="1"> <tr> <tr> <td>aaa</td> <td>aaa</td> <td>bbb</td> <td>bbb</td> <td>ccc</td> <td>ccc</td> </tr> </tr> <tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> <td>ddd</td><td>eee</td><td>fff</td> </tr> </tr> </table> </table> .data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag Tabel (Table) .

layout Untuk menata letak (layout) isi dokumen <table <table border="1" border="1" width="500"> width="500"> <tr> <tr> <td>Header <td>Header kiri</td> kiri</td> <td <td align="center" width="50%">Header align="center" width="50%">Header tengah</td> tengah</td> <td align="right">Header kanan</td> <td align="right">Header kanan</td> </tr> </tr> <tr> <tr> <td <td valign="top" valign="top" rowspan="2">Menu rowspan="2">Menu kiri</td> kiri</td> <td <td align="center" colspan="2" height="200">Bagian Isi</td> align="center" colspan="2" height="200">Bagian Isi</td> </tr> </tr> <tr> <tr> <td <td align="center">Footer align="center">Footer tengah</td> tengah</td> <td align="right">Footer kanan</td> <td align="right">Footer kanan</td> </tr> </tr> </table> </table> . Tag Tabel (Table) .

Desain/Layout Halaman Logo Navigasi Navigasi Logo Navigasi Navigasi Navigasi .

html#bawah">bagian bawah pada halaman selanjutnya</a>.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagian />Ini bagian tengah.<br detik.com.html#bawah">bagian bawah pada halaman selanjutnya</a>. Saya ingin menuju ke <a href="hal2.html <a <a href="http://www.<br /><a name="#akhir">Ini bagian akhir.com"><img src="gambar.<br <a href="hal2. Saya Saya ingin ingin langsung langsung menuju ke <a href="#akhir">bagian akhir</a>.<br /> /> hal1. Tag Link (Anchor) <a href="Link">Kata yang di-click</a> <a name="#Acuan">Kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Saya ingin menuju ke menuju ke <a href="#akhir">bagian akhir</a>. Saya Saya ingin ingin melihat melihat <a <a href="hal2.html">halaman selanjutnya</a>.detik.gif" src="gambar.</a> .gif" /></a> /></a> Homepage Homepage detik.html">halaman href="hal2.</a> akhir.com"><img href="http://www. selanjutnya</a>.com.detik.

Struktur Link .

ukuran.dst (atau frameset yang lain) <noframes> bagian ini ditampilkan jika browser tidak mendukung frame </noframes> </frameset> </html> ..frame & frameset  Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan  Setiap dokumen ditampilkan dalam sebuah frame  Sebuah frameset menentukan tata letak. Dokumen tersebut tidak mempunyai isi dokumen (tidak ada <body> </body>)  Skema <html> dasar dokumen frameset : <head> <title>Judul dokumen</title> </head> <frameset> <frame src="namafile1"> <frame src="namafile2"> .. dan banyaknya frame yang akan ditampilkan  Di dalam frameset boleh ada frameset lain (beranak)  Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset.

html" name="tiga" frameborder="0"> <frame src="page4.43%.<html> <head> <title>Document Frameset</title> Contoh Dokumen Frameset </head> <frameset cols="33%.html" name="satu" scrolling="no" frameborder="0"> <frame src="page2.html" name="dua" scrolling="yes" noresize> </frameset> <frame src="page3.23%" frameborder="1"> <frameset rows="*.html">Halaman 1</a></li> <li><a href="page2.html" name="empat" frameborder="1"> <noframes> Ada 4 halaman : <ol> <li><a href="page1.200"> <frame src="page1.html">Halaman 2</a></li> <li><a href="page3.html">Halaman 3</a></li> <li><a href="page4.html">Halaman 4</a></li> </ol> </noframes> </frameset> </html> .

iframe (inline frame)  Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain (anak)  Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe  Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen  Skema dasar dokumen dengan iframe : <html> <head> <title>Judul dokumen</title> </head> <body> …isi dokumen… <iframe src="namafile"> bagian ini ditampilkan jika browser tidak mendukung frame </iframe> …isi dokumen… </body> </html> .

dan aku sangat menikmati saat-saat itu.html' frameborder='0'> <a href="smp.html">Kisah SMP</a> </iframe> &nbsp. </body> </html> .<p> <iframe width='200' height='179' src='sd.html">Kisah SMU</a> </iframe> <p>Semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku. <iframe width='200' height='179' src='smp. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah.html">Kisah SD</a> </iframe> &nbsp.html' scrolling='no'> <a href="smu.html'> <a href="sd. Inilah sebagian kisah-kisahku di sekolah.<html> <head> <title>Kisah Sekolah</title> Contoh inline frame </head> <body> <h1>Kisah-kisah di sekolah</h1> Masa sekolah adalah masa yang menyenangkan bagiku. <iframe width='200' height='179' src='smu.

memilih bahasa.form  Sebuah dokumen interaktif dapat menangani input dari user  Analoginya : bahwa dokumen adalah sebuah formulir isian  Sebuah dokumen dapat mengandung satu atau beberapa form  Setiap form mewakili sebuah task spesifik (login. mengisi biodata.php"> <label for="nama">Ketikkan nama Anda:</label><br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim"> </form> . dll)  Setiap form dapat menghimpun satu atau beberapa elemen input  Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input  Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit)  Skema dasar dokumen form : <form method="POST" action="namaprogram"> bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian dengan susunan sejumlah elemen input berbagai jenis </form>  Contoh sebuah form sederhana untuk meminta nama user : <form method="POST" action="proses.

<select></select>  Pilihan majemuk (multiple selections) <select multiple></select>  Centang (on/off) <input type="checkbox">  Data bawaan/tersembunyi (hidden) <input type="hidden">  File <input type="file">  Koordinat 2D dalam sebuah bidang gambar <input type="image">  Aksi user melalui penekanan tombol <input type="submit">. <input type="reset">. <input type="button">.Karakteristik data input  Teks satu baris (single-line text) <input type="text">  Teks banyak baris (multi-line text) <textarea></textarea>  Teks rahasia (password) <input type="password">  Pilihan tunggal (single selection) <input type="radio">. <button></button> .

image. reset. hidden. radio. file name : identifier untuk sisi server id : identifier untuk sisi browser value : nilai default disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)  <input type="[text|password]" name="nama" readonly size="m" maxlength="n"> readonly : jika disebutkan maka elemen tidak bisa diubah nilainya size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS) maxlength : banyaknya karakter maksimal yang dapat dimasukkan user  <input type="[radio|checkbox]" name="nama" checked> checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih  <input type="image" src="gambar" name="nama" alt="alternatif"> src : nama file gambar alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar . submit. button. checkbox. password. Tag input  <input type="jenis" name="nama" id="id" value="nilai" disabled> type : text.

button  <textarea name="nama" rows="b" cols="k">nilai</textarea> nilai : nilai default rows : banyaknya baris yang ditampilkan (tinggi) cols : banyaknya kolom/karakter yang ditampilkan (lebar)  <select name="nama" multiple size="r"> <option value="nilai1" selected>teks1</option> <option value="nilai2">teks2</option> … </select> multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl) size : banyaknya baris pilihan yang ditampilkan (default=1) selected : jika disebutkan maka defaultnya dalam keadaan terpilih  <button type="jenis" name="name" value="nilai"> tampilan </button> type : submit.Tag textarea. button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol . reset. select.

<form method="POST" action="proses.php"> Silahkan isi data Anda <input type="hidden" name="halaman" value="1"> <table border="1"> Contoh form (1) <tr> <td><label for="nama">Nama lengkap:</label></td> <td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td> </tr> <tr> <td><label for="pass">Password:</label></td> <td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td> </tr> <tr> <td><label for="jenkel">Jenis kelamin:</label></td> <td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br> <input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td> </tr> <tr> <td><label for="alamat">Alamat:</label></td> <td><textarea rows="3" cols="30" name="alamat" id="alamat"></textarea></td> </tr> <tr> <td><label for="bayar">Sudah bayar?</label></td> <td><input type="checkbox" name="bayar" id="bayar">Sudah</td> </tr> </table> <input type="submit" value=" Kirim "> <input type="reset" value="Reset"> </form> .

<form method="POST" action="proses..gif"></button> <button type="reset">Reset <img src="tanya..</option><option value="bdg">Bandung</option> <option value="jkt">Jakarta</option><option value="sby">Surabaya</option> </select></td></tr> <tr> <td><label for="kerja">Pekerjaan:</label></td> <td><select name="kerja" id="kerja" size="4"> <option value="a">Mahasiswa</option><option value="b">Pegawai swasta</option> <option value="c">Pegawai negeri</option><option value="d">Wiraswasta</option> </select></td></tr> <tr> <td><label for="bahasa">Bahasa:</label><br>(bisa lebih dari satu)</td> <td><select name="bahasa" id="bahasa" size="4" multiple> <option value="id">Indonesia</option> <option value="en">Inggris</option> <option value="ch">Cina</option> <option value="fr">Prancis</option> </select></td></tr> <tr> <td>Hobi:<br>(bisa lebih dari satu)</td> <td><input type="checkbox" name="hobi" value="1">Berenang<br> <input type="checkbox" name="hobi" value="2">Nonton film<br> <input type="checkbox" name="hobi" value="3">Musik</td> </tr><tr> <td><label for="foto">Foto:</label></td> <td><input type="file" name="foto" id="foto" size="10"></td></tr> </table> <button type="submit">Kirim <img src="smiley.gif"></button> </form> .php" enctype="multipart/form-data"> <input type="hidden" name="halaman" value="2"> <table border="1"> Contoh form (2) <tr> <td><label for="kota">Kota:</label></td> <td><select name="kota" id="kota"> <option value="">pilih kota.

php"> <table border="1"> <tr> <td><label for="kode">Kode:</label></td> <td><input type="text" name="kode" id="kode" maxlength="3" size="3"></td> </tr> <tr> <td><label for="jenis">Jenis:</label></td> <td><select name="jenis" id="jenis" size="4"> <option value="pat">Kapal patroli</option> <option value="per">Kapal perusak</option> <option value="pud">Pangkalan udara</option> <option value="mar">Markas</option> <option value="log">Logistik</option> </select></td> <tr> <td colspan="2">Tunjuk lokasi penempatan :<br> <input type="image" src="peta1. Contoh form (3) <form method="POST" action="proses.gif"></td> </tr> </table> </form> .

y3.Link pada bidang gambar  Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar  Skema : <img src="gambar" usemap="#peta"> <map name="peta"> <area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1"> <area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2"> .y2 rect : x1.x2.…. rect.x2.y1.xn.r poly : x1.y1.y1.x2.x3.. dengan format : default : x1. </map> src : nama file gambar usemap : nama definisi peta yang digunakan shape : default. circle..y2 circle : x.y2.y. poly coords : koordinat.yn href : URL yang dituju bila area di-klik .

103.html" alt="Dian Sastro"> <area shape="rect" coords="314.jpg" usemap="#aadc" border="0"> <map name="aadc"> <area shape="circle" coords="131.273.273.30" href="sissy.137.161.172.129" href="adinia.127.86.239.259.210.html" alt="Titi Kamal"> <area shape="rect" coords="172.295.85.224.170" href="ladya" alt="Ladya Cheryl"> <area shape="circle" coords="387.311.105.html" alt="Sissy Priscillia"> <area shape="default" nohref> </map> Klik pada wajah untuk melihat biodata .198.134.248.213.306.308.86" href="dian.219.224. Contoh penggunaan map Klik pada wajah untuk melihat biodata<br> <img src="aadc.html" alt="Adinia"> <area shape="poly" coords="300.238.82.355.52.37" href="titi.

tabel.nama {font: bold 20 Arial} . Tubagus Ismail XI/5</span> </div> <div id="mhs02" class="mhs"> <span class="nama">Dewi Purnama</span><br> <span class="alamat">Jl. Cisitu Lama 24</span> </div> <style type="text/css"> . flow) : <span> </span>  block (blok) : <div> </div>  <span> dan <div> biasanya digunakan dengan parameter id dan class  Struktur lojik ini dapat digunakan untuk :  mempermudah menginterpretasi isi dokumen  memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS  Contoh : <div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> <span class="alamat">Jl.Pengelompokan elemen dokumen  Beberapa elemen dokumen (teks. dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen  Pengelompokkan ada dua jenis :  inline (alur. margin-bottom: 10.alamat {font-style: italic} </style> <div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> . padding: 10} .. ..mhs {border: black solid 1. paragraf. gambar.