tag:blogger.com,1999:blog-36569225692824142892024-03-14T01:44:53.434-07:00Desain & Pemrograman WebIlmu Hukumhttp://www.blogger.com/profile/00329828027434901199noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-3656922569282414289.post-8845511668727368672011-12-07T20:34:00.000-08:002011-12-07T20:34:23.392-08:00Belajar HTML5 Dasar - Pengenalan Tag-tag HTML5 baru<img alt="Logo HTML5" src="http://www.dhimasronggobramantyo.com/contoh/logo-html5.jpg" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 25px;" /><br />
<br />
<div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Tahun 2011 merupakan tahunnya HTML5, setelah Internet Explorer 9 rilis beberapa bulan lalu, maka semua browser utama (IE, Firefox, Safari, Chrome dan Opera) telah mendukung HTML5 dan CSS3. Ya walaupun belum semua fungsi HTML5 & CSS3 didukung spenuhnya, tetapi tahun ini merupakan lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai XHTML? atau mungkin malah HTML4? mulailah belajar HTML5, ada banyak tag2 baru yang sangat menarik. Disini saya akan mengajari tag-tag yang baru saja dan yang paling banyak digunakan dalam melayout sebuah website.</div><div class="boxwarning" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxwarning.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(219, 152, 152); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(219, 152, 152); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(219, 152, 152); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(219, 152, 152); border-top-style: solid; border-top-width: 1px; color: #580000; font-family: arial, verdana, serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; width: 580px;">Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham mengenai <a href="http://www.dhimasronggobramantyo.com/artikel/Belajar_HTML_yang_merupakan_dasar_dari_pembuatan_website" style="color: #22437a; text-decoration: none;">dasar-dasar HTML</a> dan <a href="http://www.dhimasronggobramantyo.com/artikel/Belajar_CSS,_bagaimana_CSS_dapat_merubah_tampilan_website" style="color: #22437a; text-decoration: none;">dasar-dasar CSS</a> terlebih dahulu. Karena disini saya hanya akan menerangkan tag-tag yang baru di HTML5, maka saya asumsikan Anda sudah tahu tag-tag yang lama.</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Oke, sebelumnya kita nanti akan membuat sebuah website dengan HTML5 yang layoutnya / wireframe nya kira-kira seperti ini:</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Nah dengan wireframe seperti itu nanti kira-kira kita akan menggunakan tag berikut ini:</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Struktur Wireframe Website" src="http://www.dhimasronggobramantyo.com/contoh/html5-1.png" /></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Oke ada banyak tag yang baru yah, mari kita mulai saja, siapkan teks editor Anda dan kita buat deklarasi HTML5 beserta <code style="color: #990000; font-size: 16px; font-weight: bold;"><head></code> nya:</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Struktur Wireframe Website HTML5" src="http://www.dhimasronggobramantyo.com/contoh/html5-2.png" /></div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><html</span> <span class="sh_type" style="color: darkgreen;">lang</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"en"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><head></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><meta</span> <span class="sh_type" style="color: darkgreen;">charset</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"utf-8"</span> <span class="sh_keyword" style="color: blue; font-weight: bold;">/></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><title></span>Drop Down Menu<span class="sh_keyword" style="color: blue; font-weight: bold;"></title></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><head></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><body></span>
Isi web disini
<span class="sh_keyword" style="color: blue; font-weight: bold;"></body></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></html></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Sip, lebih simpel kan, kalau dulu jaman XHTML kita perlu mendeklarasikan transitional, atau strict, sekarang cukup <code style="color: #990000; font-size: 16px; font-weight: bold;"><!DOCTYPE html></code>. Nah untuk isinya saya akan memberitahu tag-tag yang baru, nanti setiap kode berikutnya Anda masukkan didalam <code style="color: #990000; font-size: 16px; font-weight: bold;"><body></code>, yang ada tulisan <em>Isi web disini</em>.</div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><header></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Tag pertama kita adalah <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code>, sesuai namanya tag ini ditempatkan diatas pada bagian awal website. Kalau dulu kita pakai <code style="color: #990000; font-size: 16px; font-weight: bold;"><div id="header"></code> sekarang kita menggantinya dengan<code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code>. Tetapi <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code> tidak harus melulu dipaling atas web, kita bisa memiliki beberapa<code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code>, misal didalam artikel (kita akan bahas ini nanti dibagian article).</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Nah, didalam <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code> ini bisa kita isi macam-macam, misal logo, navigasi, <em>heading</em> dan lain-lain. Bahkan diisi <code style="color: #990000; font-size: 16px; font-weight: bold;"><div></code> pun tidak masalah.</div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><hgroup></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Weittss <code style="color: #990000; font-size: 16px; font-weight: bold;"><hgroup></code>, apa lagi ini? Oke gampangnya jika kita memiliki satu atau lebih dari satu heading berurutan <code style="color: #990000; font-size: 16px; font-weight: bold;"><h1></code> - <code style="color: #990000; font-size: 16px; font-weight: bold;"><h6></code> maka kita bisa mengelompokkannya dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><hgroup></code>. Biasanya digunakan apabila kita memiliki judul dan ada sub judul, atau untuk judul web kemudian kita memiliki slogan. Tapi kalau headingnya cuma satu ya nggak usah dikasih <code style="color: #990000; font-size: 16px; font-weight: bold;"><hgroup></code>. Oke daripada pusing langsung saja lihat contohnya ya:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><header</span> <span class="sh_type" style="color: darkgreen;">id</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"main-header"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><hgroup></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><h1></span>Ini Website HTML5 pertama saya<span class="sh_keyword" style="color: blue; font-weight: bold;"></h1></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><h2></span>Dan juga yang terakhir karena saya bingung<span class="sh_keyword" style="color: blue; font-weight: bold;"></h2></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></hgroup></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Oke, kalau sudah lihat contohnya paham kan, sip nanti kita masih akan menambahkan sesuatu kedalam <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code>.</div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><nav></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Nah, dari namanya sudah kelihatan kalau ini fungsinya untuk menampilkan navigasi pada website Anda. Ya kalau dulu kita pakai <code style="color: #990000; font-size: 16px; font-weight: bold;"><ul><li></code> untuk membuat navigasi menu, nah sekarang kita pakai... ummm.. ya sama pakai <code style="color: #990000; font-size: 16px; font-weight: bold;"><ul><li></code> juga, tetapi kita bungkus dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><nav></code>. Nah langsung saja kita lihat contoh kodenya:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><nav</span> <span class="sh_type" style="color: darkgreen;">id</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"main-nav"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><ul></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><li><a</span> <span class="sh_type" style="color: darkgreen;">href</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"#"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>Home<span class="sh_keyword" style="color: blue; font-weight: bold;"></a></li></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><li><a</span> <span class="sh_type" style="color: darkgreen;">href</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"#"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>About<span class="sh_keyword" style="color: blue; font-weight: bold;"></a></li></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><li><a</span> <span class="sh_type" style="color: darkgreen;">href</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"#"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>Contact<span class="sh_keyword" style="color: blue; font-weight: bold;"></a></li></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></ul></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Sip, sama kan? Yang perlu diingat bahwa <code style="color: #990000; font-size: 16px; font-weight: bold;"><nav></code> digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk <em>paging</em>, Social Networking atau list-list yang lain yang menggunakan <code style="color: #990000; font-size: 16px; font-weight: bold;"><ul></code> nggak perlu dikasih <code style="color: #990000; font-size: 16px; font-weight: bold;"><nav></code>.</div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><section>, <article> dan <time></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Sesuai namanya <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web kita. Kita boleh punya banyak tag <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code>, misal saja komentar, nah setiap komentar kita bungkus pakai <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code> atau forum dan lain sebagainya. Apabila kita memiliki list atau daftar <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code>, misal blog, maka kita perlu membungkusnya dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><section></code> jika ada elemen lain yang bukan <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code> dan menerangkan tentang <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code> tersebut. Bingung? Langsung kecontoh:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><section></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><h1></span>Artikel Terbaru<span class="sh_keyword" style="color: blue; font-weight: bold;"></h1></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><article></span>Isi Teks Artikel 1<span class="sh_keyword" style="color: blue; font-weight: bold;"></article></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><article></span>Isi Teks Artikel 2<span class="sh_keyword" style="color: blue; font-weight: bold;"></article></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><article></span>Isi Teks Artikel 3<span class="sh_keyword" style="color: blue; font-weight: bold;"></article></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></section></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Jadi karena diantara kelompok-kelompok <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code> ada tag <code style="color: #990000; font-size: 16px; font-weight: bold;"><h1></code> maka kita tetap perlu membungkusnya dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><section></code>.</div><div class="boxwarning" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxwarning.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(219, 152, 152); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(219, 152, 152); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(219, 152, 152); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(219, 152, 152); border-top-style: solid; border-top-width: 1px; color: #580000; font-family: arial, verdana, serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; width: 580px;"><section> tidak boleh diberi style, tidak boleh sebagai container layout. Tetap gunakan <div> apabila ingin melayout.</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Nah, berijutnya adalah <code style="color: #990000; font-size: 16px; font-weight: bold;"><time></code>, sesuai namanya, digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan waktu publish artikel, komentar, forum dan lain sebagainya. <code style="color: #990000; font-size: 16px; font-weight: bold;"><time></code>memiliki atribut <em>datetime</em> yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00. Hal ini digunakan agar mesin pencari dapat mengenali waktu dalam format standar meskipun kita menulisnya tidak dalam format standar. Contoh:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><p></span>Ditulis oleh Dhimas pada <span class="sh_keyword" style="color: blue; font-weight: bold;"><time</span> <span class="sh_type" style="color: darkgreen;">datetime</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"2011-11-23"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>Senin Pahing, 23 November 2011<span class="sh_keyword" style="color: blue; font-weight: bold;"></time></p></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Mudah kan? oke kita akan lanjut ke tag berikutnya</div><div class="boxwarning" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxwarning.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(219, 152, 152); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(219, 152, 152); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(219, 152, 152); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(219, 152, 152); border-top-style: solid; border-top-width: 1px; color: #580000; font-family: arial, verdana, serif; font-size: 12px; line-height: 19px; margin-bottom: 5px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: auto; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; width: 580px;">Oh iya, gosip mengatakan bahwa <time> akan dibuang dari HTML5 nggak tau mau diganti apa, tetapi menurut saya tag <time> cukup bagus dan tidak perlu digantikan</div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><figure> dan <figcaption></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><code style="color: #990000; font-size: 16px; font-weight: bold;"><figure></code> digunakan sebagai pembungkus untuk tag <code style="color: #990000; font-size: 16px; font-weight: bold;"><img></code>. Tetapi tidak selalu semua tag<code style="color: #990000; font-size: 16px; font-weight: bold;"><img></code> kita bungkus dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><figure></code>, hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><figcaption></code>. Oke langsung saja lihat contoh kodenya:</div><div style="background-color: white; font-family: arial, verdana, serif; font-size: 12px; line-height: 19px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><figure></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><img</span> <span class="sh_type" style="color: darkgreen;">src</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"foto.jpg"</span> <span class="sh_type" style="color: darkgreen;">alt</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"Foto Artis"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><figcaption></span>Ini adalah foto artis yang saya ambil di kali<span class="sh_keyword" style="color: blue; font-weight: bold;"></figcaption></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></figure></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Kira-kira kodenya seperti itu, kita tinggal menstylenya dengan CSS saja sesuai keinginan kita. Oh iya kita bisa memasang tag <code style="color: #990000; font-size: 16px; font-weight: bold;"><a></code>, <code style="color: #990000; font-size: 16px; font-weight: bold;"><strong></code>, <code style="color: #990000; font-size: 16px; font-weight: bold;"><em></code> didalam <code style="color: #990000; font-size: 16px; font-weight: bold;"><figcaption></code></div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><aside></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Nah ini nih tag yang saya sendiri masih bingung penggunaannya, karena tiap website contoh penggunaan <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code> berbeda-beda. Oke kalau dilihat dari sejarahnya <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code> itu awalnya namanya <code style="color: #990000; font-size: 16px; font-weight: bold;"><sidebar></code> tetapi kemudian diganti menjadi <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code>. Nah <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code> merupakan tag yang berisi konten yang berhubungan dengan konten utama dalam halaman web, oke berarti bisa disimpulan bahwa <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code> digunakan sebagai sidebar pada website. Nah permasalahannya setiap sidebar misal wordpress, pasti didalamnya terdapat konten-konten lagi, kalau di wordpress biasanya widget. Nah terus kode nya seperti apa? Ada 3 kemungkinan, yang pertama:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><aside</span> <span class="sh_type" style="color: darkgreen;">id</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"sidebar"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><aside></span>
Ini Widget Pertama
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><aside></span>
Ini Widget Kedua
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><aside></span>
Ini Widget Ketiga
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Atau yang kedua:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><aside</span> <span class="sh_type" style="color: darkgreen;">id</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"sidebar"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><div></span>
Ini Widget Pertama
<span class="sh_keyword" style="color: blue; font-weight: bold;"></div></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><div></span>
Ini Widget Kedua
<span class="sh_keyword" style="color: blue; font-weight: bold;"></div></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><div></span>
Ini Widget Ketiga
<span class="sh_keyword" style="color: blue; font-weight: bold;"></div></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Atau yang ketiga:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><div</span> <span class="sh_type" style="color: darkgreen;">id</span><span class="sh_symbol" style="color: darkred;">=</span><span class="sh_string" style="color: red;">"sidebar"</span><span class="sh_keyword" style="color: blue; font-weight: bold;">></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><aside></span>
Ini Widget Pertama
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><aside></span>
Ini Widget Kedua
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><aside></span>
Ini Widget Ketiga
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"></aside></span>
</pre></div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Nah yang mana yang bener? <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code> didalamnya <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code> atau didalamnya <code style="color: #990000; font-size: 16px; font-weight: bold;"><div></code>, atau<code style="color: #990000; font-size: 16px; font-weight: bold;"><div></code> didalamnya <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code>? Tidak ada dokumentasi yang pasti yang mana yang benar, tetapi saya cenderung menggunakan yang ketiga, karena tingkatan <code style="color: #990000; font-size: 16px; font-weight: bold;"><div></code> lebih luas atau lebih tinggi levelnya daripada <code style="color: #990000; font-size: 16px; font-weight: bold;"><aside></code>. Tetapi ya terserah Anda, karena semua website yang sudah menggunakan HTML5 menggunakan ketiga cara tersebut.</div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><footer></h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Yang terakhir adalah <code style="color: #990000; font-size: 16px; font-weight: bold;"><footer></code>, sesuai namanya <code style="color: #990000; font-size: 16px; font-weight: bold;"><footer></code> diletakkan dibagian bawah website, tetapi kita tidak hanya menggunakannya diakhir website saja. Sama seperti <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code>dimana kita menggunakan <code style="color: #990000; font-size: 16px; font-weight: bold;"><footer></code> dibagian akhir <code style="color: #990000; font-size: 16px; font-weight: bold;"><article></code>. Jadi intinya <code style="color: #990000; font-size: 16px; font-weight: bold;"><footer></code>sama dengan <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code>, hanya saja <code style="color: #990000; font-size: 16px; font-weight: bold;"><footer></code> diakhir sedangkan <code style="color: #990000; font-size: 16px; font-weight: bold;"><header></code> diawal. Berikut ini contoh sederhana penggunaan footer diakhir website:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; color: #3f3f3f; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"> <pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_keyword" style="color: blue; font-weight: bold;"><footer></span>
<span class="sh_keyword" style="color: blue; font-weight: bold;"><p></span>Copyright 2011, Dhimas Ronggobramantyo<span class="sh_keyword" style="color: blue; font-weight: bold;"></p></span>
</pre></div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Tag-tag lainnya</h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Sip, gampang kan? eits jangan senang dulu, itu tadi semua contoh tag-tag yang sering kita gunakan, masih banyak lagi tag-tag lainnya yang lebih ajaib seperti <code style="color: #990000; font-size: 16px; font-weight: bold;"><canvas></code>, <code style="color: #990000; font-size: 16px; font-weight: bold;"><audio></code>,<code style="color: #990000; font-size: 16px; font-weight: bold;"><video></code>, <code style="color: #990000; font-size: 16px; font-weight: bold;"><summary></code>, <code style="color: #990000; font-size: 16px; font-weight: bold;"><progress></code>, <code style="color: #990000; font-size: 16px; font-weight: bold;"><datalist></code> masih banyak lagi, lupa saya apa aja.</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Tetapi yang utama dan penting-penting ya itu tadi yang sudah saya sebutin. Untuk yang lainnya kapan-kapan kalau sempat saya buat artikel tersendiri, selamat mencoba, jika ada yang salah silahkan didiskusikan di komentar dibawah.</div><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><em>[Update] <span class="updated">2011-11-09 11:00:00</span></em></div><h4 style="background-color: white; font-family: arial, verdana, serif; font-size: 16px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Agar HTML5 jalan di IE8, IE7 dan IE6</h4><div class="content" style="background-color: white; font-family: arial, verdana, serif; font-size: 14px; line-height: 1.8em; margin-bottom: 15px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Ada yang kelupaan kemarin, bagaimana agar HTML5 jalan di IE8, IE7 dan IE6? mengingat bahwa hanya Internet Explorer 9 saja yang support HTML5. Anda bisa menggunakan Javascript untuk melakukannya, ada 2 yang menurut saya bagus yaitu <a href="http://www.modernizr.com/" style="color: #22437a; text-decoration: none;">Modernizr</a> dan <a href="http://code.google.com/p/html5shiv/" style="color: #22437a; text-decoration: none;">HTML5 Shiv</a>. Saya akan memberitahu yang HTML5 Shiv saja karena scriptnya lebih cepat dan mudah. Tetapi jika Anda ingin agar browser IE lama support CSS3 maka gunakan modernizr. Oke didalam header pasang saja kode seperti ini:</div><div class="boxcode" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: url(http://www.dhimasronggobramantyo.com/images/back_boxkode.jpg); background-origin: initial; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(103, 151, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(103, 151, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(103, 151, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(103, 151, 179); border-top-style: solid; border-top-width: 1px; font-family: courier; font-size: 10px; line-height: 19px; margin-bottom: 0px; margin-left: 15px; margin-right: 15px; margin-top: 0px; overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; padding-left: 7px; padding-right: 7px; padding-top: 37px; white-space: pre; width: 580px;"><span class="Apple-style-span" style="color: #3f3f3f;"> </span><pre class="sh_html sh_sourceCode" style="color: black; font-size: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="sh_comment" style="color: brown; font-style: italic;"><!--[if lt IE 9]></span>
<span class="sh_comment" style="color: brown; font-style: italic;"><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script></span>
<span class="sh_comment" style="color: brown; font-style: italic;"><![endif]--></span>
</pre><div><span class="Apple-style-span" style="color: brown;"><i><br />
</i></span></div></div>Ilmu Hukumhttp://www.blogger.com/profile/00329828027434901199noreply@blogger.com1tag:blogger.com,1999:blog-3656922569282414289.post-24350768215186680442011-10-17T23:20:00.001-07:002011-10-17T23:20:01.540-07:00Perbedaan CMS Gratis dan CMS Komersial<div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Jika Anda mencari sebuah CMS (Content Management System) di Internet, maka Anda akan diberikan banyak sekali pilihan. Seperti Joomla, WordPress, dan Drupal adalah sebagian dari CMS Gratis (Open Source) yang populer. Masih banyak CMS Gratis lainnya yang bisa Anda gunakan. Selain CMS gratis, juga banyak CMS Komersial yang bisa digunakan untuk perusahaan, toko online, web portal, web pendidikan, dll.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Diantara CMS Gratis dan CMS Komersial tersebut, manakah yang terbaik untuk digunakan? Sangat susah untuk menentukan mana yang terbaik, semua tergantung pada jenis website yang akan dibuat, untuk apa website tersebut dibuat, dan berapa budget yang tersedia untuk membuat website tersebut.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Sebelum Anda menentukan menggunakan CMS Gratis atau CMS Komersial untuk website Anda, ketahui dulu apa perbedaan dari kedua jenis CMS tersebut.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 13.0pt; line-height: 115%;">CMS Gratis (Open Source)</span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">CMS Gratis tersedia secara gratis di Internet, yang bisa di-download dan dirubah kode script-nya. Karena bersifat gratis, pengembangannya berasal dari para developer yang secara sukarela berkontribusi dalam perbaikan dan peningkatkan performanya. Biasanya perkembangan CMS Gratis lebih cepat daripada CMS Komersial.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 13.0pt; line-height: 115%;">Kelebihan CMS Gratis :</span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Proses installasi yang cepat dan gratis, kecuali pembayaran untuk sewa domain dan hosting.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Pengujian performa dan stabilitas-nya lebih cepat (belum tentu lebih baik) karena pengguna dan pengembang banyak.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Biasanya banyak dukungan Technical Support di forum atau blog tutorial.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 13.0pt; line-height: 115%;">Kekurangan CMS Gratis :</span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Sistem Keamanan tidak sebaik CMS Komersial, karena sifatnya yang Open Source atau kode script bisa dilihat dan bisa dipelajari oleh siapa saja.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Jumlah pengembang yang banyak menimbulkan kemungkinan besar terjadi kerusakan (crash) pada sistem, karena tiap web developer memiliki kebiasaan yang berbeda dalam mengembangkan suatu aplikasi web.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Karena siapa saja boleh berpartisipasi untuk pengembangan, maka tidak semuanya profesional. Sehingga sering muncul masalah karena pemrograman tidak kompeten.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Pilihan menu setting yang sangat rumit dan dibutuhkan kemampuan bahasa pemrograman untuk meng-integrasi tiap-tiap aplikasi.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 13.0pt; line-height: 115%;">CMS Komersial</span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Pada dasarnya CMS Komersial hampir sama dengan CMS Gratis, yaitu sama-sama memiliki kemampuan untuk mengelola konten web. Hanya pada CMS Komersial akses pada kode script dibatasi. Bahkan pada beberapa Perusahaan Web Developer, tidak bisa mengakses kode script, atau harga untuk bisa mengakses kode script sangat mahal. Dalam arti bahwa klien membeli hak penuh atas kode script yang telah dibuat.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 13.0pt; line-height: 115%;">Kelebihan CMS Komersial :</span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Sistem Keamanan lebih baik dari CMS Gratis karena kode script tidak bisa di akses, atau hanya klien yang bisa melihat kode script tersebut.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Kemungkinan terjadi crash pada aplikasi lebih kecil karena aplikasi dibuat oleh developer yang sama.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Pengembangan lebih kompeten karena ditangani oleh developer yang profesional.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Bagi klien, tidak rumit dan tidak dibutuhkan kemampuan bahasa pemrograman karena biasanya CMS Komersial dibuat se-sederhana mungkin (users friendly) sesuai dengan kebutuhan klien.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 13.0pt; line-height: 115%;">Kekurangan CMS Komersial :</span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Proses pembuatan yang lama dan biasanya harganya mahal, karena pihak developer membangun dari nol.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Performa dan stabilitas-nya butuh waktu lama untuk pengujian.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Technical Support biasanya dikenai biaya tambahan.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal"><span style="font-size: 13.0pt; line-height: 115%;">Sumber : <a href="http://www.naufala.com/blog/web-desain/perbedaan-cms-gratis-komersial/">http://www.naufala.com/blog/web-desain/perbedaan-cms-gratis-komersial/</a></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div>Ilmu Hukumhttp://www.blogger.com/profile/00329828027434901199noreply@blogger.com0tag:blogger.com,1999:blog-3656922569282414289.post-9212588535823162812011-10-17T23:14:00.001-07:002011-10-17T23:14:56.535-07:00Elemen Dasar HTML<div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;"><strong>Heading</strong></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;">Heading biasa digunakan untuk membuat judul pada halaman web. Tag yang digunakan adalah <Hn> dengan nilai n antara 1 sampai dengan 6. Semakin besar nilai n maka semakin kecil huruf yang tercetak. Default heading adalah rata kiri. Jika kita ingin membuat heading rata tengah maka tambahkan atribut ALIGN dengan nilai center atau right untuk rata kanan.</span><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-GB;"> </span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;"><strong>paragraph</strong></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;">Untuk membuat paragraph pada halaman web anda gunakanlah tag <p>….</p>. Sama seperti heading, kita dapat mengatur perataan paragraph dengan menambahkan atribut align di dalam tag <p>. </span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;"><strong>garis horizontal</strong></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;">Untuk membuat garis horizontal dalam halaman web, gunakanlah tag <HR>. tag <HR> memiliki atribut Align, Width, Size, Color dan Noshade.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;"><strong>baris baru</strong></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;">Untuk membuat baris baru gunakanlah tag <BR></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;"><strong>Komentar</strong></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-size: 13.0pt; line-height: 115%; mso-ansi-language: EN-US;">Komentar biasanya digunakan untuk memberikan penjelasan atau keterangan tentang dokumen yang kita buat. Untuk membuat komentar pada program gunakanlah tag <!—di sini komentar ditulis-->. Kalimat yang berada dalam tag tsb tidak akan dieksekusi oleh browser</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Sumber : <a href="https://webdosen.budiluhur.ac.id/dosen/070023/dpw1%20-%202.ppt">https://webdosen.budiluhur.ac.id/dosen/070023/dpw1%20-%202.ppt</a></span></div>Ilmu Hukumhttp://www.blogger.com/profile/00329828027434901199noreply@blogger.com0tag:blogger.com,1999:blog-3656922569282414289.post-88303299991318612782011-10-17T22:55:00.001-07:002011-10-17T22:55:42.731-07:00Tutorial PHP – Program Hello World Dengan PHP<div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Untuk memulai membuat program dengan php atau dengan bahasa pemrograman lainnya, yang biasa diajarkan adalah membuat tampilan hello world dengan bahasa pemrograman yang dipilih. Sekarang kita akan mencoba membuat program hello world juga dengan php.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Tapi sebelum mulai belajar php, kita harus mempersiapkan beberapa software</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><ul><li class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">PHP</span></li>
</ul><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">ini adalah bahasa yang akan kita gunakan. Bahasa Pemrograman PHP berjalan dengan menggunakan browser karena dia adalah bahasa pemrograman untuk web</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><ul><li class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">webserver</span></li>
</ul><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">webserver adalah sebuah software yang digunakan sebagai server web. Dengan adanya protocol ini, maka komputer kita bisa dibuka dari komputer lain atau komputer kita sendiri dengan protokol http. Webserver yang paling terkenal adalah apache. Hal ini disebabkan karena apache termasuk open source dan free.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><ul><li class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">database server</span></li>
</ul><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">untuk yang satu ini sebenarnya tidak wajib untuk pemula. Tapi untuk tingkat lanjut kita membutuhkan database server untuk menyimpan data yang banyak. Database server yang paling terkenal dan selalu berdampingan dengan php adalah mysql. Hal ini juga disebabkan karena mysql bisa didownload secara gratis.</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Silakan download ketiga software itu di situs resminya masing-masing. Setelah itu silakan diinstall. Tapi jika tidak mau ribet</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">dan repot menginstall 3 software sekaligus, ada baiknya anda menginstall xampp. Keterangan lebih lanjut, tentang xampp dan cara instalasinya ada di instalasi xampp</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">jika sudah menginstall software-software di atas, silakan ketik code di bawah ini. Boleh menggunakan notepad maupun editor php lainnya seperti phpedit, macromedia dreamweaver dan editplus. Dalam contoh ini saya menggunakan notepad++.</span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-size: 13.0pt; line-height: 115%;">Sumber : <a href="http://away.web.id/tutorial-php-program-hello-world-dengan-php/">http://away.web.id/tutorial-php-program-hello-world-dengan-php/</a></span></div>Ilmu Hukumhttp://www.blogger.com/profile/00329828027434901199noreply@blogger.com2