Desain Halaman Web
Assalamualaikum wr.wb
Saya akan menunjukkan desain halaman web dengan konsep
tabel. Seperti blog sebelumnya. saya akan manampilkan coding nya terlebih dahulu
di notepad++(boleh saja pake notepad biasa). Desain halaman web kali ini lebih
menarik dari sebelumnya, saya yakin kalian pasti menyukainya.
Layout halaman web :
- 1.
Left Index
Berikut adalah listing program untuk
membuat layout “left index” halaman web dengan elemen table.
Coding :
<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="Blue"> <font color="#CCFF99"><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="#FFB6C1"><strong><<font color="006600" size="+4">Electronic
Shop</font></strong></th>
</tr>
<tr>
<td height="176" align="center" valign="top" bgcolor="#FFB6C1"><font color="#FF0000"><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>
</tr>
<tr><td width="100" height="80" align="center" valign="top" bgcolor="#CCFF99"><font color="#006600"> </p><p>BlogSitisalbiah.blogspot.com </p></td></tr>
</table>
</form>
</body>
</html>
Coding
Hasil
2.Layout Split
Berikut adalah listing program untuk
membuat layout “split” halaman web dengan elemen table.
Coding :
<!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="#CCFF99">
<strong>Daftar Isi
</strong></td>
<td width="67%"
height="23" align="center" bgcolor="#9966CC">
<font size="+3"><strong>Banner/judul</strong></font></td>
<td width="18%"
rowspan="2" align="center" bgcolor="#CCFF99">
<strong>Daftar Isi </strong>
</td>
</tr>
<tr>
<td height="456"
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="#990033">Body atau contents(isi)</font></p>
</td>
</tr>
<tr bgcolor="#FF6633">
<td height="23"
colspan="3" align="center">Lain-lain </td>
</tr>
</table>
</form>
</body>
</html>
Coding
Hasil
3.Alternating Index
Berikut adalah listing program untuk
membuat layout “alternating index” halaman web dengan elemen table.
Coding :
<!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=" #CC0000"><font
size="+1"><strong>Teks/Daftar
isi</strong></font>
</td>
<td align="center"
bgcolor="#FFFFCC"><font color="#FF66CC"
size="+7"><strong>
<strong><em>Gambar </em>
</strong></font></td>
</tr>
<tr>
<td height="261"
align="center" bgcolor="#FFFFCC"><font
color="#FF66CC" size="+7">
<strong><em>Gambar
</em></strong></font><font
size="+7"><em></em></font></td>
<td align="center"
bgcolor="#CC0000"><font
size="+1"><strong>Teks/daftar
isi</strong></font></td>
</tr>
<tr bgcolor="#CCFF99">
<td height="150"
colspan="2" align="center"><font color="#9966CC"><strong><font
size="+1">Lain-lain</font></strong></font></td>
</tr>
</table>
</form>
</body>
</html>
Coding
Hasil
Terimakasih sudah mengunjungi blog saya,
semoga bermanfaat. Salah khilaf mohon dimaafkan karena semua manusia tidak ada
yang sempurna. Jadi, jika ada komentar
kritik atau saran tidak apa karena memang itu yang saya harapkan agar saya bisa
mengupload blog dengan baik lagi.
Wassallamualaikum wr.wb
Komentar
Posting Komentar