Pengenalan
HTML 5
HTML
(HyperText Mark up Language) merupakansuatu metoda untuk
mengimplementasikankonsep hypertext dalam suatu naskah atau dokumen.HTML
sendiri bukan tergolong pada suatubahasa pemrograman karena sifatnya yang
hanyamemberikan tanda (marking up) pada suatu naskah teksdan bukan sebagai
program.
Berdasarkan kata-kata
penyusunnya HTML dapatdiartikan lebih dalam lagi menjadi :
Hypertext
Link
hypertext adalah kata atau frase yang dapatmenunjukkan hubungan suatu naskah
dokumendengan naskah-naskah lainnya. Jika kita klik pada kataatau frase untuk
mengikuti link ini maka web browserakan memindahkan tampilan pada bagian lain
darinaskah atau dokumen yang kita tuju.
Markup
Pada
pengertiannya di sini markup menunjukkan bahwapada file HTML berisi suatu
intruksitertentu yang dapat memberikan suatu format padadokumen yang akan
ditampilkan pada WorldWide Web.
Language
Meski
HTML sendiri bukan merupakan bahasapemrograman, HTML merupakan kumpulan dari
beberapa instruksi yang dapat digunakan untukmengubah-ubah format suatu naskah
atau dokumen.Pada awalnya HTML dikembangkan sebagai subsetSGML (Standard
Generalized Mark-upLanguage). Karena HTML didedikasikan untukditransmisikan
melalui media Internet, maka HTMLrelatif lebih sederhana daripada SGML yang lebihditekankan
pada format dokumen yangberorientasi pada aplikasi.Penggunaan HTML memungkinkan
kita untukmemodifikasi tampilan atau format dokumen yang akankita transmisikan
melalui media Internet. Beberapahal yang dapat dilakukan dalam menentukan
formatdokumen ini adalah :
• Kita dapat
menampilkan suatu kelompok kata dalambeberapa ukuran yang dapat digunakan untuk
judul,heading dan sebagainya.
• Kita dapat
menampilkan teks dalam bentuk cetakantebal
• Kita dapat
menampilkan sekelompok kata dalambentuk miring
• Kita dapat
menampilkan naskah dalam bentuk hurufyang mirip dengan hasil ketikan mesin
ketik
• Kita dapat
mengubah-ubah ukuran font untuk suatu karakter tertentu.
Fitur-fitur
Tambahan Html 5
HTML5
Canvas
Untuk
memberikan suatu 'interaksi' pada website yang kita miliki, misalnya Flash atau
Java. Hal ini akan diganti oleh elemen <canvas> pada HTML5 sebagai canvas
WEB – kertas yang bias dicoreti sesuai imajinasi – atau dalam hal lain, Canvas
memungkinkan untuk bereksperimen lebih pada HTML5.
Audio
dan Video
Di
HTML5 akan ada tag khusus untuk audio dan video file. Tag tersebut adalah
<audio> dan <video> yang berfungsi untuk menyisipkan file audio dan
video. Berbeda dengan versi HTML pendahulunya yang harus menyisipkan flash
untuk memutar audio/video, HTML5 akan dengan mudah menyisipkan file multimedia
tersebut ke dalam webnya.
Local
Storage
Berfungsi
sebagai pengganti cache sebagai media penyimpanan history halaman web. Local
Storage memungkinkan web untuk menyimpan data cache lebih besar di storage
local-nya daripada cache pada browser biasa.
Web
Workers
Seringkali
kita menemukan jika halaman web yang memiliki banyak Javascript membuat browser
melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan
halaman web untuk memproses Javascript yang mereka miliki dengan respon yang
lebih cepat dan multitasking.
Semantics
Ini
adalah fitur yang paling menawan untuk web designer. Para web designer yang
suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop fitur
Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag
layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat
fitur ini.
YANG PERLU DIKETAHUI
TENTANG
HTML5
1. DOCTYPE
DOCTYPE
ditulis sebelum tag <html>. Fungsi dari DOCTYPE adalah memberitahukan
kebrowser bahwa tipe dokumen yang
digunakan adalah HTML. Dalam dokumen HTML versi sebelumnya DOCTYPE dituliskan
dengan : <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/ loose.dtd”> Sedangkan dalam HTML5 DOCTYPE Cuma
ditulis : <!DOCTYPE HTML>
2. Tidak adanya Type pada script dan link
source code yg baru :
<link rel=”stylesheet” href=”path/to/
stylesheet.css” /> <script src=”path/to/cript.js”></script>
source code yg lama : <link rel=”stylesheet” href=”path/to/stylesheet.css”
type=”text/css” /> <script
type=”text/javascript” src=”path/to/ cript.js”></script>
3. Attribute Required
Form
mempunyai fitur baru yaitu required attribute, yang akan mengecek isi dari
sebuah input text apakah kosong atau tidak saat di-submit. Jika kosong maka
form tidak akan di-submit. <input type=”text” name=”someinput” required>
4. Mendukung audio
HTML
5 mengenalkan <audio> element sudah mendukung penuh terhadap penggunaan
audio pada halaman web. Penggunaannya
seperti kode dibawah
<audio autoplay=”autoplay”
controls=”controls”> <source
src=”music.mp3” />
Unduh File ini.
</audio>
9. Mendukung video
Dan
hebatnya lagi HTML juga mengenalkan <video> element. Tapi karena codec
format video tidak semua browser mendukung, jadi video yang bias diputar
tergantung dari browser. Penggunaannya seperti kode dibawah :
<video controls preload> <source
src=”contohvideo.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
<source src=”contohvideo.mp$” type=”video/mp4; ‘codecs=’avc1.42E01E,
mp4a.40.2’” /> <p> Browser tidak mendukung, <a
hreh=”contohvideo.mp4>
Silahkan unduh
video.</a> </p>
</video>
Tag-tag
baru yang letaknya didalam <body>
<header>
<div id="header">
Didalam <header>
ini bisa kita isi macam-macam, misallogo, navigasi, heading dan lain-lain.
Bahkan diisi <div>pun tidak masalah.
<hgroup>
Jika kita memiliki satu atau lebih dari satu
heading berurutan
<h1> - <h6> maka kita bias
mengelompokkannya
dengan <hgroup>.
<nav>
<nav>
digunakan untuk ngelink kehalaman-halaman
utama
dari website atau bagian dari halaman itu
sendiri.
Kalau untuk paging, Social Networking atau
list-list
yang lain yang menggunakan <ul> nggak perlu dikasih <nav>.
<section>,
<article> dan <time>
Sesuai
namanya <article> digunakan untuk membungkus teks artikel
atau teks utama dalam halaman web.
Apabila
kita memiliki list atau daftar <article>, missal blog, maka kita perlu
membungkusnya dengan <section>
jika
ada elemen lain yang bukan <article> dan menerangkan tentang <article>.
<time>
digunakan
untuk menunjukan waktu, biasanya
digunakan
untuk menunjukkan waktu publish artikel,
komentar,
forum dan lain sebagainya. <time>memiliki atribut datetime yang berisi waktu
bisa dalam format yyyy-mm-dd
atau jam seperti 19:00.
<figure>
dan <figcaption>
<figure>
digunakan sebagai pembungkus untuk tag
<img>.
Tetapi tidak selalu semua tag<img> kita bungkus dengan
<figure>, hanya gambar-gambar yang utama saja atau
gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <figcaption>.
<aside>
<aside> digunakan
sebagai sidebar pada website.
<footer>
<footer>
diletakkan dibagian bawah website
