HTML 5
jika di postingan yang sebelum sebelumnya saya membahas tentang HTML kali saya akan kembali membahas tentang html namun berbeda dengan sebelumnya kali ini kita akan membahas tentang HTML 5 dan beserta element yang ada di html 5 tersebut.
HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML.HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga.
Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.
ELEMEN BARU DI HTML 5
ATRIBUT BARU DI HTML 5
jika di postingan yang sebelum sebelumnya saya membahas tentang HTML kali saya akan kembali membahas tentang html namun berbeda dengan sebelumnya kali ini kita akan membahas tentang HTML 5 dan beserta element yang ada di html 5 tersebut.
HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML.HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga.
Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.
ELEMEN BARU DI HTML 5
Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
- section serupa seperti h1-h6.
- article bisa berupa entri blog atau tulisan konten.
- aside menyajikan konten pelengkap.
- header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
- footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
- Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
- yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya.
ATRIBUT BARU DI HTML 5
Dikenalkan pula beberapa atribut baru, seperti:
- atribut media, ping pada elemen pranala,
- autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form
- reversed pada elemen ol untuk urutan besar ke kecil.
Beberapa kelebihan yang dijanjikan pada HTML5:
- Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
- Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
- Integrasi (‘inline’) dengan doctype yang lebih sederhana.
- Penulisan kode yang lebih efisien.
- Konten yang ada di situs lebih mudah terindeks oleh search engine.
Browser yang Mendukung HTML
- Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)
- Safari (mulai dari versi 3.1)
- FireFox (Mulai dari FireFox 3 )
- Google Chrome (Mulai dari versi 3)
- Internet Explorer (Mulai dari versi 8)
HTML5 Semantic
HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>.
Elemen-elemen baru yang ditambahkan pada HTML5 adalah:
Tag
|
Keterangan
|
<article>
|
Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya.
|
<aside>
|
Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>.
|
<bdi>
|
Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya
|
<command>
|
Sebuah button, atau radiobutton, atau checkbox.
|
<details>
|
Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.
|
<summary>
|
Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>
|
<figure>
|
Untuk mengelompokkan sekumpulan section, biasanya berupa video.
|
<figcaption>
|
Berisi caption/keterangan yang ditempatkan di dalam tag <figure>
|
<footer>
|
Digunakan sebagai footer dari sebuah halaman
|
<header>
|
Digunakan sebagai header dari sebuah halaman
|
<hgroup>
|
Digunakan untuk sekumpulan heading
|
<mark>
|
Digunakan pada teks yang akan di highlight
|
<meter>
|
Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan
|
<nav>
|
Digunakan untuk sekumpulan navigasi
|
<progress>
|
Membuat Progress bar
|
<ruby>
|
Digunakan untuk anotasi ruby
|
<rt>
|
Untuk menjelaskan anotasi ruby
|
<rp>
|
Menunjukkan elemen jika browser tidak mendukung ruby
|
<section>
|
Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya
|
<time>
|
Untuk mendefinisikan waktu dan tanggal
|
<wbr>
|
Word Break. Untuk memisah suatu kata bila diperlukan.
|
HTML5 Audio
salah satu fitur baru yang sangat menguntungkan dan meudahkan kita adalah tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plungin tambhan seperti flasplayer. Cukup dengan menggunakan tag <audio> kita sudah bisa memasukkan fie mp3 dan ogg ke dalam halaman web ita.
HTML5 Canvas
HTML5 Form Element
· Form Output
Untuk menambahkan elemen video kita gunakan kode berikut
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240"
controls="controls">
<source src="video/movie.ogg"
type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5 Canvas
Fitur yang lain pada HTML5 adalah <canvas>. Canvas
memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam
halaman web. Canvas juga sama seperti GeoLocation, tidak bias bekerja sendiri.
Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D
maupun 3D.
Untuk membuat objek di dalam canvas kita gunakan kode berikut :
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
HTML5 Form Element
Pada HTML5 kita mengenal beberapa
elemen form baru. Jika dahulu kita terbatas pada inputdan textarea,
kali ini HTML5 menambahkan tiga elemen baru yaitu datalist, keygen,
dan output.
Namun untuk keygen, dukungan browser saat ini belum memenuhi
standar keamanan, sehingga lebih aman untuk para web programmer menggunakan
enkripsi pada server-side seperti md5, sha1, dan base64_encode.
· Form
Datalist
<!DOCTYPE html>
<html>
<body>
<form
action="demo_form.asp" method="get">
<input list="browsers"
name="browser">
<datalist
id="browsers">
<option
value="Internet Explorer">
<option
value="Firefox">
<option
value="Chrome">
<option
value="Opera">
<option
value="Safari">
</datalist>
<input
type="submit"></form>
</body>
</html>
· Form Output
<!DOCTYPE html>
<html>
<body>
<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range"
name="a" value="50">100 +
<input type="number"
name="b" value="50">=
<output name="x"
for="a b"></output>
</form>
</body>
</html>
