XHTML - Panduan Cepat
XHTML adalah singkatan dari EXtegang HyperText Markup Lpenderitaan. Ini adalah langkah selanjutnya dalam evolusi internet. XHTML 1.0 adalah jenis dokumen pertama dalam keluarga XHTML.
XHTML hampir identik dengan HTML 4.01 dengan hanya sedikit perbedaan. Ini adalah versi HTML 4.01 yang lebih bersih dan lebih ketat. Jika Anda sudah mengetahui HTML, maka Anda perlu memberikan sedikit perhatian untuk mempelajari HTML versi terbaru ini.
XHTML dikembangkan oleh World Wide Web Consortium (W3C) untuk membantu pengembang web melakukan transisi dari HTML ke XML. Dengan bermigrasi ke XHTML hari ini, pengembang web dapat memasuki dunia XML dengan semua manfaatnya, sambil tetap percaya diri dengan kompatibilitas konten ke belakang dan masa depan.
Mengapa Menggunakan XHTML?
Pengembang yang memigrasi konten mereka ke XHTML 1.0 mendapatkan keuntungan berikut -
Dokumen XHTML adalah XML yang sesuai karena mudah dilihat, diedit, dan divalidasi dengan alat XML standar.
Dokumen XHTML dapat ditulis untuk beroperasi lebih baik daripada sebelumnya di browser yang ada serta di browser baru.
Dokumen XHTML dapat menggunakan aplikasi seperti skrip dan applet yang bergantung pada Model Objek Dokumen HTML atau Model Objek Dokumen XML.
XHTML memberi Anda format yang lebih konsisten dan terstruktur dengan baik sehingga halaman web Anda dapat dengan mudah diurai dan diproses oleh browser web saat ini dan yang akan datang.
Anda dapat dengan mudah memelihara, mengedit, mengonversi, dan memformat dokumen Anda dalam jangka panjang.
Karena XHTML adalah standar resmi W3C, situs web Anda menjadi lebih kompatibel dengan banyak browser dan ditampilkan dengan lebih akurat.
XHTML menggabungkan kekuatan HTML dan XML. Selain itu, halaman XHTML dapat dirender oleh semua browser yang mendukung XML.
XHTML mendefinisikan standar kualitas untuk halaman web Anda dan jika Anda mengikutinya, maka halaman web Anda dihitung sebagai halaman web berkualitas. W3C mensertifikasi halaman-halaman tersebut dengan stempel kualitasnya.
Pengembang web dan perancang peramban web terus menemukan cara baru untuk mengekspresikan ide mereka melalui bahasa markup baru. Dalam XML, relatif mudah untuk memperkenalkan elemen baru atau atribut elemen tambahan. Keluarga XHTML dirancang untuk mengakomodasi ekstensi ini melalui modul XHTML dan teknik untuk mengembangkan modul baru yang sesuai dengan XHTML. Modul ini mengizinkan kombinasi fitur yang ada dan baru pada saat mengembangkan konten dan merancang agen pengguna baru.
Pemahaman Dasar
Sebelum kita melangkah lebih jauh, mari kita lihat sekilas tentang apa itu HTML, XML, dan SGML.
Apa itu SGML?
Ini adalah Standard Generalized Markup Language (SGML) aplikasi yang sesuai dengan Standar Internasional ISO 8879. HTML secara luas dianggap sebagai bahasa penerbitan standar World Wide Web.
Ini adalah bahasa untuk mendeskripsikan bahasa markup, terutama yang digunakan dalam pertukaran dokumen elektronik, manajemen dokumen, dan penerbitan dokumen. HTML adalah contoh bahasa yang didefinisikan dalam SGML.
Apa itu XML?
XML adalah singkatan dari EXtegang Markup Lpenderitaan. XML adalah bahasa markup seperti HTML dan dirancang untuk mendeskripsikan data. Tag XML belum ditentukan sebelumnya. Anda harus menentukan tag Anda sendiri sesuai dengan kebutuhan Anda.
Sintaks XHTML sangat mirip dengan sintaks HTML dan hampir semua elemen HTML yang valid juga valid dalam XHTML. Tetapi ketika Anda menulis dokumen XHTML, Anda perlu memberi sedikit perhatian ekstra untuk membuat dokumen HTML Anda sesuai dengan XHTML.
Berikut adalah poin penting untuk diingat saat menulis dokumen XHTML baru atau mengubah dokumen HTML yang ada menjadi dokumen XHTML -
Tulis deklarasi DOCTYPE di awal dokumen XHTML.
Tulis semua tag dan atribut XHTML dalam huruf kecil saja.
Tutup semua tag XHTML dengan benar.
Sarang semua tag dengan benar.
Kutip semua nilai atribut.
Larang minimalisasi Atribut.
Ganti name atribut dengan id atribut.
Hentikan language atribut dari tag script.
Berikut adalah penjelasan detail aturan XHTML di atas -
Deklarasi DOCTYPE
Semua dokumen XHTML harus memiliki deklarasi DOCTYPE di awal. Ada tiga tipe deklarasi DOCTYPE, yang akan didiskusikan secara detail di bab Doctypes XHTML. Berikut adalah contoh penggunaan DOCTYPE -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Sensitivitas Kasus
XHTML adalah bahasa markup case sensitive. Semua tag dan atribut XHTML harus ditulis dalam huruf kecil saja.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>Dalam contoh, Href dan tag jangkar A tidak dalam huruf kecil, jadi itu salah.
Menutup Tag
Setiap tag XHTML harus memiliki tag penutup yang setara, bahkan elemen kosong juga harus memiliki tag penutup. Berikut adalah contoh yang menunjukkan cara yang valid dan tidak valid menggunakan tag -
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >Sintaks berikut menunjukkan cara yang benar untuk menulis tag di atas dalam XHTML. Perbedaannya adalah, di sini kami telah menutup kedua tag dengan benar.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />Atribut Kutipan
Semua nilai atribut XHTML harus dikutip. Jika tidak, dokumen XHTML Anda dianggap sebagai dokumen yang tidak valid. Berikut adalah contoh yang menunjukkan sintaks -
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />Atribut Minimisasi
XHTML tidak mengizinkan minimisasi atribut. Ini berarti Anda perlu menyatakan atribut dan nilainya secara eksplisit. Contoh berikut menunjukkan perbedaannya -
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">Berikut adalah daftar atribut yang diminimalkan dalam HTML dan cara Anda perlu menuliskannya dalam XHTML -
| Gaya HTML | XHTML Style |
|---|---|
| kompak | kompak = "kompak" |
| diperiksa | diperiksa = "diperiksa" |
| menyatakan | menyatakan = "mendeklarasikan" |
| hanya baca | readonly = "readonly" |
| dengan disabilitas | disabled = "disabled" |
| terpilih | dipilih = "dipilih" |
| menunda | defer = "defer" |
| ismap | ismap = "ismap" |
| nohref | nohref = "nohref" |
| noshade | noshade = "noshade" |
| nowrap | nowrap = "nowrap" |
| banyak | multiple = "multiple" |
| noresize | noresize = "noresize" |
The id Atribut
Atribut id menggantikan atribut nama. Daripada menggunakan name = "name", XHTML lebih memilih menggunakan id = "id". Contoh berikut menunjukkan bagaimana -
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />The bahasa Atribut
Atribut bahasa dari tag skrip tidak digunakan lagi. Contoh berikut menunjukkan perbedaan ini -
<!-- This is invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>
<!-- Correct XHTML way of writing this is as follows -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>Tag Bertingkat
Anda harus menumpuk semua tag XHTML dengan benar. Jika tidak, dokumen Anda dianggap sebagai dokumen XHTML yang salah. Contoh berikut menunjukkan sintaks -
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>Larangan Elemen
Elemen berikut tidak diperbolehkan memiliki elemen lain di dalamnya. Larangan ini berlaku untuk semua kedalaman sarang. Berarti, itu mencakup semua elemen yang turun.
| Elemen | Larangan |
|---|---|
| <a> | Tidak boleh mengandung elemen <a> lainnya. |
| <pre> | Tidak boleh berisi elemen <img>, <object>, <big>, <small>, <sub>, atau <sup>. |
| <button> | Tidak boleh berisi elemen <input>, <select>, <textarei>, <label>, <button>, <form>, <fieldset>, <iframe> atau <isindex>. |
| <label> | Tidak boleh mengandung elemen <label> lainnya. |
| <form> | Tidak boleh mengandung elemen <form> lainnya. |
Dokumen Minimal XHTML
Contoh berikut menunjukkan kepada Anda konten minimum dari dokumen XHTML 1.0 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>Every document must have a title</title>
</head>
<body>
...your content goes here...
</body>
</html>Karena fakta bahwa XHTML adalah aplikasi XML, praktik tertentu yang benar-benar legal dalam HTML 4 berbasis SGML harus diubah. Anda sudah melihat sintaks XHTML di bab sebelumnya, jadi perbedaan antara XHTML dan HTML sangat jelas. Berikut perbandingan antara XHTML dan HTML.
Dokumen XHTML Harus Berformat Baik
Bentuk yang baik adalah konsep baru yang diperkenalkan oleh XML. Pada dasarnya, ini berarti semua elemen harus memiliki tag penutup dan Anda harus menumpuknya dengan benar.
CORRECT: Nested Elements
<p>Here is an emphasized <em>paragraph</em>.</p>INCORRECT: Overlapping Elements
<p>Here is an emphasized <em>paragraph.</p></em>Elemen dan Atribut Harus dalam Huruf Kecil
Dokumen XHTML harus menggunakan huruf kecil untuk semua elemen HTML dan nama atribut. Perbedaan ini diperlukan karena dokumen XHTML diasumsikan sebagai dokumen XML dan XML peka huruf besar kecil. Misalnya, <li> dan <LI> adalah tag yang berbeda.
Tag Akhir Diperlukan untuk semua Elemen
Dalam HTML, elemen tertentu diizinkan untuk menghilangkan tag akhir. Tapi XML tidak mengizinkan tag akhir dihilangkan.
CORRECT: Terminated Elements
<p>Here is a paragraph.</p><p>here is another paragraph.</p>
<br><hr/>INCORRECT: Unterminated Elements
<p>Here is a paragraph.<p>here is another paragraph.
<br><hr>Nilai Atribut Harus Selalu Dikutip
Semua nilai atribut termasuk nilai numerik, harus dikutip.
CORRECT: Quoted Attribute Values
<td rowspan="3">INCORRECT: Unquoted Attribute Values
<td rowspan=3>Atribut Minimisasi
XML tidak mendukung minimisasi atribut. Pasangan atribut-nilai harus ditulis lengkap. Nama atribut seperti kompak dan dicentang tidak dapat muncul dalam elemen tanpa nilainya ditentukan.
CORRECT: Non Minimized Attributes
<dl compact="compact">INCORRECT: Minimized Attributes
<dl compact>Penanganan Ruang Putih di Nilai Atribut
Saat browser memproses atribut, browser melakukan hal berikut -
Strip di depan dan di belakang spasi.
Urutan peta dari satu atau lebih karakter spasi (termasuk jeda baris) ke satu spasi antar kata.
Script dan Elemen Gaya
Dalam XHTML, skrip dan elemen gaya tidak boleh memiliki karakter “<” dan “&” secara langsung, jika ada; kemudian mereka diperlakukan sebagai awal markup. Entitas seperti "<" dan "&" dikenali sebagai referensi entitas oleh pemroses XML untuk menampilkan karakter "<" dan "&" masing-masing.
Membungkus konten skrip atau elemen gaya dalam bagian bertanda CDATA menghindari perluasan entitas ini.
<script type="text/JavaScript">
<![CDATA[
... unescaped VB or Java Script here... ...
]]>
</script>Alternatifnya adalah dengan menggunakan skrip eksternal dan gaya dokumen.
Elemen dengan atribut id dan nama
XHTML merekomendasikan penggantian atribut nama dengan atribut id . Perhatikan bahwa di XHTML 1.0, atribut nama elemen ini secara resmi tidak digunakan lagi, dan akan dihapus dalam versi XHTML berikutnya.
Atribut dengan Kumpulan Nilai yang Ditentukan Sebelumnya
HTML dan XHTML keduanya memiliki beberapa atribut yang memiliki kumpulan nilai yang telah ditentukan sebelumnya dan terbatas. Sebagai contoh,type atribut dari inputelemen. Dalam HTML dan XML, ini disebutenumerated attributes. Di bawah HTML 4, interpretasi nilai-nilai ini tidak membedakan huruf besar / kecil, jadi nilaiTEXT setara dengan nilai text.
Di bawah XHTML, interpretasi nilai-nilai ini peka huruf besar / kecil sehingga semua nilai ini ditentukan dalam huruf kecil.
Referensi Entitas sebagai Nilai Hex
HTML dan XML keduanya mengizinkan referensi ke karakter dengan menggunakan nilai heksadesimal. Dalam HTML, referensi ini dapat dibuat dengan menggunakan salah satu&#Xnn; atau &#xnn; dan mereka valid tetapi dalam dokumen XHTML, Anda harus menggunakan versi huruf kecil saja seperti &#xnn;.
Elemen <html> adalah suatu Keharusan
Semua elemen XHTML harus bersarang di dalam elemen root <html>. Semua elemen lainnya dapat memiliki sub elemen yang harus berpasangan dan bertumpuk dengan benar dalam elemen induknya. Struktur dokumen dasarnya adalah -
<!DOCTYPE html....>
<html>
<head> ... </head>
<body> ... </body>
</html>Standar XHTML mendefinisikan tiga Definisi Jenis Dokumen (DTD). Yang paling umum digunakan dan mudah adalah dokumen Transisi XHTML.
Definisi tipe dokumen XHTML 1.0 sesuai dengan tiga DTD -
- Strict
- Transitional
- Frameset
Ada beberapa elemen dan atribut XHTML, yang tersedia di satu DTD tetapi tidak tersedia di DTD lain. Oleh karena itu, saat menulis dokumen XHTML Anda, Anda harus memilih elemen atau atribut XHTML Anda dengan hati-hati. Namun, validator XHTML membantu Anda mengidentifikasi elemen dan atribut yang valid dan tidak valid.
Silakan periksa Validasi XHTML untuk detail lebih lanjut tentang ini.
XHTML 1.0 Ketat
Jika Anda berencana menggunakan Cascading Style Sheet (CSS) secara ketat dan menghindari untuk menulis sebagian besar atribut XHTML, maka disarankan untuk menggunakan DTD ini. Dokumen yang sesuai dengan DTD ini memiliki kualitas terbaik.
Jika Anda ingin menggunakan XHTML 1.0 Strict DTD maka Anda perlu menyertakan baris berikut di bagian atas dokumen XHTML Anda.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transisi
Jika Anda berencana untuk menggunakan banyak atribut XHTML serta beberapa properti Cascading Style Sheet, maka Anda harus mengadopsi DTD ini dan Anda harus menulis dokumen XHTML yang sesuai.
Jika Anda ingin menggunakan XHTML 1.0 Transitional DTD, maka Anda perlu menyertakan baris berikut di bagian atas dokumen XHTML Anda.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Frameset XHTML 1.0
Anda dapat menggunakan ini saat Anda ingin menggunakan Bingkai HTML untuk mempartisi jendela browser menjadi dua atau lebih bingkai.
Jika Anda ingin menggunakan XHTML 1.0 Frameset DTD, maka Anda perlu menyertakan baris berikut di bagian atas dokumen XHTML Anda.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Note- Tidak peduli DTD apa yang Anda gunakan untuk menulis dokumen XHTML Anda; jika itu adalah dokumen XHTML yang valid, maka dokumen Anda dianggap sebagai dokumen berkualitas baik.
Ada beberapa atribut XHTML / HTML yang standar dan terkait dengan semua tag XHTML / HTML. Atribut ini terdaftar di sini dengan deskripsi singkat -
Atribut Inti
Tidak valid di elemen base, head, html, meta, param, script, style, dan judul.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| kelas | class_rule atau style_rule | Kelas elemen. |
| Indo | id_name | ID unik untuk elemen tersebut. |
| gaya | style_definition | Definisi gaya sebaris. |
| Judul | tooltip_text | Sebuah teks untuk ditampilkan di ujung mouse. |
Atribut Bahasa
Itu langatribut menunjukkan bahasa yang digunakan untuk konten tertutup. Bahasa tersebut diidentifikasi menggunakan singkatan bahasa standar ISO, sepertifr untuk bahasa Prancis, enuntuk bahasa Inggris, dan seterusnya. Lebih banyak kode dan formatnya dijelaskan di www.ietf.org .
Tidak valid dalam elemen base, br, frame, frameset, hr, iframe, param, dan script.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| dir | ltr | rtl | Mengatur arah teks. |
| lang | kode_bahasa | Set kode bahasa. |
Atribut Kepemilikan Microsoft
Microsoft memperkenalkan sejumlah atribut kepemilikan baru dengan Internet Explorer 4 dan versi yang lebih tinggi.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| kunci akses | karakter | Menyetel pintasan keyboard untuk mengakses elemen. |
| bahasa | tali | Atribut ini menentukan bahasa skrip yang akan digunakan dengan skrip terkait yang terikat ke elemen, biasanya melalui atribut pengendali kejadian. Nilai yang memungkinkan mungkin termasuk JavaScript, jScript, VBS, dan VBScript. |
| tabindex | jumlah | Menetapkan urutan tab dari suatu elemen. |
| konten dapat diedit | boolean | Memungkinkan pengguna mengedit konten yang dirender di Internet Explorer 5.5 atau lebih tinggi. Nilai yang mungkin adalah benar atau salah. |
| dengan disabilitas | boolean | Elemen dengan set atribut yang dinonaktifkan mungkin tampak pudar dan tidak akan menanggapi masukan pengguna. Nilai yang mungkin adalah benar atau salah. |
| hidefocus | hidup atau mati | Atribut kepemilikan ini, yang diperkenalkan dengan Internet Explorer 5.5, menyembunyikan fokus pada konten elemen. Fokus harus diterapkan ke elemen menggunakan atribut tabindex. |
| tidak dapat dipilih | hidup atau mati | Digunakan untuk mencegah konten yang ditampilkan di Internet Explorer 5.5 agar tidak dipilih. |
Saat pengguna mengunjungi situs web, mereka melakukan hal-hal seperti mengklik teks, gambar dan hyperlink, hal-hal yang mengarahkan kursor ke atas, dll. Ini adalah contoh dari apa yang disebut JavaScript sebagai peristiwa.
Kita dapat menulis penangan peristiwa kita dalam JavaScript atau VBScript dan dapat menetapkan penangan peristiwa ini sebagai nilai atribut tag peristiwa. XHTML 1.0 memiliki serangkaian peristiwa serupa yang tersedia dalam spesifikasi HTML 4.01.
Level Event <body> dan <frameset>
Hanya ada dua atribut yang dapat digunakan untuk memicu kode JavaScript atau VBScript apa pun, saat peristiwa apa pun terjadi di tingkat dokumen.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| onload | Naskah | Script dijalankan ketika dokumen XHTML dimuat. |
| onunload | Naskah | Script dijalankan ketika dokumen XHTML dibongkar. |
Note - Di sini, skrip mengacu pada fungsi atau bagian dari kode VBScript atau JavaScript.
Acara Level <form>
Ada enam atribut berikut yang dapat digunakan untuk memicu kode JavaScript atau VBScript saat terjadi peristiwa apa pun di tingkat formulir.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| dalam perubahan | Naskah | Script dijalankan ketika elemen berubah. |
| onsubmit | Naskah | Script dijalankan ketika formulir dikirimkan. |
| onreset | Naskah | Script dijalankan ketika formulir di-reset. |
| onselect | Naskah | Script dijalankan ketika elemen dipilih. |
| onblur | Naskah | Script dijalankan ketika elemen kehilangan fokus. |
| sedang fokus | Naskah | Script dijalankan saat elemen mendapatkan fokus. |
Acara Keyboard
Tiga peristiwa berikut dibuat oleh keyboard. Peristiwa ini tidak valid dalam elemen base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, dan judul.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| onkeydown | Naskah | Script dijalankan saat tombol ditekan. |
| onkeypress | Naskah | Script dijalankan saat tombol ditekan dan dilepaskan. |
| onkeyup | Naskah | Script menjalankan rilis kunci. |
Acara Lainnya
Tujuh peristiwa berikut ini dibuat oleh mouse saat berhubungan dengan tag HTML apa pun. Peristiwa ini tidak valid dalam elemen base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, dan judul.
| Atribut | Nilai | Deskripsi |
|---|---|---|
| onclick | Naskah | Script dijalankan dengan satu klik mouse. |
| ondblclick | Naskah | Script dijalankan dengan klik dua kali pada mouse. |
| onmousedown | Naskah | Script dijalankan ketika tombol mouse ditekan. |
| onmousemove | Naskah | Script dijalankan saat penunjuk mouse bergerak. |
| onmouseout | Naskah | Script dijalankan ketika pointer mouse bergerak keluar dari sebuah elemen. |
| onmouseover | Naskah | Script dijalankan ketika penunjuk mouse bergerak di atas sebuah elemen. |
| onmouseup | Naskah | Script dijalankan ketika tombol mouse dilepaskan. |
W3C telah membantu memindahkan komunitas pengembangan konten internet dari zaman mark-up non-standar yang cacat ke dalam dunia XML yang valid dan terbentuk dengan baik. Dalam XHTML 1.0, perpindahan ini dimoderasi dengan tujuan menyediakan migrasi yang mudah dari konten berbasis HTML 4 (atau sebelumnya) yang ada ke XHTML dan XML.
W3C telah menghapus dukungan untuk elemen dan atribut yang tidak digunakan lagi dari keluarga XHTML. Elemen dan atribut ini sebagian besar memiliki fungsionalitas berorientasi presentasi yang ditangani dengan lebih baik melalui lembar gaya atau perilaku default khusus klien.
Sekarang Kelompok Kerja HTML W3C telah mendefinisikan jenis dokumen awal hanya berdasarkan modul yaitu XHTML 1.1. Jenis dokumen ini dirancang agar dapat dibawa-bawa ke banyak koleksi perangkat klien, dan berlaku untuk sebagian besar konten internet.
Kesesuaian Dokumen
XHTML 1.1 memberikan definisi dokumen XHTML yang benar-benar sesuai yang HARUS memenuhi semua kriteria berikut -
Dokumen HARUS sesuai dengan batasan yang dinyatakan dalam XHTML 1.1 Document Type Definition.
Elemen root dokumen HARUS <html>.
Elemen root dari dokumen HARUS menunjukkan namespace XHTML menggunakan atribut xmlns .
Elemen root MUNGKIN juga berisi atribut lokasi skema seperti yang didefinisikan dalam XML Schema.
HARUS ada deklarasi DOCTYPE dalam dokumen sebelum elemen root. Jika ada, pengenal publik yang termasuk dalam deklarasi DOCTYPE HARUS merujuk DTD yang ditemukan di Definisi Jenis Dokumen XHTML 1.1.
Berikut adalah contoh dokumen XHTML 1.1 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head>
<title>This is the document title</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>Note- Dalam contoh ini, deklarasi XML disertakan. Deklarasi XML seperti di atas tidak diperlukan dalam semua dokumen XML. Penulis dokumen XHTML sangat dianjurkan untuk menggunakan deklarasi XML di semua dokumen mereka. Deklarasi seperti itu diperlukan jika pengkodean karakter dokumen selain UTF-8 atau UTF-16 default.
XHTML 1.1 Modul
Jenis dokumen XHTML 1.1 terdiri dari modul XHTML berikut.
Structure Module- Modul Struktur mendefinisikan elemen struktural utama untuk XHTML. Elemen-elemen ini secara efektif bertindak sebagai dasar untuk model konten dari banyak jenis dokumen keluarga XHTML. Elemen dan atribut yang termasuk dalam modul ini adalah - body, head, html, dan title.
Text Module - Modul ini mendefinisikan semua elemen wadah teks dasar, atribut, dan model isinya - abbr, akronim, alamat, blockquote, br, cite, kode, dfn, div, em, h1, h2, h3, h4, h5, h6 , kbd, p, pre, q, samp, span, strong, dan var.
Hypertext Module- Modul Hypertext menyediakan elemen yang digunakan untuk menentukan tautan hypertext ke sumber daya lain. Modul ini mendukung elemen a.
List Module- Seperti namanya, Modul Daftar menyediakan elemen berorientasi daftar. Secara khusus, Modul Daftar mendukung elemen dan atribut berikut - dl, dt, dd, ol, ul, dan li.
Object Module- Modul Objek menyediakan elemen untuk penyertaan objek tujuan umum. Secara khusus, Object Module mendukung - object dan param.
Presentation Module - Modul ini mendefinisikan elemen, atribut, dan model konten minimal untuk markup terkait presentasi sederhana - b, besar, hr, i, kecil, sub, sup, dan tt.
Edit Module - Modul ini mendefinisikan elemen dan atribut untuk digunakan dalam markup terkait pengeditan - del dan in.
Bidirectional Text Module - Modul Teks Dua Arah mendefinisikan elemen yang dapat digunakan untuk mendeklarasikan aturan dua arah untuk konten elemen - bdo.
Forms Module- Ini menyediakan semua fitur formulir yang ditemukan di HTML 4.0. Secara khusus, ini mendukung - tombol, kumpulan bidang, formulir, input, label, legenda, pilih, optgroup, opsi, dan area teks.
Table Module - Mendukung elemen, atribut, dan model konten berikut - caption, col, colgroup, table, tbody, td, tfoot, th, thead, dan tr.
Image Module- Ini menyediakan penyematan gambar dasar dan dapat digunakan dalam beberapa implementasi peta gambar sisi klien secara independen. Ini mendukung elemen - img.
Client-side Image Map Module - Ini menyediakan elemen untuk peta gambar sisi klien - area dan peta.
Server-side Image Map Module- Ini memberikan dukungan untuk pemilihan gambar dan transmisi koordinat pemilihan. Modul Peta Gambar Sisi Server mendukung - atribut ismap pada img.
Intrinsic Events Module - Mendukung semua acara yang dibahas dalam Acara XHTML.
Meta information Module- Modul Informasi Meta mendefinisikan elemen yang mendeskripsikan informasi dalam bagian deklaratif dokumen. Ini termasuk meta elemen.
Scripting Module- Ini mendefinisikan elemen yang digunakan untuk memuat informasi yang berkaitan dengan skrip yang dapat dieksekusi atau kurangnya dukungan untuk skrip yang dapat dieksekusi. Elemen dan atribut yang termasuk dalam modul ini adalah - noscript dan script.
Style Sheet Module- Ini mendefinisikan elemen yang akan digunakan saat mendeklarasikan style sheet internal. Elemen dan atribut yang ditentukan oleh modul ini adalah - style.
Style Attribute Module (Deprecated) - Ini mendefinisikan atribut gaya.
Link Module- Ini mendefinisikan elemen yang dapat digunakan untuk menentukan tautan ke sumber daya eksternal. Ini mendukung elemen tautan .
Base Module- Ini mendefinisikan elemen yang bisa digunakan untuk mendefinisikan URI dasar yang menjadi dasar penyelesaian URI relatif dalam dokumen. Elemen dan atribut yang termasuk dalam modul ini adalah - base .
Ruby Annotation Module - XHTML juga menggunakan modul Ruby Annotation seperti yang didefinisikan di RUBY dan mendukung - ruby, rbc, rtc, rb, rt, dan rp.
Perubahan dari XHTML 1.0 Strict
Bagian ini menjelaskan perbedaan antara XHTML 1.1 dan XHTML 1.0 Strict. XHTML 1.1 mewakili penyimpangan dari HTML 4 dan XHTML 1.0.
Yang paling signifikan adalah penghapusan fitur yang sudah tidak digunakan lagi.
Perubahan tersebut dapat diringkas sebagai berikut -
Pada setiap elemen, atribut lang telah dihapus untuk menggantikan atribut xml: lang .
Pada elemen <a> dan <map>, atribut name telah dihapus untuk mendukung atribut id.
The ruby kumpulan elemen telah ditambahkan.
Bab ini mencantumkan berbagai tip dan trik yang harus Anda ketahui saat menulis dokumen XHTML. Tip dan trik ini dapat membantu Anda membuat dokumen yang efektif.
Tips Mendesain Dokumen XHTML
Berikut adalah beberapa pedoman dasar untuk mendesain dokumen XHTML -
Desain untuk Melayani dan Melibatkan Audiens Anda
Ketika Anda berpikir untuk memuaskan apa yang diinginkan audiens Anda, Anda perlu merancang dokumen yang efektif dan menarik untuk memenuhi tujuan tersebut. Dokumen Anda harus mudah untuk menemukan informasi yang diperlukan dan memberikan lingkungan yang familiar.
Misalnya, akademisi atau praktisi medis merasa nyaman dengan dokumen seperti jurnal dengan kalimat panjang, diagram kompleks, terminologi spesifik, dll., Sedangkan dokumen yang diakses oleh anak-anak sekolah harus sederhana dan informatif.
Gunakan Kembali Dokumen Anda
Gunakan kembali dokumen sukses yang Anda buat sebelumnya alih-alih memulai dari awal setiap kali Anda mengantongi proyek baru.
Di dalam Dokumen XHTML
Berikut beberapa tip mengenai elemen di dalam dokumen XHTML -
Deklarasi XML
Deklarasi XML tidak diperlukan di semua dokumen XHTML tetapi penulis dokumen XHTML sangat dianjurkan untuk menggunakan deklarasi XML di semua dokumen mereka. Deklarasi seperti itu diperlukan jika pengkodean karakter dokumen selain UTF-8 atau UTF-16 default.
Elemen Kosong
Mereka menyertakan spasi sebelum di belakang / dan> elemen kosong. Misalnya, <br />, <hr />, dan <img src = "/ html / xhtml.gif" alt = "xhtml" />.
Lembar Gaya dan Skrip Tertanam
Gunakan lembar gaya eksternal jika lembar gaya Anda menggunakan "<", "&", "]]>", atau "-".
Gunakan skrip eksternal jika skrip Anda menggunakan “<”, “&”, atau “]]>”, atau “-”.
Pemutusan Baris dalam Nilai Atribut
Hindari jeda baris dan beberapa karakter spasi dalam nilai atribut. Ini ditangani secara tidak konsisten oleh browser yang berbeda.
Elemen Isindex
Jangan menyertakan lebih dari satu elemen isindex di kepala dokumen. The isindex elemen usang dalam mendukung elemen input.
The lang dan xml: lang Atribut
Gunakan atribut lang dan xml: lang sambil menentukan bahasa elemen. Nilai atribut xml: lang lebih diutamakan.
Pengidentifikasi Elemen
XHTML 1.0 tidak lagi menggunakan atribut nama dari a, applet, form, frame, iframe, img, dan elemen peta . Mereka akan dihapus dari XHTML dalam versi selanjutnya. Oleh karena itu, mulailah menggunakan elemen id untuk identifikasi elemen.
Menggunakan Ampersand di Attribute Values
Karakter ampersand ("&") harus disajikan sebagai referensi entitas &.
Contoh
<!-- This is invalid in XHTML -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.
<!-- Correct XHTML way of writing this is as follows -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=userKarakter Spasi Putih dalam HTML dan XML
Beberapa karakter yang legal dalam dokumen HTML ilegal dalam dokumen XML. Misalnya, dalam HTML, karakter form-feed (U + 000C) diperlakukan sebagai spasi kosong, di XHTML, karena definisi karakter XML, itu ilegal.
Referensi Karakter Bernama & Apos;
Referensi karakter bernama '(apostrof, U + 0027) diperkenalkan dalam XML 1.0 tetapi tidak muncul dalam HTML. Oleh karena itu, pengembang web harus menggunakan & # 39; bukannya 'berfungsi seperti yang diharapkan di Browser Web HTML 4.
Setiap dokumen XHTML divalidasi dengan Document Type Definition. Sebelum memvalidasi file XHTML dengan benar, DTD yang benar harus ditambahkan sebagai baris pertama atau kedua dari file tersebut.
Setelah Anda siap untuk memvalidasi dokumen XHTML Anda, Anda dapat menggunakan Validator W3C untuk memvalidasi dokumen Anda. Alat ini sangat berguna dan membantu Anda memperbaiki masalah pada dokumen Anda. Alat ini tidak memerlukan keahlian apa pun untuk melakukan validasi.
Pernyataan berikut di kotak teks menunjukkan detailnya kepada Anda. Anda perlu memberikan URL lengkap dari halaman yang ingin Anda validasi dan kemudian klikValidate Page tombol.
Masukkan alamat halaman Anda pada kotak di bawah ini -
Validator ini memeriksa validitas markup dokumen web dengan berbagai format terutama dalam HTML, XHTML, SMIL, MathML, dll.
Ada alat lain untuk melakukan validasi lain yang berbeda.
RSS/Atom feeds Validator
CSS stylesheets Validator
Find Broken Links
Other validators and tools
Kami menganggap Anda telah memahami semua konsep yang terkait dengan XHTML. Oleh karena itu, Anda harus dapat menulis dokumen HTML Anda menjadi dokumen XHTML yang berformat baik dan mendapatkan versi yang lebih bersih dari situs web Anda.
Mengonversi HTML ke XHTML
Anda dapat mengubah situs web HTML yang ada menjadi situs web XHTML.
Mari kita bahas beberapa langkah penting. Untuk mengonversi dokumen yang sudah ada, Anda harus terlebih dahulu memutuskan DTD mana yang akan Anda ikuti, dan menyertakan definisi jenis dokumen di bagian atas dokumen.
Pastikan Anda memiliki semua elemen lain yang diperlukan. Ini termasuk elemen root <html> yang menunjukkan namespace XML, elemen <head>, elemen <title> yang terdapat dalam elemen <head>, dan elemen <body>.
Ubah semua kata kunci elemen dan nama atribut menjadi huruf kecil.
Pastikan semua atribut dalam format name = "value".
Pastikan semua elemen penampung memiliki tag penutup.
Tempatkan garis miring di dalam semua elemen mandiri. Misalnya, tulis ulang semua elemen <br> sebagai <br />.
Tetapkan kode skrip sisi klien dan kode lembar gaya sebagai bagian CDATA.
XHTML Versi Mendatang
Masih XHTML sedang ditingkatkan dan versi berikutnya XHTML 1.1 telah dirancang. Kami telah membahas ini secara rinci dalam bab XHTML Versi 1.1.
Tag XHTML, Karakter, dan Entitas
Tag XHTML, karakter, dan entitas sama dengan HTML, jadi jika Anda sudah mengetahui HTML maka Anda tidak perlu bersusah payah untuk mempelajari mata pelajaran ini, terutama untuk XHTML. Kami telah membuat daftar semua hal HTML bersama dengan tutorial XHTML juga, karena mereka juga berlaku untuk XHTML.
Apa selanjutnya?
Kami telah membuat daftar berbagai sumber daya untuk XHTML dan HTML jadi jika Anda tertarik dan Anda memiliki waktu luang, maka kami menyarankan Anda untuk melihat sumber daya ini untuk meningkatkan pemahaman Anda tentang XHTML. Jika tidak, tutorial ini harus memberi Anda cukup pengetahuan untuk menulis halaman web Anda menggunakan XHTML.
Umpan balik Anda tentang tutorial ini diterima di [email protected].