Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Membuat Layout dengan Tabel
Create By Widiyono, S.Kom
2
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.
3
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
4
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
5
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
6
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
7
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>
Presentasi serupa
![Pertemuan Ke-3 (HTML Lanjut [1])](/68/11998103/big_thumb.jpg "Pertemuan Ke-3 (HTML Lanjut [1])>")
