1.     PERTEMUAN KEDUA( II )
Ø  Materi yang diujikan :
1.      Memahami Tag <table>
2.      Memahami tag <a href>
3.      Memahami tag <img src>

Pertama kita mengetikkan struktur HTML
<HTML>
  <head>
    <title> </title>
  </head>
 <body>

 </body>
</HTML>
ü    Simpan kode html dengan nama pertemuan2.html

a.       TAG <TABLE> </TABLE>
ü  Tabel.1


Tabel 1 Baris 1 Kolom
 

Kode untuk membuat tabel 1 Baris 1 Kolom
<HTML>
  <head>
    <title>prakt 2</title>
  </head>
 <body>
<table>
  <tr>
     <td></td>
  </tr>
</table>
 </body>
</HTML>                   

Jika kita menjalankan web browser maka tampilannya akan kosong dan tandanya benar



ü  Tabel.2

Tabel 1 Baris 2 Kolom
 




Kode untuk membuat tabel 1 baris 2 kolom
.

<table>
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>
.




Tabel.3

Tabel 1 Baris 2 Kolom
 



Kode untuk membuat tabel 1 baris 2 kolom
.

<table>
  <tr>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td></td>
     <td></td>
  </tr>

</table>
.




ü  Untuk membuat tampilan google kita perlu tabel 3 baris 2 kolom






Kode :
<HTML>
  <head>
    <title>prakt 2</title>
  </head>
 <body>
<table border=1px>
  <tr>
     <td>1.1</td>
     <td>1.2</td>
  </tr>
  <tr>
     <td>2.1</td>
     <td>2.2</td>
  </tr>
</table>
 </body>
</HTML>


Jika kita ingin membuat tampilan seperti ini:
Google


Search
 
 






Kode:

<HTML>
  <head>
    <title>prakt 2</title>
  </head>
 <body bgcolor="green" >
<table border="1px"
       width="80%"
       align="center"
       height="80%"
       bgcolor="white">

<tr>
<td valign="top" align="center" colspan="6">Google
<form>
<input type=text size=60%>
<input type=submit value="search">
</form>
</td>

  <tr>
     <td>2.1</td>
     <td>2.2</td>
  </tr>
 </table>
 </body>
</HTML>

Dari kode diatas maka hasilnya menjadi seperti gambar dibawah ini:







Untuk membuat tampilan google kita mengetikkan kode seperti dibawah ini:
Kode:


<HTML>
  <head>
    <title>prakt 2</title>
  </head>
 <body bgcolor="green" >
<table border="2px"
       width="80%"
       align="center"
       height="80%"
       bgcolor="white">

<tr>
<td valign="center" align="center" colspan="5">
<font size="20px" color="blue">Google</font>
<form>
<input type=text size=50%>
<input type=submit value="Search">
</form>
</td>

<tr height="30%">
<td width="20%" align="center" >
<img src="1.jpg" >
<marquee direction=”right” behavior="alternate"><a  href=prak-1.html>praktikum-1</a>
</marquee></td>
<td width="20%" align="center" >
<img src="2.jpg" >
<marquee direction=”right” behavior="alternate"><a href=prak-2.html>praktikum-2</a>
</marquee></td>
<td width="20%" align="center" >
<img src="3.jpg" >
<marquee direction=”right” behavior="alternate"><a href=prak-3.html>praktikum-3</a>
</marquee></td>
<td width="20%" align="center" >
<img src="4.jpg" >
<marquee direction=”right” behavior="alternate"><a href=prak-4.html>praktikum-4</a>
</marquee>
</td>
<td width="20%" align="center" >
<img src="5.jpg" >
<marquee direction=”right” behavior="alternate"><a href=prak-5.html>praktikum-5</a>
</marquee>
</td>
</tr>
 </table>
 </body>
</html>