Kini Blog yang berbasis Blogger ini menggunakan HTML 5 dengan Template Classic. HTML 5 yang menggunakan doctype:
<!DOCTYPE html> hanya dapat digunakan di Template Classic, jadi saya beralih dari template XML ke template HTML (template classic) karena ingin merasakan HTML 5.Hal dasar mengenai HTML 5 di 'blogger template classic' ini:
1. Tentunya menggunakan doctype HTML
<!DOCTYPE html>.strukturnya menjadi:
<!DOCTYPE html>
<html lang="id">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
</body>
</html>
2. Menggunakan Element HTML 5 serta Javascript agar dapat dibaca oleh IE:
Element HTLM 5 yang baru, yaitu:
abbr,article,aside,audio,bb,canvas,datagrid,datalist, details,dialog,eventsource,figure, footer,header,hgroup,mark, menu,meter,nav, output,progress,section,time,videodan berikut ini javascript agar IE dapat membaca Element baru HTML:
<!--[if IE]>
<script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist, details,dialog,eventsource,figure,footer,header, hgroup,mark,menu,meter,nav,output,progress, section,time,video".split(','),i=0,length=e.length;while(i<length){document.createElement(e[i++])}})();
</script>
<![endif]-->
3. Gambaran umum struktur HTML 5 yang saya gunakan menjadi:
<!DOCTYPE html>
<html lang="id">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title><$BlogPageTitle$></title>
<!--[if IE]>
<script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,header,hgroup,mark,menu,meter,nav, output,progress, section,time,video".split(','),i=0, length=e.length; while(i<length){document.createElement(e[i++])}})();
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<section id="content">
<article>
...
</article>
<aside> <!-- saya gunakan sebagai sidebar -->
...
</aside>
</section>
<footer>
...
</footer>
</body>
</html>
4. Untuk Reset CSS pada HTML 5 saya sekedar menggunakan:
/* Reset */
html, body, h1, h2, h3, h4, h5, h6, section, header, aside, footer, nav, article, fieldset, p, ul, ol, li, dl, dt, dd, form {
display: block; list-style: none; margin: 0; padding: 0}
CSS 3 yang saya gunakan:
Ada beragam pengembangan CSS 3, tetapi saya hanya menggunakan:
1. text shadow:
text-shadow: 1px 1px 2px #0c0b00;,2. border
-webkit-border-radius: 6px; -moz-border-radius: 6px;, dan3. box shadow
-webkit-box-shadow: 0 1px 2px #272501; -moz-box-shadow: 0 1px 2px #272501;.Selain itu pada Classic Template ini saya juga menggunakan Cufon untuk mengganti jenis font heading (h1,h2,h3,h4) dan javascript jQuery.
Penutup
Penggunaan HTML 5 sebenarnya digunakan untuk Tahun 2022 (kalo ngak kiamat..), tapi pada pengembangannya HTML 5 sudah bisa digunakan saat ini, walau ketika saya pelajari masih membingungkan menggunakan tag atau element yang baru, terutama pada strukturnya. Selain itu dengan adanya element baru di HTML 5 ini penggunaan tag
div sedikit berkurang. Sekian...
0 comments:
Posting Komentar