About these ads

Membuat Website Dengan HTML5

Saya pernah bahas kalau membuat website dengan memakai layanan wordpress, blogger, atau tumblr itu sangat direkomendasikan untuk pelajar, mahasiswa, atau pekerja kantoran yang lagi mencari penghasilan tambahan.

Jika anda tidak menggunakan layanan yang saya sebutkan diatas maka yang akan anda lakukan dalam membuat website adalah merangkai kode bahasa program html.

Bahasa pemograman website saat ini yang direkomendasikan adalah HTML 5. Website yang menggunakan bahasa kode pemograman website html5 dan css 3 saat ini akan diganjar dengan naiknya peringkat di mesin pencari.

Saya mengajak rekan-rekan untuk belajar tentang bahasa pemograman website html5.

Sebuah website dimulai dari sebuah pernyataan <!DOCTYPE html> kemudian dilanjutkan dengan karakter enkoding (charset) <meta charset=”UTF-8″>. Selain pernyataan dan enkoding sebuah website juga akan dibentuk dengan berbagai elemen html.

Elemen html yang pada HTML5 adalah

semantics seperti <header>, <footer>, <article>,<section>
control attributes seperti angka, tanggal, waktu, kalender, range
graphic seperti <svg>, <canvas>
multimedia seperti <audio>, <video>
Seperti yang saya sebutkan pada paragraf awal saat ini bahasa pemograman website HTML telah diupgrade menjadi HTML5, oleh karena itu ada beberapa elemen di program html sebelumnya tidak bisa digunakan lagi di HTML5.

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.

Oleh 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>&copy 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.
html5

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.

About these ads

Leave a Reply

%d bloggers like this: