Sebagian besar desainer kami masih menggunakan tata letak tabel tradisional, presentasi, dan struktur yang dipadukan untuk membangun situs web. Mempelajari cara menggunakan XHTML+CSS memerlukan proses, dan membuat situs web yang ada mematuhi standar situs web tidak dapat dilakukan dalam satu langkah. Pendekatan terbaik adalah melakukan langkah demi langkah dan bertahap untuk mencapai tujuan mematuhi standar situs web sepenuhnya. Jika Anda seorang pemula atau tidak terlalu paham dengan kode, Anda juga dapat menggunakan alat pengeditan yang sesuai standar, seperti Dreamweaver MX 2004, yang saat ini merupakan alat terlengkap yang mendukung standar CSS.
1． perbaikan primer
Tambahkan DOCTYPE yang benar ke halaman
Banyak desainer dan pengembang tidak mengetahui apa itu DOCTYPE dan kegunaannya. DOCTYPE adalah singkatan dari tipe dokumen. Terutama digunakan untuk menunjukkan versi XHTML atau HTML yang Anda gunakan. Browser menafsirkan kode halaman sesuai dengan DTD (Document Type Definition) yang ditentukan oleh DOCTYPE Anda. Jadi, jika Anda tidak sengaja menyetel DOCTYPE yang salah, hasilnya akan mengejutkan Anda. XHTML1.0 menyediakan tiga opsi DOCTYPE:
(1) Transisi
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) Ketat
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Ketat//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)Jenis bingkai (Frameset)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Untuk perbaikan utama kita, kita hanya perlu menggunakan pernyataan transisi. Itu tetap bisa kompatibel dengan tata letak meja, logo kinerja, dll., sehingga Anda tidak akan merasa bahwa perubahannya terlalu besar dan sulit untuk dikuasai.
Tip: Jika Anda terlalu malas untuk memasukkan kode transisi di atas, Anda dapat mengunjungi beranda website http://www.macromedia.com/, lalu melihat kode sumbernya, dan menyalin dan menempelkan kode yang sama di area kepala .
Tetapkan ruang nama (Namespace)
Tambahkan kode berikut tepat setelah deklarasi DOCTYPE:
<html XMLns=http://www.w3.org/1999/xhtml >
Namespace adalah DTD terperinci yang mengumpulkan tipe elemen dan nama atribut. Deklarasi namespace memungkinkan Anda mengidentifikasi namespace Anda melalui penunjuk alamat online. Masukkan saja kodenya seperti biasa.
Deklarasikan bahasa pengkodean Anda
Agar dapat diinterpretasikan dengan benar oleh browser dan lolos validasi markup, semua dokumen XHTML harus menyatakan bahasa pengkodean yang mereka gunakan. Kodenya adalah sebagai berikut:
<meta http-equiv=Jenis Konten konten=teks/html; charset=GB2312 />
Bahasa pengkodean yang dideklarasikan di sini adalah Bahasa Mandarin Sederhana GB2312. Jika Anda perlu memproduksi konten berbahasa Mandarin Tradisional, Anda dapat mendefinisikannya sebagai BIG5.
Tulis semua label dengan huruf kecil
XML peka huruf besar-kecil, jadi XHTML juga peka huruf besar-kecil. Semua nama elemen dan atribut XHTML harus menggunakan huruf kecil. Jika tidak, dokumen Anda akan dianggap tidak valid oleh validasi W3C. Misalnya kode berikut ini salah:
<TITLE>Profil Perusahaan</TITLE>
Cara penulisannya yang benar adalah:
<title>Profil Perusahaan</title> Demikian pula, ubah <P> menjadi <p>, <B> menjadi <b>, dan seterusnya. Langkah konversi ini sangat sederhana.
Tambahkan atribut alt ke gambar
Tambahkan atribut alt ke semua gambar. Atribut alt menentukan bahwa teks pengganti ditampilkan ketika gambar tidak dapat ditampilkan. Hal ini dapat diabaikan untuk pengguna normal, namun penting untuk browser yang hanya berisi teks dan pengguna yang menggunakan pembaca layar. Hanya ketika atribut alt ditambahkan, kode tersebut akan lolos pemeriksaan kebenaran W3C. Perhatikan bahwa kita perlu menambahkan atribut alt yang bermakna, penulisan seperti berikut tidak ada artinya:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
Cara menulis yang benar:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=UNC logo perusahaan, klik untuk kembali ke beranda>
Kutip semua nilai atribut
Dalam HTML, Anda tidak perlu mengutip nilai atribut, tetapi dalam XHTML, nilai tersebut harus dikutip.
Contoh: tinggi=100, bukan tinggi=100.
Tutup semua tab
Di XHTML, setiap tag terbuka harus ditutup. Seperti ini:
<p>Setiap tab yang terbuka harus ditutup. </p> <b>HTML dapat menerima tag yang tidak ditutup, tetapi XHTML tidak bisa. </b>
Aturan ini dapat menghindari kebingungan dan masalah HTML. Misalnya: Jika Anda tidak menutup tag gambar, Anda mungkin mengalami masalah tampilan CSS di beberapa browser. Gunakan metode ini untuk memastikan bahwa halaman muncul sesuai desain Anda. Perlu dicatat bahwa tag kosong juga harus ditutup. Gunakan garis miring / di akhir tag untuk menutupnya. Misalnya:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
Setelah diproses oleh tujuh aturan di atas, halaman tersebut pada dasarnya memenuhi persyaratan XHTML1.0. Namun kami masih perlu memverifikasi apakah benar-benar memenuhi standar. Kita dapat menggunakan W3C untuk menyediakan layanan validasi gratis (http://validator.w3.org/). Perbaiki kesalahan satu per satu setelah menemukannya. Dalam daftar sumber daya berikut, kami juga menyediakan layanan verifikasi lain dan URL yang memberikan panduan verifikasi, yang dapat digunakan sebagai pelengkap verifikasi W3C. Ketika Anda akhirnya lulus validasi XHTML, selamat, Anda telah mengambil langkah besar menuju standar situs web. Ini tidak sesulit yang Anda bayangkan!
2. Peningkatan menengah
Perbaikan kami selanjutnya terutama pada pemisahan struktur dan kinerja. Langkah ini tidak semudah langkah pertama. Kami memerlukan perubahan konsep, serta pembelajaran dan penerapan teknologi CSS2. Tapi mempelajari sesuatu yang baru membutuhkan waktu, bukan? Caranya adalah belajar sambil melakukan. Jika Anda selalu menggunakan layout tabel dan belum pernah menggunakan CSS sama sekali, tidak perlu terburu-buru mengucapkan selamat tinggal pada layout tabel. Anda bisa mengganti tag font terlebih dahulu dengan style sheet. Saat Anda belajar lebih banyak, Anda dapat berbuat lebih banyak. Oke, mari kita lihat apa yang perlu kita lakukan:
Tentukan tampilan elemen dengan CSS
Kita sudah mempunyai kebiasaan ketika menulis logo, jika kita ingin fontnya lebih besar, kita menggunakan <h1>, dan ketika kita ingin menambahkan simbol titik di depannya, kita menggunakan <li>. Kita selalu menganggap <h1> sebagai besar, <li> sebagai titik, dan <b> sebagai "teks tebal". Faktanya, <h1> bisa menjadi apapun yang Anda inginkan. Melalui CSS, <h1> bisa menjadi font kecil, <p> teks bisa menjadi besar dan tebal, dan <li> bisa menjadi gambar dan seterusnya. Kita tidak bisa memaksakan elemen struktural untuk mencapai presentasi, kita harus menggunakan CSS untuk menentukan tampilan elemen tersebut. Misalnya, kita dapat membuat judul default level 6 asli terlihat berukuran sama:
h1, h2, h3, h4, h5, h6{ keluarga font: 宋体, ukuran font: 12px }
Gantikan sampah yang tidak berarti dengan elemen terstruktur
Banyak orang mungkin tidak pernah mengetahui bahwa elemen HTML dan XHTML dirancang untuk mengekspresikan struktur. Banyak dari kita sudah terbiasa menggunakan elemen untuk mengontrol presentasi, bukan struktur. Misalnya, daftar mungkin ditandai seperti ini:
Kalimat 1<br /> Kalimat 2<br /> Kalimat 3<br />
Akan lebih baik jika kita menggunakan daftar yang tidak berurutan:
<ul> <li>Kalimat 1</li> <li>Kalimat 2</li> <li>Kalimat 3</li> </ul>
Anda mungkin berkata, "Tetapi <li> menampilkan sebuah titik, dan saya tidak ingin menggunakan sebuah titik." Faktanya, CSS tidak menentukan tampilan suatu elemen. Anda dapat mematikan titik-titik menggunakan CSS.
Tambahkan id ke setiap tabel dan formulir
Berikan tabel atau bentuk markup struktural yang unik, misalnya.
<id tabel=menu>
Selanjutnya, saat menulis style sheet, Anda bisa membuat pemilih "menu" dan mengaitkannya dengan aturan CSS yang memberi tahu sel tabel, label teks, dan semua elemen lainnya cara menampilkannya. Dengan cara ini, tidak perlu melampirkan beberapa atribut lapisan presentasi yang berlebihan dan memakan bandwidth seperti tinggi, lebar, perataan, dan warna latar belakang ke setiap tag <td>. Hanya dengan tag terlampir (tag id yang menandai "menu"), Anda dapat melakukan pemrosesan presentasi ad-hoc untuk markup kode yang bersih dan ringkas dalam stylesheet terpisah.
Untuk perbaikan menengah, kami akan mencantumkan tiga poin utama di sini terlebih dahulu, tetapi ini berisi banyak poin konten dan pengetahuan, yang perlu kita pelajari dan kuasai selangkah demi selangkah hingga akhirnya kita mencapai tata letak menggunakan CSS sepenuhnya tanpa menggunakan tabel apa pun.