Basic Structure HTML5
Apa itu HTML5 lalu apa perbedaannya HTML dengan HTML5?
HTML5 adalah singkatan Hyper Text Markup Language Versi 5, HTML5 merupakan sebuah teknologi penerus dari generasi sebelumnya yang dikeluarkan oleh W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). dengan tambahan feature- feature baru untuk memperbaiki dan melengkapi dari HTML versi sebelumnya.
Penjelasan HTML5
Adanya versi HTML terbaru yaitu versi 5, dan di sebutlah HTML5 itu bertujuan untuk mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti:
1. Element
article aside audio canvas command datalist details embed figcaption figure footer header hgroup keygen mark meter nav output progress rp rt ruby section source summary time video2. Input Type pada Form
dates times email url search3. Attribut
ping (pada a dan area), charset (pada meta), async (pada script) Di sini akan dijelaskan beberapa fungsi baru yang menarik seperti :<canvas> - Element atau tag ini memiliki fungsi untuk menampilkan kertas gambar sehingga pengguna dapat menggunakan canvas untuk menggambar ataupun menulis bagaikan kertas biasa tanpa menggunakan plugin seperti Java.
<audio><video> - Bila kita ingin menampilkan video ataupun audio pada website kita maka kita akan menggunakan pllugin seperti adobe dengan format .swf, .fla dan .flv. Tetapi dengan menggunakan HTML5, kita tinggal menggunakan tag
Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan seperti pada bagian awal file HTML kita harus menulis coding DOCTYPE yang panjang.
Pada HTML5, DOCTYPE dapat ditulis lebih ringkas <!DOCTYPE html>
Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti type=text/css dan type=text/javascript
Tetapi seperti dibawah ini :
<style>
* { margin:0px; padding:0px;}
</style>
<script>// Fungsi JavaScript</script>
Apa saja Feature yang dihapus pada HTML5?
Acronym : Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
Applet : Digunakan untuk memasukan file java kedalam dokumen HTML
Basefont : Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen
Big : Memperbesar ukuran teks sebesar satu point dari defaultnya
Center : Untuk perataan tengah terhadap teks atau gambar
Dir : Mendefinisikan sebuah daftar direktori
Font : Mendefinisikan jenis font, warna dan ukuran untuk teks
Frame : Mendefinisikan frame dalam fremeset
Frameset : Mendefinisikan satu set frame
Noframes : Jika browser user tidak mendukung frame
Strike : Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
Tt : Mendefinisikan teletype text
HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan digantikan oleh CSS seperti :
acronym applet basefont big center dir font frame frameset isindex noframes s strike tt uacronym applet basefont big center dir font frame frameset isindex noframes s strike tt u
HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5 *kecuali Internet Explorer.
Struktur Dasar HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Judul Website
</title>
</head>
<body>
<header>
<h1>Logo / Judul Website</h1>
<nav>
<ul>
<li>
Navigasi Menu
</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>
Judul Artikel
</h2>
<p>
Tanggal Posting
<time datetime="2009-09-04T16:31:24+02:00">
September 4th 2009
</time>
oleh
<a href="#">
Penulis/Admin
</a>
-
<a href="#comments">
Jumlah Komentar
</a>
</p>
</header>
<p>
Isi Artikel ..
</p>
</article>
<article>
<header>
<h2>
Judul Artikel
</h2>
<p>
Tanggal Posting
<time datetime="2009-09-04T16:31:24+02:00">
September 4th 2009
</time>
oleh
<a href="#">
Penulis/Admin
</a>
-
<a href="#comments">
Jumlah Komentar
</a>
</p>
</header>
<p>
Isi Artikel ..
</p>
</article>
</section>
<aside>
<h2>
Judul Bilah Kiri / Sidebar!
</h2>
<p>
Isi Konten / Widget ..
</p>
</aside>
<footer>
<p>
Copyright 2014 - <b>Judul Website</b>
</p>
</footer>
</body>
</html>
Sekian penjelasan tentang Struktur Dasar HTML5 , semoga artikel ini bermanfaat untuk sobat yang benar-benar membaca dan menerapkan apa yang barusan saya terangkan .
0 Comments
EmoticonEmoticon