Pages

Sunday, 9 February 2014

Pertemuan WEB IV



Pertemuan : IV

MATERI :
                1.     Memahami tag <table>
                2.     Memahami tag <form>
                3.     Memahami tag <img>
                4.     Memahami tag <link>  
 
  LATIHAN 1.
   Buatlah kode HTML untuk merancang tampilan di bawah ini dengan memanfaatkan tag <table>.



 






 
JAWAB :
                1.  Aktifkan notepad
                2.   Ketikkan struktur html
                3.   Simpan kode dengan nama lat4.html
                4.   Rancanglah tabel 3 baris 2 kolom
<html>
  <head>
<title>Latihan 4</title>
   </head>
   <body>
     <table border=1px width=75% align=center>
          <tr bgcolor=red>
             <td colspan=2>11</td>
          </tr>
          <tr height=300px>
             <td width=20% bgcolor=blue>21</td>
             <td>22</td>
          </tr>
          <tr bgcolor=green>
             <td colspan=2>31</td>
          </tr>
      </table>
   </body>
</html>
             5.   Aktifkan web browser
             6.    Buka file lat4.html dari web browser

Form (Formulir)
Misalkan diketahui form pendaftaran anggota perpustakaan pada Sistem Informasi Perpustakaan Unika St. Thomas Medan Berbasis Web.
      

FORMULIR PENDAFTARAN
Nama
:
Alamat
:
Tempat/Tanggal Lahir
:
Agama
:
Fakultas
:
Program Studi
:
Foto
:
BROWSE
BATAL

DAFTAR
 


Programnya :
<html>
    <head>
        <title>Latihan 4-3</title>
    </head>
    <body>
    <form>
      <table border=0px width=80% align=center bgcolor=yellow>
           <tr>
              <td colspan=3 align=center>FORMULIR PENDAFTARAN</td>
           </tr>
           <tr>
                <td width=35%>Nama</td>
                <td width=10px>:</td>
                <td><input type=text size=30 name=txtnama></td>
           </tr>
           <tr>
                <td>Alamat</td>
                <td>:</td>
                <td><input type=text size=50 name=txtalamat></td>
           </tr>
           <tr>
                <td>Tempat/Tanggal Lahir</td>
                <td>:</td>
                <td>
                      <input type=text size=20 name=txttempat>
                      <select name=tgl>
                         <option>Tanggal</option>
                         <option>1</option><option>2</option><option>3</option>
                         <option>4</option><option>5</option><option>6</option>
                         <option>7</option><option>8</option><option>9</option>
                         <option>10</option><option>11</option><option>12</option>
                         <option>13</option><option>14</option><option>15</option>
                         <option>16</option><option>17</option><option>18</option>
                         <option>19</option><option>20</option><option>21</option>
                         <option>22</option><option>23</option><option>24</option>
                         <option>25</option><option>26</option><option>27</option>
                         <option>28</option><option>29</option><option>30</option>
                         <option>31</option>
                      </select>
                      <select name=bln>
                         <option>Bulan</option>
                         <option>1</option><option>2</option><option>3</option>
                         <option>4</option><option>5</option><option>6</option>
                         <option>7</option><option>8</option><option>9</option>
                         <option>10</option><option>11</option><option>12</option>
                      </select>
                      <select name=thn>
                         <option>Tahun</option>
                         <option>1988</option><option>1989</option><option>1990</option>
                         <option>1991</option><option>1992</option><option>1993</option>
                         <option>1994</option><option>1995</option><option>1996</option>
                         <option>1997</option><option>1998</option><option>1999</option>
                      </select>
                 </td>
           </tr>
           <tr>
                <td>Agama</td>
                <td>:</td>
                <td>
                     <select name=agama>
                       <option>Agama</option><option>Kristen</option><option>Katolik</option>
                       <option>Islam</option><option>Hindu</option><option>Buddha</option>
                       <option>Konghucu</option><option>Lainnya</option>
                     </select>
                </td>            
           </tr>
           <tr>
                <td>Fakultas</td>
                <td>:</td>
                <td> 
                     <select name=fak>
                       <option>ILKOM</option><option>SASTRA</option><option>TEKNIK</option>
                       <option>HUKUM</option><option>EKONOMI</option><option>PERTANIAN</option>
                       <option>FKIP</option><option>FILSAFAT</option>
                     </select>
                 </td>
           </tr>
           <tr>
                <td>Program Studi</td>
                <td>:</td>
                <td><input type=text size=25 name=txtprodi></td>
           </tr>
           <!-- Ini Baris Ke - 8 -->
           <tr>
                <td>Foto</td>
                <td>:</td>
                <td><input type=file name=txtfoto></td>
           </tr>
           <!-- Ini Baris Ke - 9 -->
           <tr>
               <td colspan=3 align=center>
                   <input type=submit value=DAFTAR> &nbsp;
                   <input type=reset value=BATAL>
              </td>
           </tr>
      </table>
     </form>
    </body>
  </html>

OUTPUTNYA : 

 

Posted by at

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )