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"
<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"
|
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.
|
Tidak ada komentar:
Posting Komentar