1.      PERTEMUAN KETIGA ( III )
ü  Materi yang akan diuji :
1.                   Memahami tag <form>

Layout à letak suatu informasi di halaman web
Tabel dapat digunakan sebagai salah satu alat untuk mendesain web
Ilustrasi tabel:
a.       Membuat form login

LOGIN
User
:
________________
Password
:
************

CANCEL
 

LOGIN
 


1.      Jika kita ingin membuat from diatas maka kita terlebih dahulu membuat tabel.












Kode :
   <HTML>
  <head>
    <title>prakt 2</title>
  </head>
 <body>
<table border=1px>
  <tr>
     <td>11</td>
     <td>12</td>
     <td>13</td>
  </tr>
   <tr>
     <td>21</td>
     <td>22</td>
     <td>23</td>
  </tr>
  <tr>
     <td>31</td>
     <td>32</td>
     <td>33</td>
  </tr>
  <tr>
     <td>41</td>
     <td>42</td>
     <td>43</td>
  </tr>
</table>
 </body>
   </HTML>

Gambar1.2

Dari gambar diata maka dapat kita ketikkan kode dibawah ini:

  <html>
<head>
<title> pertemuan 3 </title>
</head>
<body bgcolor=green topmargin="200xp">
<form>
<table border=1px width=20% align=center>
<tr  bgcolor=white>
<td colspan=3 align=center bgcolor="red">LOGIN</td>
</tr>
<tr>
<td>User</td>
<td><input type=text size=25 name=txtuser></td> 
</tr>
<tr>
<td width=35%>password</td>
<td><input type=Password size=25 name=txtpass></td>
</tr>
<tr>
<td colspan=3 align=center><input type=submit value=LOGIN>
                           <input type=reset value=CANCEL> </td>

</tr>
</table>
</form>
<td> </td>
</body>
  </html>






Ø  Latihan 1.
1.      Aktifkan notepad
2.      Ketikkan struktur HTML
3.      Rancang tabel 4 baris 2kolom
4.      Simpan kode dengan nama prak3.html
5.      Aktifkan web browser
6.      Buka file prak3.html dari web browser
Soal :
Buatlah kode html untuk desain berikut ini:





LOGIN
User
:
________________
Password
:
************

CANCEL
 

LOGIN
 







1.      Buka jendela baru di notepad
2.      Ketikkan struktur html
o   Rancanglah tabel terluar dengan ukuran 3 baris 2 kolom










Kode:
<html>
<head>
     <title>lat_2</title>
</head>
<body >
<table border=3xp >
     <tr >
           <td> 12 </td>
           <td> 13 </td>
     </tr>
     <tr>
           <td> 21 </td>
           <td> 22 </td>
     <tr>
           <td> 31 </td>
           <td> 32 </td>
     </tr>
</table>
</body>
</html>

o   dan untuk membuat seperti ini





LOGIN
User
:
________________
Password
:
************

CANCEL
 

LOGIN
 






Maka kodenya:
<html>
<head>
     <title>lat_2</title>
</head>
<body >
<table align=center border=3xp width="50%" height="50%">
     <tr >
           <td> 1.1 </td>
           <td> 1.2 </td>
     </tr>
     <tr>
           <td > 2.1 </td>
           <td
<form>
<table border=1px width=20% align=center>
<tr  bgcolor=white>
<td colspan=3 align=center bgcolor="red">LOGIN</td>
</tr>
<tr>
<td>User</td>
<td><input type=text size=25 name=txtuser></td> 
</tr>
<tr>
<td width=35%>password</td>
<td><input type=Password size=25 name=txtpass></td>
</tr>
<tr>
<td colspan=3 align=center><input type=submit value=LOGIN>
                           <input type=reset value=CANCEL> </td>

</tr>
</table>
</form>
     </tr>
     <tr>
           <td colspan=2> 3.1 </td>
           </tr>
</table>

</body>
</html>
  Ø  dari kode diatas maka hasilnya seperti pada gambar dibawah ini.