HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. (sumber : Wikipedia).
Tujuan utama pengembangan HTML5:
untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Beberapa aturan yang harus kita pelajari saat belajar HTML5, yaitu:
•Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.
•Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
•Lebih baik penanganan kesalahan.
•Lebih banyak penggunaakn markup untuk mengganti scripting.
•HTML5 harus independen.
•Proses development-nya harus terlihat untuk umum (visible).
Fitur-Fitur baru di HTML5:
•Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.
•Canvas : Media corat-coret langsung tanpa flash dan applet java.
•Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
•Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.
•Dukungan yang lebih baik untuk penyimpanan secara offline.
Beberapa browser yang telah mendukung HTML5 antara lain: Chrome, Safari Apple v.4+, Internet Explorer 9, Opera, Maxthon, Firefox 4, 5, 6 dsb.
Contoh struktur dasar HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Elemen Sematik Baru di HTML5:
Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:
<div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.
Kegunaan Tag-Tag HTML5 antara lain:
•<header>, digunakan untuk area header(bagian atas sebuah halaman web).
•<article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.
•<aside>, digunakan sebagai penambah informasi utama didalam halaman web. Biasanya berupa peringatan, catatan, dll.
•<section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.
•<figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode, dll.
•<figcaption>,Mendefinisikan caption untuk elemen <figure>
Contoh Tag Figure dan Figcaption:
Buat folder baru dengan nama image, lalu masukkan 2 gambar dengan nama 1.jpg dan 2.jpg, masukkan script seperti dibawah ini:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>TAG
FIGURE DAN FIGCAPTION</title>
</head>
<body>
<figure>
<img
src="image/1.jpg" width="192" height="320" />
<figcaption> Bunga Mawar</figcaption>
<img
src="image/2.jpg" width="192" height="320" />
<figcaption>Bunga Melati</figcaption>
</figure>
</body>
</html>
Tag Video Pada HTML5:
Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web. Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahanyang biasa disebut flash Player.
Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang mendukung yaitu :
–Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
–MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
–WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)
–Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
–MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
–WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)
Berikut Ini
atribut pada Tag <video> :
Atribute
|
Value
|
Description
|
Controls
|
controls
|
Menentukan kontrol video
yang akan ditampilkan(Contoh: tombol play/pause)
|
Autoplay
|
autoplay
|
Menentukan bahwa video akan
mulaiberputar otomatis
|
Src
|
URL
|
Menentukan alamat URL dari
mana sumber video
|
Width
|
pixels
|
Mengatur lebar dari video
player
|
Height
|
pixels
|
Mengatur tinggi dari video
player
|
Loop
|
loop
|
Untuk mengulang / memainkan
kembali video yang telah selesai diputar.
|
Muted
|
muted
|
Menentukan bahwa output
suara akan dimute/dihilangkan
|
Poster
|
URL
|
Menentukan gambaryang akan
tampil ketika video masih belum berputar.
|
Preload
|
auto
metadata
none
|
Menentukanjika dan
bagaimana kapan video ini harus diputar menjalani proses loading ketika
halaman terbuka.
|
Contoh Tag Video:
Buat folder baru dengan nama video, masukkan video dengan format wabm dengan nama biru.wabm. Lalu masukkan sript seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VIDEO</title>
</head>
<body>
<video>
<video controls="controls"
width="450" height="260"
<source
src="video/biru.webm type="video/webm"/>
</video>
</body>
</html>
Atau merubah tag <video> menjadi tag <iframe>, contoh :
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/u1OKBqHICMQ"
frameborder="0" allowfullscreen>
</iframe>
SELAMAT MENCOBA TEMEN-TEMEN...
Tidak ada komentar:
Posting Komentar