Minggu, 11 September 2016

Pengenalan Dasar HTML 5

      , ,    5 comments  


Pada kesempatan kali ini KompiArea akan membahas salah satu bahasa pemrograman yaitu HTML 5. Sebelum melangkah lebih jauh ada baiknya kita mengetahui pengertian dari HTML 5. HTML 5 adalah bahasa mark up yang membentuk dan menampilkan isi atau tampilan dari WWW. HTML 5 merupakan versi terbaru dari HTML (Hyper Text Mark up Language) yang dikembangkan oleh W3C atau World Wide Web Consortium. HTML 5 dikembangkan untiuk memperbaiki konten multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar browser mampu menerjemahkan instruksi-instruksi dengan mudah. HTML 5 merupakan kerja sama antara W3C dengan Web Hypertext Application Technology Working Group atau disingkat WHATWG. WHATWG bekerja pada sektorweb dan aplikasi sedangkan W3C bekerja dengan XHTML 2.0.

HTML 5 juga sering disebut dengan Semantic Web. Semantic Web yaitu bahas pemroggraman yang mempunyai penanda khusus dalam penerapannya dengan tujuan mampu mendeskripsikan apa yang terkandung dalam isi web tersebut. Semantic Web tidak hanya dikembangka di Web 2.0, tetapi sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0.

HTML 5 resmi dipublikasikan pada bulan Mei 2011 oleh W3C dan terus dikembangkan sampai saat ini. HTML 5 hanya membutuhkan beberapa penyempurnaan saja. Sampai saat ini semua web browser baik desktop maupun mobile sudah mampu mengimplementasikan HTML 5.

 HTML 5 memiliki struktur penulisan syntax atau document tersendiri. Struktur penulisan HTML 5 hanya terdiri dari dua elemen yaitu head dan body. Pada bagian Head diawali dengan tag pembuka <head> dan ditutup dengan pasangannya yaitu </head>.  Bagian Body diawali dengan tag <body> dan ditutup dengan tag </body>. Bagian Head dan Body harus diapit oleh tag <html> dan ditutup dengan </html>. Paada baris awal dokumen juga harus ada deklarasi dokkumen HTML yaitu <!DOCTYPE html>.

Bagian Head:
  1. Meta data: berisi daa tambahan tentang dokumen HTML 5 seperti nama author, tanggal publikasi, deskripsi, kata kunci, dll. Ditulis dengan tag <meta> dan ditutuo dengan </meta>.
  2. Base URL:  berfungsi untuk menentukan basis- basis link yang ada pada dokumen. Ditulis dengan tag <base> dan ditutup denan </base>.
  3. Link: menentukan link ke dokumen lain yang terkait dalam dokumen, misalnya skri CSS yang digunakan dalam desain web. Ditulis dengan tag <link> dan ditutup dengan </link>.
  4. Objek: berisi tentag objek yang ada pada dokumen HTML 5. Objek yang terkandung dapat berupa video, audio, dan animasi flash. Ditulis dengan tag <object> dan ditutup degan </object>.
  5. Skrip: berisi skrip pemrograman yang terdapat pada dokumen HTML 5. Skrip ini biasanya bersifat client-side seperti javascript. Ditulis denga tag <script> dan ditutup denga </script>.
  6. Style: berisi desain halaman web dalam bentuk CSS yang langsung ditulis pada bagian head. Apabila akan ditulis pada dokumen terpisah maka diapit dengan tag <style> dan </style>.
Bagian Body:
  1.  Elemen body merupakan elemen yang akan diterjemahkan dan ditampilkan oleh web browser. Pada bagian ini terdapat berbagai tag yang menyatakan desain HTML. Sebuah dokumen yang baik terdiri dari beberapa paragraf yang ditulis dengan tag <p> dan ditutup dengan </p>.
  2. Untuk ganti baris tanpa paragraf maka menggunakan tag <br>, akan tetapi tag ini tidak memiliki pasangan sehingga cukup ditulis dengan <br />.
  3. Beberapa tag untuk menampilkan format penulisan teks:
    •  <b> dan </b> untuk teks tebal
    • <i> dan </i> untuk  menampilkan teks secara miring
    • <u> dan </u> untuk teks dengan garis bawah
    • <font> dan </font> untuk menentukan jenis font
    • <hr /> untuk menampilak garis horisontal
    • dll
  4.  Dalam menuliskan dokumen HTML 5 tag jangan sampai tumpang tindih melainka rapi sesuai letaknya. Contohnya adalah <b><i>teks</b></i>.
Fitur Pada HTML 5
  • Elemen Canvas: Dengan tag <canvas>, dapat digunakan untuk menggambar grafik secara dinamis menggunakan javascript, seperti shape lingkaran, garis diagonal, hingga grafik 3D.
  • Elemen Video dan Audio: Cukup menggunakan tag <video> untuk file video, dan tag <audio> untuk file audio.
  • Geolocation: Fitur ini berfungsi untuk melacak posisi user dengan menggunakan infrmasi dari Wi-Fi ataupun GPS.
  • Offline Web Application: Memingkinkan user untuk terus berinteraksi dengan web tanpa harus terhubung ke internet. Misalnya mengedit dokumen pada Google Docs.
  • Fitur lainnya seperti kemampuan untuk Drag and Drop, text api, datagrid, Cross Document Messaging, dll.
 Contoh HTML 5:



Referensi: http://ininia94.blogspot.co.id/2013/10/makalah-dasar-dasar-html5.html

    5 komentar: