latihan form..  

Senin, 07 Desember 2009


nahhh...
dalam entri kali ini sayah mw ngebahas sedikit tentang gmna cara'a buat form dengan html.. caranya sii cukup gampang.. yha siapin ja lahh pc,tempat yg nyaman,n klo bisa sii cemilan.. hehehe..

okeyz.. mari kita masuk ke tahap awal...
membuat form itu sebenarnya adalah perluasan dari tabel..
membuat form ini bisa dilakukan di aplikasi notepad ataupun dreamweaver ataupun yang lainnya..
lansung ajja gw kasii contoh form'nya...
html'nya dlu ya..

<html>
<head>
<title>Data siswa</title>
</head>
<body>
<br>
<br>
<table border="1">
<tr>
<td colspan="2" align="center" width="500"><font size="16">Data Siswa</font></td>
</tr>
<tr>
<td align="left" width="100">Nama lengkap</td>
<td align="left"><input type="text" name="teks1"></td>
</tr>
<tr>
<td align="left" width="100">Nama panggilan</td>
<td align="left"><input type="text" name="teks2"></td>
</tr>
<tr>
<td align="left" width="100">Agama</td>
<td align="left"><select name="s1"><option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>katolik</option>
<option>Protestan</option>
</tr>
<tr>
<td align="left" width="100">Jenis Kelamin</td>
<td align="left"><select name="s1"><option>laki-laki</option>
<option>Perempuan</option>
<tr>
<td align="left" width="100">Alamat</td>
<td align="left"><textarea name="alamat" rows="8" cols="50">Jangan lupa isikan alamat anda di kotak ini !!!
</textarea>
</tr>
<tr>
<td colspan="2" align="center" width="500"><font size="16">®®®</font></td>
</tr>
<tr>
<td colspan="2" align="center" width="500"><font size="11">©©©</font></td>
</tr>
<tr>
<td align="left" width="100">Hobby</td>
<td align="left"><input type="radio" name="r1">Membaca
<input type="radio" name="r1">Menulis
<input type="radio" name="r1">Menyanyi
</tr>
<tr>
<td align="left" width="100"><font size="2">Makanan Favorit</td>
<td align="left"><input type="checkbox" name="c1">Soto
<input type="checkbox" name="c1">Bakso
<input type="checkbox" name="c1">Nasi Goreng
</tr>
<tr>
<td align="left" width="100"><input type="submit" value="SUBMIT"></td>
<td align="center"><input type="reset" value="RESET"></td>
</tr>
</body>
</html>

nahh hasilnya bkal jadi kya gni.. :
Photobucket

pasti ngeliat html'a kalian smua pada pusing dahh..
hahaha sama saya juga...

yha selamat mencoba ajja dehh... ^_^V


AddThis Social Bookmark Button


Tugas Tabel 1sampai 5  

TABEL KE-1

<em>Ampersands & angle brackets need to be encoded.</em><html>
<head>
<title> Latihan table </title>
</head>
<body>
<table width="421" height="81" border="1">
<tr>
<td align="center"> 1 </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
</tr>
<td align="center"> 4 </td>
<td align="center"> 5 </td>
<td align="center"> 6 </td>
</tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
</table>
</body>
</html>

Caranya diatas, contohnya dibawah::









TABEL KE-2

<html>
<head>
<title> Latihan table </title>
</head>
<body>
<table width="359" height="79" border="1">
<tr>
<td align="center"> 1 </td>
<td colspan="2" align="center"> 2 </td>
<tr>
<td align="center"> 3 </td>
<td align="center"> 4 </td>
<td align="center"> 5 </td>
<tr>
<td colspan="2" align="center"> 6 </td>
<td align="center"> 7 </td>
</table>
</body>
</html>

Caranya diatas ya..contohnya dibawah::








TABEL KE-3

<html>
<head>
<title> Latihan table </title>
</head>
<body>
<table width="452" height="77" border="1">
<tr>
<td colspan="3" align="center"> 1 </td>
<tr>
<td colspan="2" align="center"> 2 </td>
<td align="center"> 3 </td>
<tr>
<td align="center"> 4 </td>
<td align="center"> 5 </td>
<td align="center"> 6 </td>
</table>
</body>
</html>

Caranya diatas terus contohnya dibawah ini::









TABEL KE-4

&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Latihan table &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table width=&quot;265&quot; height=&quot;84&quot; border=&quot;1&quot;&gt;
&lt;tr&gt;
&lt;td width=&quot;85&quot; rowspan=&quot;2&quot;align=&quot;center&quot;&gt; 1 &lt;/td&gt; &lt;td width=&quot;164&quot; align=&quot;center&quot;&gt; 2 &lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=&quot;center&quot;&gt; 3 &lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;<html>
<head>
<title> Latihan table </title>
</head>
<body>
<table width="265" height="84" border="1">
<tr>
<td width="85" rowspan="2"align="center"> 1 </td> <td width="164" align="center"> 2 </td></tr>
<tr>
<td align="center"> 3 </td></tr>
</table>
</body>
</html>


Caranya diatas lagi, contohnya dibawah yaa::










TABEL KE-5

<html>
<head>
<title> Latihan table </title>
</head>
<body>
<table width="222" height="85" border="1">
<tr>
<td width="131" align="center"> 1 </td> <td width="105" rowspan="2" align="center"> 2 </td></tr>
<tr>
<td align="center"> 3 </td></tr>
</table>
</body>
</html>

Caranya diatas contohnya dibawah lagi::

AddThis Social Bookmark Button


TUGAS HTML 1 DAN 2  


gambar di atas caranya di bawah ini::

<html>
<head><title>LETAKAN JUDUL DISINI</title></head>
<body>
Ini baris pertama <br><br>
Dan ini baris ke tiga <br>
Kalau ini baris ke empat <br>
</body>
</html>

TUGAS KE-2

<html>
<head>
<title> LATIHAN HTML </title>
</head>
<body bgcolor="#FFFFFF">
<p align="left">
Paragraf ini rata kiri <br>
Paragraf ini rata kiri <br>
Paragraf ini rata kiri <br>
Paragraf ini rata kiri <br>
<p>
br digunakan untuk ganti baris <br><br>
<b> Kalimat ini akan dicetak bold </b> <br>
<i> Kalimat ini akan dicetak Italic </i> <br>
<b><i> Kalimat ini akan dicetak bold dan italic </i></b>

<hr width="1000"><br>
Perintah ini dibuat untuk membuat garis

</body>
</html>

CONTOHNYA DI HANDAP::

AddThis Social Bookmark Button


 

Design by Amanda @ Blogger Buster