Kehadiran HTML5 dinilai cukup membantu dengan penambahan beberapa fitur baru. Pada postingan kali ini saya akan menjelaskan apa saja fitur baru yang dimaksud dan bagaimana penggunaan untuk setiap fitur baru tersebut. Pada HTML5 terdapat beberapa penambahan diantaranya sebagai berikut.
- Elemen Canvas- Elemen Media
- Elemen Form
- Elemen Semantik / Struktural
1. Canvas
Elemen canvas digunakan untuk draw atau menggambar. Canvas hanya saja disini bukan alat untuk menggambar tapi hanya sebagai media pendukung untuk menggambar. Untuk menggambar dengan grafik disini biasanya dengan menggunakan javascript.
Contoh penggunaan Canvas.<canvas id="myCanvas"></canvas><!--canvas yang akan digambar-->
<script type="text/javascript">//Scipt untuk menggambar-->
var canvas=document.getElementById('myCanvas');//fungsi untuk menggambar canvas
var ctx=canvas.getContext('2d');//gambar bujursangkar pertama
ctx.fillStyle='#FF0000';//memberikan warna pada bagian canvas
ctx.fillRect(0,0,80,100);//memberikan parameter titik koordinat
</script>//mengakhiri script canvas
Output :
Canvas diatas juga bisa diatur ukurannya dengan memasukkan attribut height dan weight pada tag canvas dengan cara <canvas id=”mycanvas” height=”300px” weight=”300px”></canvas>.
2. Audio
Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. Untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.
Browser
|
MP3
|
Wav
|
Ogg
|
Internet Explorer
|
YES
|
NO
|
NO
|
Chrome
|
YES
|
YES
|
YES
|
Firefox
|
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 |
YES
|
YES
|
Safari
|
YES
|
YES
|
NO
|
Opera
|
NO
|
YES
|
YES
|
Dan untuk MIME-nya adalah sebagai berikut ini.
Format
|
MIME-type
|
MP3
|
audio/mpeg
|
Ogg
|
audio/ogg
|
Wav
|
audio/wav
|
Untuk attribut audio diatas adalah seperti tabel berikut ini.
Attributes
Attribut
|
Value
|
Deskripsi
|
autoplay
|
autoplay
|
Untuk memulai audio secara otomatis pada web terbuka
|
controls
|
controls
|
Untuk menampilkan kontrol seperti volome, seek audio, dan juga tombol untuk memulai/pause
|
loop
|
Untuk mengulang audio kembali setelah pemutaran awal selesai
| |
muted
|
Untuk mematikan suara
| |
auto
metadata none |
Untuk memuat ulang audio ketika halaman dimuat ulang
| |
URL
|
Untuk memberikan alamat web audio ketika diklik.
|
Contoh Script :
<audio controls> <--memasukkan media audio-->
<source src="horse.ogg" type="audio/ogg"><-- mengambil path audio-->
<source src="horse.mp3" type="audio/mpeg"><-- mengambil path audio-->
Your browser does not support the audio tag.
</audio><-- menutup tag audio-->
3. Video
Sama halnya dengan audio, hanya saja untuk video kita gunakan tag <video> dan menutupnya kembali dengan </video>. Untuk format yang didukung saat ini ada 3 yaitu MP4, Ogg dan WebM.
Browser
|
MP4
|
WebM
|
Ogg
|
Internet Explorer
|
YES
|
NO
|
NO
|
Chrome
|
YES
|
YES
|
YES
|
Firefox
|
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4 |
YES
|
YES
|
Safari
|
YES
|
NO
|
NO
|
Opera
|
NO
|
YES
|
YES
|
Untuk MIME-nya sendiri menggunakan seperti tabel beikut ini.
Format
|
MIME-type
|
MP4
|
video/mp4
|
WebM
|
video/webm
|
Ogg
|
video/ogg
|
Untuk attribut yang bisa digunakan pada tag video adlah sebagai berikut ini.
Attribute
|
Value
|
Deskripsi
|
autoplay
|
Memulai secara otomatis video
| |
controls
|
Untuk menampilkan control video
| |
height
|
pixels
|
Untuk mengatur tinggi frame video
|
loop
|
Memutar video secara berulang-ulang
| |
muted
|
Untuk mematikan fungsi suara pada video
| |
URL
|
Untuk memunculkan poster/gambar pada saat video buffer atau diunduh.
| |
auto
metadata none |
Untuk memuat ulang video
| |
URL
|
Untuk memberikan link video
| |
pixels
|
Untuk mengatur lebar frame video
|
4. Source
Source digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan kita gunakan jika kita memberikan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser.
Contoh penggunaan <Source> </source> :
<audio controls>
<source src="horse.ogg" type="audio/ogg"> <--sumber audio 1 ekstensi ogg-->
<source src="horse.mp3" type="audio/mpeg"><--sumber audio 2 ekstensi mp3-->
Your browser does not support the audio element.
</audio>
<source src="horse.ogg" type="audio/ogg"> <--sumber audio 1 ekstensi ogg-->
<source src="horse.mp3" type="audio/mpeg"><--sumber audio 2 ekstensi mp3-->
Your browser does not support the audio element.
</audio>
Attribut
Attribute
|
Value
|
Deskripsi
|
media
|
media_query
|
Format dari media yang digunakan
|
src
|
URL
|
Untuk memberikan link sumber media
|
type
|
MIME_type
|
Untuk mendefenisikan tipe MIME
|
5. Embed
Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain.
Untuk contoh penggunaannya adalah sebagai berikut ini.
<embed src="helloworld.swf"><--Melampirkan file flash-->
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.
Attributes
Attribute
|
Value
|
Description
|
height
|
pixels
|
Untuk mendefenisikan ukuran tinggi frame media.
|
src
|
URL
|
Untuk memberikan sumber media yang dilampirkan
|
type
|
MIME_type
|
Untuk menspesifikasikan tipe dari MIME
|
width
|
pixels
|
Untuk mengatur lebar dari frame media pada saat program dijalankan di browser.
|
6. Track
Track disini digunakan untuk melampirkan seperti subtitle text pada media. Contoh penggunaanya adalah sebagai berikut ini.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English"><--Merupakan subtitle yang dilampirkan pada video-->
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English"><--Merupakan subtitle yang dilampirkan pada video-->
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
Attribut yang bisa digunakan padatag track ini adalah sebagai berikut ini.
Attribute
|
Value
|
Deskripsi
|
default
|
default
|
Memberikan text default/subtitle pada video
|
kind
|
captions
chapters descriptions metadata subtitles |
Menspesifikasikan format dari text yang akan dimunculkan pada layar
|
label
|
text
|
Memberikan labael pada subtitle
|
src
|
URL
|
Merupakan suatu keharusan jika kita ingin melampirkan file
|
srclang
|
language_code
|
Menspesifikasikan tipe dari file lampiran seperti jenisnya (required if kind="subtitles")
|
7. SVG
SVG (Scalable Vector Graphics) merupakan tag yang digunakan untuk menggambar selain yang sebelumnya kita gunakan seperti canvas. SVG didefenisikan dengan format XML. Setiap elemen dari SVG dapat dianimasikan. Kelebihan dari SVG ini adalah tidak mengurangi kualitas darigambar jika diperbesar karena berbasis vektor sehingga SVG juga direkomendasikan oleh W3C.
Keuntungan SVG
- Gambar SVG dapat dibuat dan diubah dengan menggunakan banyak text editor biasa
- Gambar SVG dapat dicari, diindex, dimasukkan ke script dan juga di kompres
- Gambar pada SVG dapat diubah ukurannya
- Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi berapapun
- Gambar SVG dapat diperbesar tampa mengurangi kualitas gambar
Contoh penggunaan SVG :
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
Hasil
Perbedaan antara SVG dan Canvas
- SVG adalah sebuah bahasa untuk mendeskripsikan grafik 2D dalam XML
- Canvas menggambar grafik 2D (dengan bantuan javascript)
- SVG adlah dasar XML yang artinya bahwa setiap elemen tersedian utuk SVG DOM dan juga kita dapat menambahkan javaScript untuk elemen.
- Dalam SVG, setiap gambar yang dibentuk direkomendasikan menjadi sebuah objek. Jika objek SVG diubah maka browser secara otomatis membentuk ulang.
- Canvas mengubah/menterjemahkan berdasarkan pixel dan jika posisi berubah maka kita harus menggambar ulang.
8. Drag and Drop
Drag and Drop adalah sebuah fitur umum. Dengan fitur ini memukinkan untuk memindahkan objek ke lokasi lainnya.
Contoh Program :
<img draggable="true"><-- Memukinkan untuk bisa memindahkan gambar-->
9. Geolocation
Geolocation digunakan untuk mengecek posisi si pengguna jika memukinkan.
Contoh Program :
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
//Jika navigator mendukung pada web browser atau perangkat yang digunaka
{
navigator.geolocation.getCurrentPosition(showPosition);
//Mendapatkan posisi terbaru dari si pengguna
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
<--Jika perangkat yang digunakan tidak mendukung geolocation
}
function showPosition(position)
//nama fungsi
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
//Jika navigator mendukung pada web browser atau perangkat yang digunaka
{
navigator.geolocation.getCurrentPosition(showPosition);
//Mendapatkan posisi terbaru dari si pengguna
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
<--Jika perangkat yang digunakan tidak mendukung geolocation
}
function showPosition(position)
//nama fungsi
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
10. Input Types
Input tipe pada form yang baru digunakan pada HTML5 trdapat tipe yang baru. Hanya saja tidak semua tipe didukung oleh web browser.
Tag tersebut diataranya adalah sebagai berikut.
• color
• date
• datetime
• datetime-local
• month
• number
• range
• search
• tel
• time
• url
• week
Untuk format penggunaan input type tersebut sama hanya dengan input tipe yang digunakan pada form di HTML4 yaitu sebagai berikut ini.
Birthday (date and time): <input type="datetime" name="bdaytime">
Definisi HTML5
Perkembangan HTML5
Kelebihan dan Kekurangan HTML5
Ref :
Tidak ada komentar:
Posting Komentar