Struktur XHTML I: Gunakan XHTML untuk merekonstrui laman web
- Hal Sebelumnya Ringkasan XHTML
- Hal Berikutnya Struktur XHTML 2
Karena alasan yang satu, judul yang kami tulis untuk bab ini adalah: 'XHTML: Aturan yang Sederhana, Garis Pedoman yang Mudah.' Alasan yang lain adalah, aturan dan garis pedoman yang disebutkan di bab ini adalah sederhana dan mudah. Alasan yang lain adalah, buku desain WEB yang sederhana dan mudah seperti barangan gratis yang baru di pasar, meskipun sering dilihat, masih dapat menarik perhatian orang dan menarik minat untuk mencoba. Ini dapat meningkatkan minat dan mendorong orang untuk mencoba.
Saya benar-benar berharap konten bab ini dapat menarik minat anda dan mendorong anda untuk mencoba. Mengapa saya katakan demikian? Karena sekali anda menguasai konsep yang sederhana dan mudah yang disertakan di bab ini, anda akan menantang kembali cara kerja halaman web, dan mulai merubah cara membangunnya. Namun saya tidak ingin anda hanya menulis ulang kode. Saya ingin anda berpikir dan bekerja dengan cara yang lain.
Di sebelah lain, restrukturisasi adalah makna sebenarnya dari XHTML.
Dalam bab ini, kita akan mengkaji mekanisme dan makna markah struktural. Jika anda sedang menggabungkan standar laman web ke proyek pengembangan anda, anda mungkin merasa konten bab ini cukup familiar. Namun bahkan para ahli lama di bidang ini, masih dapat menemukan keunggulan yang di luar harapan.
Ringkasan aturan XHTML
Mengubah HTML tradisional ke XHTML 1.0 adalah pantas dan tanpa sakit, selama anda mengikuti beberapa aturan yang sederhana dan garis pedoman yang mudah. Baik anda pernah menggunakan HTML atau tidak, ini tidak akan menghalangi anda untuk menggunakan XHTML.
- Gunakan deklarasi jenis dokumen yang sesuai dan namespace.
- Gunakan elemen meta untuk menyatakan jenis konten anda.
- Tulis semua elemen dan properti dengan huruf kecil.
- Tambahkan petikan bagi semua nilai properti.
- Tetapkan nilai bagi semua properti.
- Tutup semua tag.
- Gunakan ruang dan garisan miring untuk menutup tag kosong.
- Jangan tulis garis bawah ganda di dalam komen.
- Pastikan kurang daripada simbol dan simbol sama seperti < dan &
Unicode dan set karakter lain
Dokumen XML, XHTML, dan HTML 4.0 menggunakan set karakter standar Unicode, yang didefinisikan oleh asosiasi Unicode. Unicode adalah set karakter yang khusus, yang menyediakan nomor unik untuk setiap karakter, tidak peduli platform, program, atau bahasa. Unicode juga yang paling dekat dengan abjad umum yang kita miliki, meskipun itu bukan abjad, tetapi suatu skema pemetaan angka.
Walaupun Unicode adalah set karakter yang dijadikan standar untuk dokumen web, para pengembang masih dapat memilih set karakter lain yang paling sesuai dengan kebutuhan mereka. Misalnya, situs web Amerika dan Eropa sering menggunakan enkoding ISO-8859-1 (Latin-1), sementara standar nasional Cina adalah gb2312.
Markir dokumen untuk semantik ekspresi, bukan untuk gaya
Ingat: gunakan CSS paling banyak untuk tata letak. Dalam dunia standar web, markering XHTML hanya berhubungan dengan struktur dokumen, bukan dengan ekspresi.
Dokumen yang struktural baik dapat memberikan semantik yang paling banyak kepada browser, keduanya browser berada di ponsel cerdas atau browser grafis desktop yang modern. Dokumen yang struktural baik dapat memberikan semantik yang visual kepada pengguna, bahkan di browser yang lama, atau di browser modern yang pengguna menutup CSS.
Tidak setiap situs dapat segera melepaskan tata letak tabel HTML. Penemu CSS, W3C, hanya menjadikan situs resmi menjadi tata letak CSS pada 11 November 2002. Namun, bahkan para pemegang standar yang keras tidak selalu memisahkan ekspresi sepenuhnya dari struktur, setidaknya di XHTML 1. Namun, sekarang, kami dapat mengambil langkah besar ke arah ideal ini, melalui pemisahan ekspresi dari struktur (atau pemisahan data dari desain), bahkan tata letak tradisional yang campur dapat mendapat kebaikan dari itu.
Di bawah ini ada beberapa petunjuk yang dapat membantu anda berpikir dengan cara yang lebih struktur:
Warna di dalam struktur
Di sekolah sintaks, sebagian besar dari kami diharapkan untuk menulis artikel dengan format struktur standar. Sekarang, kami menjadi desainer, dapat merayu batasan struktur dengan bebas, lalu berani masuk ke lingkungan ekspresi pribadi yang unik (mungkin buklet dan situs komersial kami belum begitu unik dan pribadi). Tetapi setidaknya kami tidak akan diserang lagi oleh struktur.
Terdapat hal yang sebenarnya, menurut HTML, kami seharusnya mengatur struktur konten dalam hierarki yang terorganisir. Pada masa yang browser tidak mendukung CSS, kami tidak dapat melaksanakan tata letak yang tersedia untuk dijual bersamaan dengan hal ini. Tetapi hari ini, saat kami dapat melaksanakan desain kami tanpa gangguan, kami memiliki kemampuan untuk memberikan dokumen yang struktural baik.
Ketika anda meng标记网络上的文本,atau ketika anda mengkonversi dokumen teks yang sudah ada ke halaman web, gunakan masalah struktur tradisional ini untuk berpikir.
<h1>Tema Saya</h1> <p>Teks pengenalan</p> <h2>Pandangan Tambahan</h2> <p>Teks yang berkaitan</p>
Juga, olah jauh daripada menggunakan elemen HTML yang sudah dihapus seperti <font>, atau elemen yang tak bersemantik seperti <br>, untuk mensimulasikan struktur logik yang tak wujud.
Contohnya, jangan seperti ini:
<font size="7">Tema Saya</font><br /> Teks pengenalan<br /><br /> <font size="6">Pandangan Tambahan</font><br /> Teks yang berkaitan<br />
Gunakan elemen berdasarkan maknanya, bukannya berdasarkan penampilannya.
Beberapa daripada kami sudah jatuh ke kebiasaan buruk, seperti menggunakan h1 untuk teks besar saja, atau menggunakan li untuk menambah titik di hadapan, seperti yang kami diskusikan di bab sebelumnya. Peramban selalu berada di tahap menempatkan atribut desain untuk elemen HTML. Semua kami sudah berada di tahap ini, di mana h1 dianggap sebagai huruf besar, li dianggap sebagai titik, atau blockquote dianggap sebagai teks tergolong. Sebagian besar daripada kami masih menggunakan elemen struktur untuk meniru kesan penampilan untuk menulis HTML secara cacat.
Demikian pula, jika pereka menginginkan semua judul menggunakan ukuran huruf yang sama, dia akan set semua judul menjadi h1, walaupun hal ini tiada makna struktur semantik.
Ini adalah judul utama, dalam keadaan saya mengatur teks menurut format panduan. Ini bukannya judul utama, tetapi saya ingin ia menggunakan font yang sama seperti judul di atas, tetapi saya tak tahu bagaimana untuk menggunakan CSS. Ini bukannya judul. Tetapi saya sangat menginginkan teks di halaman menggunakan font yang sama untuk mencapai apa yang saya inginkan. Jika saya memahami CSS, saya boleh mencapai rancangan ini tanpa mengganggu struktur dokumen.
Kami mesti meletakkan kecenderungan kecil kami di belakang dan mulai menggunakannya berdasarkan makna elemen, bukannya berdasarkan penampilannya. Secara nyata, h1 boleh menjadi apa pun yang anda inginkan. Melalui CSS, h1 boleh menjadi huruf roma kecil dan tidak tebal, sementara teks p boleh menjadi huruf besar dan tebal, li boleh tidak mempunyai titik (anda boleh menggunakan gambar PNG, GIF atau JPEG kecil kucing, anjing atau logo syarikat untuk menggantikannya) dan lain-lain.
Dari hari ini, kami akan menggunakan CSS untuk menentukan penampilan elemen. Kami bahkan boleh mengubah penampilan mereka berdasarkan posisi elemen di halaman atau di laman. CSS boleh menghapus penampilan sepenuhnya daripada struktur dan membenarkan anda untuk mengformat mana-mana elemen berdasarkan gaya yang anda sukai.
h1, h2, h3, h4, h5, h6 { font-family: georgia, palatino, "New Century Schoolbook", times, serif; font-weight: normal; font-size: 2em; margin-top: 1em; margin-bottom: 0; {}
Mengapa Anda melakukan hal ini? Tujuannya adalah untuk mendapatkan penampilan dan kesadaran yang berbranding di pemeriksa grafik, sambil mempertahankan struktur dokumen di pemeriksa teks, peralatan nirkabel, dan email berformat HTML.
Kami tidak ingin berbicara tentang teknologi CSS lebih banyak di bab tentang XHTML. Kami hanya ingin menunjukkan bahwa struktur dokumen dan ekspresi visual adalah dua hal yang berbeda, dan elemen struktural harus digunakan untuk merubah teks, bukan untuk memaksa efek tampilan.
Gunakan elemen struktural, bukannya sampah yang tidak berarti
Karena kami lupa atau sama sekali tidak tahu tentang penggunaan HTML dan XHTML adalah untuk menyampaikan makna struktural, banyak pendukung HTML menggunakan tanda ini untuk memasukkan daftar:
Projek satu<br /> Projek dua<br /> Projek tiga<br />
Berikan perhatian kepada penggunaan daftar terurut atau tak terurut sebagai gantinya:
<ul> <li>Projek satu</li> <li>Projek dua</li> <li>Projek tiga</li> </ul>
"Tapi li memberikan titik bulat bagi saya, tetapi saya tidak memerlukan titik bulat!" Mungkin Anda akan katakan demikian. Menurut bab di atas, CSS tidak membuat asumsi tentang tampilan yang diharapkan elemen. Dia menunggu Anda untuk memberitahu tentang tampilan yang diharapkan elemen. Menutup titik bulat adalah kemampuan dasar CSS. Dia dapat membuat daftar terlihat seperti teks biasa, atau seperti navigasi grafik yang mempunyai efek balik penuh.
Jadi, gunakan elemen daftar untuk menandai daftar. Secara serupa, gunakan strong untuk menggantikan b, gunakan em untuk menggantikan i, dan seterusnya. Dalam kebanyakan keadaan baku pemeriksa desktop, tampilan strong sama seperti b, dan em sama seperti i, serta dapat menciptakan efek tampilan yang diharapkan tanpa merusak struktur dokumen.
Walaupun CSS tidak membuat asumsi tentang tampilan elemen apa pun, pemeriksa web akan membuat banyak asumsi, dan kami belum menemukan browser yang menampilkan strong sebagai efek lain daripada huruf tebal (kecuali yang diatur CSS penata rancangan untuk menampilkan lainnya). Jika Anda khawatir tentang browser asing yang tidak menampilkan strong sebagai huruf tebal, Anda dapat menulis aturan CSS seperti ini:
strong { font-weight: bold; font-style: normal; {}
Elemen Visual dan Struktur
Standard web bukan hanya meminta kami gunakan teknologi mana, tetapi juga mengikuti cara penggunaan teknologi ini. Menggunakan XHTML untuk menulis markah, serta menggunakan CSS untuk mengurus sebahagian atau seluruh tata letak, tidak memastikan bahawa laman akan lebih mudah digunakan dan lebih ringan, serta menghemat berapa banyak bandwidth. Seperti teknologi yang kami gunakan di masa awal, XHTML dan CSS juga boleh digunakan secara salah dan terlalu banyak. XHTML yang panjang dan HTML yang panjang akan menghabiskan bandwidth dan masa pengguna. CSS yang panjang juga tidak dapat menggantikan sepenuhnya HTML yang berfungsi; ini hanya penggantian yang buruk untuk sesuatu yang buruk lainnya.
- Hal Sebelumnya Ringkasan XHTML
- Hal Berikutnya Struktur XHTML 2