• Klik tertinggi

  • Backlink

  • Follow Fadilmuhdi's Blog on WordPress.com
  • Masukkan alamat surat elektronik Anda untuk mengikuti blog ini dan menerima pemberitahuan tentang tulisan baru melalui surat elektronik.

    Bergabunglah dengan 1 pengikut lainnya

  • fadilmuhdi

  • Statistik Blog

    • 120,458
  • Kategori

  • Arsip

  • Tulisan Teratas

Pengenalan HTML 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
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
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 LAYOUT DI HTML5
CONTOH SEDERHANA
CONTOH TAG FIGURE DAN FIGCAPTION
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 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 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
meta
data
none
Menentukan jika dan bagaimana kapan video ini harus
diputar
menjalani proses loading ketika halaman terbuka.
CONTOH TAG <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>
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 metadata none Menentukan jika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.
CONTOH TAG <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 :

contoh input formcccc
<input type=”jenis”/>
CONTOH INPUT FORM
VALIDATOR
http://validator.w3.org/
 Digunakan untuk mengecek validasi atau kebenaran kode HTML web anda.

akhir

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: