Sunday, August 2, 2015

Pengenalan Dasar HTML5

Pengenalan dan Pemahaman Dasar HTML5

Pengenalan Dasar HTML5 - Pada kesempatan ini Arlina Design akan membahas tentang hal yang berkaitan dengan HTML5. Untuk mengawali pembahasan HTML5 ini ada baiknya kita mengetahui tentang pengenalan dasar HTM5 agar kedepanya kita bisa memahami cara kerja dan penerapannya.


Apa itu HTML5


Berdasarkan pemahaman yang Saya ketahui HTML5 merupakan teknologi terbaru HTML (Hypertext Markup Language) yang merupakan salah satu bahasa pemrograman web yang dinaungi World Wide Web Consortium atau biasa dikenal dengan W3C. HTML5 mulai diperkenalkan kepada publik sejak tahun 2008, meski demikian HTML5 baru dikenal luas dan secara resmi di release pada tahun 2011. Para programmer mulai memiliki ketertarikan khusus untuk menggunakan teknologi baru ini akan tetapi kompatibilitas browser pada saat itu masih sangat minim sehingga menyulitkan para web developer untuk menggunakan HTML5 secara menyeluruh / cross browser.

HTML5 bekerja secara bersamaan dengan CSS3. Walaupun masih belum berstatus Final, kedua teknologi ini sudah dapat digunakan secara efektif. Saat ini W3C masih berusaha memaksimalkan teknologi baru ini agar lebih stabil. Sejak teknologi ini diperkenalkan, perhatian W3C terfokus pada pengembangannya sehingga menjadi produk yang akan terus dikembangkan hingga saat ini.


Beberapa keunggulan yang ditawarkan teknologi HTML5 


html5 dan css3

Fitur-fitur baru yang tersedia dan berbasis pada HTML, CSS, DOM, dan JavaScript. Kebutuhan penggunaan plug-in ekstra seperti Flash Player dapat diminimalkan sehingga website dapat di download secara lebih efektif, ringan dan cepat. Penanganan error yang lebih mudah daripada versi sebelumnya. Banyak tag dan element-element baru yang digunakan untuk meminimalisir penulisan kode program. HTML5 merupakan sebuah perangakat yang mandiri.


Apa yang baru di HTML5


HTML5 dihadirkan untuk meminimalisir proses pengkodean dan lebih logis. HTML5 sangat dibutuhkan oleh website yang memiliki dasar konten multimedia karena telah banyak kode yang diperuntukkan konten multimedia. Banyak fitur yang telah dibuat dengan memperhatikan besarnya data yang digunakan tetapi tetap dapat memberikan kompatibilitas terhadap semua perangakat sehingga dapat meningkatkan mobilitas penggunaan konten informasi yang diinginkan oleh para pengguna. Beberapa fitur baru tersebut seperti element <video>, <audio>, dan <canvas>, serta integrasi terhadap Vector Graphics Content (<object> tag). Hal ini menyimpulkan bahwa konten website yang berbasis multimedia dan grafis dapat ditangani oleh HTML5 dan tentunya dapat digunakan dengan mudah dan lebih cepat tanpa harus menggunakan plug-in tambahan atau APIs.


Struktural baru yang terdapat pada HTML5


Elemen Media


<audio> Mendefinisikan konten suara
<video> Mendefinisikan sebuah video atau film
<source> Mendefinisikan beberapa sumber media <video> dan <audio>
<embed> Mendefinisikan sebuah wadah untuk aplikasi eksternal atau konten interaktif

Plug-in


<track> Mendefinisikan trek teks untuk <video> dan <audio>


Elemen Formulir


<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen> Mendefinisikan kunci-pair bidang pembangkit (untuk formulir)
<output> Mendefinisikan hasil penghitungan


Semantik / Elemen Struktural 


HTML5 menawarkan unsur-unsur baru untuk struktur yang lebih baik antara lain :

<canvas> Digunakan untuk menggambar grafik melalui script (biasanya JavaScript)
<article> Mendefinisikan sebuah artikel
<aside> Mendefinisikan konten selain dari konten halaman
<bdi> Isolat merupakan bagian dari teks yang dapat diformat dalam arah berbeda dari teks lain di luar itu
<command> Mendefinisikan sebuah tombol perintah bahwa seorang pengguna dapat meminta
<details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<dialog> Mendefinisikan sebuah kotak dialog atau jendela
<summary> Mendefinisikan sebuah judul terlihat untuk elemen <details>
<figure> Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
<figcaption> Mendefinisikan sebuah caption untuk elemen <figure>
<footer> Mendefinisikan footer untuk dokumen atau bagian
<header> Mendefinisikan sebuah header untuk dokumen atau bagian
<mark> Mendefinisikan ditandai / teks yang disorot
<meter> Mendefinisikan pengukuran skala dalam kisaran yang dikenal
<nav> Mendefinisikan navigasi link
<progress> Merupakan kemajuan tugas
<ruby> Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<rt> Mendefinisikan penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<rp> Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung

Penjelasan ruby


<section> Mendefinisikan bagian dalam dokumen
<time> Mendefinisikan tanggal / waktu
<wbr> Mendefinisikan garis-break mungkin

Adapun beberapa elemen HTML 4.01 yang telah usang dan penggunaanya telah dihapus pada generasi HTML5 yaitu :

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>


Kita sebagai pengguna teknologi khususnya teknologi internet tentunya tidak ingin tertinggal dengan perkembangan teknologi generasi terbaru, apalagi jika teknologi yang sedang kita gunakan terancam tidak lagi berfungsi pada browser di masa mendatang.

Sekedar informasi browser teratas seperti Chrome, Safari, Firefox, Opera, dan IE telah memberikan kompatibilitas terhadap HTML5, ini membuktikan bahwa generasi HTML5 akan menggantikan generasi sebelumnya HTML 4.01 yang secara tidak langsung akan menghapus fungsi pengoperasianya.

Demikian mengenai Pengenalan Dasar HTML5, semoga menambah pengetahuan sobat blogger. Terima kasih.