 |  |
XHTML Lebih Baik Dari HTML
XHTML lebih baik dari HTML karena peraturan XHTML sangat ketat diantaranya semua tag harus ditutup tidak seperti HTML. Dibawah ini saya akan jelaskan beberapa perbedaan XHTML dengan HTML& peraturan yang harus dipenuhi di XHTML.Struktur XHTML
- XHTML DOCTYPE bersifat WAJIB
- Atribut XML namespace dalam <html> bersifat WAJIB
- <html>, <head>, <title>, & <body> bersifat WAJIB
Elemen XHTML
- Elemen XHTML harus tersusun secara benar (properly nested).
- Elemen XHTML harus selalu ditutup
- Elemen XHTML harus dalam huruf kecil
- Dokumen XHTML harus memiliki satu elemen root “Well-formed”
Atribut XHTML
- Nama atribut harus dalam huruf kecil
- Nilai atribut harus dengan tanda kutip
- Tidak diperbolehkan menyingkat atribut
- Image harus ada atribut alt
<!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/1999/xhtml"> <head> <title>Judul Dokumen</title> </head> <body> ...... </body> </html>
Elemen XHTML Harus Bersarang
<b><i>Ini contoh elemen bersarang yang benar</i></b> <b><i>Ini contoh elemen bersarang yang salah</b></i>
Elemen XHTML Harus Ditutup
<p>Benar</p> <!--Benar--> <br /> <!--Benar--> <hr /> <!--Benar--> <img src="test.png" alt="Ngetest Doank" /> <!--Benar--> <p> <!--Salah--> <br> <!--Salah--> <hr> <!--Salah--> <img src="test.png" alt="Ngetest Doank"> <!--Salah-->
Elemen & Atribut XHTML Harus Huruf Kecil
<p>Ini Paragraf</p> <!--Benar-->
<P>Ini Paragraf</P> <!--Salah-->
Elemen XHTML Harus Dikutip & Tidak Boleh Disingkat
<input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected"> <input checked> <input readonly> <input disabled> <option selected>
Elemen — dasar building blocks
HTML terdiri dari sekumpulan elemen-elemen. Elemen-elemen mendefinisikan arti semantik dari content yang bersangkutan. Elemen-elemen mengikutsertakan saja yang terdapat di dalam tag elemen yang berkesesuaian, termasuk tag mereka sendiri. Sebagai contoh, elemen "<p>" mengindikasikan sebuah paragraf; elemen "<img>" mengindikasikan sebuah gambar (image). Buka halaman HTML Elements untuk daftar selengkapnya.
Sebagian elemen memiliki makna yang sangat tepat, seperti dalam "ini adalah image", "ini adalah judul" atau "ini adalah daftar tak berurut." yang lainnya tidaklah spesifik, "ini adalah bagian dari halaman" atau "ini adalah sebagian dari text." Pun elemen-elemen lainnya digunakan untuk alasan teknis, seperti "bagian ini mengidentifikasi informasi untuk halaman yang tidak boleh ditampilkan." Bagaimanapun juga, dalam satu cara atau seluruh elemen-elemenn HTML lainnya memiliki nilai semantik.
Sebagian besar elemen dapat menampung elemen lainnya, membentuk sebuah struktur hierarki. Sebuah halaman web sederhana tapi sempurna akan terlihat seperti berikut:
<html>
<body>
<p>My dog ate all the guacamole.</p>
</body>
</html>
Tag
Dokumen HTML ditulis dalam teks biasa, bisa juga ditulis menggunakan teks editor apapun yang memungkinkan isinya disimpan dalam teks biasa(Meski sebagian besar penulis HTML menganjurkan untuk menggunakan editor spesial yang memiliki syntax highligting dan menampilkan DOM). Nama tag bisa ditulis dengan huruf kecil atau huruf kapital. Akan tetapi, W3C (Konsorsium global yang mengurus standarisasi HTML) menganjurkan untuk menggunakan huruf kecil (dan XHTML mengharuskan menggunakan huruf kecil).
HTML menempelkan makna spesial terhadap apa saja yang diawali dengan tanda lebih kecil dari ("<") dan diakhiri dengan tanda lebih besar dari (">"). Markup tersebut disebut dengan tag. Pastikan untuk menutup tag, seperti halnya sebagian tag ditutup secara bawaan, dan yang lainnya mungkin menghasilkan error yang tidak diinginkan jika anda lupa menutup tag.
Berikut ini adalah contoh sederhananya:
<p>This is text within a paragraph.</p>
Berikut ini adalah contoh kode yang valid:
<em>I <strong>really</strong> mean that</em>Dan berikut ini adalah contoh kode yang tidak valid:
Invalid: <em>I <strong>really</em> mean that</strong>.Perhatikan bahwa dalam contoh yang valid, tag penutup yang bersarang dalam tag em ditempatkan sebelum tag yang menjadi tempat tag tersebut bersarang.
Sampai adopsi aturan parsing HTML5, browser tidak menerjemahkan kode yang tidak valid dengan cara yang sama dan menghasilkan hasil yang berbeda-beda ketika semuanya menangani kode tidak valid. Browser-browser telah "meminta maaf" kepada Penulis Web tapi sayangnya tidak semuanya dengan cara yang sama, yang menghasilkan hasil yang tidak dapat diprediksi jika terdapat kode HTMl yang tidak valid. Sekarang, seiring dengan evolusi browser, seperti Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 atau Safari 5, mereka mengimplementasikan aturan parsing kode invalid terbaru. Kode yang tidak valid dihasilkan dalam hierarki DOM dalam seluruh browser modern.
Sebagian elemen tidak memiliki konten atau elemen lainnya. Elemen-elemen tersebut adalah elemen kosong dan tidak membutuhkan tag penutup. Berikut contohnya:
<img src="smileyface.jpg">Kebanyakan orang menuliskan markup elemen kosong ini dengan menambahkan garis miring (forward slash)(yang mana diperintahkan dalam XHTML).
<img src="smileyface.jpg" />Dalam HTML, tanda slash ini tidak memiliki fungsi teknis dan penggunaan tanda ini murni pemilihan gaya penulisan kode.
Atribut
Tag pembukan dapat memiliki informasi tambahan, seperti halnya dalam contoh sebelumnya. Informasi tersebut disebut dengan atribut. Atribut biasanya terdiri dari 2 bagian:
- Nama Atribut.
- Nilai Atribut.
Sebagian kecil atribut hanya bisa menampung satu nilai. Atribut-atribut tersebut adalah atribut Boolean dan dapat disingkat dengan hanya menuliskan nama atribut atau membiarkan nilai atribut kosong. Ketiga contoh berikut memiliki arti yang sama:
<input required="required"> <input required=""> <input required>
<p class=foo bar> (Beware, this probably does not mean what you think it means.)Dalam contoh ini, nilai atribut seharusnya ditulis "foo bar" namun karena dituliskan tanpa tanda kutip maka kode tersebut diterjemahkan seperti berikut :
<p class="foo" bar="">
Named character references
Named character references (Sering disebut juga entities) digunakan untuk mencetak karakter yang memiliki makna spesial dalam HTML. Sebagai contoh, HTML menerjemahkan tanda lebih kecil dari dan lebih besar dari sebagai pemisah tag. Ketika Anda ingin menampilkan simbol lebih besar dari dalam teks, Anda bisa menggunakan named character reference. Ada empat named character references yang harus anda ketahui:- > menandakan lebih besar dari (>)
- < menandakan lebih kecil dari (<)
- & menandakan ampersand (&)
- " menandakan tanda kutip dua (")
Doctype dan Komentar
Sebagai tambahan dari tag, konten teks dan entitas-entitas, sebuah dokumen HTML harus memiliki deklarasi doctype yang terdapat dibaris pertama. Deklarasi doctype bukanlah tag HTML; doctype ini adalah instruksi untuk web browser tentang versi keberapa dokumen HTML ditulis.Dalam HTML 4.01, doctype mengaju kepada DTD (Document Type Definition) sebagaimana HTML ini berbasis SGML. Ada tiga deklarasi doctypedalam HTML 4.01.
HTML 4.01 Strict
DTD ini berisi seluruh elemen dan atribut HTML, tetapi TIDAK MENYERTAKAN presentasional atau element-element usang (seperti font). Framesets tidak diizinkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
DTD ini menampung seluruh elemen dan atribut HTML, TERMASUK element yang bersifat presentasi dan elemn yang usang. Framesets tidak diizinkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
DTD ini sama halnya dengan HTML 4.01 Transitional, namun mengizinkan penggunakan Framesets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Dalam HTML 5, hanya terdapat satu deklarasi dan deklarasi ini ditulis seperti berikut:
<!DOCTYPE html>Doctype memiliki sejarah yang panjang dan rumit, tapi untuk sekarang apa yang harus anda ketahui adalah doctype memberitahu browser untuk menerjemahkan kode HTML dan CSS sesuai dengan standar W3C dan tidak berpura-pura untuk berlaku sebagai Internet Explorer yang berasal dari tahun 90an. (Lihat quirks mode.)
HTML memiliki mekanisme untuk penyertaan komentar yang tidak ditampilkan ketika halaman diproses dalam browser. Komentar ini berguna untuk menjelaskan beberapa bagian dalam markup, atau meninggalkan catatan untuk orang lain yang mungkin juga bekerja dalam halaman tersebut atau meninggalkan pengingat untuk Anda sendiri. Komentar HTML dibuat dengan menyertakan simbol seperti berikut:
<!-- This is comment text -->
Dokumen singkat tapi Sempurna
Yang dituliskan dibawah ini adalah contoh dokumen HTML sederhana. Anda dapat meng-copy codenya ke dalam teks editor, simpan dengan nama file myfirstdoc.html dan bukalah dengan browser. Pastikan Anda menyimpannya dengan character encoding UTF-8. Karena dokumen ini tidak menggunakan style maka dokumen ini akan terlihat sangat polos, tapi ini hanyalah tahap awal.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>A tiny document</title> </head> <body> <h1>Main heading in my document</h1> <!-- Note that it is "h" + "1", not "h" + the letter "one" --> <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p> </body> </html>
Selamat Belajar...!
