tips-blogging

Belajar HTML5 dan CSS3 Untuk Persiapan Buat Template Blog Sendiri

Saya selalu bertanya-tanya bagaimana mas kompi ajaib, mas sugeng, mas johny dan lain-lain bisa memberikan template gratis dengan beragam desain kepada kita blogger-blogger newbie ini. Apalagi template beliau-beliau ini mempunyai karakter yang disesuaikan dengan teknologi blog dan website saat ini. Makanya saya pun mulai belajar HTML5 dan CSS3 untuk membuat template blog sendiri.

Ada banyak situs dan blog di internet yang dapat anda jadikan guru untuk belajar HTML5 dan CSS3. Dua situs tempat saya belajar kode HTML5 dan CSS3 adalah w3cshool.com dan htmldog.com. Saya rekomendasikan jika kawan bisa bahasa inggris (minimal membaca) sebaiknya gunakan situs w3cshool. Kenapa saya rekomendasikan situs tersebut?

Alasannya tidak lain dari kemudahan yang saya terima dalam mengikuti panduan-panduan yang terdapat di situs tersebut. Kemudahannya antara lain jika anda kesulitan dalam memahami teks bahasa inggris yang disajikan maka anda tinggal melihat bagaimana cara kerja dari kode HTML5 dan CSS3 tersebut dengan meng-klik tombol Try It Yourself.

Saat anda melakukan klik terhadap tombol tersebut maka anda akan melihat bagaimana struktur kode html dan css tersebut berlaku. Dan anda tinggal mencontoh struktur kode yang terlihat pada laman baru yang tampil.

Berikut ringkasan yang saya buat setelah belajar HTML5 dan CSS3 dari kedua situs tersebut.

Apa itu website?

Sebuah website dimulai dari sebuah pernyataan <!DOCTYPE html> kemudian dilanjutkan dengan karakter enkoding (charset) <meta charset="UTF-8">. Selain <!DOCTYPE> dan <meta charset="UTF-8"> sebuah website terbentuk karena elemen-elemen lain.

Pada tulisan belajar buat template blog sendiri kali ini saya fokuskan kepada koding terbaru yang digunakan untuk modern browser. Koding baru tersebut adalah HTML5 dan CSS3. Berikut elemen-elemen baru yang terdapat di koding HTML5 :

  • semantics seperti <header>, <footer>, <article&gt,dan <section>
  • control attributes seperti angka, tanggal, waktu, kalender, range
  • graphic seperti <svg>, <canvas>
  • multimedia seperti <audio>, <video>

Berikut elemen html yang tidak digunakan di bahasa pemograman website HTML5 adalah

  • <acronym> menjadi <abbr>
  • <applet> menjadi <object>
  • <basefont> menjadi CSS
  • <big> menjadi CSS
  • <center> menjadi CSS
  • <dir> menjadi <ul>
  • <font> menjadi CSS
  • <frame> tidak digunakan lagi
  • <frameset> tidak digunakan lagi
  • <noframes> tidak digunakan lagi
  • <strike> menjadi CSS
  • <tt> menjadi CSS

Kode HTML5 dapat dibaca oleh browser terbaru agar tampil sesuai yang diinginkan webmaster namun agar untuk browser yang lama kode html5 belum tentu dapat ditampilkan dengan semestinya. leh karena itu harus ada semacam jembatan yang harus dibuat agar website dengan HTML5 bisa tampil dengan baik di browser lama. Cara memberi informasi browser lama untuk membaca website anda adalah dengan memblok elemen html5 yang tidak dikenali oleh browser model lama. Elemen html5 tersebut adalah header, section, footer, aside, nav, main, article, dan figure. Berikut cara memblok elemen-elemen html5 yang tidak dapat dibaca oleh browser model lama tersebut header, section, footer, aside, nav, main, article, figure {display: block;} Cara lain yang dilakukan adalah dengan menambahkan elemen baru agar browser dapat mengenali kode html tampilan website. Berikut contoh penambahan elemen baru yang bernama <myHero>. Elemen baru yang dinamakan myHero ini berguna untuk tidak menampilkan elemen-elemen baru di browser model lama.

<!DOCTYPE html> 
<html>
<head>
<title>contoh My Hero</title>
<script>document.createElement("myHero")</script>
<style>myHero{display: block;background-color: #ddd;
padding: 50px;font-size:30px;}
</style>
</head>
<body>
<h1>
First Heading</h1>

<p>
My First Paragraph.</p>

<myhero>My First Hero</myHero>
</body>
</html>

Selain kode myHero, anda juga bisa menggunakan kode dari Sjoerd Visscher. Kode ini berbentuk javascript yang diberi nama the shiv. Berikut penampakan kode tersebut.


/* HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/ (function(l,f){function m(){var a=e.elements;return"string"==typeof
a?a.split(" "):a}function i(a){var
b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function
p(a,b,c){b||(b=f);if(g)return
b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return
b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function
t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return
function(){var
n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[w-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return
n}")(e,b.frag)}function q(a){a||(a=f);var
b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var
c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return
a}var
k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var
a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var
b;if(!(b=1==a.childNodes.length)){f.createElement("a");var
c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof
c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr
article aside audio bdi canvas data datalist details dialog figcaption
figure footer header hgroup main mark meter nav output progress section
summary template time
video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var
b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return
c}};l.html5=e;q(f)})(this,document);

Kode the shiv ini ditempatkan dibawah tag elemen judul <title>, menurut saya sebaiknya diletakkan langsung dibawah open tag. Berikut contoh kerangka sebuah website yang menggunakan bahasa pemograman website terbaru, HTML5 yang saya praktekkan.

<!DOCTYPE html> 
<html>
<head>
<title>contoh html5</title>
<!--[if lt IE 9]>
<script>
/* HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/ (function(l,f){function m(){var a=e.elements;return"string"==typeof
a?a.split(" "):a}function i(a){var
b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function
p(a,b,c){b||(b=f);if(g)return
b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return
b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function
t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return
function(){var
n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[w-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return
n}")(e,b.frag)}function q(a){a||(a=f);var
b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var
c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return
a}var
k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var
a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var
b;if(!(b=1==a.childNodes.length)){f.createElement("a");var
c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof
c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr
article aside audio bdi canvas data datalist details dialog figcaption
figure footer header hgroup main mark meter nav output progress section
summary template time
video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
if(g)return a.createDocumentFragment();for(var
b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return
c}};l.html5=e;q(f)})(this,document);
</script>
<![endif]-->
<style>
body{font-family: Verdana,sans-serif;font-size:0.8em;}
header, nav, section, article, footer {border:1px solid grey; margin:5px;padding:8px;}
nav ul {margin:0;padding:0;}
nav ul li {display:inline;margin:5px;}
</style>
</head>
<body>
<header>
<h1>
HTML5 Skelaton</h1>
</header>
<nav>
<ul>
<li><a href="#">HTML5 Semantics</a></li>
<li><a href="#">HTML5 Geolocation</a></li>
<li><a href="#">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>
Famous Cities</h1>
<article><h2>
London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article><h2>
Paris</h2>
<p>
Paris is the capital and most populous city of France.</p>
</article>
<article><h2>
Tokyo</h2>
<p>
Tokyo is the capital city of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2015 Kandra Wilko. All rights reserved.</p>
</footer>
</body>
</html>

Dari puluhan baris kode HTML5 diatas ternyata hasilnya pun cukup sederhana. Silahkan lihat gambar dibawah ini.

contoh web hasil belajar html5 css3
Contoh Website Standar dengan HTML5 dan Css3

Jika anda mempunyai waktu dan juga ilmu mengenai bahasa pemograman website html5 tentu membuat website tanpa menggunakan situs wordpress, blogger, atau tumblr akan menjadi sangat mudah. Sebaliknya bagi orang yang awam terhadap kode-kode diatas, tentu tidak akan bisa membuat website sampai kapan pun.

Pun ketika orang awam tersebut ternyata mempunyai waktu untuk belajar dan mempraktekkan ilmu yang bisa didapat dengan gratis di w3c. Tapi hasilnya besar kemungkinan akan seperti website sederhana yang saya dapatkan (lihat gambar). Oleh karena itu menggunakan layanan wordpress, blogger, maupun tumblr menjadi sangat krusial bagi orang-orang yang sedang mencari penghasilan tambahan melalui internet.

Kerumitan-kerumitan yang akan didapat dalam membuat website akan semakin berkurang dan penggunanya akan dimudahkan untuk menampilkan website dengan lebih baik dan lebih menarik. Sekian dulu dari saya semoga bermanfaat.

Advertisements

Leave a Reply