Tantri Setya Mustika

Sabtu, 02 Mei 2015

HTML5

3:08:00 PM

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. 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 salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

1. Sejarah HTML5

Kelompok Kerja Teknologi Aplikasi Web Hyperteks (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. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, 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."

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

2. Dukungan Browser HTML5

Web browser merupakan program yang berfungsi untuk menampilkan dokumen-dokumen web dalam format HTML. Untuk menguji browser anda yang terinstall di komputer telah mendukung HTML5 dapat diuji dengan link berikut : http://html5test.com Sebaiknya agar browser anda mendukung HTML5 segera di update dengan versi terbaru. Beberapa browser yang sudah support HTML5 yaitu:

· Chrome

· Safari Apple v.4+

· Internet Explorer 9

· Opera

· Maxthon

· Firefox 4, 5, 6 dan seterusnya

3. Fitur-Fitur Baru di HTML5

HTML5 merupakan versi ke-5 dari html dan saat ini juga masih dalam tahap pengembangan. Berikut adalah fitur-fitur terbaru dalam HMTL5 diantaranya yaitu:

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

4. Document Type (DOCTYPE)

DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis. DOCTYPE bukanlah tag HTML dan deklarasi DOCTYPE mengacu pada Document Type Definition (DTD). DTD menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar. Deklarasi DOCTYPE harus menjadi hal pertama dalam dokumen HTML, sebelum tag <html>. Biasakan selalu menambahkan DOCTYPE ke halaman web agar membantu browser untuk membuat halaman web/blog dengan benar. Penggunaan DOCTYPE pada HTML5 lebih di sederhanakan dengan mengetikkan perintah:

<!DOCTYPE html>

Sebelumnya jika kita menggunakan model HTML4 maka kita menuliskan DOCTYPE secara lengkap seperti berikut ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Atau bila anda bekerja dengan model XHTML yaitu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5. Struktur Dasar HTML5

latihan1.html

<

<!DOCTYPE html>

<html>

<head>

<title>informasi dokumen</title>

</head>

<body>

....konten yang di tampilkan

pada halaman browser.....

</body>

</html>

6. Elemen Semantik HTML5

Semantic = arti/makna. Semantic elements = elemen dengan makna. Elemen semantik baru yang bertujuan untuk memberi makna ke berbagai bagian dari suatu halaman Web modern: header, footer, navigation bar, sidebar, dan sebagainya. Unsur-unsur semantik baru yang disediakan HTML5 adalah:

· <article>

Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.

<section>

Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari sebuah artikel atau tutorial. Misalnya, bagian Anda baca sekarang bisa dikelilingi oleh elemen <section> di HTML5.

<nav>

Ini adalah wadah untuk link navigasi utama pada halaman Web.

<aside>

Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan

<hgroup>

Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul dengan tag heading.

<canvas>

Unsur ini adalah salah satu aspek yang paling penting dariHTML5 karena memfasilitasi produksi grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in eksternal seperti Adobe Flash.

<audio> dan <video>

Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.

Macam - macam jenis input form baru di HTML5 yaitu:

· color

· date

· datetime

· datetime-local

· email

· month

· number

· range

· search

· tel

· time

· url

· week

Selain memberikan elemen-elemen baru, HTML5 menghapus beberapa elemen lama seperti:

· <acronym>

· <applet>

· <basefont>

· <big>

· <center>

· <dir>

· <font>

· <frame>

· <frameset>

· <noframes>

· <strike>

· <tt>

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8”>

<title> Elemen Semantik</title>

</head>

<body>

<header>

<img src=”logo.png” alt=”html5” align=”align” width=”40” height=”40”>

<h2> TUTORIAL HTML5</h2>

</header>

<hr>

<nav>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</nav>

<article>

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.

</article>

<footer>

</footer>

</body>

</html>

7. Figure dan Figcaption

HTML5 memperkenalkan tag baru bernama <figure>. Tag ini digunakan sebagai wadah untuk menampung atau meletakkan tag <img> agar dapat tersusun secara rapih. Sedangkan <figcaption> digunakan untuk menuliskan atau memberikan keterangan pada gambar.

Sintak Penulisan:

<figcaption>Keterangan Gambar<figcaption>

</figure>

Contoh penggunaan tag <figure> dan <figcaption>

latihan3.html

<!DOCTYPE html>

<html>

<head>

<title>Figure dan Figcaption</title>

</head>

<body>

<figcaption>Android OS</figcaption>

<figcaption>Blackberry OS</figcaption>

</figure>

</body>

</html>

8. Video

HTML5 memperkenalkan tag baru bernama <video>. Tag ini 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)

Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

Sintak Penulisan:

</video>

Atribut pada tag <video>

Contoh penggunaan tag <video>

latihan4.html

<!DOCTYPE html>

<html>

<head>

<title>Video</title>

</head>

<body>

<h2>Video Battle Of Surabaya</h2>

</video>

</body>

</html>

9. Audio

HTML5 memperkenalkan tag baru bernama <audio>. Tag ini digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web. Ketika di generasi sebelumnya (HTML 4.01) memasukkanaudio ke dalam web masih harus menggunakan flash. Tag audio pada HTML5, setidaknya ada 3 jenis format audio yang mendukung yaitu: Ogg, MP3, Wav.

Sintak Penulisan:

</audio>

Atribut pada tag <audio>

Contoh penggunaan tag <audio>

latihan5.html

<!DOCTYPE html>

<html>

<head>

<title>Audio</title>

</head>

<body>

<h3>One Direction - One Thing</h3>

</audio> <br/>

<h3>Bruno Mars - Locked Out Of Heaven</h3>

</audio>

</body>

</html>

10. HTML Inputan Type

HTML5 memiliki beberapa input type baru untuk form. Fitur baru ini memungkinkan kontrol input yang lebih baik dan validasi.

Pada chapter ini kita akan membahas Input Type baru pada HTML5 :

· color

· date

· datetime

· datetime-local

· email

· month

· number

· range

· search

· tel

· time

· url

· week

Catatan : Tidak semua browser mendukung semua input type baru. Kita bisa memulainya. Jika tidak didukung maka akan ditampilkan sebagai field text biasa.

Input Type : color

Type color digunakan untuk menginputkan field yang berisikan warna.

Input Type : date

Type data date memungkinkan user untuk memilih tanggal.

Input Type : datetime

Type datetime memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).

Input Type : datetime-local

Type datetime-local memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).

Input Type : email Type email digunakan untuk menginputkan field yang seharusnya berisi alamat email. Mendefinisikan field dari alamant e-mail (akan otomatis divalidasi ketika disubmitkan)

Tip : Safari dan iPhone mengenal type email, dan merubah keyboard on-screen sesuai dengan format email (email@admin.com)

Input Type : month Type month memungkinkan user untuk memilih bulan dan tahun

Input Type : number Type number digunakan untuk menginputkan field yang seharusnya berisikan nilai numeric. Kita juga bisa mengatur restriction pada nomor yang diterima :

Gunakan atribut berikut untuk menentukan restriction :

· Max - menentukan nilai maksimum yang diperbolehkan

· Min - menentukan nilai minimum yang diperbolehkan

· Step - menentukan nomor legal interval

· Value - menentukan nilai default

Input Type : range Type range digunakan untuk menginputkan fiels yang seharusnya berisikan nilai dari range nomor.

Kita juga bisa mengatur restriction nomor apa yang akan diterima.

Input Type :Search

Type search digunakan untuk mencari field (field search tampul seperti text field biasa)

Input Type : tel Mendefinisikan field yang memasukkan nomor telepon.

Input Type : time Type time memungkinkan user untuk memilih waktu.

Input Type : url Type url digunakan untuk menginputkan fields yang seharusnya berisikan alamat URL. Nilai dari field url secraa otomatis di validasi ketika form disubmitkan.

Tip : Safari di iPhonr mengenali input type url, dan mengubah keyboard on-screen untuk menyesuaikan format url (contoh : http://situs.com).

Input Type : week

Type week memungkinkan user untuk memilih minggu dan tahun.

11. HTML5 Form Atributes

Dengan berkembangnya HTML4 menjadi HTML5, bertambahlah berbagai fungsi dan tag tambahan, begitu juga dengan Atribut dari form HTML. Kali ini kita akan membahas mengenai atribut form yang ada pada HTML5. Atribut baru dari <form> :

· autocomplete

· novalitade

Beberapa atribut baru tag <input> yang sering digunakan dalam form validasi adalah:

· min : nilai minimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date

· max : nilai maksimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date

· step : interval nilai yang dapat dimasukkan. Dapat digunakan untuk tipe input number

· pattern : pola input yang harus dimasukkan oleh user. Menggunakan format regex dalam javascript.

· required : menentukan apakah field ini harus diisi apa tidak

· placeholder : bantuan pengisian field. berupa contoh isi field ketika field kosong dan kursor tidak terdapat dalam field tersebut.

Atributte autocomplete <form> / <input> Atribut autocomplete menentukan apakah form /input field autocomplete harus on atau off. Ketika autocomplete on, browser akan secara otomatis menyempurnakan nilai berdasarkan pada nilai yang user telah masukkan sebalumnya. Tip: Memungkinkan autocomplete "on" untuk form, dan "off" untuk spesifik input field. Catatan : Atribut autocomplete bekerja dengan <form> dan diikuti oleh type <input> : tex. search, url, email, password, datepickers, range, dan color.

Atribut novalidate pada <form>

Atribut novalidate merupakan atribut boolean. Ketika dihadirkan, maka akan menentukana form-data(input) yang tidak perlu divalidasi ketika dimasukkan.

Atribut autofocus pada <input>

Atribut autofocus merupakan atribut boolean. Ketika hadir, akan menentukan element <input> secara otomatis harus get focus ketika halaman load.

Atribut form pada <input> Atribut form menentukan satu atau banyak form yang dimiliki sebuah element input. Tip : untuk memilih lebih dari satu form, gunakan pemisah spasi dari ids form Input diletakkan diluar form HTML (tapi tetap bagian dari form)

Atribut pattern pada <input> Atribut pattern menentukan ekspresi regular dari nilai element <input> dicek lagi. Catatan : Atribut pattern bekerja dengan diikuti dengan input type : text, search, url, tel, email, dan password. Tip : Gunakan atribut tittle global untuk mendeskripsikan pattern untuk membantu user.

Tip : Pelajari tentang regular expressions di Javascript

Atribut require pada <input> Atribut require atribut boolean. Ketika hadir, akan menentukan input field yang harus diisikan sebelum mensubmitkan form. Catatan : Atribut require bekerja dengan diikuti input type : text, search, url, tel, email, password, date picker, number, checkbox, radio, dan file.

Atribut Placeholder pada <input>

Atribut placaholder menentukan petunjuk pendek yang mendeskripsikan nilai yang dimaksud dari input field. Petunjuk kecil ditampilkan dalam field input sebelum user mengenterkan nilai. Catatan : Atribut placeholder bekerja dengan diikuti input type : text, search, url, tel, email, dan password.