PEMROGRAMAN BERBASIS WEB

ELEMEN HTML 5

M. ADNAN NUR, S.KOM., MT.

HTML 5
 HTML 5 merupakan versi terakhir HTML yang terus dikembangkan
dan mayoritas browser saat ini sudah mendukung
 Beberapa fitur baru dari HTML5 dibandingkan versi sebelumnya
antara lain:
 Penyederhanaan penulisan elemen HTML (lebih memanfaatkan CSS)
 Semantic baru (nav, header, article, footer, aside dll)
 Terdapat beberapa attibut baru untuk elemen form (date, time, email, number
dll)
 Terdapat elemen baru untuk gambar yang lebih responsif terhadap ukuran
browser (tag picture)
 Terdapat elemen baru untuk multimedia (video, audio, svg dan canvas)
sehingga mengurangi penggunaan plugin seperti object untuk flash
 Terdapat beberapa API (Application Programming Interface) baru
 Dukungan yang lebih baik untuk penyimpanan secara offline dengan database
SQL web, aplikasi cache untuk penyimpanan sementara. Sedangkan pada versi
HTML sebelumya hanya menggunakan cache browser
API HTML 5
 Dalam HTML 5 terdapat beberapa API browser yang terintegrasi
dengan elemen HTML 5 antara lain :
 2D Drawing API, API yang dapat digunakan untuk manipulasi image 2D yang
terintegrasi dengan elemen canvas
 Audio and Video API, dapat digunakan untuk memutar dan memainkan media
Video dan Audio. API ini sudah terintegrasi dengan elemen audio dan video
dari HTML 5
 API yang memungkinkan untuk membuat offline web application (dengan
dukungan database SQL Web)
 API yang memungkinkan web application dapat meregister sendiri untuk
beberapa tipe protokol dan media (diatur melalui tag meta)
 Drag and Drop API di kombinasikan dengan atribut drag-able.
 API yang dapat mengekspos histori dari browser untuk menambahkan
halaman web yang sedang di akses sehingga bisa menambahkan tombol Back
di halaman web
Elemen yang tidak digunakan lagi di HTML 5
 Berikut elemen yang tidak digunakan lagi pada HTML 5 :
 <acronym>, diganti menggunakan <abbr>
 <applet>, diganti menggunakan <object>
 <basefont>, alternatif menggunakan CSS
 <big>, alternatif menggunakan CSS
 <center>, alternatif menggunakan CSS
 <dir>, diganti menggunakan <ul>
 <font>, alternatif menggunakan CSS
 <frame>, <frameset> dan <noframe>
 <strike>, alternatif menggunakan CSS
 <tt>, alternatif menggunakan css
Elemen Markup Di HTML 5
 Berikut elemen markup baru pada HTML 5 :
 <article>.. </article>, , digunakan untuk konten eksternal seperti artikel-berita, blog, forum,
atau konten lain dari sumber eksternal
 <aside>.. </aside>, digunakan untuk konten selain konten utama, ditempatkan di samping
konten utama
 <command>.. </command>, membentuk sebuah tombol, radiobutton, atau checkbox
 <details>...</details>, rincian untuk menggambarkan sebuah dokumen, atau bagian dari
dokumen tertentu
 <summary>…</summary>, Sebuah keterangan, atau ringkasan dalam rincian elemen
 <figure>…<.figure>, digunakan untuk meng-group blok konten yang dapat dipindahkan
posisinya dari blok utama tanpa mempengaruhi halaman web
 <footer>…<./footer>, digunakan untuk membentuk footer dari suatu halaman web
 <header>…</header>, digunakan untuk membentuk header dari suatu halaman web
 <meter>…</meter>, untuk mendefinisikan measurement. Digunakan hanya untuk
pengukuran dengan nilai minimun dan maximum yang sudah di ketahui
 <nav>…</nav>, untuk membentuk bagian navigasi atau menu
 <progress>…</progress>, digunakan untuk menampilkan proses kegiatan atau tugas
 <section>…</section>, digunakan untuk membentuk bagian halaman dokumen
 <time>…</time>, untuk mendefinisikan waktu atau tanggal, ataupun keduanya.
 Dibutuhkan CSS untuk mengatur style dari elemen markup ini
Elemen Media Di HTML 5
 Dalam HTML 5 tidak dibutuhkan lagi plugin pemutar audio maupun video karena
elemennya telah disediakan. Berikut elemennya :
 <audio>, untuk menyajikan konten berupa suara, musik atau streaming audio lainnya. Format
audio yang didukung antara lain : wav, mp3 dan ogg vorbis. Berikut attribut elemen audio :
Attribut Nilai Penjelasan
Autoplay Autoplay Menetapkan video langsung diputar saat halaman web diakses
Controls Controls Untuk menampikan menu kontrol video
Loop Loop Menetapkan pengulangan dalam memutar video
Preload Preload Membuat preload untuk video
Src url Menentukan alamat dari video

Contoh : Hasil :
 <video>, untuk menyajikan konten berupa video. Format video yang didukung antara lain ogg,
mp4/mpeg4 dan WebM. Berikut Attribut dari elemen video
Attribut Nilai Penjelasan
Audio Muted Mendefinisikan muted sebagai kondisi default dari audio
Autoplay Autoplay Menetapkan video langsung diputar saat halaman web diakses
Controls Controls Untuk menampikan menu kontrol video
Height Pixels Menentukan tinggi video
Loop Loop Menetapkan pengulangan dalam memutar video
Poster url Menentukan alamat gambar (thumbnail) dari video
Preload Preload Membuat preload untuk video
Src url Menentukan alamat dari video
Width Pixels Menentukan lebar video

Contoh : Hasil :
 <source>, untuk mendefinisikan resources dari elemen media. Tag ini dapat digunakan pada
tag audio dan video sebagai pengganti attribut source. Terdapat 2 attribut pada tag ini yaitu
src (menentukan url dari file yang dipanggil) dan type (tipe file yang dipanggil)

Contoh: Hasil :
Berikut contoh tag audio dan video sebelumnya
yang diubah menggunakan tag <source>
 <embed>, Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari
Youtube
Attribut Nilai Penjelasan
Height pixels Menentukan tinggi dari tag embed
Src url Menenrukan alamat dari file yang dipanggil
Type Jenis media Menentukan jenis media dari file yang dipanggil
Width Pixels Menentukan lebar dari tag embed

Contoh: Hasil :
Untuk youtube gunakan url
https://www.youtube.com/v/[ID_VIDEO]
Elemen Canvas Di HTML 5
 Dengan canvas memungkinkan untuk membentuk objek gambar pada halaman web dengan
bantuan javascript. Untuk memberikan identifikasi pada canvas yang akan diatur melalui
javascript dapat menggunakan attribut ‘id’.
Contoh : Hasil :
Membuat objek gradasi warna
Elemen Baru Pada Form Di HTML 5
 Terdapat beberapa elemen form baru pada HTML 5 yaitu :
 <datalist>, daftar pilihan untuk tag input.
Untuk menggunakannya, pada tag input diberikan attribut ‘list’ yang nilainya berasal dari ‘id’ dari
datalist. Kemudian untuk memasukkan pilihan pada datalist menggunakan tag <option> dengan
attribut ‘value’ untuk teks yang akan ditampilkan

Contoh : Hasil :
 <keygen>, elemen untuk membuat key-pair generator pada tag input. Terdapat 2
attributnya yaitu keytype (tipe enkripsi, umumnya menggunakan RSA) dan challenge
(teks yang biasanya dikirim bersama public key ). Tag ini tidak didukung oleh browser
internet explorer

Contoh : Hasil :
 <output>, umumnya digunakan untuk menampilkan hasil dari suatu proses

Contoh : Hasil :
Pada contoh dibawah ini dilakukan proses perkalian melalui javascript dengan tag <output> untuk
menampilkan hasilnya
Nilai Attribut Type Baru Pada Tag Input Di HTML 5
 Terdapat beberapa nilai dari attribut type pada tag input untuk kebutuhan
validasi data. Berikut nilai attribut typenya :
 cel, nilai input untuk nomor telepon
 search, untuk input keyword pencarian
 url, untuk input berupa URL
 email, untuk input berupa email
 datetime, untuk input tanggal dan waktu
 date, untuk input tanggal
 month, untuk input bulan
 week, untuk input minggu/pekan
 time, untuk input waktu
 number, untuk input berupa angka
 range, untuk input rentang nilai
 color, untuk input warna dalam hexadesimal
Contoh : Hasil :
Input type date, range dan color
LANJUT KE MATERI BERIKUTNYA