Menu

Wednesday 5 July 2017

Desain halaman web dengan konsep tabel

Nih materi lanjutlah dari belajar bahasa pemrograman web HTML. Silakan agan-agan kembangkan script-script dibawah ini :

- Top Index 

Berikut adalah listing program untuk membuat layout “top index” halaman
web dengan elemen table.

<!DOCTYPE html>
<head>
<title>Top index</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1" 
align="center">
    <tr>
      <td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font
size="+5">Banner
        atau iklan</font></strong></td>
    </tr>
    <tr>
      <td height="27" align="center"
bgcolor="#FFCCCC"><font color="#FF0000">Daftar
        isi atau navigasi </font></td>
    </tr>
    <tr>
      <td height="457" align="center" bgcolor="#FF66CC">
        <p>Body atau contents(isi)</p>
        <p><font color="#006600">Body atau
contents(isi)</font></p>
        <p><font color="#CC0000">Body atau
contents(isi)</font></p>
        <p><font color="#FFFF00">Body atau
contents(isi)</font></p>
        <p><font color="#FF6633">Body atau
contents(isi)</font></p></td>
    </tr>
    <tr>
      <td height="23" align="center"
bgcolor="#CCFF99"><font color="#9966CC">Info
        tambahan atau lain-lain </font></td>
    </tr>
  </table>
</form>
</body>
</html>

- Bottom Index 

Berikut adalah listing program untuk membuat layout “bottom index” halaman
web dengan elemen table.

<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1" 
align="center">
    <tr>       <td height="23" align="center" bordercolor="#FFFFFF"
bgcolor="#FFFF00"><strong><font size="+5">Banner 
        / Judul</font></strong></td>
    </tr>
        <tr>
      <td height="457" align="center" bgcolor="#CCCCCC"> 
        <p>Body atau contents(isi)</p>
        <p><font color="#006600">Body atau
contents(isi)</font></p>
        <p><font color="#CC0000">Body atau
contents(isi)</font></p>
        <p><font color="#FFFF00">Body atau
contents(isi)</font></p>
        <p><font color="#990033">Body atau
contents(isi)</font></p></td>
    </tr>
    <tr>
      <td height="23" align="center"
bgcolor="#CCFF99"><font color="#FF0000"><strong><font
size="+2">Daftar 
        isi atau navigasi </font></strong></font><font
color="#9966CC" size="+2">&nbsp;</font></td>
    </tr>
  </table> 
</body>
</html>

- Left Index


Berikut adalah listing program untuk membuat layout “left  index” halaman
web dengan elemen table.

<!DOCTYPE html >
<head>
<title>Left Colour</title>
</head>
</form> 
</body>
</html>

- Left Index 

Berikut adalah listing program untuk membuat layout “left  index” halaman
web dengan elemen table.

<!DOCTYPE html >
<head>
<title>Left Colour</title>
</head> 
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="447" border="1"
align="center" cellspacing="1">
    <tr>
      <th width="160" rowspan="3" valign="top"
bgcolor="#993366"><p>Home</p>
      <p>Profile</p>
      <p>About Us</p>
      <p>Blog</p>
      <p>Contact Us</p></th>
      <th width="627" height="23" align="center"
bgcolor="#FFFF99"><strong><font color="#CCCCCC"
size="+4">Electronic 
        Shop</font></strong></th>
    </tr>
    <tr>
      <td height="176" align="center" valign="top"
bgcolor="#FFFF99"><p>&nbsp;</p>
      <p>Selamat datang di web kami, penjualan produk
online ini adalah yang pertama di kota kami. 
   kualitas dan harga dapat dipercaya langsung saja
pesan dan menjadi langganan kami.  

  </p></td>
    </tr>
    <tr>
      <td height="30" align="center" bgcolor="#FFFF99">
<font size="+2">profilkami.com</font></td>
    </tr>
  </table>
</form>
</body>
</html>

- Layout Split 

Berikut adalah listing program untuk membuat layout “split” halaman web
dengan elemen table.

 <!DOCTYPE html >
<head>
<title>left </title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="512" border="1"
align="center">
    <tr>
      <td width="15%" rowspan="2" align="center"
bgcolor="#99CC99"><strong>Daftar 
        Isi </strong> </td>
      <td width="67%" height="23" align="center"
bgcolor="#FFCCFF"><font
size="+3"><strong>Banner/judul</strong></font></td>
      <td width="18%" rowspan="2" align="center"
bgcolor="#99CC99"><strong>Daftar 
        Isi </strong> </td>
    </tr>
    <tr>
      <td height="456" align="center"
bgcolor="#CCCCCC">
   <p>Body atau contents(isi)</p>
        <p><font color="#006600">Body atau 

contents(isi)</font></p>
        <p><font color="#CC0000">Body atau
contents(isi)</font></p>
        <p><font color="#FFFF00">Body atau
contents(isi)</font></p>
        <p><font color="#990033">Body atau
contents(isi)</font></p>
   </td>
    </tr>
    <tr bgcolor="#FF99FF"> 
      <td height="23" colspan="3" align="center">Lainlain
</td>

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

- Alternating Index 

Berikut adalah listing program untuk membuat layout “alternating index”
halaman web dengan elemen table.

<!DOCTYPE html >
<head>
<title>alternating</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="738" border="1"
align="center">
    <tr>
      <td height="248" align="center" 

bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar 
        isi</strong></font></td>
      <td align="center" bgcolor="#FFFFCC"><font
color="#000066" size="+7"><strong><em>Gambar 
        </em> </strong></font></td>
    </tr>
    <tr>
      <td height="261" align="center"
bgcolor="#FFFF99"><font color="#CC0000"
size="+7"><strong><em>Gambar 
        </em></strong></font><font
size="+7"><em></em></font></td>
      <td align="center" bgcolor="#FF66CC"><font
size="+1"><strong>Teks/daftar 
        isi</strong></font></td>
    </tr>
    <tr bgcolor="#996666"> 
      <td height="150" colspan="2" align="center"><font
color="#FFFFFF"><strong><font size="+1">Lainlain</font></strong></font></td>

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

 
Demikianlah, silakan agan-agan coba script diatas dan lakukanlah pengembangan agar agan-agan mendapatkan perkembangan dalam belajar pemrograman web dengan HTML dan silakan agan berkomen jika agan-agan telah berhasil melakukan perkembangan terhadap script tersebut...Sampai jumpa...................
Posted by at

4 comments:

Subscribe to: Post Comments (Atom)