Anda di halaman 1dari 37

PEMROGRAMAN WEB

Pertemuan 5

UNIVERSITAS AMIKOM YOGYAKARTA


PRODI D3-TEKNIK INFORMATIKA
Oki Arifin, S.Kom., M.Cs.
TUJUAN
• Objectives (Tujuan Instruksional umum):
– HTML5
• Indikator Kompetensi
– Mampu mendefinisikan tentang HTML5
– Mengetahui keunggulan terbaru dari HTML5
– Mengetahui dukungan browser untuk HTML5
dan mengujinya
– Mengenal fitur-fitur baru HTML5
– Mengenal unsur-unsur semantik baru yang
disediakan HTML5
– Mengetahui tag-tag yang sudah tidak
diperbolehkan di HTML5
– Memahami tag-tag dan atribut terbaru pada
HTML5
PENGENALAN HTML5
• HTML5 merupakan sebuah bahasa markah
untuk menstrukturkan dan menampilkan isi dari
World Wide Web, sebuah teknologi inti dari
Internet. HTML5 adalah revisi kelima dari HTML
dan hingga bulan Juni 2011 masih dalam
pengembangan. (sumber : Wikipedia)
• Tujuan utama pengembangan HTML5
adalah untuk memperbaiki teknologi HTML agar
mendukung teknologi multimedia terbaru,
mudah dibaca oleh manusia dan juga mudah
dimengerti oleh mesin.
LANJUTAN...
• HTML5 merupakan hasil proyek dari W3C
(World Wide Web Consortium) dan WHATWG
(Web Hypertext Application Technology Working
Group).
• Dimana WHATWG bekerja dengan bentuk web
dan aplikasi dan W3C merupakan pengembang
dari XHTML 2.0 pada tahun 2006, kemudian
mereka memutuskan untuk bekerja sama dan
membentuk versi baru dari HTML.
• HTML5 baru mencuat pada April 2010 setelah
CEO Apple Inc., Steve Jobs, mengatakan
bahwa dengan pengembangan HTML5, "Adobe
Flash sudah tidak dibutuhkan lagi untuk
menyaksikan video atau menyaksikan konten
apapun di web."
ATURAN UNTUK MEMPELAJARI HTML5
Beberapa aturan yang harus kamu pelajari saat
belajar HTML5, yaitu :
• Fitur baru harus didasarkan pada HTML, CSS,
DOM, dan JavaScript.
• 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).
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.
DUKUNGAN BROWSER HTML5
• Chrome
• Safari Apple v.4+
• Internet Explorer 9
• Opera
• Maxthon
• Firefox 4, 5, 6 dan seterusnya
MENGUJI BROWSER
• Untuk menguji browser yang terinstall di
komputer. Apakah telah mendukung HTML5
dapat diuji dengan link berikut :
• http://html5test.com/
HASIL UJI COBA
• Browser google chrome Versi 33.0.1750.146 m
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).
• DTD menetapkan aturan untuk bahasa
markup, sehingga browser dapat membuat
konten halaman tersebut dengan benar.
• Penggunaan DOCTYPE pada html5 lebih di
sederhanakan.
• Sintak penulisannya :
<!DOCTYPE html>
STRUKTUR DASAR HTML5
ELEMEN YANG DI HAPUS PADA HTML5
• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>
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.
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:
 <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>
CONTOH LAYOUT DI HTML5
CONTOH SEDERHANA
CONTOH TAG FIGURE DAN FIGCAPTION
OUTPUT BROWSER
VIDEO
• Digunakan untuk memasukkan video,
misalnya ingin memutar video kedalam
halaman web.
• Pada versi HTML sebelumnya untuk memutar
video pada sebuah web menggunakan plugins
tambahan yang biasa disebut flash Player.
• Tag Video Pada HTML5, setidaknya ada 3 jenis
format video yang 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)
LANJUTAN...
• 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>
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 mulai berputar 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 gambar yang akan tampil ketika video masih belum
berputar.
preload auto Menentukan jika dan bagaimana kapan video ini harus diputar
metadata menjalani proses loading ketika halaman terbuka.
none
CONTOH TAG <VIDEO>
OUTPUT BROWSER
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 audio yang mendukung
yaitu:Ogg, MP3, Wav.
• Tag <audio>
• Sintaks Penulisanya :
<audio controls="controls">
<source src="judullagu.mp3" type="audio/mp3">
</audio>
ATRIBUT PADA TAG <AUDIO>

Atribute Value Description


controls controls Menentukan kontrol video yang akan ditampilkan(Contoh:
tombol play/pause)
autoplay autoplay Menentukan bahwa video akan mulai berputar otomatis
src URL Menentukan alamat URL dari mana sumber video
loop loop Untuk mengulang / memainkan kembali video yang telah selesai
diputar.
preload auto Menentukan jika dan bagaimana kapan video ini harus diputar
metadata menjalani proses loading ketika halaman terbuka.
none
CONTOH TAG <AUDIO>
OUTPUT BROWSER
INPUT FORM BARU DI HTML5
• Macam - macam jenis input form baru di
HTML5 yaitu:
 email
 url
 number
 range
 Date pickers (date, month, week, time,
datetime, datetime-local)
 search
 color
 tel (tipe ini belum support jadi tidak ada perubahan)
• Sintaks Penulisanya :

<input type="jenis"/>
CONTOH INPUT FORM
OUTPUT BROWSER
LANJUTAN...
OUTPUT BROWSER
VALIDATOR
• http://validator.w3.org/
• Digunakan untuk mengecek validasi atau
kebenaran kode HTML web anda.
ADA PERTANYAAN?
TERIMA KASIH
REFERENSI
• http://www.w3schools.com
• http://id.wikipedia.org/wiki/HTML5