.jpg)
Belajar
HTML5
Hey Guys sekarang aku kita akan belajar sedikit tentang HTML 5, sebelum kita
lanjutkan ke materi inti sebaiknya kalian harus tahu terlebih dahulu kenapa
harus belajar HTML5 dan tidak HTML yang lain? Jawaban
singkatnya adalah karena HTML5 merupakan bahasa Markup selanjutnya yang akan
menjadi standar dalam pembuatan website.
Dalam penjelasan agak panjang karena dokumen HTML5 lebih jelas, lebih mudah
penulisan kodenya, lebih simple, dan lebih mudah dalam segalanya. Karena HTML5
merupakan penyempurnaan dari versi sebelumnya baik dari tingkat kerumitan kode,
aksesibilitas, fitur, fungsionalitas, dsb.Teknologi website sudah berkembang
dengan pesatnya, sebagian besar karena peningkatan kecepatan koneksi internet
saat ini, disamping itu juga karena baik itu Pengguna, Desainer, Programmer
semakin menuntut fungsionalitas website mereka. Seperti lebih tepatnya kontrol
dalam penggunaan font dan layout, tampilan yang responsive menyesuaikan ukuran
device yang berbeda beda dari layar Ponsel hingga ke Layar monitor ukuran
paling besar.
Membuat Document Type HTML5
Dalam pembuatan halaman website, hal pertama kali yang harus kita tentukan
adalah Document Type. Ketika membuat website dengan HTML5 baris pertama yang
harus kita tulis adalah:
<!DOCTYPE
html>
Kenapa kok
pada baris pertama harus ditulis seperti itu? Sebaiknya anda jangan banyak
bertanya karena penulisan seperti itu sudah merupakan standart dari pembuatnya
(HTML5), yang perlu diingat adalah penulisan DOCTYPE wajib menggunakan huruf
besar alias capital
Membuat HTML, Head, dan Body
Ibarat tubuh kita sendiri HTML merupakan rambut, Head adalah Kepala
sedangkan Body adalah tubuh itu sendiri.
Dalam
dokumen HTML bagian penting yang membentuk halaman website adalah tag <head></head>
dan <body></body> . Pada tag <head> berisi title
atau judul halaman website, selain itu juga berisi informasi tentang dokumen
HTML yang tidak ditampilkan seperti misalnya tag <meta> (akan anda
pelajari selanjutnya), dan juga bisa berisi kode javascript maupun css untuk
mengatur tampilan halaman website.
Sedangkan
pada tag <body> adalah bagian yang berisi semua informasi
yang ditampilkan pada halaman browser ketika anda membukanya.
Pada latihan
ini anda akan membuat Template HTML5 yang bisa anda lagi nanti pada praktek
selanjutnya.
1. Gunakan
aplikasi dreamweaver kemudian ketikkan kode dibawah ini:
<!DOCTYPE
html>
2. Tekan
tombol Enter, dan ketikkan:
<html><head>
3. Tekan
tombol Enter tiga kali atau lebih untuk membuat garis kosong, dan
kemudian ketikkan:
</head><body>
4. Tekan
tombol Enter tiga kali atau lebih untuk membuat garis kosong, dan
kemudian ketikkan:
</body>
</html>
</html>
5. Simpan
file dengan nama dan format html5.html .
Ini adalah STRUKTUR DASAR 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.
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 :
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="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" width="192" height="320" />
<figcaption>Sunset</figcaption>
<img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" width="192" height="320" />
<figcaption>Bunga</figcaption>
</figure>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>TAG FIGURE DAN FIGCAPTION</title>
</head>
<body>
<figure>
<img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" width="192" height="320" />
<figcaption>Sunset</figcaption>
<img src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" width="192" height="320" />
<figcaption>Bunga</figcaption>
</figure>
</body>
</html>
HASIL :
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.
|
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>
Atau 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>
Cukup sekian tutorial belajar HTML
5 dari saya dan yang telah saya pelajari semoga bermanfaat J
.jpg)
0 komentar :
Posting Komentar