Berikut ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui jika Anda ingin menjadi developer web yang handal.
1.Deklarasi doctype baru. Sebelum membuat sebuah halaman dengan HTML 5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.
2.Struktur semantik. Pada XHTML, programmer HTML bisa saja menjadi pembuat stres programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing, seperti pada gambar.
Struktur tersebut tidak terlihat semantik, sulit dibaca dan dideskripsikan, serta bagi programmer HTML yang iser, bisa saja ID header diubah sesukanya. HTML5 menawarkan elemen-elemen yang umum diguankan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantik dan mudah dibaca, seperti pada gambar
Dalam penulisan kode, dapat ditulis sebagai berikut:
Banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemennya “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generik dari dokumen.
3.Content editable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Contoh sederhananya:
Hasil tampilan dari kode di atas adalah memungkinkan untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.
4.Validasi email. Dengan validasi langsung di tampilan, Anda dapat mencegah seorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubah type dari elemen input menjadi “email”. Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera:
5.Attribute required. Satu lagi input pada HTML5, memungkin validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, Anda tidak perlu membuat fungsi Javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.
6.Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browser tersebut. Pada IE, secara default semua elemen yang kaan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya, seperti berikut ini.
Meskipun demikian IE tetap tidak menghiraukan style tersebut. Anda harus membuat Javascript di bawah ini ke dalam “head” dari setiap halaman.
Untuk kemudahan, seseoang bernama Remy Sharp telah membuat library Javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim. Anda bisa memasukkan kode di bawah ini ke dalam head halaman website Anda, atau men-download script tersebut secara lokal.
7.Masih banyak elemen HTML5 lainny seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standar resminya belum dikeluarkan oleh W3C. Untuk melihat kompatibiltias browser terhadap HTML5 dan CSS3, Anda bisa mengunjungi halaman www.findmebyip.com/litmus.
1.Deklarasi doctype baru. Sebelum membuat sebuah halaman dengan HTML 5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.
2.Struktur semantik. Pada XHTML, programmer HTML bisa saja menjadi pembuat stres programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing, seperti pada gambar.
Struktur tersebut tidak terlihat semantik, sulit dibaca dan dideskripsikan, serta bagi programmer HTML yang iser, bisa saja ID header diubah sesukanya. HTML5 menawarkan elemen-elemen yang umum diguankan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantik dan mudah dibaca, seperti pada gambar
Dalam penulisan kode, dapat ditulis sebagai berikut:
Banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemennya “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generik dari dokumen.
3.Content editable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Contoh sederhananya:
Hasil tampilan dari kode di atas adalah memungkinkan untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.
4.Validasi email. Dengan validasi langsung di tampilan, Anda dapat mencegah seorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubah type dari elemen input menjadi “email”. Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera:
5.Attribute required. Satu lagi input pada HTML5, memungkin validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, Anda tidak perlu membuat fungsi Javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.
6.Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browser tersebut. Pada IE, secara default semua elemen yang kaan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya, seperti berikut ini.
Meskipun demikian IE tetap tidak menghiraukan style tersebut. Anda harus membuat Javascript di bawah ini ke dalam “head” dari setiap halaman.
Untuk kemudahan, seseoang bernama Remy Sharp telah membuat library Javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim. Anda bisa memasukkan kode di bawah ini ke dalam head halaman website Anda, atau men-download script tersebut secara lokal.
7.Masih banyak elemen HTML5 lainny seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standar resminya belum dikeluarkan oleh W3C. Untuk melihat kompatibiltias browser terhadap HTML5 dan CSS3, Anda bisa mengunjungi halaman www.findmebyip.com/litmus.
- - - - - - - - - - - - - - - - - -- - - - -
Doctype. Singkatan dari Document Type Declaration, diguankan untuks ecra cepat mengenali tipe dokumen halaman website. Dengan pendefinisian doctype, browser dapat dengan mudah me-render tampilan sesuai dengan standar dokumen yang telah ditetapkan. Doctype tidak akand itampilkan pada layar, karena bersifat sama seperti sebuah comment.
Silverlight. Framework aplikasi untuk membuat rich Internet application, yang mengedepankan multimedia, animasi, grafis, dan sebagainya seperti yang terjadi pada Adobe Flash.
CSS3. Versi terbaru CSS (Cascading Style Sheet). CSS3 telah di develop oleh W3C sejak Desember 2005. Salah satu kelebihan CSS3 adalah dapat menampilkan animasi dan gradasi warna. Meski masih belum resmi diumumkan, sebagian besar browser modern telah mensupport CSS3 ini, selain Intenet Explorer.
No comments:
Post a Comment