HTML 5 … melihat contoh2 (http://mrdoob.com) keampuhan nih bahasa jadi tertarik untuk mempelajarinya.

Setelah sedikit googling HTML5 merupakan sebuah evolusi dari teknologi sebelumnya yaitu html4,  namanya evolusi jadi jangan kuatir klo script yang sudah terlanjur diketik tidak support lagi di html5. HTML5 masih 100% mengusung teknologi lamanya yaitu html4 dan menambahkan beberapa fitur seperti :

  • Canvas (2D and 3D)
  • Channel messaging
  • Cross-document messaging
  • Geolocation
  • MathML
  • Microdata
  • Server-Sent events
  • Scalable Vector Graphics (SVG)
  • WebSocket API and protocol
  • Web origin concept
  • Web storage
  • Web SQL database
  • Web Workers
  • XMLHttpRequest Level 2

saya sendiri masih belum paham apa fungsi masing2 item di atas, pelajari satu2 sambil jalan ajah.

Ada sedikit perbedaan penulisan tag dalam html5 kalo sebelumnya untuk menentukan doctype syntac nya seperti :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

tapi di HTML5 lebih disingkat menjadi :

<!DOCTYPE html>

Begitu juga dalam penulisan character set declaration yang dulunya :

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Kini hanya ditulis :

<meta charset=”utf-8″>

 

Dalam HTML5 terdapat banyak tipe element baru yang bisa dikelompokkan menjadi :

Tipe Konten Keterangan
Embeded Konten yang mengambil eksternal resource kedalam dokumen seperti audio, video, canvas, dan iframe
Flow Elemen yang biasa digunakan dalam body html, seperti form, h1
Heading Elemen Header seperti h1, h2, dan hgroup
Interactive Tipe konten yang digunakan untuk berinteraksi dengan user seperti button,textarea, video dan audio controls
Meta Data Elemen yang biasa ditemukan dalam header, seperti script,style, title
Phrasing Elemen Teks dan Markup seperti mark, kbd, sub dan sup
Sectioning Elemen untuk mendefinisikan bagian-bagian(section) dari dokumen  seperti article, aside dan title

 

Contoh dokumen HTML5, perhatikan penggunaan beberapa tag baru untuk sectioning :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<body>
<header>
<h1>Header</h1>
<h2>Subtitle</h2>
<h4>HTML5 Rocks!</h4>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>
<a href="http://www.example.com">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
<footer>
<h2>Article Footer</h2>
</footer>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>

Simpan dengan nama html5.htm kalo andan jalankan hasilnya masih jelek sekli karena memang style css nya belum kita buat..  nah berikut ini stylesheetnya simpn dengan nama html5.css di folder yang sama

body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin: 0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF;
}
header {
background-color: #F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2 {
margin: 0px;
}
h1 {
font-size: 72px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h3 {
font-size: 18px;
margin: 0px;
text-align:center;
color: #F47D31;
}
h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(-45deg);
position: absolute;
padding: 0px 150px;
top: 50px;
left: -120px;
text-align:center;
}
nav {
display:block;
width:25%;
float:left;
}
nav a:link, nav a:visited {
display: block;
border-bottom: 3px solid #fff;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
color: white;
background-color: #F47D31;
}
nav h3 {
margin: 15px;
color: white;
}
#container {
background-color: #888;
}
section {
display:block;
width:50%;
float:left;
}
article {
background-color: #eee;
display:block;
margin: 10px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 20px #888;
-moz-box-shadow: 2px 2px 20px #888;
}
article header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
article h1 {
font-size: 18px;
}
aside {
display:block;
width:25%;
float:left;
}
aside h3 {
margin: 15px;
color: white;
}
aside p {
margin: 15px;
color: white;
font-weight: bold;
font-style: italic;
}
footer {
clear: both;
display: block;
background-color: #F47D31;
text-align:center;
padding: 15px;
}
footer h2 {
font-size: 14px;
color: white;
}
/* links */
a {
color: #F47D31;
}
a:hover {
text-decoration: underline;
}

Maka hasilnya adalah sebagai berikut

 

Referensi :

pro html5 programming powerful apis for richer internet application development.pdf

Berkenalan dengan HTML5
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *