Perbandingan : HTML, XHTML dan HTML5
XHTML dan HTML
XHTML adalah singkatan dari Extensible HyperText Markup Language. XHTML ini sebenarnya adalah revolusi HTML dan merupakan generasi berikutnya setelah HTML yang memiliki kemampuan yang tinggi, disiplin, ketat dan stabil. XHTML ini sendiri juga termasuk dari kombinasi antara HTML dan XML (Extensible Markup Language).
HTML sendiri adalah bahasa asli dari WWW (World Wide Web). Sebenarnya XHTML dan HTML ini hampir sama hanya saja XHTML ini dirancang untuk menyesuaikan standar XML. Untuk penulisan kode program pada XHTML disarankan menggunakan huruf kecil dan tidak melupakan tag penutup elemen pada setiap tag program.
Berikut sedikit dari perbedaan dari XHTML dan HTML:
- · Elemen XHTML harus tersusun secara benar (properly nested).
- · XHTML merupakan dokumen yang "well-formed".
- · Nama tag harus menggunakan huruf kecil.
- · Semua elemen XHTML harus memiliki penutup.
- · Tiap value pada attribute harus terbungkus dengan tanda kutip ganda atau tunggal dan atributnya sendiri tidak boleh disingkat.
- · Tag image harus terdapat alt attribute yang menyediakan deskripsi image, untuk memungkinkan image tersebut memiliki beberapa persyaratan untuk aksesibilitas bersama dengan standar web yang berbeda.
- · Persyaratan lain dari XHTML adalah adanya pernyataan dari deklarasi DOCTYPE yang menentukan aturan mana yang diikuti oleh dokumen anda (aturan yang diwarisi dari XML). Anda akan menemukan pernyataan ini pada baris pertama dari atas ketika anda mengaktifkan halaman source kode XHTML yaitu tipe dokumen deklarasi (juga disebut dengan DTD atau DOCTYPE). Sebagian besar halaman web yang diciptakan hari ini akan menyertakan deklarasi DOCTYPE tersebut. Ada 3 DTD untuk XHTML: Strict (hanya akan validasi jika tanpa tag usang), Transisi (masih akan memvalidasi dengan tag usang), dan Frameset (untuk halaman yang "set up frame"). Semua dokumen XHTML harus sesuai dengan aturan sintaks XML.
Berikut adalah penjelasan dari poin-poin diatas:
Elemen XHTML harus tersusun secara benar (properly nested).
Didalam HTML elemen tidak harus tersusun dengan tata letak struktur yang benar berikut contohnya:
Pada penulisan HTML :
<b>
<i>
Ini adalah tulisan yang berformat bold dan italik
</b> <!-- tag b tidak ditutup dengan benar -->
</i> <!-- tag i tidak ditutup dengan benar -->
Pada XHTML semua elemen harus tersusun dengan benar seperti ini:
<b>
<i>
Ini adalah tulisan yang berformat bold dan italik
</i> <!-- Tag i ditutup dengan benar -->
</b> <!-- Tag b ditutup dengan benar -->
Keterangan: sebelum tag <i> ditutup belum boleh ada penutup untuk </b>, <i> adalah
elemen anak dari elemen <b>, pembuka dan penutup <i> harus di dalam elemen <b>
Terlihat dari kode di atas bahwa setiap tag harus ditutup secara berurutan.
Lihat contoh ke 2 ini:
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh Hitam</li>
<li>Teh Hijau</li>
</ul>
<li>Susu</li>
</ul>
<!-- tag li pada Teh tidak ditutup -->
Penulisan ini yang benar:
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh Hitam </li>
<li>Teh Hijau </li>
</ul>
</li> <!-- tag li ditutup -->
<li>Susu</li>
</ul>
Dokumen harus "Well-formed"
Semua elemen XHTML harus tersusun dalam elemen sebagai root element.
Setiap elemen dapat memiliki sub (child) element. Setiap sub elemen harus tersusun
dengan benar di dalam parent element.
Struktur dasarnya adalah sebagai berikut:
Nama Tag harus huruf kecil
Hal ini dikarenakan XHTML merupakan dokumen XML. XML bersifat case-sensitive. Tag
seperti dan <BR> dianggap berbeda.
Penulisan salah
1 | <BODY> | |
2 | <P>Ini adalah paragraf</P> | |
3 | </BODY> |
Penulisan Benar
1 | <body> | |
2 | <p> Ini adalah paragraf </p> | |
3 | </body> |
Semua elemen XHTML harus ditutup
Setiap elemen terbuka harus ditutup dengan tag penutup
Penulisan salah
1 | <p> Ini adalah paragraf | |
2 | <p> Ini adalah paragraph yang lain | |
Penulisan Benar
1 | <p> Ini adalah paragraf </p> | |
2 | <p> Ini adalah paragraf yang lain </p> | |
Elemen kosong harus ditutup
Elemen kosong harus ditutup menggunakan />.
Penulisan salah
1 | Ini adalah break<br> | |
2 | Ini adalah garis mendatar:<hr> | |
3 | Ini adalah image <img src="gambar.gif" alt="gambar"> |
Penulisan Benar
1 | Ini adalah break<br /> | |
2 | Ini adalah garis mendatar:<hr /> | |
3 | Ini adalah image <img src="gambar.gif" alt="gambar" /> |
Tiap value pada attribute harus terbungkus dengan tanda kutip ganda atau tunggal dan atributnya sendiri tidak boleh disingkat.
Penulisan salah
1 | <div id=value> ... </div> <!-- value tidak ditutup tanda kutip --> | |
2 | <div clss=value> ... </div> <!-- atribut class disingkat menjadi clss --> | |
Penulisan Benar
1 | <div id="value"> ... </div> <!-- value ditutup kutip ganda --> | |
2 | <div class="value"> ... </div> <!-- atribut class tidak disingkat --> | |
3 | ||
4 | <div class='value'> ... </div> <!-- value ditutup kutip tunggal --> | |
Tag image harus terdapat alt
Tag image harus terdapat alt attribute yang menyediakan deskripsi image, untuk memungkinkan image tersebut memiliki beberapa persyaratan untuk aksesibilitas bersama dengan standar web yang berbeda.
Penulisan salah
1 | <img src="alamatgambar.com" /> |
Penulisan Benar
1 | <img src="alamatgambar.com" alt="Ini gambar saya" /> |
Pernyataan dari deklarasi DOCTYPE
Pernyataan dari deklarasi DOCTYPE yang menentukan aturan mana yang diikuti oleh dokumen anda (aturan yang diwarisi dari XML). Anda akan menemukan pernyataan ini pada baris pertama dari atas ketika anda mengaktifkan halaman source kode XHTML yaitu tipe dokumen deklarasi (juga disebut dengan DTD atau DOCTYPE). Sebagian besar halaman web yang diciptakan hari ini akan menyertakan deklarasi DOCTYPE tersebut. Ada 3 DTD untuk XHTML: Strict (hanya akan validasi jika tanpa tag usang), Transisi (masih akan memvalidasi dengan tag usang), dan Frameset (untuk halaman yang "set up frame"). Semua dokumen XHTML harus sesuai dengan aturan sintaks XML.
Berikut adalah penulisan deklarasi DOCTYPE
1 | <!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN" | |
2 | ||
Dari penjelasan diatas semoga kita dapat menetahui perbedaan antara XHTML dan HTML.
Source:
http://www.vikrymadz.web.id/2012/01/perbedaan-html-dengan-xhtml.html
http://fanjavaakhmad.wordpress.com/2010/09/06/perbedaan-xhtml-dan-html/
http://metafora.awardspace.com/down/Tutorial%20XHTML.pdf
HTML dan HTML 5
HTML
Pengertian HTML
Dari pengertian di wikipedia: HTML yang singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.
HTML sendiri terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table, gambar dan lain- lain yang disebut tag atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute. Dibawah ini sebagian contoh tag dan attributenya:
<html>
<head>
<title>cuma nyoba aja</title>
</head>
<body bgcolor=”red”>
<font face=”arial black” color=”yellow” size=”5″ >Ngung Xi Yuk Choi</font>
</body>
</html>
<html><head><title> adalah tag, bgcolor,face,size adalah attribute dan red,arial black,yellow,5 adalah nilai/value dari attribute. Itu sedikit contoh apa itu tag dan atribute pada html
Sejarah HTML
Dari bacaan di Wikipedia HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).
Konsep ini pada tahun 1986 disetujui oleh ISO (International Standard Organization) sebagai standar bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language).
Perkembangan HTML
Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).
HTMl versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2
HTML versi 4.0
HTML versi 4 ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.
HTML versi 5
HTML versi 5 ini merupakan HTML versi terakhir pada saat sumber ini diambil. Pada HTML ini memiliki fitur baru yaitu : Unsur kanvas untuk menggambar, Video dan elemen audio untuk media pemutaran, Dukungan yang lebih baik untuk penyimpanan secara offline, Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section, Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
HTML 5
Pengertian HTML5
Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.
Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Berikut tujuan dibuatnya HTML5 :
· Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
· Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
· Penanagan kesalahan yang lebih baik
· Lebih markup untuk menggantikan scripting
· HTML5 merupakan perangkat mandiri
· Proses pembangunan dapat terlihat untuk umum
Fitur baru dalam HTML5 :
· Unsur kanvas untuk menggambar
· Video dan elemen audio untuk media pemutaran
· Dukungan yang lebih baik untuk penyimpanan secara offline
· Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
· Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.
Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut
<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>
Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini
<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>
HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut
<video src=tutorialku.mp4>
</video>
Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.
sumber : http://teknophobia.blogspot.com/2013/10/perbandingan-html-xhtml-dan-html-5.html
