Mengenal HTML 5

Posted: 5 November 2010 in Programming, Web

HTML 5 merupakan standarisasi untuk HTML, XHTML dan HTML DOM (Document Object Model) untuk waktu yang akan datang dimana sedang dalam proses pengembangan. Secara umum fitur-fitur baru pada HTML 5 berbasis pada HTML, CSS, DOM dan JavaScript atau dapat dikatakan HTML 5 adalah perpaduan antara keempat elemen tersebut. Hingga saat ini, browser yang mendukung sebagian besar fitur HTML 5 adalah Opera 10+, Mozilla 4 beta, dan GoogleChrome. Adapun tujuan dari standarisasi yang baru ini adalah :

  • standarisasi baru format struktural dari dokumen web
  • mereduksi penggunaan plugin external saat memuat halaman web (flash dan sebagainya)
  • Penanganan error yang lebih baik
  • More markup to replace scripting

Untuk mencapai tujuan di atas, maka diimplementasikanlah beberapa fitur-fitur utama berikut :

  • Content specific elements untuk mewujudkan struktural web yang baru, lebih rapi serta mendukung keseragaman halaman-halaman web nantinya. Elemen-elemen ini sudah terdefenisi di dalam DOM sehingga dapat diakses melalui CSS dan JavaScript. Adapun elemen-elemen tersebut (sebagai representasi tag) antara lain :
    • article, footer, header, nav, section, dialog, figure, figcaption
  • Video dan audio elements untuk media playback sehingga mengurangi penggunaan plug in external, dalam hal ini media playback sudah disediakan oleh browser. Adapun tag implementasi elemen ini adalah tag <video> dan <audio>
  • Canvas element untuk menggambar dengan bantuan JavaScript, dengan elemen ini membuat suatu tampilan flat yang terdiri atas beberapa lapisan objek (baik gambar maupun shape) dapat diwujudkan. Dalam HTML 5 area canvas didefenisikan sebagai tag <canvas>
  • New form feature yang dapat mengurangi aktivitas scripting dalam hal membuat validasi maupun membuat tampilan masukan untuk entry data tertentu (seperti tampilan kalender untuk masukan data tanggal dan jam). Contoh-contoh fitur tersebut yang direpresentasikan sebagai elemen baru, tipe input baru maupun atribut baru seperti :
    • InputType : calendar, date, time, email, url, search
    • Element (sebagai representasi tag) : datalist, dll
    • Atribut : required,dll
  • Dukungan yang lebih baik untuk local offline storage dimana memiliki performa lebih baik jika dibandingkan dengan cookies seperti kapasitas penyimpanan yang besar dan tidak terbatas (dimana pada cookies terdapat batasan kapasitas data yang dapat disimpan), pengaksesan yang mudah dan kehandalan dari mekanisme penyimpanan.

Selain itu pada HTML 5 terdapat penghilangan markup (tag maupun atribut) karena dirasa tidak dipakai lagi ataupun dipakai tidak sesuai dengan kegunaannya, seperti tag center, font, strike, u, big, frame, frameset, noframes, acronym, longdesc, scope ( pada td), dan sebagainya.
Di bawah ini contoh dari cuplikan kode dari dokumen dalam format HTML 5 beserta hasil tampilannya.

<section id="gal1">
			<h2>Elemen-Elemen HTML 5</h2>
			<p>Hover salah satu elemen untuk melihat deskripsi.</p>
			<figure>
				GAMBAR
				<img src="index_files/8.jpg">
				<figcaption>
					<h3>little bit</h3>
					<p>Deskripsi dari komik terkait.</p>
				</figcaption>
			</figure>
			<figure style="width:320px; height:240px;">
				VIDEO
				<video src="index_files/movie.ogg"  width="320" height="210" controls="controls">
					Browser anda tidak mendukung elemen video.
				</video>
				<figcaption>
					<h3>Beruang XXX</h3>
					<p>Deskripsi dari video terkait.</p>
				</figcaption>
			</figure>
			<figure style="width:320px; height:125px;">
				AUDIO
				<audio controls="controls">
					<source src="index_files/song.ogg" type="audio/ogg" />
					<source src="index_files/song.mp3" type="audio/mpeg" />
					Browser anda tidak mendukung elemen audio.
				</audio>
				<figcaption>
					<h3>Do Re Mi ...</h3>
					<p>Deskripsi dari audio terkait.</p>
				</figcaption>
			</figure>
			<figure style="width:320px; height:125px;">
				CANVAS
				<canvas id="myCanvas" width="300" height="105" style="border:1px solid #c3c3c3;">
					Your browser does not support the canvas element.
				</canvas>
				<script type="text/javascript">
					var c = document.getElementById("myCanvas");
					var cxt=c.getContext("2d");
					var grd=cxt.createLinearGradient(0,0,300,105);
					grd.addColorStop(0,"#FF0000");
					grd.addColorStop(1,"#0000FF");
					cxt.fillStyle=grd;
					cxt.fillRect(0,0,300,105);
					var img=new Image()
					img.src="index_files/logo_beta.png"
					cxt.drawImage(img,15,15);
				</script>
				<figcaption>
					<h3>Gradasi Warna</h3>
					<p>Gradasi warna merah ke biru.</p>
				</figcaption>
			</figure>
			<br>
			<figure style="width:320px; height:320px;">
			FORM
			<form action="#" autocomplete="on">
				<table>
				<tr><td>Nama</td><td> : <input type="text" name="nama" required="required"></td></tr>
				<tr><td>Starting Point</td><td> : <input type="number" style="background-color: blue" name="points1" min="1" max="100" value="1"></td></tr>
				<tr><td>Jarak Rumah ke Kantor</td><td> : 1km <input type="range" name="points2" min="1" max="10"> >10km</td></tr>
				<tr><td>Website</td><td> :
					<input type="url" list="url_list" name="nama">
					<datalist id="url_list">
						<option label="W3Schools" value="http://www.w3schools.com" />
						<option label="Google" value="http://www.google.com" />
						<option label="Microsoft" value="http://www.microsoft.com" />
					</datalist>
				</td></tr>
				<tr><td>Email</td><td> : <input type="email" name="nama"></td></tr>
				<tr><td>Tempat / Tanggal Lahir</td><td> :
					<input type="text" list="tempat_list" name="tempat"> |
					<datalist id="tempat_list">
						<option label="Bandung" value="Bandung" />
						<option label="Jakarta" value="Jakarta" />
						<option label="Surabaya" value="Surabaya" />
					</datalist>
					<input type="date" style="background-color: blue"  name="ttl">
				</td></tr>
				<tr><td>Baca Komik Terakhir : </td><td> : <input type="datetime" name="timekomik"></td></tr>
				<tr><td colspan=-"2"><input type="submit" value="Daftar" id="tombolReg"> <input type="reset" value="Kosongkan" id="tombolReg"></td></tr>
				</table>
			</form>
			</figure>
		</section>
Cropped HTML 5 Webpage Sample

Cropped HTML 5 Webpage Sample

Untuk spesifikasi HTML 5 lebih lanjut anda dapat merujuk ke W3 HTML5.

Komentar
  1. dore mengatakan:

    wah, harus update nih😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s