Membangun Web Kreatif Dengan HTML 5

October 18, 2017

Apakah HTML5?



  • HTML5 adalah versi terbaru dari HTML, sudah mendapat dukungan oleh pembuat web browser.
  • Mencakup semua fitur dari versi HTML sebelumnya, termasuk XHTML.
  • Menambahkan satu set tools baru untuk pengembang web.



Tujuan HTML5


  • Mendukung semua halaman web yang ada. Dengan HTML5, tidak ada persyaratan untuk kembali dan merevisi situs yang lebih tua.
  • Mengurangi kebutuhan untuk plugin eksternal dan skrip untuk menampilkan konten website.
  • Meningkatkan definisi semantik (yaitu makna dan tujuan) dari elemen halaman.
  • Membuat render konten web universal dan independen dari perangkat yang digunakan.
  • Menangani dokumen kesalahan (error) web dengan cara yang lebih baik dan lebih konsisten.




Semantik Baru HTML5


  • <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.
  • <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 sepertiAdobe Flash.
  • <audio> dan <video> Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.


Fitur Baru di HTML5



  • Built-in audio dan video (tanpa plugins)
  • Perbaikan kontrol pada form dan attribute.
  • Canvas (cara menggambar langsung di web page)
  • Fungsionalitas Drag dan Drop
  • Support terhadap CSS3
  • Fitur yang lebih advanced untuk web developer, seperti data storage dan offline application.



Tampilan Awal di HTML5 Deklarasi DOCTYPE pada XHTML?


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


Pada HTML5, DOCTYPE dideklarasikan dengan lebih sederhana:

<!DOCTYPE html>

Hanya 15 karakter! DOCTYPE memberitahu browser yang jenis dan versi dokumen yang diharapkan. Mulai sekarang, semua versi masa depan dari HTML akan menggunakan deklarasi sama yang disederhanakan ini.



Element <html>


Berikut adalah penulisan element <html> pada XHTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

HTML5 lebih sederhana:

<html lang="en">

Setiap bahasa dunia memiliki kode dua-karakter, misalnya Spanyol = "es", Perancis = "fr", Jerman = "de", Cina = "zh", Arab = "ar".

Atribut lang dalam elemen <html> menyatakan bahasa konten halaman dalam. Meskipun tidak sepenuhnya diperlukan, harus selalu ditentukan, karena dapat membantu mesin pencari.


Setiap bahasa dunia memiliki kode dua-karakter, misalnya Spanyol = "es", Perancis = "fr", Jerman = "de", Cina = "zh", Arab = "ar".


Bagian <head>


Berikut adalah bagian <head> pada XHTML :
  1.  <head>
  2. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  3. <title>Halaman Pertama HTML5</title>
  4. <link rel="stylesheet" type="text/css" href="style.css" />
  5. </head>

Dan pada versi HTML5:

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Halaman Pertama HTML5</title>
  4. <link rel="stylesheet" href="style.css">
  5. </head>


Perhatikan disederhanakan set karakter deklarasi, link teks CSS stylesheet lebih pendek, dan penghapusan trailing garis miring.

 Dasar Halaman Web HTML5




Menempatkan bagian sebelumnya bersama-sama, dan sekarang menambahkan bagian <body> dan tag penutup :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Halaman Pertama HTML5</title>
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <p>HTML5 is fun!</p>
  10. </body>
  11. </html>

Mari kita buka halaman ini dalam browser web untuk melihat bagaimana tampilannya .



Share this

Related Posts

Previous
Next Post »