Hai Apa kabar semuanya, pada kesempatan kali ini saya akan menjelaskan tentang belajar HTML5 dengan Mudah tentunya dengan yang telah saya pelajari... oke... cekidot...
Pada saat
membuat HTML 5, kita harus menggawali dengan menggunakan tag <!DOCTYPE
html> dan menggunakan Deklarasi pada head HTML
dengan menggunakan <meta charset="UTF-8"> .
Berikut adalah Contoh dasar singkat pembuatan HTML 5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Unsur-unsur
baru yang paling menarik dalam HTML 5 ini adalah:
·
Unsur semantik baru seperti <header>,
<footer>, <article>, dan <section>.
·
Kontrol bentuk baru atribut seperti number, date,
time, calendar, and range.
·
Unsur-unsur baru grafis: <svg> dan
<canvas>.
·
Unsur-unsur baru multimedia: <audio yang> dan
<video>.
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.
ELEMEN SEMANTIK 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.
HTML5 menawarkan elemen semantik
baru untuk mendefinisikan bagian yang berbeda dari sebuah halaman web,
yaitu seperti:
·
<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 :
Pertama kita
buat folder baru, lalu buat dokumen html 5, lalu buat folder baru di samping
file html kita dengan nama folder gambar, dan masukan 2 gambar dengan nama
A.jpg dan B.jpg, lalu buat Dokumen HTML dengan scrip dibawah ini :
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>TAG
FIGURE DAN FIGCAPTION</title>
</head>
<body>
<figure>
<img
src="gambar/A.jpg" width="192" height="320" />
<figcaption>Gambar
Kucing</figcaption>
<img
src="gambar/B.jpg" width="192" height="320" />
<figcaption>Gambar
Panda</figcaption>
</figure>
</body>
</html>
Penulisan tag VIDEO pada HTML 5 :
·
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)
·
Apabila anda mempunyai video dengan format video bukan ogg, mp4,
dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro
video converter.
·
Tag <video> Sintaks Penulisanya :
<video src="judulvideo.ogg"
controls="controls">
</video>
Atau :
<video controls="controls"><source
src="judulvideo.webm" type="video/webm"></video>
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.
|
Selanjutnya
Saya Akan Memberikan Contoh Singkat Membuat Tag <Video> :
Buat folder baru dengan nama video, lalu masukan video dengan
format wabm dengan nama car.wabm didalam folder tersebut, lalu buat dokumen
html y disamping folder tersebut dengan penulisan seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VIDEO</title>
</head>
<body>
<video>
<video controls="controls"
width="450" height="260"
<source
src="vidio/car.webm type="video/webm"/>
</video>
</body>
</html>
Bisa juga anda merubah tag
<video> dengan tag <iframe> seperti dibawah ini :
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/u1OKBqHICMQ"
frameborder="0" allowfullscreen>
</iframe>
Mungkin cukup sekian tutorial
belajar HTML 5 dari saya dan yang telah saya pelajari semoga bermanfaat
ya......
Tidak ada komentar:
Posting Komentar