Monday, October 14, 2013

Mengenal Struktur Syntax HTML5

Monday, October 14, 2013

Hypertext Markup Language (HTML) adalah bahasa yang memberikan content pada Web.  HTML tidak dimiliki oleh siapapun, namun merupakan hasil dari orang-orang yang bekerja pada beberapa Negara dan beberapa organisasi untuk mendefinisikan fitur dari bahasa ini. Dokumen HTML adalah sebuah dokumen teks yang bisa kita hasilkan dengan menggunakan text editor apapun. Dokumen HTML mengandung elemen yang dikelilingi oleh tags – teks yang dimulai dengan symbol < dan diakhiri dengan symbol >. Salah satu contoh dari tag adalah <img src=”home.gif”/>. Bagian tag tersebut akan menampilkan gambar dengan nama file home.gif.
HTML5 adalah revisi besar selanjutnya dari HTML standar menggantikan HTML 4.01, XHTML 1.0, dan XHTML1.1. HTML5 adalah standar untuk penataan dan oenyajian konten pada World Wide Web.
HTML5 adalah kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG).
Standar terbaru menggabungkan fitur seperti video playback,  dan drag-and-drop yang sebelumnya tergantung pada 3 bagian plug-in browser seperti Adobe Flash, Microsoft Silverlight, dan Google Gears.


HTML5 SYNTAX


Bahasa HTML 5 memiliki “kebiasaan” syntax HTML yang kompatibel dengan dokumen HTML 4 dan XHTML1 yang dipublish di web, namun tidak kompatibel dengan beberapa fitur esoterik SGML dari HTML 4.
HTML 5 tidak memiliki peraturan syntax yang sama dengan XHTML dimana kita membutuhkan huruf kecil untuk nama, tanda kutip atribut, sebuah atribut harus memiliki nilai untuk menutup semua elemen kosong. Tapi HTML 5 datang dengan banyak fleksibilitas dan akan medukung hal-hal dibawah ini:
  •           Tag nama huruf besar
  •           Tanda kutip menjadi opsional untuk atribut
  •           Nilai atribut menjadi opsional
  •           Menutup semua elemen kosong menjadi opsional.

Berikut adalah contoh sederhana coding halaman HTML5:


Lihat secara seksama coding diatas. Jika kita membuat transisi ke HTML5 dari XHTML atau HTML 4, maka kita akan melihat ada beberapa bagian dimana HTML5 berbeda.

  •          Doctype


Pertama, kita memiliki dokumen deklarasi type, atau  doctype. Ini adalah cara mudah untuk memberitau browser­ – atau parser lainnya – jenis atau tipe dokumen apa yang mereka lihat. Dalam hal kasus file HTML, ini berarti versi tertentu dan rasa dari HTML. Doctype harus selalu menjadi bagian pertama yang berada diatas setiap file HTML kita. Dulu, deklarasi doctype cukup sulit untuk diingat dan rumit. Untuk Strict XHTML 1.0:


Dan untuk Transitional HTML4:


Selama bertahun-tahun, perangkat lunak code editing mulai memberikan templates HTML dengan menyertakan doctype, atau mereka menawarkan cara otomatis untuk memasukkan satu dan alami, sebuah pencarian web cepat dengan mudah akan menampilkan kode untuk menyisipkan doctype apapun yang diinginkan.
Meskipun memiliki string text yang begitu panjang diatas dokumen kita, itu tidak terlalu mengganggu kita dibandingkan dengan memaksa para pengunjung situs kita untuk mengunduh bytes yang cukup banyak. Sekarang yang kita butuhkan hanya ini:


Sederhana dan to the point. Anda akan menyadari bahwa “5” secara mencolok hilang dari deklarasi. Meskipun iterasi web markup saat ini dikenal sebagai “HTML5” itu hanya sebuah evolusi dari HTML standar sebelumnya, dan spesifikasi masa depan akan dengan mudah menjadi pengembangan dari apa yang kita miliki saat ini. Karena browser harus mendukung semua konten yang tersedia pada web, tidak ada ketergantungan pada doctype untuk memberitahu mereka ditur-fitur yang harus didukung oleh suatu dokumen.

  •          Character Encoding



  •          The <script> tag


untuk menambahkan jenis attribute dengan nilai dari “text/javascript” dengan script elemen sebagai berikut:


HTML 5 menghilangkan informasi extra yang dibutukan dan anda bisa dengan mudah menggunakan syntax:



  •          The <link > tag



HTML5 menyederhanakannya dengan syntax:



HTML5 ELEMENTS


Elemen HTML5 ditandai dengan start tags dan end tags. Tags sipisahkan menggunakan kurung sudut dengan nama tag diantaranya. Perbedaan antara start tags dan end tags meliputi garis miring sebelum nama tag.
Contoh elemen HTML5:



HTML5 DOCUMENT


Tags berikut diperkenalkan untuk struktur yang lebih baik:
  •  Section : Tag ini merupakan dokumen generik atau bagian aplikasi. Hal ini dapat digunakan bersama-sama dengan h1-h6 untuk menunjukkan struktur dokumen.
  • Article  : Tag ini merupakan sepotong independen isi dokumen, seperti blog entri atau artikel koran.
  •  Aside   : Tag ini merupakan bagian dari konten yang hanya sedikit berkaitan dengan sisa halaman.
  •  Header : Tag ini merupakan header bagian.
  •  Footer : Tag ini merupakan footer untuk bagian dan dapat berisi informasi tentang
  •  Nav      : Tag ini merupakan bagian dari dokumen dimaksudkan untuk navigasi.
  • Dialog : Tag ini dapat digunakan untuk menandai percakapan.
  • Figure : Tag ini dapat digunakan untuk menghubungkan keterangan bersama dengan beberapa tertanam konten, seperti grafis atau video.





HTML5 ATTRIBUTES


Elemen mungkin berisi atribut-atribut yang digunakan untuk menetapkan berbagai properti sifat dari sebuah elemen. Beberapa atribut didefinisikan secara global dan bisa digunakan pada beberapa elemen, ketika yang lainnya didefinisikan hanya untuk elemen spesifik. Semua atribut memiliki nama dan nilai, terlihat seperti contoh dibawah.
Contoh atribut HTML5 yang mengilustrasikan bagaimana menandai elemen div dengan atribut bernama class dengan menggunakan nilai dari “example”:


Atribut mungkin hanya disepesifikasikan dalam start tags dan tidak akan pernah bisa digunakan dalam end tags. Atribut HTML5 adalah case insensitive dan mungkin ditulis dalam semua huruf besar atau campuran, meskipun yang paling umum digunakan dengan huruf kecil.

Link yang terkait dengan HTML 5 : 

Sumber:
  •  Ebook HTML 5 Simply Easy Learning. tutorialspoint.com
  •  Ebook HTML5 Quick Learning Guide. freehtml5templates.com
  • Ebook HTML5 & CSS3 FOR THE REAL WORLD. By Alexis Goldstein, Louis Lazaris, Estelle Weyl.
  • Beginner HTML5 CSS3 Tutorial. No name
  • The Essential Guide to HTML5 Using Games to Learn HTML5 and JavaScript. By Jeanine Meyer

0 comments:

Post a Comment

Copyright © Halo!