HTML minggu ke3

Tag Tabel ( Table) - layout

Untuk menata letak (layout)isi dokumen

<table border="1" width="500">

<tr>

<td>Header kiri</td>

<td align="center" width="50%">Header tengah</td>

<td align="right">Header kanan</td>

</tr>

<tr>

<td valign="top" rowspan="2">Menu kiri</td>

<td align="center" colspan="2" height="200">Bagian Isi</td>

</tr>

<tr>

<td align="center">Footer tengah</td>

<td align="right">Footer kanan</td>

</tr>

</table>

 

Header kiri	Header tengah	Header kanan
Menu kiri	Bagian Isi
	Footer tengah	Footer kanan

 

Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya ingin

langsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin menuju ke

<a href="hal2.html#bawah">bagian bawah pada halaman selanjutnya</a>.<br>

<a href="http://www.detik.com"><img src="gambar.gif"></a> Homepage

detik.com.<br>

 

 

 

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.

FORM

• Sebuah dokumen interaktif dapat menangani inputdari user

• Analoginya : bahwa dokumen adalah sebuah formulir isian

• Sebuah dokumen dapat mengandung satu atau beberapa form

• Setiap form mewakili sebuah taskspesifik (login, mengisi biodata, memilih bahasa, dll)

• Setiap formdapat 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.php">

<label for="nama">Ketikkan nama Anda:</label><br>

<input type="text" name="nama" id="nama"><br>

<input type="submit" value="Kirim">

</form>

 

 

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">, <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">, <button></button>

Tag input

 

• <input type="jenis" name="nama" id="id" value="nilai" disabled>

type : text, password, radio, checkbox, image, submit, reset, button, hidden

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

 

Tag textarea, select, 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, reset, button

tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol

 

Latihan 1 : Frameset Vertikal

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. Ketik baris perintah berikut ini :
   

<html> <frameset cols="30%,40%,30%">   <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html">   </frameset> </html>

1. e-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik "coba1.html" pada bagiaSimpan file di My Document sebagai "coba1.html" dengan cara klik menu Filn File name, klik tombol Save.
   
2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba1.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba1.html), lalu klik OK.
   

 

Penjelasan

Contoh latihan di atas mendemonstrasikan bagaimana cara membuat frame dengan tiga kolom vertikal masing-masing selebar 30%, 40%, dan 30% dari lebar area layar. Frame pertama berisi "frame_1.html", frame kedua berisi "frame_2.html", dan frame ketiga berisi "frame_3.html".

<------ 30% ------>

<---------- 40% ---------->

<------- 30% ------->

 

Latihan 2 : Frameset Horizontal

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. Ketik baris perintah berikut ini :
   

 

<html> <frameset rows="100,200,*">   <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html">   </frameset> </html>

 

1. Simpan file sebagai "coba2.html"
   
2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba2.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba2.html), lalu klik OK.
   

| 100 pixel |

| | 200 pixel | |

| | * pixel | |

Latihan 3 : Tag Noframes

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. Ketik baris perintah berikut ini :
   

 

<html> <frameset cols="30%,40%,30%"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html">   <noframes> <body>Web browser tidak mendukung frame!</body> </noframes>   </frameset> </html>

 

1. Simpan file sebagai "coba3.html"
   
2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba3.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba3.html), lalu klik OK.
   

Latihan 4 : Frameset Kombinasi

 

1. Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
   
2. Ketik baris perintah berikut ini :
   

 

<html> <frameset rows="150,*">   <frame src="frame_1.html">   <frameset cols="25%,75%"> <frame src="frame_2.html"> <frame src="frame_3.html"> </frameset>   </frameset> </html>

 

1. Simpan file sebagai "coba4.html"
   
2. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file "coba4.html" yang baru dibuat tadi (misalnya di C:\My Documents\coba4.html), lalu klik OK.
   

Penjelasan

Contoh latihan di atas mendemonstrasikan pembuatan frameset kombinasi. Tag <frameset> yang pertama akan membagi layar menjadi dua frame horizontal, masing-masing sebesar 150 pixel dan sisa pixel dari tinggi area layar. Kemudian tag <frameset> kedua akan membagi frame kedua (frame yang berada di bawah) menjadi dua frame vertikal, masing-masing sebesar 25% dan 75% dari lebar area layar.

 

| 150pixel |
<----- 25% ----->	< ----------------------- 75% ------------------------>

 

contoh1:

No1

<center>identitas mahasiswa<br> ---------------------------- <table widht=100% border=1> <tD> nama:<input type=text><br> nim:&nbsp&nbsp<input type=text><br> class:<input type=text><br> </tD> </table> <input type=submit value=submit /> </center>

 

No2

<center>identitas keluarga<br> ----------------------------<br> <table cellpadding=1 boarder=1> <tr> ayah:qqqqq ibu:eeeeeee kakak:lllll adik:David </tr> </table> </center>

No3

<center>identitas keluarga<br> ---------------------------- <table width=100%> <tr> <td>ayah: </td> <td>ibu:</td> <td>kakak:</td> </tr> <tr> <td> david<br> albert</td> <td> jane<br> estelle </td> </table> </center>

No4

<head> <center>LAtihan3 <table width=100% BORDER=1> <tr> <td><a href="no.1.html">MHS</a></td> <td><a href="no.2.html">KELUARGA</a></td> <td><a href="no.3.html">TEMAN</a></td> <td><a href="no.1.html">MHS</a></td><br> </tr> <tr> <td colspan=3><center>selamat datang</center></td> <td colspan=1><center>pembuat</center><marquee height=30 direction=up><center>setsuna</center></marquee></td> </tr> </table> </center> <font color="blue">sistem keluarga </head>