Jumat, 09 Maret 2012

HTML 5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

 Berbeda dengan HTML 4 yang hanya memberikan perubahan layouting pada HTML 5 ini akan membawa perubahan tidak hanya dibidang tersebut, seperti halnya tag canvas dan video kedua tag tersebut merupakan salah satu andalan perubahan pada HTML5. Selain 2 tag itu HTML 5 juga memiliki perubahan dan penambahan tag lainnya, so Mari kita bahas beberapa tag pada html 5

The Doctype.
Sintak ini wajib diletakan pada awal dokumen HTML 5. The doctype ini bukan tag html melainkan sebuah deklarasi untuk mendefinisikan kepadabrowser kode ini (tag html) tersebut ditulis dalam versi HTML apa.
“The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.” (w3school).
Contoh penulisannya :
01.<!DOCTYPE html>
02. 
03.<html>
04. 
05.<head>
06. 
07.<title>Title of the document</title>
08. 
09.</head>
10. 
11.<body>
12. 
13.The content of the document......
14. 
15.</body>
16. 
17.</html>
 
SVG Support
Scalable Vector Graphic merupakan bahasa untuk membuat grafis/gambar 2 dimensi dengan kode XML.
Berikut contoh kode:
1.<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
2. 
3.<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
4. 
5.</svg>
 
Element
Elemen-elemen berikut telah diperkenalkan dalam struktur yang lebih baik:
  • section merupakan dokumen generik atau bagian aplikasi. Hal ini dapat digunakan bersama dengan h1 , h2 , h3 , h4 , h5 , dan h6 elemen untuk menunjukkan struktur dokumen.
1.<section>
2.<h1>WWF</h1></p>
3.<p>The World Wildlife Foundation was born in 1961...</p></p>
4.</section>
  • article merupakan bagian independen dari isi dokumen, seperti entri blog atau artikel koran.
  • aside merupakan bagian dari konten yang hanya sedikit berhubungan dengan sisa halaman.
  • hgroup digunakan untuk mengelompokan tag heading.
1.<hgroup>
2.<h1>Welcome to my WWF</h1>
3.<h2>For a living planet</h2>
4.</hgroup>
  • header tag untuk posisi bagian atas, biasanya merupakan sekelompok navigasi.
  • footer merupakan footer untuk bagian dan dapat berisi informasi tentang penulis, informasi hak cipta, dll
  • nav merupakan bagian dari dokumen dimaksudkan untuk navigasi.
  • figure dapat digunakan untuk pembungkus kode gambar, video, diagram atau foto.
1.<figure> <video src="example.webm" controls></video> <figcaption>Example</figcaption> </figure>
  • figcaption dapat digunakan sebagai keterangan pada gambar, penggunaanya bisa dibarengkan dengan tag figure. Berikutnya contohnya :
1.<figure>
2.<figcaption>A view of the pulpit rock in Norway</figcaption>
3.<img src="img_pulpit.jpg" width="304" height="228" />
4.</figure>

Beberapa tag baru :
  • video dan audio, tag yang dapat digunakan untuk konten multimedia, intinya buat load video atau video
  • track, merupakan tag yang belum disupport oleh browser manapun (w3school), tag ini bertujuan untuk dapat memberikan subtitle pada video.
  • canvas digunakan untuk rendering grafis bitmap dinamis on the fly, seperti grafik atau game. (gambar gambar gituh deh…)
  • mark, digunakan untuk memberikan efek highlight pada text. contoh penggunaannya dibawah ini untuk memberikan efek pada kata milk :
1.<p>Do not forget to buy <mark>milk</mark> today.</p>
  • wbr merupakan element yang digunakan untuk memerikan tanda posisi pemotongan pada text html yang dikarenakan oleh layar. Contohnya pada kata XML<wbr>Http<wbr>Request, dengan pemberian tag ini ketika harus pindah baris maka pemotongan kalimatnya berada setelah text XML atau Http.
1.To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
 
 
Sumber:
Wikipedia

Tidak ada komentar:

Posting Komentar