apa itu html5

Download Apa itu HTML5

Post on 11-Mar-2015

223 views

Category:

Documents

11 download

Embed Size (px)

TRANSCRIPT

Apa itu HTML5?HTML5 akan menjadi standar baru untuk HTML, XHTML, dan DOM HTML. Versi sebelumnya dari HTML datang pada tahun 1999. Web telah banyak berubah sejak saat itu. HTML5 masih dalam proses. Namun, sebagian browser modern mempunyai dukungan HTML5.

Bagaimana Memulai Apakah HTML5?HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML. Beberapa aturan tambahan untuk HTML5: 1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript 2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash) 3. Lebih baik penanganan kesalahan 4. Lebih markup untuk menggantikan scripting 5. HTML5 harus perangkat independen 6. Proses pembangunan harus terlihat untuk umum Fitur Baru Beberapa fitur baru yang paling menarik di HTML5: 1. Unsur kanvas untuk menggambar 2. Unsur-unsur video dan audio untuk media pemutaran 3. Dukungan yang lebih baik untuk penyimpanan offline lokal 4. Baru isi elemen tertentu, seperti artikel, footer, header, nav, bagian 5. New bentuk kontrol, seperti kalender, tanggal, waktu, email, url, cari Dukungan Browser HTML5 standar belum resmi, dan tidak ada browser memiliki dukungan penuh HTML5. Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fitur HTML5 baru ke versi yang terbaru. Elemen baru di HTML5 Internet telah berubah banyak sejak HTML 4.01 menjadi standar pada tahun 1999. Hari ini, beberapa elemen dalam HTML 4.01 yang usang, tidak pernah digunakan, atau tidak menggunakan cara mereka dimaksudkan. Elemen ini dihapus atau ditulis ulang di HTML5. Untuk lebih menangani menggunakan internet saat ini, HTML5 juga mencakup unsur-unsur baru untuk struktur yang lebih baik, gambar, isi media, dan penanganan bentuk yang lebih baik. Elemen Baru Markup Elemen baru untuk struktur yang lebih baik: Tag Keterangan Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal Untuk konten selain dari konten itu ditempatkan masuk Isi samping harus berkaitan dengan isi sekitarnya Sebuah tombol, atau radiobutton, atau checkbox Untuk menjelaskan rincian tentang dokumen, atau bagian dari dokumen Sebuah judul, atau ringkasan, di dalam elemen rincian Untuk pengelompokan bagian konten yang berdiri sendiri, bisa video Judul dari bagian gambar

Untuk footer dari dokumen atau bagian, dapat mencakup nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta Untuk pengenalan dokumen atau bagian, dapat mencakup navigasi Untuk bagian judul, menggunakan untuk , dimana yang terbesar adalah utama menuju bagian tersebut, dan yang lain sub-judul Untuk teks yang harus disorot Untuk pengukuran, yang digunakan hanya jika nilai maksimum dan minimum diketahui Untuk bagian navigasi Keadaan karya dalam penyelesaian Untuk anotasi ruby (catatan Cina atau karakter) Untuk penjelasan tentang anotasi ruby Apa untuk menunjukkan browser yang tidak mendukung elemen ruby Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen Untuk mendefinisikan waktu atau tanggal, atau keduanya Word break. Untuk menentukan kesempatan line-break.

Elemen Baru Media HTML5 memberikan standar baru untuk konten media: Tag Keterangan Untuk konten multimedia, suara, musik atau audio lainnya stream Untuk konten video, seperti klip film atau video lainnya stream Untuk sumber daya media untuk elemen media, yang didefinisikan di dalam unsur-unsur video atau audio Untuk konten tertanam, seperti plug-in Elemen Kanvas Unsur kanvas menggunakan JavaScript untuk membuat gambar di halaman web. Tag Keterangan Untuk membuat grafik dengan script Elemen Formulir Baru HTML5 menawarkan unsur-unsur bentuk yang lebih, dengan fungsionalitas yang lebih: Tag Keterangan Sebuah daftar opsi untuk nilai input Buat kunci untuk mengotentikasi pengguna Untuk berbagai jenis output, seperti output yang ditulis oleh script Input Baru Tipe Atribut Nilai Juga, atribut jenis elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server: Tipe Keterangan tel Nilai input adalah jenis nomor telepon search kolom input adalah bidang pencarian url Nilai masukan URL email Nilai input satu atau lebih alamat email datetime Nilai masukan tanggal dan / atau waktu date Nilai masukan tanggal month Nilai masukan bulan week Nilai masukan seminggu time nilai input adalah tipe waktu datetime-local Nilai masukan tanggal lokal / waktu number Nilai masukan nomor range nilai input adalah angka dalam kisaran tertentu HTML 5 VIDEO

Banyak situs web modern menunjukkan video. HTML5 menyediakan standar untuk menunjukkan kepada mereka. Di bawah ini script untuk pengecekan video di htmlHTML5 Video function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest) { h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); if (!h264Test) { document.getElementById("checkVideoResult").innerHTML="Maaf tidak support video"; } else { if (h264Test=="probably") { document.getElementById("checkVideoResult").innerHTML="Siip! Video OK!"; } else { document.getElementById("checkVideoResult").innerHTML="Wah. Cuma sebagian aja."; } } } else { if (oggTest=="probably") { document.getElementById("checkVideoResult").innerHTML=" Siip! Video OK!"; } else { document.getElementById("checkVideoResult").innerHTML=". Cuma sebagian aja."; } } } else { document.getElementById("checkVideoResult").innerHTML=" Maaf tidak support video" } } Beberapa websites modern menampilkan video. HTML5 menyediakan sebuah standar untuk menampilkan video. Check if your browser supports HTML5 video Check

Video pada halaman WEB Sampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web. Hari ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.

Format Video HTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video. mereka. Saat ini, ada 3 format video yang didukung untuk elemen video:Format Ogg MPEG 4 WebM IE Tidak 9.0 + Tidak Firefox Opera 3.5 + 10.5 + Tidak Tidak 4.0 + 10.6 + Safari 5.0 + 5.0 + 6.0 + Chrome No 3.0 + No

Ogg MPEG4 WebM Cara Bekerja

= Ogg file dengan codec video Theora dan Vorbis audio codec = MPEG 4 file dengan codec H.264 video dan AAC audio codec = WebM file dengan VP8 codec video dan audio codec Vorbis

Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume. Hal ini juga selalu ide yang baik untuk menyertakan atribut lebar dan tinggi. Sisipkan konten antara dan tag untuk browser yang tidak mendukung elemen video: Contoh ; Your browser does not support the video tag.

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome. Untuk membuat karya video di Internet Explorer, Safari dan Chrome versi masa depan, kita harus menambahkan MPEG4 dan file WebM. Elemen elemen video memungkinkan beberapa sumber. Sumber elemen dapat link ke file video yang berbeda. Browser akan menggunakan format diakui pertama: Contoh ; Your browser does not support the video tag.

All Attributes Attribute audio autoplay controls height loop poster preload src width Value muted autoplay controls pixels loop url preload url pixels Description Mendefinisikan keadaan default audio. Saat ini, hanya "diredam" diperbolehkan Jika ada, maka video akan mulai bermain secepat itu siap Jika ada, kontrol akan ditampilkan, seperti tombol putar Mengatur ketinggian video player Jika ada, video akan mulai dari awal lagi, setiap kali selesai Menentukan URL gambar yang mewakili video Jika ada, video akan dimuat pada beban halaman, dan siap untuk dijalankan. Diabaikan jika "autoplay" hadir URL video untuk bermain Mengatur lebar dari video player

HTML5 AudioHTML5 menyediakan standar untuk memutar audio.

Audio di WebSampai saat ini, tidak pernah ada standar untuk memainkan audio di sebuah halaman web. Saat ini, sebagian besar audio diputar melalui sebuah plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama. HTML5 menetapkan cara standar untuk memasukkan audio, dengan unsur audio. Unsur audio bisa memutar file suara, atau stream audio.

Format audioSaat ini, terdapat 3 format yang didukung untuk unsur audio:Format Ogg Vorbis MP3 Wav IE 9 Tidak ada Ya Tidak ada Firefox 3.5 Ya Tidak ada Ya Opera 10,5 Ya Tidak ada Ya Chrome 3.0 Ya Ya Tidak ada Safari 3.0 Tidak ada Ya Ya

Cara BekerjaUntuk memutar file audio di HTML5, ini adalah semua yang Anda butuhkan:

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume. Sisipkan konten antara dan tag untuk browser yang tidak mendukung elemen audio:

Contoh Your browser does not support the audio element.

Coba sendiri Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome. Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3. Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama:

Contoh Your browser does not support the audio element.

Coba sendiri

Semua AtributAtribut autoplay kontrol putaran preload src Nilai autoplay kontrol putaran preload url Deskripsi Menentukan bahwa audio tersebut akan mulai bermain secepat itu siap. Menetapkan bahwa kontrol akan ditampilkan, seperti tombol play. Menentukan bahwa audio akan mulai bermain lagi (looping) ketika mencapai akhir Men