Strukturisasi XHTML I: Menggunakan XHTML untuk Merenovasi Situs

Karena alasan yang satu, judul yang kami tulis untuk bagian ini adalah: 'XHTML: Aturan yang Sederhana, Garis Pedoman yang Mudah.' Salah satu alasan adalah aturan dan garis pedoman yang disebutkan di bagian ini adalah sederhana dan mudah. Alasan kedua adalah buku desain WEB yang sederhana dan mudah seperti barang gratis yang baru di pasar, meskipun biasa, tetap dapat menarik perhatian dan membangkitkan minat, hal seperti itu dapat membangkitkan minat dan mendorong orang untuk mencoba.

Saya benar-benar berharap konten bagian ini dapat membangkitkan minat Anda dan mendorong Anda untuk mencoba. Mengapa? Karena sekali Anda menguasai ide yang sederhana dan mudah yang disertakan dalam bab ini, Anda akan menantang kembali cara kerja halaman web, dan mulai mengubah cara membangunnya. Namun, saya tidak menginginkan Anda hanya menulis ulang kode. Saya menginginkan Anda berpikir dan bekerja dengan cara yang berbeda.

Di sisi lain, refaktoring adalah makna yang sebenarnya dari XHTML.

Dalam bab ini, kita akan mempelajari mekanisme dan makna tanda markering struktural. Jika Anda sedang menggabungkan standar situs web ke proyek pengembangan Anda, mungkin Anda akan merasa konten bab ini menarik. Namun, bahkan orang yang kaya pengalaman dalam hal ini, masih dapat menemukan keunggulan yang mengejutkan dari bab ini.

Ringkasan aturan XHTML

Merubah HTML tradisional ke XHTML 1.0 cepat dan tanpa sakit, selama Anda mengikuti beberapa aturan sederhana dan garis pedoman yang mudah. Tidak peduli apakah Anda pernah menggunakan HTML atau tidak, itu tidak akan menghalangi Anda untuk menggunakan XHTML.

  • Gunakan deklarasi jenis dokumen yang tepat dan namespace.
  • Gunakan elemen meta untuk menyatakan jenis konten Anda.
  • Tulis semua elemen dan atribut dengan huruf kecil.
  • Tambahkan kutip untuk semua nilai atribut.
  • Alokasikan nilai bagi semua atribut.
  • Tutup semua tag.
  • Gunakan spasi dan garis miring untuk menutup tag kosong.
  • Jangan menulis garis bawah ganda di catatan.
  • Pastikan tanda kurang lebih kecil dan dan sama dengan adalah < dan &

Unicode dan karakter lain

Dokumen XML, XHTML, dan HTML 4.0 memiliki karakter yang dijadikan standar adalah Unicode, standar yang didefiniskan oleh asosiasi Unicode. Unicode adalah karakter yang kritis, yang memberikan setiap karakter dengan angka yang unik, tidak peduli platform, program, atau bahasa. Unicode juga yang paling dekat dengan abjad umum yang kita miliki, meskipun ia bukan abjad, melainkan skema pemetaan angka.

Walaupun Unicode adalah karakter yang dijadikan standar untuk dokumen web, para pengembang masih dapat memilih karakter yang lebih sesuai dengan kebutuhan mereka. Misalnya, situs web Amerika dan Eropa sering menggunakan enkoding ISO-8859-1 (Latin-1), sedangkan standar nasional Cina adalah gb2312.

Tandai dokumen untuk makna ekspresi, bukan untuk gaya

Ingat: gunakan CSS secara maksimal untuk tata letak. Dalam dunia standar web, markering XHTML tak berhubungan dengan ekspresi, ia hanya berhubungan dengan struktur dokumen.

Dokumen yang memiliki struktur yang bagus dapat memberikan banyak makna kepada browser, baik browser berada di ponsel cerdas maupun browser grafis desktop yang modern. Dokumen yang memiliki struktur yang bagus dapat memberikan makna 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, baru saja mengubah situs resmi ke tata letak CSS pada 11 November 2002. Namun, bahkan pendukung kuat standar tak selalu memisahkan ekspresi dari struktur sepenuhnya, setidaknya di XHTML 1. Namun, sekarang, kita dapat mengambil langkah besar menuju ideal ini, dengan memisahkan ekspresi dari struktur (atau data dari desain), bahkan tata letak tradisional yang campur dapat mendapat keuntungan.

Di bawah ini ada beberapa petunjuk yang dapat membantu Anda berpikir dalam cara yang lebih struktural:

Warna di dalam gantungan

Di sekolah bahasa, sebagian besar dari kami dipaksa untuk menulis artikel dengan format gantungan standar. Sekarang, kami menjadi desainer, dapat berkebebasan melepaskan batasan gantungan, dan berani berada di lingkungan ekspresi pribadi yang unik (mungkin brosur dan situs komersial kami belum begitu unik dan pribadi). Tetapi setidaknya kami tidak lagi dihalangi oleh gantungan.

Secara kenyataan, menurut HTML, kami seharusnya menyusun konten dalam tingkatan yang terorganisir. Pada masa browser tidak mendukung CSS, kami tak dapat melaksanakan tata letak yang siap dijual sambil melakukan hal ini. Tetapi hari ini, sambil melaksanakan desain kami tanpa kompromi, kami memiliki kemampuan untuk menyerahkan dokumen yang memiliki struktur internal yang bagus.

Ketika Anda menandai teks yang akan digunakan untuk jaringan, atau ketika Anda mengkonversi dokumen teks yang sudah ada ke halaman web, gunakan entri gantungan tradisional ini untuk berpikir.

<h1>Tema Saya</h1>
<p>Teks pengenalan</p>
<h2>Pandangan Tambahan</h2>
<p>Teks yang berhubungan</p>

Juga, hindari penggunaan elemen HTML yang sudah usang seperti <font>, atau elemen yang tak berarti seperti <br />, untuk meniru struktur logika yang tak ada.

Contohnya, jangan seperti ini:

<font size="7">Tema Saya</font><br />
Teks pengenalan<br /><br />
<font size="6">Pandangan Tambahan</font><br />
Teks yang berhubungan<br />

Gunakan elemen berdasarkan maknanya, bukannya berdasarkan penampilannya.

Beberapa orang di antara kita sudah jatuh ke adat buruk, seperti menggunakan h1 untuk teks yang besar saja, atau menggunakan li untuk menambah tanda titik di depan. Seperti yang telah disebutkan di bab sebelumnya, peramban selalu berada di tempat untuk menekan atribut desain ke atas elemen HTML. Kita semua sudah berada di tempat untuk berpikir bahwa h1 berarti huruf besar, li berarti tanda titik, atau blockquote berarti teks tergeser. Sebagian besar orang di antara kita masih menulis HTML dengan cara yang kacau menggunakan elemen struktural untuk meniru efek penampilan.

Demikian pula, jika desainer ingin semua judul menggunakan ukuran yang sama, dia akan mengatur semua judul menjadi h1, bahkan jika hal ini tidak ada makna semantik.

Ini adalah judul utama, dalam hal saya mengatur teks berdasarkan struktur naskah.
Ini bukan judul utama, tetapi saya ingin ia menggunakan font yang sama seperti judul di atas, tetapi saya tidak tahu bagaimana menggunakan CSS.
Ini bukan judul yang benar. Tetapi saya sangat menginginkan teks di halaman menggunakan font yang sama, untuk mencapai yang saya inginkan.
Jika saya memahami CSS, saya dapat mencapai desain ini tanpa mengganggu struktur dokumen.

Kami harus meletakkan trik kecil kami di samping dan mulai menggunakan mereka berdasarkan semantik elemen, bukannya berdasarkan penampilannya. Secara kenyataan, h1 dapat menjadi bentuk yang Anda inginkan. Melalui CSS, h1 dapat menjadi huruf Roma kecil dan lemah, sementara teks p dapat menjadi huruf besar dan tebal, li dapat tidak memiliki titik (atau Anda dapat menggunakan gambar PNG, GIF, atau JPEG kecil kucing, anjing, atau logo perusahaan untuk menggantikannya) dan lainnya.

Dari hari ini, kita akan menggunakan CSS untuk menentukan penampilan elemen. bahkan kita dapat mengubah penampilan mereka berdasarkan posisi elemen di halaman atau di situs. CSS dapat menarik tampilan sepenuhnya dari struktur dan memungkinkan Anda mengatur gaya penataan elemen 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 peramban grafis, sementara struktur dokumen tetap disimpan di peramban teks, peralatan nirkabel, dan email berformat HTML.

Kami tidak ingin berbicara lebih banyak tentang CSS 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 mengekspresikan efek tampilan.

Gunakan elemen struktural, bukannya sampah yang tidak berarti

Karena kami lupa atau sama sekali tidak tahu penggunaan HTML dan XHTML adalah untuk memperkatakan makna struktural, banyak penentang HTML menggunakan tanda ini untuk memasukkan daftar:

Proyek satu<br />
Proyek dua<br />
Proyek tiga<br />

Berpikir tentang menggunakan daftar terurut atau tak terurut untuk gantinya:

<ul>
<li>Proyek satu</li>
<li>Proyek dua</li>
<li>Proyek tiga</li>
</ul>

"Tapi li memberikan titik bulat, tetapi saya tidak memerlukannya!" Anda mungkin akan katakan. 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 sama seperti teks biasa, serta dapat membuat daftar terlihat seperti navigasi grafis, dengan efek putar penuh.

Jadi, gunakan elemen daftar untuk menandai daftar. Secara serupa, gunakan strong untuk menggantikan b, gunakan em untuk menggantikan i, dan seterusnya. Dalam kebanyakan peramban desktop secara baku, tampilan strong sama seperti b, dan em sama seperti i, serta dapat menciptakan efek tampilan yang diharapkan tanpa merusak struktur dokumen.

Meskipun CSS tidak membuat asumsi tentang tampilan elemen mana pun, peramban mempunyai banyak asumsi, dan kami belum menemukan peramban yang menampilkan strong selain huruf tebal (kecuali yang ditentukan CSS penata rancangan untuk menampilkan dengan cara lain). Jika Anda khawatir tentang peramban 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

Standar web tidak hanya meminta kita gunakan teknologi mana, tetapi juga mengikuti cara penggunaan teknologi tersebut. Menggunakan XHTML untuk menulis marka, serta menggunakan CSS untuk menangani bagian atau seluruh tata letak, tidak pasti akan membuat situs lebih mudah digunakan dan lebih ringan, serta menghemat berapa banyak bandwidth. Seperti teknologi yang kami gunakan di masa lalu, XHTML dan CSS juga dapat digunakan dengan salah dan terlalu sering. XHTML yang panjang dan HTML yang panjang akan menghabiskan bandwith dan waktu pengguna. CSS yang terlalu panjang juga tidak dapat menggantikan sepenuhnya kode HTML yang berfungsi; ini hanya salah satu hal buruk yang digantikan dengan yang lain.