1. Langkah pertama untuk berkembang
Tambahkan DOCTYPE yang benar ke halaman
DOCTYPE adalah singkatan dari tipe dokumen. Terutama digunakan untuk menunjukkan versi XHTML atau HTML yang digunakan. Browser menafsirkan kode halaman sesuai dengan DTD (Document Type Definition) yang ditentukan oleh DOCTYPE.
(1) Transisi (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">
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" content="teks/html; charset=GB2312" />
Bahasa pengkodean yang dideklarasikan di sini adalah Bahasa Mandarin Sederhana GB2312. Jika Anda perlu membuat 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 penulisan yang benar adalah:
<title>Profil Perusahaan</title> Demikian pula, ubah <P> menjadi <p>, <B> menjadi <b>, dan seterusnya. Langkah konversi ini 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="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Cara menulis yang benar:
<img src="logo_unc_120x30.gif" alt="Logo perusahaan UNC, 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
Dalam 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="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.
2. Langkah perbaikan kedua
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 menggunakan CSS.
Tambahkan id ke setiap tabel dan formulir
Berikan tabel atau bentuk markup struktural yang unik, misalnya.
<tabel id="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.