Desain Web : Antara Struktur dan Persentasi

Jalan terbaik untuk membangun sebuah website (terutama untuk desainer profesional) adalah membuat sesuai dengan standar internasional yang ada. Membangun sebuah situs sesuai dengan standar berarti membuat situs yang bisa dibuka dimanapun, lebih cepat diakses, lebih mudah dipelihara, dan membuat nyaman semua orang yang akan menggunakan website anda baik itu pengunjung maupun programmer.
Desain web yang asal-asalan dan cuma memperhatikan tampak depannya saja akan berakibat buruk bagi masa depan kita. Pengkodean yang tidak sesuai standar, penggunaan tag-tag khusus untuk browser tertentu ( ex : IE only ), akan membuat situs kita tampak baik di satu browser akan tetapi hancur di browser lainnya.

Apa itu xHTML dan apa itu CSS ?

xHTML - sederhananya - adalah versi lanjutan dari HTML. xHTML didukung penuh oleh W3C ( badan yang membuat standar WWW ) dan lebih strict dari HTML. Strict disini berarti toleransi yang diberikan xHTML lebih ketat daripada HTML. Tugas xHTML adalah menandai ( markup ) yang mana heading, yang mana paragraf, yang mana list, dan sebagainya.

Lalu, apa beda persentasi dan struktur?

xHTML hanya digunakan untuk menyusun struktur website sementara persentasi ( tampilan ) seluruhya harus dihandle oleh CSS. Akibatnya, xHTML tidak mengizinkan penggunaan tag-tag persentasi seperti font, i, b, u, dsb. Mana paragraf mana heading adalah struktur. Namun berapa besar ukuran font dari heading, apa warna paragraf, berapa margin dan padding yang digunakan untuk sebuah paragraf, dan sebagainnya adalah persentasi.
CSS ( Cascading Style Sheets ) adalah bahasa yang digunakan untuk menentukan tampilan ( persentasi ) dari suatu website. CSS tidak hanya memberikan kontrol yang lebih baik kepada kita untuk mengatur tampilan, namun juga menghilangkan kaharusan menggunakan tag persentasi didalam website.

Untuk lebih jelasnya, perhatikan contoh-contoh berikut :

1. Heading adalah struktur sehingga kita menggunakan tag xHTML h1, h2, dsb untuk menandai suatu heading. Di lain sisi, ukuran dari heading adalah persentasi sehingga kita menggunakan CSS ( h1 { font-size : 3em } ) untuk mengatur ukuran heading.


2. Paragraf adalah struktur sehingga kita menggunakan tag xHTML p untuk menanandai bahwa suatu text adalah paragraf. Namun warna tulisan dari suatu paragraf adalah persentasi sehingga kita menggunakan CSS untuk menentukannya ( color : ).


3. Data tabular adalah struktur, gunakan tag xHTML table, th, tr, dan td untuk menandai suatu table. Namun ukuran border dari table, width dari table, dsb adalah persentasi sehingga gunakan CSS ( ex : border : 2px solid black ) untuk mengaturnya.


4. Gambar adalah strukur sehingga gunakan tag xHTML img untuk memasukan gambar. Berapa jarak border ke gambar ( padding ) adalah persentasi sehingga gunakanlah CSS
   

xHTML mempunyai tag struktur untuk keperluan itu. xHTML mengenal tag “strong” yang secara default membuat tulisan jadi tebal dan “em” yang secara default membuat tulisan menjadi miring. Tag-tag struktur pada xHTML sudah mempunyai default persentasi nya sendiri sehingga anda tidak perlu mendifinisikan style masing-masing tag satu-persatu. Tentu anda harus mengubahnya jika ingin tampilan website anda lebih indah.

Bukankah tidak ada bedanya fungsi dari em dan i ? Mengapa saya harus menggunakan em daripada i ? Tag-tag pada xHTML didesain agar setiap tag memberikan arti yang jelas terhadap text yang ditandainya. Kata yang dibungkus oleh tag struktur strong berarti memiliki penekanan khusus daripada kata lainnya. Bandingkan dengan tag persentasi b yang hanya menandai bahwa kata itu tebal meskipun hasilnya akan sama tebalnya dengan strong.