Petemuan Ke 5

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.
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

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
•   Penggunaan DOCTYPE pada html5 lebih di sederhanakan.
•   Sintak penulisannya : membuat konten halaman tersebut dengan benar.

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
•   <section>,  untuk menentukan seksi-seksi dokumen. Misalnya bagian yg
•   <figure>,  Menentukan konten mandiri, seperti diagram, foto, daftar kode,
•   <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 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)

•   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>

• 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>

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"/>