materi html5 lengkap: Mengenal Hal-Hal Baru dalam HTML5

Pada umumnya, suatu bahasa pemrograman berisi tentang pengolahan data, misal pada bahasa HTML terdapat data berupa angka, kata, atau kalimat yang dibungkus dengan tag atau elemen HTML, sehingga membentuk suatu tampilan pada halaman web.

Tampilan yang dihasilkan pada halaman web bisa berupa tabel, list, form, dsb. Bahasa Pemrograman Html telah melewati banyak perkembangan dimulai dari versi 1 hingga sampai HTML5. Lalu apa yang baru di Html5?

Daftar isi

1. Pengertian Html5

Bahasa Html telah melalui banyak proses dan perkembangan, dimulai dari versi Html 1.0 sampai HTML5. HTML5 adalah bahasa standar baru dari versi sebelumnya yang muncul pada tahun 1999 yaitu versi 4.01

HTML5 hadir untuk memenuhi semua kebutuhan pengguna maupun mesin seperti menghilangkan plugin tambahan, menampilkan animasi, memutar musik dan video, menjalankan aplikasi, HTML5 juga lebih mudah dibaca oleh manusia atau mesin.

HTML5 juga menyediakan beberapa elemen-elemen baru seperti <article>, <header>, <nav>, <footer>, <section>, <canvas>, dan lain sebagainya.

HTML5 sebenarnya adalah hasil dari kerja sama antara W3C dan WHATWG. Mereka sepakat dan bekerja sama untuk menciptakan versi terbaru dari HTML, dari hasil kerja sama itu menghasilkan beberapa aturan yaitu.

  1. Penggunaan Pluggin eksternal dikurangi(misal flash player)
  2. penanganan error dipermudah
  3. proses pengembangan bisa dilihat publik
  4. fitur baru harus berbasis html, css, DOM, dan javascript

2. Kelebihan Html5

Kelebihan Html5 dibandingkan Html sebelumnya adalah terdapat tag tag baru atau semantic tags yang mempermudah dan mempersingkat dalam penulisan kode.

Misalnya pada Html yang dulu, semantic tags dibuat dengan tag DIV dengan tambahan atribut class sebagai pembeda contohnya <div class="header">, <div class="aside">, dll.

Nah, pada Html5 terdapat tag tag baru seperti Tag Section, Header, Aside, Article, Footer, Canvas, Main, dsb yang dulu belum ada di html versi sebelumnya. Penggunaan semantic element cukup mudah, misal <section> blablabla </section>.

Semua semantic tags pada html5 memiliki fungsinya sendiri-sendiri sesuai dengan namanya dan masih banyak lagi kelebihan dari teknologi baru yang ada di HTML5.

3. Fitur Baru pada Html5

Banyak sekali fitur-fitru baru di Html5 misalnya adanya dukungan baru untuk Pemutaran Multimedia seperti Audio dan Video. Selain itu, berikut beberapa fitur baru di HTML5.

  1. Penulisan tipe dokumen lebih singkat yaitu <!DOCTYPE html>
  2. Tag <audio> dan <video> untuk Pemutaran multimedia
  3. Reload Video dengan atribut preload, misal <video preload>
  4. Tag <canvas> untuk menggambar 2D
  5. Mendukung penyimpanan lokal atau computer lokal support.
  6. Kontrol form seperti: date, time, email, url, search, calender.
  7. Elemen baru lainnya: article, footer, header, nav, section, Figure, dsb.
  8. Atribut baru lainnya seperti: required, placeholder, autofocus, dsb.

4. Elemen yang dihilangkan

Selain memiliki beberapa elemen baru, Html5 juga menghilangkan beberapa elemen pada versi sebelumnya. Berikut adalah beberapa elemen pada Html versi 4 yang dihilangkan dari Html5.

  1. <acronym>
  2. <applet>
  3. <basefont>
  4. <bigsound>
  5. <big>
  6. <blink>
  7. <center>
  8. <command>
  9. <dir>
  10. <element>
  11. <font>
  12. <frame>
  13. <frameset>
  14. <image>
  15. <keygen>
  16. <noembed>
  17. <noframes>
  18. <tt>
  19. <xmp>

5. Html5 Canvas

Elemen Canvas adalah salah satu komponen utama yang membedakan Html5 dengan html versi terdahulu. Lalu apa itu canvas, elemen canvas bisa diibaratkan dengan selembar kertas yang siap untuk diberi coretan berupa gambar/lukisan.

Nah, dalam pemrograman Html, canvas adalah elemen yang bisa dilukis atau digambar dengan kode(html dan javascript). Lalu apa yang bisa digambar dengan adanya Canvas?.

Untuk hal yang sederhana, Anda bisa membuat Segiempat, membuat Garis, menulis Teks dan membuat Lingkaran, Namun Anda juga perlu memahami kode Javascript untuk mulai menggambar dengan canvas. berikut contoh kode untuk membuat segiempat dengan canvas.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title> Menggambar Segiempat dengan Canvas </title>
        <style>
            canvas{
                width:250px;
                height:150px;
                border:1px solid black;
            }
        </style>
    </head>

    <body>
        <canvas id="kotak"></canvas>
        <script>
            var k = document.getElementById("kotak");
            var kotak = k.getContext("2d");
            kotak.fillStyle = "navy";
            kotak.fillRect(0, 0, 200, 75);
        </script>
    </body>
</html>

dari kode diatas, pertama adalah Tag <canvas id="kotak">, dimana maksudnya adalah bisa diibaratkan dengan menyediakan selembar kertas(canvas) yang diatur dengan lebar 250px dan tinggi 150px(lihat bagian kode css).

Selanjutnya bagian terpenting ada pada elemen script, pada elemen tersebut terdapat method getContext() dengan parameter "2d" yang artinya adalah Anda bisa menggunakan banyak properti dan method untuk menggambar kotak, garis, lingkaran, dsb.

Selanjutnya pada baris kode kotak.fillStyle = "navy";, kode tersebut adalah perintah untuk memilih warna yang digunakan untuk menggambar, dari kode diatas saya mencoba warna navy(biru tua?).

kemudian bagian terakhir pada elemen script yaitu baris kode kotak.fillRect(0, 0, 200, 75);, dimana baris kode tersebut adalah perintah untuk menggambar segiempat, dimulai dari koordinat(0,0) dengan lebar 200 dan tinggi 75.

Perlu diketahui, bahwa koordinat(0,0) di Html5 canvas dimulai dari pojok kiri atas. Berikut adalah screenshot hasil menggambar segiempat dengan canvas pada halaman web.

gambar persegi yang dibuat dengan canvas pada html5
Gambar 5

6. Html5 Multimedia

Dulu, sebelum Html5 muncul, fitur-fitur seperti Pemutaran multimedia dan Game yang ditampilkan atau dimainkan dalam browser masih menggunakan flash player.

Tanpa flash player, Anda mungkin tidak bisa memutar video dan memainkan game berbasis web. Walaupun penggunaan flash bisa untuk memutar video, namun tidak semua video bisa dimainkan termasuk video di youtube.

Nah, hadirnya Html5 membawa banyak perubahan yaitu elemen-elemen baru yang menggantikan tugas Flash dalam web browser seperti elemen Video dan Audio.