Mengenal HTML5
Oke, saya rasa kurang adil karena kemaren dah sedikit banyak membahas tentang CSS3 tapi HTML5 nya belom. Sama halnya dengan CSS3, HTML5 kini sudah bisa digunakan hampir pada setiap browser modern. Tapi dengan ini mungkin kalian berpikir, ngapain mengerjakan sesuatu yang pada dasarnya masih sukar untuk diimplementasikan apalagi jika kalian menginginkan website yang compatible dengan semua browser atau cross browser compatibility
Sebenarnya jawabannya cukup simple saja, seiring berjalannya waktu HTML5 pasti menjadi sesuatu yang biasa nantinya. Nah sekarang mumpung masih ada waktu yuk kita belajar sama – sama untuk hal yang nantinya memang menjadi tren. Gak ada salahnya kan?
Sebagai pembukaan saya akan menjelaskan beberapa Tag – tag baru pada HTML5.
Nah setelah kita baca tutorial diatas disini 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…
Oke, saya rasa kurang adil karena kemaren dah sedikit banyak membahas tentang CSS3 tapi HTML5 nya belom. Sama halnya dengan CSS3, HTML5 kini sudah bisa digunakan hampir pada setiap browser modern. Tapi dengan ini mungkin kalian berpikir, ngapain mengerjakan sesuatu yang pada dasarnya masih sukar untuk diimplementasikan apalagi jika kalian menginginkan website yang compatible dengan semua browser atau cross browser compatibility
Sebenarnya jawabannya cukup simple saja, seiring berjalannya waktu HTML5 pasti menjadi sesuatu yang biasa nantinya. Nah sekarang mumpung masih ada waktu yuk kita belajar sama – sama untuk hal yang nantinya memang menjadi tren. Gak ada salahnya kan?
Sebagai pembukaan saya akan menjelaskan beberapa Tag – tag baru pada HTML5.
Nah setelah kita baca tutorial diatas disini 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…
Oke sekarang coba kita pada baris awal
Pada HTML5 kita sudah tidak memerlukan DOCTYPE yang panjang kayak gini, lagian susah juga untuk menghafalinnya kan? Sekarang kita ganti menjadi seperti ini…
Simple kan? Oke sekarang lihat bagian berikut…
Kita bisa menggantinya dengan kode berikut.
Kemudian pada bagian style, kita dah gak membutuhkan lagi type=”text/css” nya untuk HTML5 jadi ubah saja menjadi seperti berikut.
Tentunya hal tersebut juga berlaku pada tag script…
Nah sekarang tinggal kita lakukan penambahan – penambahan aja 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 loh dan NAV ini biasanya digunakan di dalam tag HEADER. Kemudian ada ASIDE untuk bagian sidebar dan FOOTER untuk bagian bawah tempat Copyright, dll. Dan jadinya seperti berikut.
Nah sekarang pertanyaannya adalah GAK SEMUA browserbisa 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.
Jadi kita tuliskan terlebih dahulu tag – tag HTML5 apa saja yang kita gunakan. Nah kadang IE pun gak bisa menghandlenya walaupun kita sudah menggunakan tehnik diatas… Sekarang coba kita gunakan tehnik berikut.
Kedua cara diatas memang agak sedikit ribet yah, nah cara terakhir yang paling gampang adalah seperti berikut.
Jadi script tersebut akan menghandle semuanya jadi kalian gak perlu menggunakan kedua tehnik sebelumnya… Oke mungkin tutorial ini gak terlalu membantu kalian. Berikut adalah beberapa Resources yang bisa kalian gunakan untuk mempelajari tehnik – tehnik dasar HTML5. Semoga berguna dan sampai bertemu pada Tutorial selanjutnya…
Sebenarnya jawabannya cukup simple saja, seiring berjalannya waktu HTML5 pasti menjadi sesuatu yang biasa nantinya. Nah sekarang mumpung masih ada waktu yuk kita belajar sama – sama untuk hal yang nantinya memang menjadi tren. Gak ada salahnya kan?
Sebagai pembukaan saya akan menjelaskan beberapa Tag – tag baru pada HTML5.
Nah setelah kita baca tutorial diatas disini 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…
Oke, saya rasa kurang adil karena kemaren dah sedikit banyak membahas tentang CSS3 tapi HTML5 nya belom. Sama halnya dengan CSS3, HTML5 kini sudah bisa digunakan hampir pada setiap browser modern. Tapi dengan ini mungkin kalian berpikir, ngapain mengerjakan sesuatu yang pada dasarnya masih sukar untuk diimplementasikan apalagi jika kalian menginginkan website yang compatible dengan semua browser atau cross browser compatibility
Sebenarnya jawabannya cukup simple saja, seiring berjalannya waktu HTML5 pasti menjadi sesuatu yang biasa nantinya. Nah sekarang mumpung masih ada waktu yuk kita belajar sama – sama untuk hal yang nantinya memang menjadi tren. Gak ada salahnya kan?
Sebagai pembukaan saya akan menjelaskan beberapa Tag – tag baru pada HTML5.
Nah setelah kita baca tutorial diatas disini 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…
Code:
<!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 Site</h1>
Bagian Artikel
</body>
</html>Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Code:
<!DOCTYPE html>
Code:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Code:
<meta charset="utf-8" />
Code:
<style>
* { margin:0px; padding:0px;}
</style>Code:
<script src="http://cruzenaldo.com/jquery.js"></script>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin:0px; padding:0px;}
</style>
<script src="http://cruzenaldo.com/jquery.js"></script>
</head>
<body>
<header>
<h1>Welcome To My Site</h1>
Bagian Artikel
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
</ul>
</nav>
</header>
<aside>
<h2>Kategori</h2>
<ul>
<li><a href="#">Januari</a></li>
<li><a href="#">Februari</a></li>
</ul>
</aside>
<footer>
copyleft by Cruz3N
</footer>
</body>
</html>Tips Dan Triknya
Kita menggunakan CSS untuk membuat display dari setiap elementnya Block. Contoh kodenya sebagai berikut.
Code:
<style>
header, nav, aside, footer{
display: block;
}
</style>Code:
<script>
document.createElement('header','nav','aside','footer');
</script>Code:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Komentar