penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel.
Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel. Di dalam html, memungkinkan untuk menampilkan data di dalam tabel secara atraktif.
Meskipun terlihat sederhana, desain tabel
yang dilakukan sampai sejauh ini masih merupakan sebuah tabel yang
hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak
memiliki struktur, sehingga tidak terdapat organisasi data yang baik.
Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan
sangat membantu dalam mengembangkan aplikasi web, terutama jika tabel
yang ingin dibangun harus bersifat dinamis.
Penambahan kolom dan baris
tabel saja tidak cukup untuk mengorganisasikan data pada tabel,
karena tidak dapat secara langsung mengetahui mana bagian dari tabel
yang merupakan data, mana yang merupakan isi data, dan mana yang
merupakan nilai agregasi dari data. 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 dapat digambarkan sebagai berikut
Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
- Logo
Identitas perusahaan, organisasi, pemilik situs. § Navigation.
Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
- Content
Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
- Footer
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.
- Whitespace
Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.
2) Layout halaman web
Layout situs merupakan tata letak elemen
halaman situs web.Layout situs yang baik akan menjadikan halaman web web
baik juga. Dengan desain halaman web yang baik dan tepat akan membuat
pengunjung merasa nyaman dengan tampilan (layout) halaman web tersebut,
dan tetap dapat fokus pada isi (content). Desain halaman web tidak
mengganggu kejelasan bagian isi.
Pada desain layout yang tepat, pengunjung
dapat berpindah ke halaman lain dengan mudah melalui navigasi yang
baik, mudah dan informatif. Pengunjung merasa bahwa setiap halaman dari
situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan
kesamaan tampilan (layout), yang berbeda hanya isi (content).
Adanya layout tata letak yang baik dapat
membuat halaman lebih cantik dan seimbang, terutama enak dilihat dan
mudah dibaca. 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
è digunakan untuk menampilkan link yang banyak ke situs lain, seperti
search engine
Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut merupakan tampilan dari www.google.com
– Bottom Index
è Biasanya digunakan apabila isi dari halaman banyak berhubungan
dengan topik tunggal.
Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti pada berikut merupakan tampilan halaman web education and training berikut ini
– Left Index
è Digunakan untuk layar dengan resolusi yang lebar sehingga mudah
dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian
pada halaman utama.
Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web berikut ini.
– Layout Split
è Merupakan model yang banyak dipakai, karena terjaga keseimbangan
dalam halaman web.
Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme wordpress berikut ini.
– Alternating Index
è digunakan untuk halaman yang banyak menampilkan grafik, foto dan
produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan
lain – lain.
Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme di http://www.csszengarden.com/050// berikut ini.
3) Desain halaman web dengan konsep tabel
– 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 :
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 :
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 :
– 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>
Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :
LAYOUT SPLIT
– 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 :
Sign up here with your email
ConversionConversion EmoticonEmoticon