HTML5 adalah versi revisi ke lima
dari kakak pendahulunya, HTML dan HTML4. Banyak fitur tambahan yang ada
di HTML5 membuat para programmer web semangat untuk mempelajarinya.
Apa fiturnya? HTML5 Canvas Sebelum HTML5 diluncurkan, kita membutuhkan
aplikasi lain untuk memberikan suatu 'interaksi' pada website yang kita
miliki, misalnya Flash atau Java.
HTML5 Canvas
Sebelum HTML5 diluncurkan, kita membutuhkan aplikasi lain untuk memberikan suatu 'interaksi' pada website yang kita miliki, misalnya Flash atau Java. Hal ini akan diganti oleh elemen <canvas> pada HTML5 sebagai canvas web – kertas yang bisa dicoreti sesuai imajinasi – adau adalam hal lain canvas memungkinkan kita untuk bereksperimen lebih pada HTML5. Apa yg bisa dilakukan dengan <kanvas>
Sebelum HTML5 diluncurkan, kita membutuhkan aplikasi lain untuk memberikan suatu 'interaksi' pada website yang kita miliki, misalnya Flash atau Java. Hal ini akan diganti oleh elemen <canvas> pada HTML5 sebagai canvas web – kertas yang bisa dicoreti sesuai imajinasi – adau adalam hal lain canvas memungkinkan kita untuk bereksperimen lebih pada HTML5. Apa yg bisa dilakukan dengan <kanvas>
Audio dan Video
Di HTML5 akan ada tag khusus untuk audio dan video file. Tag tersebut adalah <audio> dan <video> yg berfungsi untuk menyisipkan file audio dan video tentunya. Berbeda dengan versi HTML pendahulunya yg harus menyisipkan flash untuk memutar audio/video akan mudah menyisipkan file multimedia tersebut kedalam webnya.
Di HTML5 akan ada tag khusus untuk audio dan video file. Tag tersebut adalah <audio> dan <video> yg berfungsi untuk menyisipkan file audio dan video tentunya. Berbeda dengan versi HTML pendahulunya yg harus menyisipkan flash untuk memutar audio/video akan mudah menyisipkan file multimedia tersebut kedalam webnya.
Local Storage
Berfungsi sebagai pengganti cache sebagai media penyimpanan history halaman web. Local Storage sangat disambut baik oleh para pengembang web. Memungkinkan web untuk menyimpan data cache lebih besar di storage local-nya daripada cache pada browser biasa. Lebih cepat, lebih baik :)
Berfungsi sebagai pengganti cache sebagai media penyimpanan history halaman web. Local Storage sangat disambut baik oleh para pengembang web. Memungkinkan web untuk menyimpan data cache lebih besar di storage local-nya daripada cache pada browser biasa. Lebih cepat, lebih baik :)
Web Workers
Seringkali kita menemukan jika halaman web yang memiliki banyak Javascript membuat browser melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.
Seringkali kita menemukan jika halaman web yang memiliki banyak Javascript membuat browser melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.
Semantics
Ini adalah fitur yang paling menawan untuk web designer atau apalah itu :D. Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini
Ini adalah fitur yang paling menawan untuk web designer atau apalah itu :D. Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini
apa perbedaan utama antara HTML 5 & HTML 4?
Sebagai contoh, bayangkan sebuah halaman depan blog sederhana dengan sebuah header di bagian atas,
catatan kaki di bagian bawah, beberapa entri, bagian navigasi, dan sidebar, seperti yang ditunjukkan
dalam kode berikut;
Halaman Web yang Biasa ditulis Dengan HTML 4
<html> <head>
<title>Hobo Web LTD Scotland</title>
Sebagai contoh, bayangkan sebuah halaman depan blog sederhana dengan sebuah header di bagian atas,
catatan kaki di bagian bawah, beberapa entri, bagian navigasi, dan sidebar, seperti yang ditunjukkan
dalam kode berikut;
Halaman Web yang Biasa ditulis Dengan HTML 4
<html> <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="/blog/">Hobo Web</a></h1>
</div>
<div id="container">
<body>
<div id="page">
<div id="header">
<h1><a href="/blog/">Hobo Web</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-102">
<h2><a href="/test-page/">
Test Page 1</a></h2> <div class="entry">
<p>Article Text here</p>
<div class="post" id="post-102">
<h2><a href="/test-page/">
Test Page 1</a></h2> <div class="entry">
<p>Article Text here</p>
</div>
</div>
<div class="post" id="post-101">
<h2><a href="/test2/">
Test 2</a></h2>
<div class="entry">
<p>Article 2 Text here</p>
</div>
<div class="post" id="post-101">
<h2><a href="/test2/">
Test 2</a></h2>
<div class="entry">
<p>Article 2 Text here</p>
</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>
</div>
</div>
</li>
</ul>
</div>
<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>
</div>
</div>
</body>
</html>
…..here’s the same page, with differences clear, in the W3C’s new incarnation.
Contoh Halaman Web yang Ditulis dengan HTML5;
<html> <head>
<title>Hobo Web LTD Scotland</title>
</html>
…..here’s the same page, with differences clear, in the W3C’s new incarnation.
Contoh Halaman Web yang Ditulis dengan HTML5;
<html> <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<header>
<h1><a href="http://blog/">Hobo Web</a></h1>
</header>
<section>
<article>
<body>
<header>
<h1><a href="http://blog/">Hobo Web</a></h1>
</header>
<section>
<article>
<h2><a href="/test-page/">
Test Page 1</a></h2> <p>Article Text here</p>
</article>
<article>
<h2><a href="/test2/">
Test Page 1</a></h2> <p>Article Text here</p>
</article>
<article>
<h2><a href="/test2/">
Test 2</a></h2>
<p>Article Text 2 here</p>
</article>
<nav>
<a href="/blog/page/2/">« Previous Entries</a>
</nav>
<p>Article Text 2 here</p>
</article>
<nav>
<a href="/blog/page/2/">« Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<nav>
<ul>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2008 Hobo Web LTD</p>
</footer>
</body>
</html>
Catatan HTML 5
HTML 5 memperkenalkan elemen baru ke HTML untuk pertama kalinya sejak tahun 1990-an. Unsur struktural baru termasuk aside, figure, dan section. Elemen inline baru seperti waktu, meter, dan progress.Termasuk Elemen Embedding baru seperti video dan audio. Elemen interaktif baru mencakup details, datagrid, dan command.
HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web – HTML – dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih ada tidak ada ruang nama atau skema. Unsur tidak harus ditutup. Browser akan mengampuni kesalahan. Sebuah p masih p, dan meja masih meja.
HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum:
* section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4
* Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala
* Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail
* Nav: Koleksi link ke halaman lain
* Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya
</li>
</ul>
</nav>
<footer>
<p>Copyright 2008 Hobo Web LTD</p>
</footer>
</body>
</html>
Catatan HTML 5
HTML 5 memperkenalkan elemen baru ke HTML untuk pertama kalinya sejak tahun 1990-an. Unsur struktural baru termasuk aside, figure, dan section. Elemen inline baru seperti waktu, meter, dan progress.Termasuk Elemen Embedding baru seperti video dan audio. Elemen interaktif baru mencakup details, datagrid, dan command.
HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web – HTML – dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih ada tidak ada ruang nama atau skema. Unsur tidak harus ditutup. Browser akan mengampuni kesalahan. Sebuah p masih p, dan meja masih meja.
HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum:
* section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4
* Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala
* Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail
* Nav: Koleksi link ke halaman lain
* Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya
Tidak ada komentar:
Posting Komentar