Advertisement
Sebuah
dokumen tidak jarang digunakan untuk menampilkan data kepada 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.1) Anatomi halaman web
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.
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
Gambar 10.4 model layout
bottom index
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
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