Kini html5 sudah hampir bisa digunakan pada semua browser modern atau yang terbaru.kebanyakan org berpikir. buat apa kita mempelajari hal yang baru sedangkan lama aja. tetap berjalan normal kok. apalagi jika kalian menginginkan website yang compatible dgn smua browser atau cross browser.
sebenarnya jawabannya cukup simple kok, seiring berjalannya waktu, html5 PASTI menjadi sesuatu yang biasa nantinya dengan kata lain akan menjadi hal yang lumrah atau sudah basi bahasa keren nya.., saat semua orang sudah pada bisa atau menguasainya, maka dari itu mumpung masih ada wktu, yuk kita pelajari sama-sama tentang HTML5
Sebagai pembukaan saya akan menjelaskan beberapa Tag – tag baru pada HTML5.saya punya kode HTML yang akan kita ubah dengan HTML5. Contohnya seperti berikut. Ketika saya ingin membuat sebuah template biasanya saya akan membuat struktur seperti ini
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
* { margin:0px; padding:0px;}
</style>
<script type="text/javascript" src="http://cruzenaldo.com/jquery.js"></script>
</head>
<body>
<h1>Welcome To My Blog</h1>
Bagian Artikel
</body>
</html>
sekarang lihat pad baris awal
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
pada html5 tidak perlu lagi mengetik panjang-panjang, dengan html5 dapat di persingkat atau di perbaharui seperti ini<!DOCTYPE html>Simple kan? sekarang lihat bagian berikut…
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />Kita bisa menggantinya dengan kode berikut.
<meta charset="utf-8" />Kemudian pada bagian style, kita sudah gak membutuhkan lagi type=”text/css” nya untuk HTML5 jadi ubah saja menjadi seperti berikut.
<style>
* { margin:0px; padding:0px;}
</style>
Tentunya hal tersebut juga berlaku pada tag script…<script src="http://html5.com/jquery.js"></script>Nah sekarang tinggal kita lakukan penambahan–penambahan saja misalkan kita tambahkan tag HEADER, NAV, ASIDE, dan FOOTER.
Penjelasan sedikit:
- HEADER biasanya digunakan untuk logo atau judul web kita.
- NAV digunakan untuk menu utama, berbeda dengan menu yang ada di sidebar dan NAV ini biasanya digunakan di dalam tag HEADER.
- ASIDE untuk bagian sidebar
- FOOTER untuk bagian bawah tempat Copyright, dll. Dan jadinya seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin:0px; padding:0px;}
</style>
<script src="http://html5.com/jquery.js"></script>
</head>
<body>
<header>
<h1>Welcome To My Blog</h1>
Bagian Artikel
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<aside>
<h2>Kategori</h2>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</aside>
<footer>
Copyright by Gue Keren Banget™
</footer>
</body>
</html>
Nah sekarang pertanyaannya adalah NGGA SEMUA browser bisa mengerti
arti dari tag – tag tersebut (Apalagi Internet Explorer) atau gak semua
browser tau cara menghandle element atau tag – tag tersebut. Ada
beberapa cara yang bisa kita gunakan yaitu…Tips dan triknya:
Kita menggunakan CSS untuk membuat display dari setiap elementnya Block. Contoh kodenya sebagai berikut.
<style>
header, nav, aside, footer{
display: block;
}
</style>
Jadi kita tuliskan terlebih dahulu tag – tag HTML5 apa saja yang kita
gunakan. Nah kadang IE pun gak bisa menghandlenya walaupun kita sudah
menggunakan teknik diatas… Sekarang coba kita gunakan tehnik berikut.<script>
document.createElement('header','nav','aside','footer');
</script>
Kedua cara diatas memang agak sedikit ribet, nah cara terakhir yang paling gampang adalah seperti berikut.<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>Jadi script tersebut akan menghandle semuanya jadi kalian gak perlu menggunakan kedua tehnik sebelumnya… Oke mungkin tutorial ini membantu kalian. Berikut adalah beberapa Resources yang bisa kalian gunakan untuk mempelajari tehnik – tehnik dasar HTML5.
.Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar