HTML 5
Nah kali ini saya akan mengeshare tentang html 5. Untuk pengertian dan penjelasanya liat di bawah ya kawan,
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>
Sekian dulu temen-temen yang bisa saya posting pada kesempatan kali ini. Untung lebih jelasnya lagi tetang html5, temen-temen bisa mengunjungi w3 schools, oke sekian dan terima kasih. sampai jumpa kembali.
sumber : http://santri-it.blogspot.com/2015/05/belajar-pemrograman-web-sekilas-tentang.html
0 komentar:
Posting Komentar