Ianpanrita = Irhamullah

Irhamullah

Di Atas Bumi Di Bawah Langit
Irhamullah

Belajar HTML5

September 18, 2010, by ianpanrita, category html5

Belajar HTML5 tidaklah sulit, cuma karna merupakan hal baru jadi masih kurang referensi atau tutorial mengenai HTML5. Disini saya akan berbagi sedikit mengenai HTML5, sebelumnya saya sudah membuat artikel mengenai unsur atau tag-tag baru pada HTML5.

Ok lansung aja kita belajar mengenai HTML5 dimulai dari membandingkan code HTML versi sebelumnya kemudian kita mengubahnya menjadi HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

        <style type="text/css">
		* { margin:0px; padding:0px;}
	</style>
	<script type="text/javascript" src="http://ianpanrita.com/blog/demo/js.js"></script>
</head>
<body>
<h1>Welcome To My Site</h1>
Bagian Artikel
</body>
</html>

<!DOCTYPE>, dalam dokumen HTML versi sebelumnya DOCTYPE dituliskan dengan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sedangkan pada HTML5 DOCTYPE cuma ditulis

<!DOCTYPE HTML>

wow ringkas banget, mudah diingat pastinya. DOCTYPE ditulis sebelum tag <html>. Fungsi dari doctype adalah memberitahukan ke browser bahwa tipe dokumen yang digunakan adalah HTML. Deklarasi DOCTYPE bukanlah tag HTML, yang merupakan instruksi untuk web browser tentang apa versi bahasa markup halaman website. Sangat penting bahwa kita menuliskan DOCTYPE dalam semua dokumen HTML, sehingga browser tahu apa jenis dokumen yang harus diharapkan.

kemudian pada META, Perbedaan Antara 4,01 HTML dan HTML 5, skema atribut tidak didukung dalam HTML 5 yang memiliki atribut baru, charset, yang membuatnya lebih mudah untuk menentukan charset.

Contoh :

HTML 4.01:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
HTML 5:
<meta charset="ISO-8859-1">

Kemudian pada bagian style, kita suda ngak membutuhkan lagi type=”text/css” nya , untuk HTML5 kita ubah saja menjadi seperti berikut

<style>
		* { margin:0px; padding:0px;}
	</style>

kemudian pada tag script cukup ditulis dengan

<script src="http://cruzenaldo.com/jquery.js"></script>

Selanjutnya kita menambahkan beberapa tag-tag baru pada HTML5, seperti menambahkan Tag HEADER, NAV, ASIDE, dan FOOTER. Sedikit penjelasan mengenai tag yang akan kita tambahkan. Pertama 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. Sehingga hasilnya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
<style>
		* { margin:0px; padding:0px;}
	</style>
	<script src="http://ianpanrita.com/blog/demo/js.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 ianpanrita	</footer>
</body>
</html>

Namun Tag-tag baru pada HTML5 masih belum banyak browse yang support, agar dapat diakses pada bebrapa browse kita dapat menambahkan

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Semoga artikel ini dapat membantu anda dalam belajar HTML5, amien….

.

17 Comments

  1. Rendi |

    numpang nampang yah gan 😀
    rendi juga iseng2 bikin applikasi html5 😛
    silakan di cek gan..
    jgn lupa tinggalin komen 😛
    RendiTech.com

    Reply
  2. Ramdhan84 |

    Apakah perubahannya hanya dalam hal penyederhanaan kode saja ?

    Jadi penasaran nih, baru belajar html5 di sini 😀
    Salam kenal bos..

    Reply
    • ianpanrita |

      iya.. namun saat ini hampir semua dah support, kecuali IE 8 kebawah… blum support. IE merupakan musuh besar web designer

      Reply
  3. Rizqy Hidayat |

    Untuk tag <style> sepertinya atribut type=”text/css” tetap harus ada, karna menyangkut validitas kode. Juga untuk elemen <style> dengan atribut type=”text/javascript” 🙂

    Reply

So, what do you think ?