Willy Zaki

 BAB 4: STYLE HALAMAN WEB DAN CLIENT SIDE SCRIPTING 

A. Style pada Halaman Web 

CSS sebagai sebuah bahasa style sheet yang digunakan dalam mengatur tampilan dokumen. Dengan adanya CSS maka tampilan halaman yang sama akan memiliki format yang berbeda. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk digunakan bersama-sama dalam beberapa berkas

1. Konsep Layout dalam Halaman Web

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah, dan informatif sehingga pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content). Dalam hal ini, desain halaman web tidak mengganggu kejelasan bagian isi. Dengan keberadaan layout dengan tata letak yang baik dapat membuat halaman lebih memadai dan seimbang sehingga enak dilihat dan mudah dibaca. Desain layout suatu halaman web meliputi pembagian tempat pada halaman, pengaturan jarak spasi, pengelompokan teks dan grafik, serta penekanan pada suatu bagian tertentu. Pada dasarnya, sebuah dokumen web umumnya memiliki elemenelemen sebagai berikut.

a. Elemen Header

Elemen jenis ini berisi judul dan penjelasan lain dokumen. Elemen ini biasanya diisi dengan logo website, menu-menu global (seperti login dan logout), ataupun nama halaman yang sedang ditampilkan.

b. Elemen Navigation

Elemen jenis ini memberikan akses navigasi ke halaman-halaman lain dalam web.

c. Elemen Sidebar

Elemen jenis ini sebagai pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, bahkan di kiri dan kanan konten, sesuai dengan kreativitas perancangnya.

d. Elemen Konten

Elemen jenis ini sebagai isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini. Elemen Footer

2. Jenis-Jenis Layout dalam Halaman Web (Frameset, Table, Div) Rancangan web design (mockup web design) pada dasarnya menjadi gambaran keserasian warna dan layout sesuai dengan konsep desain yang dibayangkan. Sebagian web designer melewati proses ini dan langsung mendesain dengan code. Namun, teknik script sering kali mengalami proses perbaikan dikarenakan tidak adanya konsep desain yang baik.

a. Tag Frameset dan Atributnya

FRAMESET digunakan bersamaan dengan penggunaan tag FRAME yang berguna untuk menampilkan file sumber dari bingkai untuk dijadikan bagian dari tag FRAMESET. FRAMESET adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai tersendiri pada dokumen HTML. Cara kerja FRAMESET sama seperti cara kerja tag TABLE di mana tag TABLE digunakan untuk membuat halaman dokumen HTML menjadi beberapa bagian kolom dan baris. Hal ini juga dilakukan oleh tag FRAMESET yang dapat membagi halaman dokumen HTML menjadi kolom dan baris. Perbedaanya, pada tag FRAMESET, isi dari setiap kolom dan barisnya berbentuk bingkai yang bersumber dari dokumen HTML lain.

e.

Elemen jenis ini sebagai bagian penutup dari website, yang dapat berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke

b. Tag Table dan Atributnya

Tag ini digunakan untuk membuat tabel pada dokumen HTML. Penggunaan tag ini selalui disertai dengan penggunaan tag <TR> dan <TD>. Tag <TR> untuk menyatakan baris dari tabel dan tag <TD> untuk menyatakan kolom dari tabel. Tabel sangat berguna untuk membuat susunan halaman HTML menjadi lebih rapi. Dengan table, Anda dapat leluasa menempatkan tulisan atau gambar dengan tatanan yang sangat teratur.

c. Tag Div dan Atributnya

TAG DIV tidak dapat berdiri sendiri dalam penggunaannya. TAG DIV harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik. Oleh sebab itu, seorang pemula banyak mengalami kendala ketika akan membuat sebuah layout website dengan menggunakan TAG DIV. DIV adalah tag HTML yang sebenarnya digunakan untuk memberikan tanda batas suatu daerah dari sebuah rangkaian html (bisa berupa tulisan, gambar, atau kode lainnya). Hal ini akan sangat berbeda jika tag DIV digabungkan dengan elemen CSS yang berguna untuk memberikan tampilan dari dokumen HTML yang dibuat.

d. Model Layout

Model-model layout yang umum digunakan dalam mendesain suatu halaman web, di antaranya sebagai berikut. 1) Layout Split

Layout split merupakan model yang banyak dipakai karena keseimbangan dalam halaman web tetap terjaga. Navigasi atau daftar isi berada di bagian kanan dan kiri dari halaman web. 2) Left Index

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 di bagian kiri dari halaman web.

3) Top Index

Top index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau daftar isi berada di bagian atas dari halaman web, misalnya tampilan dari www.google.com.

4) Bottom Index

Bottom index biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Navigasi atau daftar isi berada di bagian bawah dari halaman web.

5) Alternating Index

Alternating index digunakan untuk halaman yang banyak menampilka grafik, foto, dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain-lain. Navigasi atau daftar isi berada di bagian kanan dan kiri dari halaman web.

3. Konsep dan Penulisan Script Stylesheet

Berikut ini beberapa hal yang berhubungan dengan konsep dan penulisan script stylesheet.

a. Style pada Teks

Teks pada sebuah halaman web dapat diberikan style dalam kemasan CSS. Pengaturan style tersebut meliputi properti pada bagian pewarnaan, pemilihan font, spasi, dan lain-lain. Daftar style pada teks yang umum digunakan dapat dilihat pada Tabel 4.1 berikut.