Pertemuan V
PERTEMUAN 5
HTML5 adalah perbaikan pada HTML sebelumnya agar lebih terstruktur dan lebih mudah dibaca manusia. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working
Group). 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. Pada dasarnya untuk menyetel video tidak membutuhkan flash player lagi.
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/
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 :
<!DOCTYPE html>
STRUKTUR DASAR HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Judul Pada Dokumen</title>
</head>
<body>
Isi pada dokumen . . .
</body>
</html>
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.
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>
CONTOH SEDERHANA
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fitur HTML5</title>
</head>
<body>
<header>
<h2>Tutorial HTML5</h2>
</header>
<article>
Web Hypertext Application Technology Working Group (WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.<br/>
<b>Sejak tahun 2009</b>, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelahW3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.<br/>
Dibawah ini logo HTML5 yaitu:
</aticle>
<footer>
<p><h4>Copyright © 2014 Admin</h4></p>
</footer>
</body>
</html>
CONTOH TAG FIGURE DAN FIGCAPTION
<!DOCTYPE html>
Group). 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. Pada dasarnya untuk menyetel video tidak membutuhkan flash player lagi.
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/
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 :
<!DOCTYPE html>
STRUKTUR DASAR HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Judul Pada Dokumen</title>
</head>
<body>
Isi pada dokumen . . .
</body>
</html>
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.
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>
CONTOH SEDERHANA
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fitur HTML5</title>
</head>
<body>
<header>
<h2>Tutorial HTML5</h2>
</header>
<article>
Web Hypertext Application Technology Working Group (WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.<br/>
<b>Sejak tahun 2009</b>, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelahW3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.<br/>
Dibawah ini logo HTML5 yaitu:
</aticle>
<footer>
<p><h4>Copyright © 2014 Admin</h4></p>
</footer>
</body>
</html>
CONTOH TAG FIGURE DAN FIGCAPTION
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tag Figure dan Figcaption</title>
</head>
<body>
<figure>
<img src="images/1.jpg" width="192" height="320">
<figcaption>Android OS</figcaption>
</figured>
</body>
</html>
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
<videocontrols="controls"> <source
src="judulvideo.webm" type="video/webm"></video>
ATRIBUT PADA TAG <VIDEO>
Atribute: controls
Value: controls
Description: Menentukan kontrol video yang akan ditampilkan(Contoh: tombol play/pause)
Atribute: autoplay
Value: autoplay
Description: Menentukan bahwa video akan mulai berputar otomatis
Atribute: src
Value: URL
Description: Menentukan alamat URL dari mana sumber video
Atribute: width
Value: pixels
Description: Mengatur lebar dari video player
Atribute: height
Value: pixels
Description: Mengatur tinggi dari video player
Atribute: loop
Value: loop
Description: Untuk mengulang / memainkan kembali video yang telah selesai diputar .
Atribute: muted
Value: muted
Description: Menentukan bahwa output suara akan dimute/dihilangkan
Atribute: poster
Value: URL
Description: Menentukan gambar yang akan tampil ketika video
masih belum berputar .
Atribute: preload
Value: auto, meta,data,none
Description: Menentukan jika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.
CONTOH TAG <VIDEO>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<video controls="controls" width="450" height="260">
<source src="video/BOS.webm" type="video/webm"/>
</video>
</body>
</html>
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>
ATRIBUT PADA TAG <AUDIO>
Atribute: controls
Value: controls
Description: Menentukan kontrol video yang akan ditampilkan(Contoh: tombol play/pause)
Atribute: autoplay
Value: autoplay
Description: Menentukan bahwa video akan mulai berputar otomatis
Atribute: src
Value: URL
Description: Menentukan alamat URL dari mana sumber video
Atribute: loop
Value: loop
Description: Untuk mengulang / memainkan kembali video yang telah selesai diputar .
Atribute: preload
Value: auto,metadat,a none
Description: Menentukan jika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.
CONTOH TAG <AUDIO>
<html>
<head>
<meta charset="UTF-8">
<title>Audio</title>
</head>
<body>
<h3>One Direction - One Thing</h3>
<audio controls="controls">
<source src="audio/onething.mp3" type="audio/mp3"/>
</audio>
</body>
</html>
INPUT FORM BARU DI HTML5
Macam -macam jenis input form baru di HTML5 yaitu:
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"/>
VALIDATOR
http://validator.w3.org/
Digunakan untuk mengecek validasi atau kebenaran kode HTML web anda.
