Pada pertemuan ke 5
ini kami di ajarkan tentang HTML5. Yang terlintas dalam benak saya adalah apa
perbedaan HTML5 dengan HTML versi sebelumnya ??? apa keunggulannya dibandingkan
HTML sebelumnya ??
Tujuan utama pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah
dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Ada beberapa aturan yang harus dipelajari saat belajar HTML5, yaitu :
.jpg)
.jpg)
·
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).
DOCTYPE UNTUK HTML5
DOCTYPE adalah instruksi untuk web browser tentang apa versi
bahasa markup halaman yang ditulis.
Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).
DTDmenetapkan
aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman
tersebut dengan benar.
Penggunaan
DOCTYPE pada html5 lebih di sederhanakan.
Sintak penulisannya :
<html>
<head>
<meta
charset=”UTF-8”>
<title>contoh
penulisan untuk HTML 5</title>
</head>
<body>
Materi pertemuan ke 5 tantang HTML 5
</body>
</html>
HTML5 SEMANTIC ELEMENTS
Semantic=
arti/makna
Semantic elements =
elemen dengan makna
Apa Unsur Semantic?
Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.
Contoh non-semantik elemen:
<div> dan <span> -tidak menjelaskan tentang
isinya.
Contoh semantik elemen:
<form>, <table>, dan <img> -Jelas
mendefinisikan isinya.
ELEMENSEMANTIKBARUdi 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:
<header>
<nav>
<section>
<article>
<aside>
<figure>
<figcaption>
<time>
<footer>
dan masih banyak tag-tag
lainnya
PENJELASAN TAG-TAG HTML5
<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>
VIDEO
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 bisa juga dengan
syntaks penulisan yang seperti ini :
<videocontrols=”controls”><source
src=”judulvideo.mp4” type=”judulvideo.mp4”></video>
AUDIO
Digunakan untuk
memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web.
Ketika di generasi
sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan
flash.
Tag Audio Pada
HTML5, setidaknya ada 3 jenis format audioyang mendukung yaitu:Ogg, MP3, Wav.
Tag <audio>
Sintaks Penulisanya
:
<audio
controls="controls"><source src="judullagu.mp3"
type="audio/mp3"></audio>
No comments:
Post a Comment