Mencoba mengerti HTML dan CSS

Setelah kemaren, mencoba membuat "road show" untuk beberapa artikel kedepan mengenai webdesign dari perspektif pemula seperti saya, maka artikel ini adalah tahap pertamanya. Dalam Artikel ini, saya akan mencoba menjelaskan dalam bahasa yang paling sederhana yang bisa saya temukan pengertian dasar mengenai html dan css, diharapkan dengan memakai bahasa yang sederhana maka pesan yang akan disampaikan bisa tercapai.

Browser dan rendering

Tidak ada perbedaan nyata, antara hasil render teknik lama dan baru

Pada umumnya, website yang anda lihat sekarang di browser merupakan hasil akhir dari rendering. Sehingga tidak ada perbedaan sama sekali antara browser yang didesain dengan menggunakan filosofi lama dan baru. Yang menjadi berbedaan adalah cara memanage-nya, suatu hal yang akan anda pelajari dibagian selanjutnya di artikel ini.

Alur dari mulai code sampai dengan hasil rendering browser

Filosofi Lama

Untuk melihat bentuk website sebelum dirender oleh browser, anda bisa menggunakan beberapa cara, cara yang paling gampang adalah menggunakan view source feature. Di Firefox anda bisa melihat “mentahnya” sebuah halaman web dengan cara tekan CTRL-U, di IE bisa dengan mengklik view>source
Bingung melihatnya? Saya juga pernah merasakan hal yang sama, oleh sebab itu halaman yang membingungkan tadi saya coba jelaskan melalui visualisasi yang lebih mudah dicerna
Anggap saja gambar diatas adalah interpretasi code “mentah” yang terlihat pada halaman sebelum diumpankan ke browser untuk dirender ulang. Dalam gambar diatas, setiap Judul dan konten mempunyai definisi sendiri-sendiri, misalnya untuk judul: font-nya arial,size-nya 12px, warnanya biru, posisinya dikiri, dsb. Lalu untuk artikel satu misalnya, juga mempunyai definisi sendiri, misalnya, font-nya arial, size-nya 10px, warnanya hitam, posisi dibawah Judul utama, dsb.
Yang bisa dilihat disini adalah, -kadang- menggunakan cara desain seperti ini berarti mengulang beberapa hal yang sama, misalnya font antara artikel satu dan artikel dua yang mempunyai jenis font yang sama (arial) akan ditulis sebanyak dua kali di dua lines yang berbeda.
Bagi saya, yang mempunyai cara berpikir seorang awam di bidang programming akan bilang bahwa cara desain seperti ini sebenarnya jauh lebih dapat dimengerti dan divisualisasikan di otak saya dibanding menggunakan html dan css. Logika problem solving saya juga mengatakan demikian, dibentuk selama 4 tahun di teknik mesin, saya akan langsung dapat memvisualkan potongan code diatas secara sekejap.
Apakah cara ini salah, saya tidak bisa bilang, beberapa orang “disana” akan bilang bahwa cara ini salah, kuno, tidak semantik dan sebagainya.
Tapi mencap orang lain kuno karena tiap hari sebelum berangkat kerja selalu memanaskan mobil keluaran baru-nya saya kira tidak bijaksana juga. Saya hanya akan bilang bahwa menggunakan cara desain seperti ini suatu saat akan membuat efisiensi menjadi halangan. Seperti memanaskan terlalu lama mobil keluaran terbaru yang dapat menjadi tidak efisien, desain layout yang menggabungkan konten dan presentasi dapat menjadi tidak efisien juga.

Trade Off

Misalnya kita punya 2000 halaman seperti diatas. Lalu kemudian suatu saat kita bermaksud untuk mengubah warna font Judul menjadi warna merah, maka secara sederhana, kita akan menjadi kesulitan, karena definisi warna pada judul di halaman tadi, tersimpan dimasing-masing halaman. Mengubah warna font judul berarti mengubah 2000 halaman satu-satu. Ini adalah contoh sederhana trade-offnya bila kita memakai cara layout tanpa separasi .

Filosofi baru

Dalam pendekatan baru, ada upaya untuk memisahkan mana informasi konten dan mana informasi presentasi. Dalam hal ini, informasi konten akan diisi kedalam HTML-nya, tapi seluruh informasi mengenai posisi, font, warna dan sebagainya dipindahkan kedalam file baru yang bernama CSS (Cascading Style Sheet).
Apa hal pertama yang langsung terlihat disini? Keterulangan untuk mendefinisikan presentasi menjadi lebih sedikit,definisi tentang font ditulis hanya sekali. Akibatnya tentu saja, sizenya menjadi lebih kecil, dan waktu coding menjadi lebih pendek.
Tapi tentu saja manfaat terbesarnya adalah sistem layouting menjadi jauh lebih sederhana, satu file CSS untuk mendefiniskan presentasi halaman diatas dan 2000 halaman lain yang sejenis. Mengubah warna font judul berarti mengubah satu file css yang efeknya akan langsung terlihat di 2000 halaman sejenis.
Hampir sebagian besar blog engine yang dapat diinstall di server secara default menggunakan filosofi ini, oleh karena itu, bila anda melihat source sebuah blog standard, biasanya dibagian header ada link ke cssnya, artinya halaman yang sedang anda baca, mempunyai informasi mengenai presentasi ke link css tersebut. Anthronic.com pun mempunyai referensi ke definisi presentasi, bila anda lihat sourcenya, terlihat bahwa file definisi presentasi saya bernama style.css

Dimana permasalahannya css dan html?

Yang menjadi masalah kemudian adalah di bagian browsernya. Tidak semua browser menerjemahkan CSS menjadi hal yang sama, dalam arti “posisi kiri ujung” akan diterjemahkan browser Firefox menjadi satu hal dan diterjemahkan browser IE6 menjadi hal lain yang sedikit berbeda.
Lalu mana yang benar, terjemahan firefox atau IE6? Untuk menjawab hal ini maka kita sedikit balik ke masa lalu pada saat CSS dibentuk. CSS dibentuk oleh sebuah badan international (W3C) dan mempunyai guideline yang spesifik. Posisi “kiri ujung” melalui guideline tersebut misalnya mempunyai arti “kiri ujung sampai mentok dengan batas kiri browser anda”. Diharapkan dengan adana guideline ini, maka semua browser di dunia ini, dari firefox, Opera, Camino, Safari dan IE akan mengadopsi ini kedalam core program masing-masing, menjadikan setiap orang yang melihat suatu website akan melihat hal yang sama walaupun melalui browser yang berbeda.
Hampir semua browser menurut untuk mengikuti guideline yang telah dibuat oleh W3C, kecuali satu browser yang namanya adalah IE (terutama IE 5 dan 6) yang kebetulan dibuat oleh microsoft.
Lebih gawat lagi, IE5 dan 6 ini sudah terinstall secara otomatis saat anda menginstall Windows 2000 atau XP. Menjadikan tingkat penetrasi IE otomatis mengikuti tingkat penetrasi Windows yang mencapai 90% lebih didunia. Logikanya, bila 90% orang tidak memakai browser standard, maka semua website yang ditujukan ke 90% orang ini juga tidak standard. Ditambah dengan fakta bahwa microsoft menamakan browsernya Internet Explorer, sehingga membuat banyak orang pemula mengira bahwa untuk “mengeksplor” internet hanya dapat menggunakan browser ini. Disengaja atau tidak? Saya tidak tahu.
Pada akhirnya tentu saja orang akan banyak menggunakan IE dan web designer akan lebih mengoptimasi websitenya agar bagus saat dirender oleh IE daripada browser lain walaupun berarti designer tersebut tidak mengikuti guideline standar saat mendesain.

harap diingat bahwa permasalahan mengenai dukungan terhadap standard sebenarnya lebih rumit dari penjelasan saya, coba lihat disini atau disini untuk info lebih lanjut.

Itu masa lalu, bagaimana dengan masa kini?

Untungnya saat ini, keadaan sudah sedikit lebih baik, melalui kerja keras dan perjuangan beberapa orang, terjadi trend di dunia per-desain-an untuk lebih baik menggunakan web standard best practices mengikuti guideline yang telah tersedia daripada mencoba membuat desain yang bagus terlihat di IE tapi tampak jelek di browser lain.
Munculnya firefox juga membantu hal ini, dimarketingkan sebagai browser yang lebih aman, cepat dan mempunyai filosofi tab browsing, membuat banyak orang akhirnya lebih suka menggunakan firefox dibandingkan IE, fakta bahwa firefox adalah salah satu browser yang mengadopsi web standard membuat trend desain diatas menjadi teramplifikasi dengan sendirinya.

Workaround

Adanya trend baru dalam desain dan munculnya firefox tetap tidak dapat menghilangkan fakta bahwa IE masih merajalela di dunia. Tapi adanya trend ini, munculnya firefox dan fakta bahwa browser lain kecuali IE biasanya mendukung web standard, maka designer web menemukan workflow baru dalam mendesain.

ide -> buat->tuning agar bagus di browser yang mengadopsi web standard-> tuning tambahan agar bagus di IE

Dalam workflow ini ditambahkan asumsi bahwa bila bagus di satu browser standard maka akan bagus di browser lain yang sejenis, dan biasanya asumsi ini benar. Di akhir workflow ini maka tuning untuk IE baru dilakukan. Biasanya tunning untuk IE dilakukan dengan menambahkan line-line code baru yang hanya akan dilihat dan dimengerti oleh IE tapi cenderung dicuekin oleh browser lain
Workflow seperti ini akan lebih menghemat waktu dan resource sehingga hasilnya adalah cost yang lebih sedikit.

Penutup

Ok, saya harap semua yang membaca artikel diatas mulai dapat memahami apa itu HTML dan CSS dan apa pengaruhnya bagi desainer web dan terutama bagi anda sebagai orang yang membuka blog dan website setiap hari di browser masing-masing.
Apabila anda belum dapat memahami artikel diatas, tolong baca kembali dan tulis di bagian komentar bagian mana yang anda tidak pahami, saya akan review bagian itu dan mencoba menulis kembali bila memang membingungkan.
Terakhir, tolong diingat bahwa saya bukan desainer web profesional bahkan amatir pun mungkin juga tidak :), oleh karena itu bila ada kesalahan fundamental dalam artikel saya, tolong saya diberitahu.