Akses:

Code-code-an
dokumentasi tutorial

Classic Template, HTML 5 dan CSS 3 di Blogger Template

Jumat, 11 November 2011

Posted by Monstr

Classic Template, HTML 5 dan CSS 3

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,video

dan 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;, dan
3. 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...

Label:

0 Komentar (Classic Template, HTML 5 dan CSS 3 di Blogger Template)

Posting Komentar

Berlangganan Posting Komentar [Atom]