Minggu, 15 Januari 2012

HTML 5 | Keunggulan Dan Panduan

Secara pengertian, HTML5 adalah bahasa pemrograman yang digunakan untuk membuat struktur dan menampilkan konten dari sebuah website. Angka 5 mengartikan revisi ke-5 dari bahasa pemrograman web standar HTML yang diciptakan pada tahun 1990.

Hingga Desember 2011, HTML5 sendiri masih masuk dalam tahap pengembangan. Inti diciptakan revisi ke-5 adalah untuk meningkatkan penggunaan bahasa pemrograman HTML agar dapat mendukung konten multimedia khususnya saat ditampilkan ke dalam browser.

Harapannya, HTML5 akan menggantikan peran HTML4 (yang masih banyak digunakan saat ini) dan juga bahasa lain seperti XHTML1 dan DOM2HTML (khususnya JavaScript).

HTML5 sendiri merupakan karya dari World Wide Web Consortium (W3C) untuk mendefinisikan sebuah bahasa pemrograman web tunggal baik itu dapat ditulis dengan cara HTML ataupun XHTML. Selama ini, pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website. Intinya, dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak fitur dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk berjalan di perangkat mobile seperti smartphone dan tablet.

Struktur Sintaks Baru.

Html sendiri membawa beberapa fitur sintaks baru. Anda akan menemui tag <video>, <header>, dan elemen <canvas>. Selain itu tersedia juga integrasi konten SVG (Scalable Vector Graphics) yang menggantikan penggunaan tag <object>. Fitur-fitur baru tersebut didesain agar nantinya pada web developer mampu menggunakan konten multimediadan grafis tanpa perlubantuan dari plugin dan API (Application Programming Interface) lagi.

Beberapa elemen baru pun sudah dipersiapkan, seperti <section>, <article>, <header>, dan <nav>. Kesemuanya didesain untuk memperkaya isi dan konten dari web. Selain itu, terdapat juga beberapa attributebaru yang dikenalkan dan memiliki kesamaan tujuan yang sama. HTML5 pun lebih terasa ringkas karena menyederhanakan coding yang digunakan dalam versi HTML sebelumnya.

Beberapa elemen baru pada HTML5 :

<audio> Untuk konten multimedia seperti musik.
<video> Untuk video konten seperti klip video.
<section> Digunakan dalam pembentukan struktur dokumen.
<article> Menunjukkan isi dokumen seperti blog atau artikel berita.
<aside> Menunjukkan penggalan isi dokumen yang berhubungan dengan keseluruhan isi.
<header> Menunjukkan judul dari sebuah section.
<footer> Menunjukan bagian kaki dokumen yang berisi informasi penulis, hak cipta, dan informasi lainnya.
<nav> Digunakan untuk membuat navigasi dokumen.
<dialog> Digunakan dalam menuliskan format dialog atau percakapan.
<figure> Untuk mengasosiasikan dokumen dengan fitur embed video atau konten multimedia.


HTML5 telah dibekali dengan pengkodean baru, beberapa diantaranya adalah :
  • Elemen canvas, untuk menggambar object 2 dimensi (2D).
  • Timed media playback.
  • Media penyimpanan luring (aplikasi web luring).
  • Penyuntingan dokumen.
  • Drag-and-Drop.
  • Cross-Document messaging.
  • Manajemen history pada browser.
  • Tipe MIME.


Contoh Tag HTML 5 pada Blog

<!DOCTYPE html>
<html>
    <head>
        <title>Standart Blog<title>
    </head>
    <body>
        <header>
            <h1><a href="#">Standard Blog</a></h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
               
<li><a href="#">Archives</a></li>
               
<li><a href="#">About</a></li>
               
<li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <section>
<li><a href="#"></a></li>
            <article>
                <header>
                    <h1><a href="#">Title</a></h1>
                </header>
                <section>
                    <p>Lorem ipsum...</p>
                </section>
            </article>
            <article>
                <header>
                    <h1><a href="#">Title</a></h1>
                </header>
                <section>
                    <p>Lorem ipsum...</p>
                </section>
            </article>
            <article>
                <header>
                    <h1><a href="#">Title</a></h1>
                </header>
                <section>
                    <p>Lorem ipsum...</p>
                </section>
            </article>
        </section>
        <footer>
            <p>Copyright @ 2012 All Right</p>
        </footer>
    </body>
</html>

0 komentar:

Posting Komentar