Fitur-fitur baru dalam
HTML 5
HTML 5 yang saat ini
sudah mulai diimplementasikan oleh beberapa browser grade A akan membawa lebih
dari sekedar fitur untuk layout dan format halaman. Beberapa di antaranya
adalah Canvas dan Video.
1. Canvas
Dulu, untuk bisa memberikan interaksi menggambar di halaman
web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi
tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret
langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas>
dan javascript maka kita sudah bisa menggambar langsung di halaman web.
Sekarang Anda bisa berimajinasi sendiri, kira-kira apa saja yang orang lakukan
dengan <canvas>. Apa yang
sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh
<canvas>. Kita
ingin menggambar sebuah kotak pada HTML5 dengan memanfaatkan fitur tag
<canvas>, maka code lengkapnya adalah :
<html>
<head>
<title> Menggambar Kotak dengan HTML5</title>
</head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<head>
<title> Menggambar Kotak dengan HTML5</title>
</head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath(); // memanggil fungsi
penggambaran
context.rect(188, 50, 200, 100);
context.rect(188, 50, 200, 100);
// menggambar kotak di koordinat 188,50 dengan
lebar 200, tinggi 100.
context.fillStyle = '#8ED6FF'; // menentukan warna kotak
context.fill();
context.fillStyle = '#8ED6FF'; // menentukan warna kotak
context.fill();
// memberikan warna kotak dgn warna yg sudah
ditentukan (baris ke-3)
context.lineWidth = 5; //menentukan lebar garis pinggiran kotak
context.strokeStyle = 'black';
context.lineWidth = 5; //menentukan lebar garis pinggiran kotak
context.strokeStyle = 'black';
Berikut dibawah ini merupakan screenshoot demo fitur
<canvas> :
2.
Video dan
Audio
Akan ada tag <audio> dan
<video> di HTML 5. Jadi tidak perlu lagi menempelkan flash untuk sekedar
memutar audio. Format video yang didukung akan bervariasi terhadap browser,
kemungkinan besar codecnya adalah Ogg Theora (patent free) dan H.264.
3.
Elemen yang lebih
spesifik untuk content
·
Tag
<section>
Tag <section> digunakan untuk
mengelompokkan elemen yang sejenis. Misalnya : kita ingin menampilkan beberapa
artikel dalam satu halaman, maka kita dapat menggunakan tag <section>.
·
Tag
<article>
Ini digunakan
untuk menampilkan satu artikel penuh dalam suatu halaman html. Untuk
mempermudah pemahaman, bayangkan saja pengertian dari artikel. Artikel biasanya
terdiri dari judul, sub judul (jika ada), catatan dan deskripsi. Berikut ini adalah contoh penerapan code
<section> dan <article> untuk menambah pemahaman anda.
·
Tag <footer>
digunakan dibagian bawah sebuah halaman
website. Isi dari tag <footer> biasanya berupa info konten seperti
copyright, author website atau navigasi. Berikut ini merupakan penerapan dari
tag <footer>.
·
Tag <dialog>
Digunakan dalam menuliskan format dialog atau percakapan.
·
Tag
<figure>
Untuk mengasosiasikan dokumen dengan fitur embed video atau
konten multimedia.
·
Tag
<nav>
Digunakan untuk membuat navigasi dokumen.
Sumber
:
kita juga punya nih jurnal mengenai HTML 5, silahkan dikunjungi dan dibaca , berikut linknya
BalasHapushttp://repository.gunadarma.ac.id/bitstream/123456789/4829/1/15.%20Slide.pdf
semoga bermanfaat yaa :)