Pertama-tama, jangan terburu-buru memulai! Lakukan dua persiapan mental sebelum melakukan apapun. Ini adalah hal terpenting untuk proses belajar Anda:
Pembelajaran membutuhkan waktu dan harus dilakukan langkah demi langkah;
Akan ada kemunduran dalam perjalanannya.
Namun Anda tidak sendirian, banyak dari kita yang berinvestasi dalam pembelajaran dan penggunaan standar web. Ada komunitas yang terus berkembang untuk membantu Anda belajar lebih mudah, para veteran yang mengalami banyak kesulitan dalam mempelajari teknik dan teknik, dan pendatang baru yang beruntung (termasuk saya sendiri) yang akan mendapatkan keuntungan dari keringat dan air mata mereka.
Ketika Anda akhirnya menjadi mahir dalam menggunakan metode desain berbasis standar web (membuat metode berbasis tabel tradisional tersebut terlihat memudar), melihat ke belakang, Anda akan terkejut bahwa menata halaman dengan CSS tidaklah sesulit itu. Oh, tentu saja, jika browser umum memiliki dukungan yang lebih baik untuk beberapa operasi dalam spesifikasi CSS2, maka ini mungkin akan lebih mudah digunakan.
Yah, sepertinya aku sedikit keluar dari topik.
Jadi, mari kita mulai dengan informasi yang benar-benar berguna. Pertama-tama, belilah salinan "Mendesain Dengan Standar Web" (Catatan 1), jangan terlalu banyak berpikir, segera lakukan saja. Sudah punya? Nah, bacalah sekarang dan jangan sampai berdebu. Setiap poin yang ingin saya sampaikan dijelaskan secara rinci di dalam buku. Buku ini dibagi menjadi dua bagian yang sama, sebuah manifesto (mengapa Anda harus melakukan apa yang Anda lakukan) dan tutorial (bagaimana Anda melakukannya). Ini mungkin berguna bagi Anda.
Sekarang, hal pertama adalah menetapkan konsep sistem ideologis XHTML, apakah Anda memilih HTML4.01 atau Sebuah tugas yang mematikan pikiran), semua dokumen dimulai dengan memilih DOCTYPE. Memberi tahu browser bahasa markup apa yang digunakan dokumen Anda akan mencegah kesalahan kinerja yang tidak perlu yang akan membuat Anda gila dengan hasil tampilan halaman yang buruk. Misalnya: Jika saya ingin terbang ke Chicago, saya harus memberi tahu agen perjalanan ke mana saya ingin pergi, jika tidak, saya mungkin terbang ke Wina tanpa tujuan. Untuk menampilkan HTML atau XHTML, Anda harus terlebih dahulu memberi tahu browser bahwa pengaturan DOCTYPE memastikan saya mencapai "tujuan".
Sasaran selanjutnya: logo yang diformat dengan ketat. Ini sangat mudah untuk dikuasai. Mengutip semua atribut (misalnya: <a href="link">); menutup semua tag yang terbuka (misalnya: <input type="text" />). Setiap logo atau elemen harus ditutup.
Catatan singkat: Saya tidak tahu kapan tag menjadi elemen. Mereka memiliki arti yang sama tetapi cara mengatakannya berbeda. Apa pun sebutannya, nama yang benar sepertinya adalah "elemen" sekarang, mungkin awalnya seperti itu, saya tidak tahu dan tidak ada yang memberi tahu saya.
Apapun itu, setiap elemen harus ditutup dengan benar. Jika Anda menggunakan HTML4.01, Anda dapat mengabaikan elemen individual seperti <br>, <hr> dan <input>. Jika Anda menggunakan XHTML, elemen individual juga harus ditutup, dengan menambahkan garis miring di akhir, misalnya: <br > menjadi<br />.
Selanjutnya, ada aturan yang agak membingungkan tentang atribut XHTML: semua atribut harus memiliki nilai, dan jika tidak ada nilai, nilai itu sendiri yang digunakan. Misalnya <input type='radio' dicentang='dicentang' />. Dalam HTML4.01 nilai yang dicentang tidak diperlukan, tetapi dalam XHTML diperlukan.
Terakhir, XHTML mengharuskan Anda menulis semua kode dalam huruf kecil. HTML tidak peka huruf besar-kecil, tetapi XHTML, dan mengikuti aturan sintaksis XML.
Itu saja tentang perubahan logo! Anda sudah mengetahui semuanya! Tarik napas dalam-dalam, minum bir, dan rileks. Karena itu baru langkah pertama.
Bagian 2
Sekarang, kita mulai belajar menulis HTML/XHTMLL yang benar dan memvalidasinya di validator (validator) organisasi W3. Jika Anda menulisnya dengan benar, Anda akan melihat pesan sukses dengan teks kuning dengan latar belakang biru. Cobalah menyukai kombinasi warna/font ini, itu akan menjadi sahabat Anda.
Mengapa verifikasi sangat penting? Apakah itu penting? Karena logo yang ditulis dengan buruk (acak, tidak tepat) akan menyebabkan ketidakpastian. "Hidup dan mati" suatu halaman sepenuhnya bergantung pada metode penanganan kesalahan browser. Meskipun sebagian besar browser juga dapat mendukung logo yang ditulis dengan buruk, ini adalah kebiasaan yang salah. Hai, apa yang membuat kita terbiasa dengan yang non standar? Alasan pertama adalah perang browser. Pada tahun 1995, Microsoft mampu bersaing dan mendapatkan pangsa pasar dari Netscape karena IE menangani kesalahan halaman web sama persis dengan Netscape.
Perspektif lain: Validasi membantu Anda menemukan kode yang salah dan memastikan bahwa halaman Anda berperilaku lebih konsisten. Memverifikasi kode adalah hal pertama yang saya lakukan saat men-debug tata letak, dan saya yakin Anda juga demikian.
Oke, saat pertama kali memverifikasi situs pertama Anda, Anda mungkin harus menerima tujuh puluh atau delapan puluh pesan kesalahan luar biasa yang diumpankan kembali. Sayangnya, meskipun checksum berguna, namun tidak sempurna dan hanya dikelola oleh beberapa sukarelawan. Kabar baiknya adalah kesalahan tersebut saling terkait. Jika Anda menemukan tag </p> hilang dan memperbaikinya, kemungkinan besar 24 kesalahan berikutnya akan hilang. Singkatnya, hasil verifikasi mungkin terlihat buruk, tetapi seringkali tidak.
Sekarang, Anda telah lulus validasi dan kode Anda sudah sesuai. Pada titik ini, Anda mematuhi pedoman yang ketat tetapi kurang memahami sepenuhnya alasan Anda melakukannya.
Bagian 3 Langkah selanjutnya adalah memfaktorkan ulang dokumentasi yang telah Anda buat menggunakan markup yang telah diformulasikan dengan baik, menghilangkan atribut-atribut lapisan presentasi yang semakin terdaftar sebagai "usang" di DOCTYPE terbaru, dan menempatkannya dalam file terpisah. Ini adalah "pemisahan kinerja dan struktur" yang kontroversial, itulah sebabnya CSS sangat penting.
Berikut analoginya: teks Anda adalah konten. Kontennya lengkap, tetapi tidak ada petunjuk tentang struktur konten (seperti spasi, bagian, judul, daftar, dll). Yang Anda dapatkan hanyalah teks yang berantakan, sehingga tidak mudah digunakan sama sekali. Lapisan struktural bersifat tambahan. Elemen individual ditambahkan ke dokumen untuk menyampaikan informasi struktural tambahan guna memecah teks yang berantakan dan membuatnya lebih logis dan terorganisir. Namun elemen tersebut tidak mengontrol tampilan default teks. Misalnya, Anda sering menemukan judul di halaman pertama lebih besar dari font teks. Ini bukan fungsi dari struktur.
Saatnya "lapisan presentasi" muncul. Representasinya adalah petunjuk pemformatan, yang memberi tahu judul halaman pertama berwarna merah, dicetak miring, dan ukuran font 150% dari font badan. Lapisan presentasi merupakan lapisan tambahan di atas lapisan struktur dokumen. CSS termasuk dalam lapisan presentasi, dan dapat mengubah dokumen menjadi bentuk menakjubkan melalui tag sederhana pada dokumen - kunjungi CSS Zen Garden untuk melihat contohnya.
Jadi, apa cara terbaik untuk memisahkan kinerja dari struktur? Mari kita ambil sepotong kode tradisional untuk mengilustrasikannya, yang berisi elemen atau atribut HTML yang digunakan untuk menyediakan presentasi. Saatnya untuk memotong tag bgcolors dan <center> tersebut. Mari kita lakukan tes santai:
Dalam kode demo berikut, atribut dan tag presentasi manakah yang harus dihilangkan?
<center><h1><font face="Verdana">Ini adalah situs web pertama saya.</font></h1></center> <table border="0" cellpadding="0" Cellspacing="0" > <tubuh bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>Mereka datang untuk membawaku pergi...</p></td>
Apakah Anda siap dengan jawaban Anda? Oke, hasil yang benar tercantum di bawah ini, yaitu kode terstruktur bersih tanpa jejak kinerja:
<h1>Ini adalah situs web pertamaku.</h1> <table> <body> <td><p>Mereka datang untuk membawaku pergi...</p></td>
itu saja? Itu saja.
Meskipun kode ini tidak secara eksplisit sesuai dengan spesifikasi apa pun, makna yang lebih besar dari pemisahan ini adalah penggunaan elemen yang benar. Penggunaan tata letak tabel adalah masalah sekunder. Dalam contoh di atas, metode penggunaan tabel salah. Dari perspektif jangka panjang dan bijaksana, elemen <table> dan <td> harus dihilangkan. Meskipun penggunaannya sudah tidak digunakan lagi, tabel masih sangat berguna, dan dapat digunakan jika diperlukan - pada data yang disusun secara tabel.
Ya, kami telah menghapus format halaman kami, hore! Apa lagi yang kamu lakukan sekarang? Itu hanya menyisakan beberapa elemen jelek, teks dan garis dalam font Times-New-Roman. Tidak lucu sama sekali, di manakah halaman cerah dan indah yang dijanjikan kepada kita?
Melihat kembali contoh Zen Garden, apakah Anda melihat desainnya yang lucu? Seberapa berbedakah penampilan mereka? Intinya adalah: di bawah desain cantik itu terdapat XHTML yang sama yang sama membosankannya dengan dokumen belum diformat yang baru saja Anda buat. Benar kan?
Faktanya, membosankan dan jelek memiliki dasar yang baik. Anda mungkin telah memperhatikan bahwa HTML yang tidak diformat ini terlihat sama buruknya dengan web pada tahun 1994. Dengan beberapa pengecualian, elemen-elemen ini sama tuanya dengan web itu sendiri, <h2> telah ada sejak zaman browser Musa.
Manfaatnya tentu tidak hanya sampai disitu saja, dengan kemudahan penggunaan (untuk kebutuhan khusus tersebut), SEO bawaan, pengurangan biaya bandwidth, dan sebagainya. Jeffrey Veen telah menulis "Nilai Bisnis Standar Web" tahun lalu, dan Roger Johansson juga menjelaskan teknik dan manfaat desain berbasis standar dalam bukunya yang baru "Berkembang dengan Standar Web".
CSS didukung dengan baik oleh semua browser utama saat ini, dan terdapat banyak sumber daya untuk membantu mempelajari sintaksis CSS, tata letak berbasis CSS, dan teknik tingkat lanjut. Saya merekomendasikan beberapa yang bagus: westCiv menawarkan kursus CSS gratis berkelanjutan yang akan membantu Anda memulai dan menguasainya dengan cepat. Andrew Fernandez telah membuat daftar besar sumber daya CSS yang akan berguna baik Anda baru mengenal CSS atau tidak. Eric Meyer telah menulis sekumpulan buku yang dapat Anda simpan di meja Anda dan berkonsultasi kapan saja. Buku-buku ini mencakup Eric Meyer tentang CSS berbasis kasus dan Lebih Banyak Eric Meyer tentang CSS. Buku referensi CSS: "The Definitive Guide to CSS" yang diterbitkan oleh O'Reilly Publishing House telah dirilis untuk edisi kedua, dan sebaiknya Anda menyimpannya di meja Anda. Juga tersedia "The Designer's Edge" oleh Molly Holzschlag dan "Merancang Halaman Web CSS" oleh Chris Schmitt.
Mendalami detail penerapan CSS dan tata letak bangunan akan memakan banyak waktu. Saya tidak akan mengatakan lebih banyak lagi. Di atas adalah saran yang bisa saya berikan kepada para desainer yang mulai memperhatikan standar web. Bacalah dan bagikan pemikiran Anda dan mari kita berkembang sebagai sebuah komunitas. Banyak dari kita yang secara aktif mempromosikan standar web. Kita memiliki jaringan global.
Catatan 1. "Designing With Web Standards" adalah buku yang ditulis oleh Zeldman untuk mempromosikan standar web. Versi Cina telah diperkenalkan dan dirilis pada Mei 2004. Buku tersebut berjudul "Website Reconstruction--Designing with Web Standards"