Setelah membaca artikel sebelumnya, yaitu tentang beberapa konsep tampilan desain pada sebuah website sekarang kita lanjut dengan menerapkannya, yakni menulis beberapa kode html sesuai dengan desain yang ditentukan, berikut ulasannya :
- Desain 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>
|
Bila listing program di atas
dijalankan maka akan menghasilkan
tampilan halaman web seperti berikut ini :
- Desain 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"> </font></td>
</tr>
</table>
</form>
</body>
</html>
|
Bila listing program di atas dijalankan maka
akan menghasilkan tampilan halaman web
seperti berikut ini :
-
Desain 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> </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>
|
Bila listing program di atas dijalankan maka
akan menghasilkan tampilan halaman web
seperti berikut ini :
- Desain 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">Lain-lain </td>
</tr>
</table>
</form>
</body>
</html>
|
Bila listing program di atas dijalankan maka
akan menghasilkan tampilan halaman web
seperti berikut ini :
-
Desain 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">Lain-lain</font></strong></font></td>
</tr>
</table>
</form>
</body>
</html>
|
Bila listing
program di atas dijalankan maka akan
menghasilkan tampilan halaman web seperti berikut ini :
Rangkuman
Pada kegiatan belajar desain Web
dengan Konsep Tabel dapat disimpulkan menjadi beberapa point penting seperti
berikut
§
Tabel pada umumnya digun akan untuk menampilkan data
tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam
tabel disebut dengan sel.
§
HTML menyediakan beberapa elemen yang dikhususkan untuk
memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th,
caption
.
§
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri
dari containing block, Logo, navigation, content, white space
§ Desain layout suatu halaman web meliputi penyusunan:
- pembagian tempat pada halaman
- pengaturan jarak sepasi
- pengelompokan teks dan grafik
- serta penekanan pada suatu bagian tertentu
§ Beberapa model layout yang biasa digunakan dalam
mendesain suatu halaman web, diantaranya adalah top index, bottom index, left index, layout
split, alternating index
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon