Membuat Layout dengan Tabel Create By Widiyono, S.Kom
Tujuan Pembelajaran: Peserta didik mempu mencontohkan pembuatan disain layout Halaman WEB Peserta didik trampil menggunakan perintah table dalam membuat desain halaman web Peserta didik trampil memodifikasi perintah table dalam membuat desain halaman web.
Top Index <!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> <td height="27" align="center" bgcolor="#FFCCCC"><font color="#FF0000">Daftar isi atau navigasi </font></td> <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> <font color="#FFFF00">Body atau contents(isi)</font></p> <p><font color="#FF6633">Body atau contents(isi)</font></p></td> <td height="23" align="center" bgcolor="#CCFF99"><font color="#9966CC">Info tambahan atau lain-lain </font></td> </table> </form> </body> </html> Top Index
Bottom Index <!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> <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> <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"> </font></td> </table> </form> Bottom Index
Left Index <!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> <td height="176" align="center" valign="top" bgcolor="#FFFF99"><p> </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> <td height="30" align="center" bgcolor="#FFFF99"> <font size="+2">profilkami.com</font></td> </table> </form> </body> </html> Left Index
Spilt <!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> <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 bgcolor="#FF99FF"> <td height="23" colspan="3" align="center">Lain-lain </td> </table> </form> </body> </html> Spilt
Alternating <!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> <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 bgcolor="#996666"> <td height="150" colspan="2" align="center"><font color="#FFFFFF"><strong><font size="+1">Lain-lain</font></strong></font></td> </table> </form> </body>