Menyajikan Tabel Pada Halaman WEB
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.
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. Anatomi halaman web secara garis
besar anatomi atau susunan dari suatu halaman web terdiri dari containing block,
Logo, navigation, content, dan white space.
Containing Block merupakan bagian dari halaman web yang
membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>,
<div> atau <table>.
Logo. adalah identitas perusahaan, organisasi, pemilik situs.
Navigation atau menu merupakan bagian penting dari situs
yang memudahkan pengunjung berpindah-pindah halaman.
Content atau isi adalah segalanya, karena disinilah sebagian
besar informasi disajikan.
Footer merupakan bagian bawah dan berisi informasi singkat
pemilik situs (copyright) dan beberapa link.
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.
A.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 yang baik 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). Desain layout suatu halaman web meliputi penyusunan:
Pembagian tempat pada halaman
Pengaturan jarak sepasi
Pengelompokan teks dan grafik
-Penekanan pada suatu bagian tertentu
Beberapa model layout yang biasa digunakan dalam mendesain
suatu halaman web, diantaranya adalah
Layout Web
Top Index digunakan untuk menampilkan link yang banyak ke
situs lain, seperti search engine. Navigasi atau daftar isi berada dibagian
atas dari halaman web, contohnya adalah 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 tampilan halaman web education
and training
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.
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,
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.
Desain Halaman Web dengan Konsep Tabel
1. 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 action="" id="form1"
method="post" name="form1">
<table align="center" border="1"
style="height: 242px; width: 100%;"><tbody>
<tr> <td align="center"
bgcolor="#FFFF00" bordercolor="#FFFFFF"
height="15"><strong>Banner
atau iklan</strong></td> </tr>
<tr> <td align="center"
bgcolor="#FFCCCC" height="15"><span
style="color: red;">Daftar isi </span>
<span style="color: red;">atau navigasi
</span></td> </tr>
<tr> <td align="center"
bgcolor="#FF66CC" height="135">
Body atau contents(isi)</td> </tr>
<tr> <td align="center"
bgcolor="#CCFF99" height="15"><span
style="color: #9966cc;">Info tambahan atau lain-lain
</span></td> </tr>
</tbody></table>
</form>
</body>
</html>
Komentar
Posting Komentar