Skip to main content

Belajar Membuat Website Dengan Bahasa Pemograman Terbaru 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.

Comments

Post a Comment

Artikel Viral

Kuliah Itu Berapa Tahun Sih? Ini Jawabannya

Saya sering mendapat pertanyaan dari pengunjung blog

"kak, kuliah itu berapa tahun?" atau

"om, Kuliah S1 sampai berapa semester?" atau

"bang, semester kuliah ada berapa?"

Saya sangat senang mendapatkan pertanyaan-pertanyaan diatas.

Artinya kamu yang saat ini baru mulai kuliah, sudah mempersiapkan masa depan kamu dengan tidak ingin berlama-lama di kampus.

Untuk menjawab pertanyaan-pertanyaan dari pembaca pencaricerah.com diatas saya sedikit mengalami kesulitan.

Apa itu?

Soalnya saran yang saya berikan di tulisan kuliah itu berapa tahun? berbeda sedikit dengan pengalaman.

Jangan lewatin 7 Cara Berpakaian Untuk Mahasiswa Baru

Namun saya berharap kamu bisa belajar dari pengalaman saya yang tidak sesempurna tulisan ini.

Mungkin yang bertanya sedang menghitung berapa biaya yang harus dikeluarkan saat kuliah atau mungkin juga sedang merencanakan apa yang bisa ia lakukan disela-sela perkuliahan.

Berdasarkan pertanyaan yang beberapa kali muncul di kolom komentar beberapa post…

TEMPAT MAGANG SASTRA INGGRIS PALING IDEAL, NO 1 PALING FAVORIT

Tempat magang sastra inggris? Emang ada? Itu pertanyaan saya yang muncul ketika membaca tulisan dari blogger Ran-Chan no Hibi. Sebagai alumni sastra inggris saya sama sekali baru tahu kalau ternyata ada tempat magang bagi mahasiswa sastra inggris. Seandainya informasi ini saya dapatkan ketika kuliah tentu jalan hidup saya berbeda.
Karena itu saya ingin membagikan informasi yang cukup penting bagi kamu, mahasiswa sastra inggris, yaitu tempat magang sastra inggris.
Magang itu apa sih? Magang adalah sebuah kesempatan untuk mengintegrasikan pengalaman yang berhubungan dengan karir ke dalam pendidikan sarjana dengan berpartisipasi dalam pekerjaan yang terencana dan diawasi. (https://ekoyanto.files.wordpress.com/2011/11/apakah-magang-itu1.pps)
Dari pengertian diatas maka anda akan melihat ada perbedaan antara magang dan kerja sambilan. Walaupun sama-sama diawasi dan pekerjaan yang dilakukan terencana, perbedaan magang dan kerja sambilan terdapat dalam hubungannya dengan pendidikan sarjana.

Mengatasi Sitemap Error Pada Google Search Console

Mengatasi sitemap error pada google search console - Sitemap artinya secara harafiah adalah peta situs. Kegunaannya seperti peta yang kita kenal selama ini yaitu memberikan gambaran kepada PENGUNJUNG tentang area (baca:konten) yang sedang disinggahinya saat ini di situs/blog yang dikunjungi.

Situs yang mempunyai sitemap yang bagus dan terperinci akan menjadi primadona bagi mesin pencari seperti google. Tapi kenapa saat submit url di google webmaster malah muncul error peta situs anda terlihat seperti laman html. pakai format peta situs resmi? 

Bagaimana cara mengatasi sitemap error tersebut di Google Search Console?

Mari kita pelajari sama-sama.