cara membuat tabel lengkap
<!DOCTYPE html>
<html idmmzcc-ext-docid="702527488" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" lang="id-ID"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="is_files/atrk.js" async="" type="text/javascript"></script><script src="is_files/gtm.js" async="">
</script><link rel="stylesheet" type="text/css" href="is_files/default.css" media="all">
<meta charset="UTF-8">
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Cara Membuat Website Sederhana dengan HTML 5 - Nyekrip</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.nyekrip.com/xmlrpc.php">
<!-- This site is optimized with the Yoast SEO plugin v3.3.4 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Oh ya, dalam tutorial cara membuat website sederhana dengan html 5
ini kita menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti biasanya..">
<meta name="robots" content="noodp">
<meta name="keywords" content="cara membuat website, membuat website sederhana, membuat website dengan html">
<link rel="canonical" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/">
<link rel="publisher" href="https://plus.google.com/+NyekripCom">
<meta property="og:locale" content="id_ID">
<meta property="og:type" content="article">
<meta property="og:title" content="Cara Membuat Website Sederhana dengan HTML 5 - Nyekrip">
<meta property="og:description" content="Oh ya, dalam tutorial cara membuat website sederhana dengan html 5
ini kita menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti biasanya..">
<meta property="og:url" content="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/">
<meta property="og:site_name" content="Nyekrip">
<meta property="article:publisher" content="https://www.facebook.com/nyekrip">
<meta property="article:author" content="https://www.facebook.com/nyekrip">
<meta property="article:tag" content="cara membuat website">
<meta property="article:tag" content="membuat website dengan html">
<meta property="article:tag" content="membuat website sederhana">
<meta property="article:section" content="Membuat Website">
<meta property="article:published_time" content="2015-02-05T05:16:57+00:00">
<meta property="article:modified_time" content="2015-04-21T15:40:45+00:00">
<meta property="og:updated_time" content="2015-04-21T15:40:45+00:00">
<meta property="fb:admins" content="100000016629259">
<meta property="og:image" content="http://www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="290">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Oh ya, dalam tutorial cara membuat website sederhana dengan html 5 ini kita menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti biasanya..">
<meta name="twitter:title" content="Cara Membuat Website Sederhana dengan HTML 5 - Nyekrip">
<meta name="twitter:site" content="@nyekrip">
<meta name="twitter:image" content="http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png?fit=1000%2C290">
<meta name="twitter:creator" content="@nyekrip">
<!-- / Yoast SEO plugin. -->
<link rel="alternate" type="application/rss+xml" title="Nyekrip » Feed" href="http://www.nyekrip.com/feed/">
<link rel="alternate" type="application/rss+xml" title="Nyekrip » Umpan Komentar" href="http://www.nyekrip.com/comments/feed/">
<link rel="alternate" hreflang="id" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5">
<link rel="alternate" hreflang="id-ID" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5">
<meta content="id" name="language">
<meta content="id" name="geo.country">
<meta content="Indonesia" name="geo.placename">
<link rel="alternate" type="application/rss+xml" title="Nyekrip » Cara Membuat Website Sederhana dengan HTML 5 Umpan Komentar" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/feed/">
<link rel="stylesheet" id="crayon-theme-new-idea-css" href="is_files/new-idea.css" type="text/css" media="all">
<link rel="stylesheet" id="wp-lightbox-2.min.css-css" href="is_files/lightbox.css" type="text/css" media="all">
<link rel="stylesheet" id="theme-style-css" href="is_files/style.css" type="text/css" media="all">
<link rel="stylesheet" id="theme-font-css" href="is_files/css.css" type="text/css" media="all">
<link rel="stylesheet" id="font-awesome-css" href="is_files/font-awesome.css" type="text/css" media="all">
<!--[if lte IE 7]>
<link rel='stylesheet' id='font-awesome-ie7-css' href='http://www.nyekrip.com/wp-content/themes/nyekrip/css/font-awesome-ie7.min.css?ver=6cfcdaffb04cb6d39e94e7a325df31e2' type='text/css' media='all' />
<![endif]-->
<link rel="stylesheet" id="genericons-css" href="is_files/genericons.css" type="text/css" media="all">
<script src="is_files/recaptcha__en.js" async="" type="text/javascript"></script><script src="is_files/analytics.js" async=""></script><script type="text/javascript" src="is_files/jquery_002.js"></script>
<script type="text/javascript" src="is_files/jquery-migrate.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/www.nyekrip.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/crayon.js"></script>
<link rel="https://api.w.org/" href="http://www.nyekrip.com/wp-json/">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.nyekrip.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.nyekrip.com/wp-includes/wlwmanifest.xml">
<link rel="shortlink" href="http://www.nyekrip.com/?p=650">
<link rel="alternate" type="application/json+oembed" href="http://www.nyekrip.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.nyekrip.com%2Fcara-membuat-website-sederhana-dengan-html-5%2F">
<link rel="alternate" type="text/xml+oembed" href="http://www.nyekrip.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.nyekrip.com%2Fcara-membuat-website-sederhana-dengan-html-5%2F&format=xml">
<link rel="dns-prefetch" href="http://i0.wp.com/">
<link rel="dns-prefetch" href="http://i1.wp.com/">
<link rel="dns-prefetch" href="http://i2.wp.com/">
<style type="text/css">img#wpstats{display:none}</style><!--[if lt IE 9]><script src="http://www.nyekrip.com/wp-content/themes/nyekrip/js/html5.js"></script><![endif]--><!--[if (gte IE 6)&(lte IE 8)]><script src="http://www.nyekrip.com/wp-content/themes/nyekrip/js/selectivizr-min.js"></script><![endif]--><link rel="shortcut icon" href="http://www.nyekrip.com/wp-content/uploads/2014/12/favicon.ico">
<script src="is_files/request" async="" type="text/javascript"></script></head>
<body class="single single-post postid-650 single-format-standard">
<!-- #site-container -->
<div id="site-container" class="clearfix">
<!-- #primary-nav-mobile -->
<nav id="primary-nav-mobile">
<a class="menu-toggle clearfix" href="#">MENU<i class="icon-reorder"></i></a> <!-- edit 0-->
<ul id="mobile-menu" class="clearfix"><li id="menu-item-426" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-426"><a href="http://www.nyekrip.com/">Beranda</a></li>
<li id="menu-item-425" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-425"><a href="http://www.nyekrip.com/skrip">Skrip</a></li>
<li id="menu-item-906" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-906"><a href="http://www.nyekrip.com/glosarium/">Glosarium</a></li>
<li id="menu-item-427" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a href="http://www.nyekrip.com/tentang-nyekrip/">Tentang</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.nyekrip.com/nyekrip-yuk/">Nyekrip Yuk</a></li>
</ul></nav>
<!-- /#primary-nav-mobile -->
<!-- #header -->
<header id="site-header" class="clearfix" role="banner">
<div class="container">
<!-- #logo -->
<div id="logo">
<a title="Nyekrip" href="http://www.nyekrip.com/">
<img alt="Nyekrip" src="is_files/Nyekrip-Logo.png">
Web Tutorial Indonesia </a>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav id="primary-nav" role="navigation" class="clearfix">
<ul id="menu-main-menu" class="nav sf-menu clearfix sf-js-enabled"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-426"><a href="http://www.nyekrip.com/">Beranda</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-425"><a href="http://www.nyekrip.com/skrip">Skrip</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-906"><a href="http://www.nyekrip.com/glosarium/">Glosarium</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a href="http://www.nyekrip.com/tentang-nyekrip/">Tentang</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.nyekrip.com/nyekrip-yuk/">Nyekrip Yuk</a></li>
</ul> </nav>
<!-- #primary-nav -->
</div>
</header>
<!-- /#header -->
<!-- #live-search -->
<div id="live-search">
<div class="container">
<div id="search-wrap">
<form role="search" method="get" id="searchform" class="clearfix" action="http://www.nyekrip.com/">
<input onfocus="if (this.value == 'Cari Tutorial di Nyekrip ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Cari Tutorial di Nyekrip ...';}" value="Cari Tutorial di Nyekrip ..." name="s" id="s" autocapitalize="off" autocorrect="off" autocomplete="off" type="text">
<i class="live-search-loading icon-spinner icon-spin"></i>
<button type="submit" id="searchsubmit">
<i class="icon-search"></i><span>Cari</span>
</button>
</form>
</div>
</div>
</div>
<!-- /#live-search -->
<!-- #primary -->
<!--
<div id="primary" class="sidebar-left clearfix"> -->
<div id="primary" class="sidebar-right clearfix">
<!-- .container -->
<div class="container">
<!-- #content -->
<section id="content" role="main">
<article id="post-650" class="clearfix post-650 post type-post status-publish format-standard has-post-thumbnail hentry category-membuat-website tag-cara-membuat-web tag-membuat-website-dengan-html tag-membuat-website-sederhana has_thumb">
<!-- #page-header -->
<header id="page-header" class="clearfix">
<span class="entry-title">
<h1 class="page-title entry-title">Cara Membuat Website Sederhana dengan HTML 5</h1>
</span>
<p id="breadcrumbs"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://www.nyekrip.com/" rel="v:url" property="v:title">Nyekrip</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://www.nyekrip.com/category/website/" rel="v:url" property="v:title">Website</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://www.nyekrip.com/category/website/membuat-website/" rel="v:url" property="v:title">Membuat Website</a> » <span class="breadcrumb_last">Cara Membuat Website Sederhana dengan HTML 5</span></span></span></span></span></p></header>
<!-- /#page-header -->
<ul class="entry-meta clearfix">
<li class="date">
<i class="icon-time"></i> Updated on
<time class="post-date date updated" datetime="2015-04-21" itemprop="datePublished">April 21, 2015</time>
</li>
<li class="author">
<i class="icon-user"></i>
Admin</li>
<li class="category">
<i class="icon-folder-close"></i>
<a href="http://www.nyekrip.com/category/website/membuat-website/" rel="category tag">Membuat Website</a> </li>
<li class="comments">
<i class="icon-comment"></i>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comments">101 Comments</a></li>
</ul>
<!-- .entry-header -->
<header class="entry-header">
<figure class="entry-thumb">
<img src="is_files/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png" class="attachment-post size-post wp-post-image" alt="Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com" srcset="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png?w=1000 1000w, http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png?resize=300%2C87 300w" sizes="(max-width: 1000px) 100vw, 1000px" height="290" width="1000">
</figure>
</header>
<!-- /.entry-header -->
<div class="entry-content">
<p><span class="entry-content">Pada kesempatan kali ini kita
akan membahas cara membuat website sederhana dengan html 5, sebelumnya
anda diharapkan sudah mengerti <strong><a title="Pengenalan HTML: Langkah Dasar" href="http://www.nyekrip.com/pengenalan-html-langkah-dasar/" target="_blank">dasar HTML</a></strong>
dan CSS karena pada tutorial ini tidak akan dijelaskan secara mendetail
mengenai HTML dan CSS, tutorial ini hanya menjelaskan secara garis
besar fungsi dari elemen yang dipakai.</span></p>
<p>Jika anda belum pernah membuat halaman web sederhana, sangat
disarankan untuk latihan membuat halaman web secara sederhana di artikel
” <strong><a title="CARA MEMBUAT HALAMAN WEB SEDERHANA" href="http://www.nyekrip.com/cara-membuat-halaman-web-sederhana/" target="_blank">CARA MEMBUAT HALAMAN WEB SEDERHANA</a></strong> ” dalam artikel ini juga dijelaskan secara mendetail tentang apa saja alat yang digunakan dalam membuat website.</p>
<p>Hasil akhir dari membuat website adalah seperti gambar dibawah ini, klik ” <strong>Run Skrip</strong>
” jika ingin melihat hasil secara online sekaligus merubah source
code, silahkan anda ikuti langkah-langkah membuat website sederhana
dengan html ini.</p>
<div id="attachment_652" style="width: 812px" class="wp-caption aligncenter"><a href="http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png" rel="lightbox[650]"><img class="size-full wp-image-652" src="is_files/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png" alt="Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip" srcset="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png?w=802 802w, http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png?resize=300%2C236 300w, http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png?resize=367%2C290 367w" sizes="(max-width: 802px) 100vw, 802px" data-recalc-dims="1"></a>
<p class="wp-caption-text">Website Sederhana dengan HTML 5</p>
</div>
<div class="ph-float">
<a href="http://www.nyekrip.com/nyekrip-yuk/index.php?fdata=skrip-cara-membuat-website-sederhana-dengan-html-5" target="_blank" class="ph-button ph-btn-blue">Run Skrip</a>
</div>
<p>Anda bisa download website sederhana ini dengan klik tombol ” <strong>Download Skrip</strong> “.</p>
<div class="ph-float">
<a href="http://www.nyekrip.com/download/skrip-cara-membuat-website-sederhana-nyekrip.rar" target="_blank" class="ph-button ph-btn-blue">Download Skrip</a>
</div>
<h2>Cara membuat website sederhana</h2>
<p>Oh ya, dalam tutorial cara membuat website sederhana ini kita
menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti
biasanya alat yang digunakan dalam membuat website pada tutorial ini ada
dua, yaitu;</p>
<ul>
<li><strong><a title="Google Chrome Best Browser" href="http://www.google.com/chrome/" target="_blank">Google Chrome</a></strong> sebagai browser</li>
<li><strong><a title="Notepad ++ Best Notepad Editor" href="http://notepad-plus-plus.org/" target="_blank">Notepad++</a></strong> sebagai tempat menulis skrip</li>
</ul>
<p>Jika anda belum mempunyai alat-alat tersebut, anda bisa download
chrome dan notepad++ secara gratis pada halaman web mereka. Mari kita
mulai tutorial cara membuat website sederhana yang terdiri dari 8
langkah.</p>
<h2>Langkah 1: Membuat Sketsa Desain halaman web</h2>
<p>Kita akan memulai membuat web dengan mempersiapakan sketsa halaman
web dulu, untuk membuat sketsa halaman web kita bisa menggunakan kertas
dulu baru setelah itu kita bisa memperhalusnya dengan photoshop. Berikut
adalah sketsa halaman web yang kita akan gunakan sebagai latihan.</p>
<div id="attachment_655" style="width: 472px" class="wp-caption aligncenter">
<a href="http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png" rel="lightbox[650]">
<img class="size-full wp-image-655" src="is_files/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png" alt="Cara Membuat Website Sederhana dengan HTML 5 - Sketsa - Nyekrip" srcset="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png?w=462 462w, http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png?resize=273%2C300 273w, http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png?resize=264%2C290 264w" sizes="(max-width: 462px) 100vw, 462px" data-recalc-dims="1"></a>
<p class="wp-caption-text">Sketsa Website Sederhana</p>
</div>
<p>Sketsa desain halaman web dapat memberikan gambaran mengenai layout
halaman web dan bagaimana cara mengatur letaknya. Dengan adanya sketsa
juga bisa mempermudah kita untuk menyiapkan skrip HTML dan CSS apa saja
yang dibutuhkan.</p>
<h2>Langkah 2: Menentukan Konsep membuat website</h2>
<p>Kita akan menggunakan HTML5, teknologi ini memperkenalkan beberapa
elemen baru yang memungkinkan kita untuk membagi bagian dari halaman.
Nama-nama elemen ini sesuai dengan jenis konten yang berada didalamnya.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d52423060320" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-15">15</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-16">16</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-17">17</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d52423060320-1"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"wrapper"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-2"><span class="crayon-i "> </span><span class="crayon-r "><header></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-3"><span class="crayon-i "> </span><span class="crayon-r "><h1></span><span class="crayon-i ">Warung Tegal</span><span class="crayon-r "></h1></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-4"><span class="crayon-i "> </span><span class="crayon-r "><nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-5"><span class="crayon-i "> </span><span class="crayon-c"><!-- nav content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-6"><span class="crayon-i "> </span><span class="crayon-r "></nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-7"><span class="crayon-i "> </span><span class="crayon-r "></header></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-8"><span class="crayon-i "> </span><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"courses"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-9"><span class="crayon-i "> </span><span class="crayon-c"><!-- section content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-10"><span class="crayon-i "> </span><span class="crayon-r "></section></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-11"><span class="crayon-i "> </span><span class="crayon-r "><aside></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-12"><span class="crayon-i "> </span><span class="crayon-c"><!-- aside content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-13"><span class="crayon-i "> </span><span class="crayon-r "></aside></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-14"><span class="crayon-i "> </span><span class="crayon-r "><footer></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-15"><span class="crayon-i "> </span><span class="crayon-c"><!-- footer content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-16"><span class="crayon-i "> </span><span class="crayon-r "></footer></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-17"><span class="crayon-r "></div></span><span class="crayon-c"><!-- .wrapper --></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0014 seconds] -->
<p>Contoh pada kali ini yaitu membuat web masakan yang dibangun
menggunakan elemen HTML5 untuk membuat struktur halaman (bukan
sekedar pengelompokan menggunakan elemen <code><div></code>).</p>
<p>Sesuai dengan sketsa halaman web diatas, Header dan footer bertempat di dalam elemen <code><header></code> dan <code><footer></code>. Materi masakan dikelompokkan bersama di dalam elemen <code><section></code> yang memiliki atribut class yang nilainya <code>courses</code> (untuk membedakannya dari elemen <code><section></code> yang lain pada halaman). Sidebar berada di dalam sebuah elemen <code><aside></code> .</p>
<p>Setiap materi masakan berada di dalam sebuah elemen <code><article></code>, dan menggunakan elemen <code><figure></code> dan <code><figcaption></code>
untuk menyisipkan gambar. Judul pada masing-masing materi masakan
memiliki sub-judul, jadi judul-judul ini dikelompokkan dalam sebuah
elemen <code><hgroup></code>. Di sidebar, terdapat resep dan rincian kontak yang ditempatkan terpisah di dalam elemen <code><section></code>.</p>
<p>Halaman dikelola dan ditata menggunakan CSS. Agar CSS bisa bekerja di
versi IE 9 kebawah, halaman HTML5 berisi link ke HTML5 shiv JavaScript
(host di server <a title="Best Search Engine" href="https://www.google.com/" target="_blank">Google</a>) di dalam komentar bersyarat.</p>
<p>Oke, kita sudah menentukan konsep dari membuat web sederhana, mari kita lanjutkan dengan membuat skrip HTML dan skrip CSS.</p>
<h2>Langkah 3: Membuat Skrip Struktur Umum HTML</h2>
<p>Pembuatan skrip struktur umum HTML memudahkan kita untuk memulai
dalam membuat website, jika anda belum mengetahui apa itu struktur umum
HTML, anda bisa mempelajari terlebih dahulu di ” <strong><a title="Pengenalan HTML: Struktur Umum Part 1" href="http://www.nyekrip.com/pengenalan-html-struktur-umum-part-1/" target="_blank">Pengenalan HTML: Struktur Umum Part 1</a></strong> “. Berikut Skrip Struktur Umum HTML.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d6f600401376" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-15">15</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-1"><span class="crayon-n"><!DOCTYPE html></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-2"><span class="crayon-r "><html></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-3"><span class="crayon-i "> </span><span class="crayon-r "><head></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-4"><span class="crayon-i "> </span><span class="crayon-r "><title></span><span class="crayon-i ">Web Warung Tegal</span><span class="crayon-r "></title></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-5"><span class="crayon-i "> <span class="crayon-ta"><style </span><span class="crayon-e ">type</span><span class="crayon-i ">="text/css"></span></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-6"><span class="crayon-h"> </span><span class="crayon-ta"></style></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-7"><span class="crayon-i "> </span><span class="crayon-c"><!--[if lt IE 9]></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-8"><span class="crayon-c"> <span class="crayon-ta"><script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://html5shiv.googlecode.com/svn/trunk/html5.js"</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-9"><span class="crayon-c"> <![endif]--></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-10"><span class="crayon-i "> </span><span class="crayon-r "></head></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-11"><span class="crayon-i "> </span><span class="crayon-r "><body></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-12"><span class="crayon-i "> </span><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"wrapper"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-13"><span class="crayon-i "> </span><span class="crayon-r "></div></span><span class="crayon-c"><!-- .wrapper --></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-14"><span class="crayon-i "> </span><span class="crayon-r "></body></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-15"><span class="crayon-r "></html></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0043 seconds] -->
<p>Skrip HTML diatas terdapat baris skrip <code><style type="text/css"></code>, didalam skrip ini kita nantinya akan menaruh skrip CSS untuk mengatur layout halaman web. Sedangkan pada skrip <code><title>Web Warung Tegal</title></code> berfungsi untuk memberikan title halaman web. Dibawah tag <code><style></code> kita memberikan skrip <code>HTML5SHIV</code> yang berguna agar website kita berjalan dengan baik dalam browser IE versi 9 kebawah.</p>
<p>Skrip <code><div class="wrapper"></code> berfungsi untuk membungkus elemen halaman web, ” <strong>bungkusan</strong> ” ini kita beri class <code>wrapper</code>, dengan class ini kita bisa mengatur semua elemen yang berada didalamnya dengan skrip CSS.</p>
<p>Kesimpulan dari skrip diatas adalah kita telah memberikan judul halaman web dan menyediakan tempat untuk skrip CSS.</p>
<h2>Langkah 4: Membuat Elemen header dan nav HTML5</h2>
<p>Dalam contoh ini, Elemen <code><header></code> digunakan untuk tempat dari nama website dan navigasi utama. Berikut skrip header, letakkan persis dibawah <code><div class="wrapper"></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d7e637314124" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-12">12</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-1"><span class="crayon-r "><header></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-2"><span class="crayon-i "> </span><span class="crayon-r "><h1></span><span class="crayon-i ">Warung Tegal</span><span class="crayon-r "></h1></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-3"><span class="crayon-i "> </span><span class="crayon-r "><nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-4"><span class="crayon-i "> </span><span class="crayon-r "><ul></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-5"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"current"</span><span class="crayon-r ">></span><span class="crayon-i ">beranda</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-6"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">daftar masakan</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-7"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">katering</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-8"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">tentang</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-9"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">kontak</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-10"><span class="crayon-i "> </span><span class="crayon-r "></ul></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-11"><span class="crayon-i "> </span><span class="crayon-r "></nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-12"><span class="crayon-r "></header></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0820 seconds] -->
<p>Kita menggunakan elemen <code><nav></code> untuk membuat
navigasi . Elemen ini bisa digunakan di berbagai keperluan dalam
pembuatan navigasi, baik navigasi yang berada tepat dibawah header, atau
navigasi yang terletak pada footer.</p>
<p>Dalam skrip diatas kita menentukan judul halaman yang telah kita letakkan pada elemen <code><h1></code> dan memberikan daftar link navigasi sebagai alat navigasi untuk mempermudah dalam mengakses halaman web.</p>
<h2>Langkah 5: Membuat Elemen article HTML5</h2>
<p>Elemen <code><article></code> bertindak sebagai wadah untuk setiap bagian dari halaman yang dapat berdiri sendiri dan berpotensi Sindikasi.</p>
<p>Bisa berupa artikel atau tulisan blog, komentar atau posting forum,
atau lainnya. Jika halaman terdiri dari beberapa artikel, maka kita akan
meletakkan masing-masing artikel dalam elemen <code><article></code>. Berikut skripnya, dan kita bungkus skrip ini dengan elemen <code><section></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d8b691477462" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-15">15</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-16">16</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-17">17</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-18">18</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-19">19</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-20">20</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-21">21</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-22">22</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-23">23</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-24">24</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-25">25</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-26">26</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-1"><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"courses"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-2"><span class="crayon-i "> </span><span class="crayon-r "><article></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-3"><span class="crayon-i "> </span><span class="crayon-r "><figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-4"><span class="crayon-i "> </span><span class="crayon-r "><img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"images/soto.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-o">=</span><span class="crayon-s ">"soto"</span><span class="crayon-r "> /></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-5"><span class="crayon-i "> </span><span class="crayon-r "><figcaption></span><span class="crayon-i ">Soto Indonesia</span><span class="crayon-r "></figcaption></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-6"><span class="crayon-i "> </span><span class="crayon-r "></figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-7"><span class="crayon-i "> </span><span class="crayon-r "><hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-8"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Soto Ayam</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-9"><span class="crayon-i "> </span><span class="crayon-r "><h3></span><span class="crayon-i ">Makanan Berkuah</span><span class="crayon-r "></h3></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-10"><span class="crayon-i "> </span><span class="crayon-r "></hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-11"><span class="crayon-i "> </span><span class="crayon-r "><p></span><span class="crayon-i ">Soto ayam adalah makanan khas Indonesia yang berupa </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-12"><span class="crayon-i "> sejenis sup ayam dengan kuah yang berwarna kekuningan.</span><span class="crayon-r "></p></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-13"><span class="crayon-i "> </span><span class="crayon-r "></article></span><span class="crayon-i "> </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-14"><span class="crayon-i "> </span><span class="crayon-r "><article></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-15"><span class="crayon-i "> </span><span class="crayon-r "><figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-16"><span class="crayon-i "> </span><span class="crayon-r "><img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"images/pecel.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-o">=</span><span class="crayon-s ">"pecel"</span><span class="crayon-r "> /></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-17"><span class="crayon-i "> </span><span class="crayon-r "><figcaption></span><span class="crayon-i ">Pecel Indonesia</span><span class="crayon-r "></figcaption></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-18"><span class="crayon-i "> </span><span class="crayon-r "></figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-19"><span class="crayon-i "> </span><span class="crayon-r "><hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-20"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Masakan Pecel</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-21"><span class="crayon-i "> </span><span class="crayon-r "><h3></span><span class="crayon-i ">Makanan dengan Bumbu Kacang</span><span class="crayon-r "></h3></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-22"><span class="crayon-i "> </span><span class="crayon-r "></hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-23"><span class="crayon-i "> </span><span class="crayon-r "><p></span><span class="crayon-i ">Pecel adalah makanan yang menggunakan bumbu sambal </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-24"><span class="crayon-i "> kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</span><span class="crayon-r "></p></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-25"><span class="crayon-i "> </span><span class="crayon-r "></article></span><span class="crayon-i "> </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-26"><span class="crayon-r "></section></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0023 seconds] -->
<p>Letakkan skrip diatas tepat dibawah skrip header yang sudah kita buat sebelumnya. Elemen <code><section></code> digunakan untuk mengelompokkan elemen konten yang terkait , dan biasanya setiap bagian akan memiliki judul tersendiri.</p>
<p>Elemen <code><figure></code> digunakan untuk menyisipkan gambar sedangkan elemen <code><figcaption></code> digunakan untuk memberi keterangan dalam gambar tersebut. Sedangkan tujuan dari elemen <code><hgroup></code> adalah mengelompokkan satu atau lebih elemen <code><h1></code> sampai <code><h6></code> sehingga mereka diperlakukan sebagai satu judul tunggal.</p>
<p>Kesimpulannya dalam skrip diatas kita membuat artikel masakan dengan memberinya judul, gambar beserta penjelasan.</p>
<h2>Langkah 6: Membuat Elemen Aside HTML5</h2>
<p>Elemen <code><aside></code> bertindak sebagai tempat/wadah
untuk konten yang berhubungan dengan seluruh halaman. Sebagai contoh,
elemen ini bisa berisi link ke halaman web lain, daftar posting terbaru,
kotak pencarian, atau widget-widget lainnya. Berikut skrip dari elemen
Aside. Letakkan skrip ini dibawah skrip <code><section></code> diatas, tepatnya setelah skrip <code></section></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d99769739107" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-14">14</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d99769739107-1"><span class="crayon-r "><aside></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-2"><span class="crayon-i "> </span><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"popular-recipes"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-3"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Masakan Populer</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-4"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Sop</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-5"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Asem</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-6"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Lodeh</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-7"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Bayam</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-8"><span class="crayon-i "> </span><span class="crayon-r "></section></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-9"><span class="crayon-i "> </span><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"contact-details"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-10"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Kontak</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-11"><span class="crayon-i "> </span><span class="crayon-r "><p></span><span class="crayon-i ">Warung Tegal</span><span class="crayon-r "><br </span><span class="crayon-r ">/></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-12"><span class="crayon-i "> di seluruh indonesia</span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-13"><span class="crayon-i "> </span><span class="crayon-r "></section></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-14"><span class="crayon-r "></aside></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0017 seconds] -->
<p>Dalam skrip diatas, kita meletakkan informasi daftar link yang berisi menu masakan yang populer dan daftar kontak.</p>
<h2>Langkah 7: Membuat Elemen Footer HTML5</h2>
<p>Setiap website akan punya footer, elemen <code><footer></code>
berguna untuk membuat footer, dengan footer kita bisa memberikan
informasi tambahan mengenai website seperti informasi hak cipta, link ke
halaman kebijakan privasi atau link lainnya. Berikut skrip footer.
Skrip Footer diletakkan setelah skrip <code><aside></code> diatas, tepatnya setelah skrip <code></aside></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998da5958937937" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -19px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998da5958937937-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998da5958937937-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998da5958937937-3">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998da5958937937-1"><span class="crayon-r "><footer></span></div><div class="crayon-line" id="crayon-58e4bcd998da5958937937-2"><span class="crayon-i "> &copy; 2015 Warung Tegal</span></div><div class="crayon-line" id="crayon-58e4bcd998da5958937937-3"><span class="crayon-r "></footer></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>Pada tahap ini kita sudah membuat File HTML dan belum dilengkapi
dengan skrip CSS dan Gambar, sehingga pada tahap ini web sederhana kita
seperti gambar dibawah ini.</p>
<div id="attachment_663" style="width: 634px" class="wp-caption aligncenter"><a href="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png" rel="lightbox[650]"><img class="size-full wp-image-663" src="is_files/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_.png" alt="Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip" srcset="http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png?w=624 624w, http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png?resize=300%2C292 300w, http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png?resize=297%2C290 297w" sizes="(max-width: 624px) 100vw, 624px" data-recalc-dims="1"></a>
<p class="wp-caption-text">Website Belum Menggunakan Skrip CSS dan Gambar</p>
</div>
<h2>Langkah 8: Membuat Skrip CSS dan Gambar</h2>
<p>Berikut skrip CSS yang nantinya kita insert ke dalam elemen <code><style type="text/css"></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998db1551318647" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip CSS</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-15">15</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-16">16</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-17">17</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-18">18</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-19">19</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-20">20</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-21">21</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-22">22</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-23">23</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-24">24</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-25">25</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-26">26</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-27">27</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-28">28</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-29">29</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-30">30</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-31">31</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-32">32</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-33">33</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-34">34</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-35">35</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-36">36</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-37">37</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-38">38</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-39">39</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-40">40</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-41">41</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-42">42</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-43">43</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-44">44</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-45">45</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-46">46</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-47">47</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-48">48</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-49">49</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-50">50</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-51">51</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-52">52</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-53">53</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-54">54</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-55">55</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-56">56</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-57">57</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-58">58</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-59">59</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-60">60</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-61">61</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-62">62</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-63">63</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-64">64</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-65">65</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-66">66</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-67">67</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-68">68</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-69">69</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-70">70</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-71">71</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-72">72</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-73">73</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-74">74</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-75">75</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-76">76</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-77">77</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-78">78</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-79">79</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-80">80</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-81">81</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-82">82</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-83">83</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-84">84</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-85">85</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-86">86</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998db1551318647-1">header<span class="crayon-sy">,</span><span class="crayon-h"> </span>section<span class="crayon-sy">,</span><span class="crayon-h"> </span>footer<span class="crayon-sy">,</span><span class="crayon-h"> </span>aside<span class="crayon-sy">,</span><span class="crayon-h"> </span>nav<span class="crayon-sy">,</span><span class="crayon-h"> </span>article<span class="crayon-sy">,</span><span class="crayon-h"> </span>figure<span class="crayon-sy">,</span><span class="crayon-h"> </span>figcaption<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-2"><span class="crayon-h"> </span>display<span class="crayon-o">:</span><span class="crayon-h"> </span>block<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-3">body<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-4"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>666666<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-5"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>f9f8f6<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-6"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>image<span class="crayon-o">:</span><span class="crayon-h"> </span>url<span class="crayon-sy">(</span><span class="crayon-s ">"images/dark-wood.jpg"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-7"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>position<span class="crayon-o">:</span><span class="crayon-h"> </span>center<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-8"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>family<span class="crayon-o">:</span><span class="crayon-h"> </span>Georgia<span class="crayon-sy">,</span><span class="crayon-h"> </span>Times<span class="crayon-sy">,</span><span class="crayon-h"> </span>serif<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-9"><span class="crayon-h"> </span>line<span class="crayon-o">-</span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>1<span class="crayon-sy">.</span>4em<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-10"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-11"><span class="crayon-sy">.</span>wrapper<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-12"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>940px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-13"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>20px<span class="crayon-h"> </span>auto<span class="crayon-h"> </span>20px<span class="crayon-h"> </span>auto<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-14"><span class="crayon-h"> </span>border<span class="crayon-o">:</span><span class="crayon-h"> </span>2px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>000000<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-15"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>ffffff<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-16">header<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-17"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>160px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-18"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>image<span class="crayon-o">:</span><span class="crayon-h"> </span>url<span class="crayon-sy">(</span>images<span class="crayon-o">/</span>header<span class="crayon-sy">.</span>png<span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-19">h1<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-20"><span class="crayon-h"> </span>text<span class="crayon-o">-</span>indent<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">-</span>9999px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-21"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>940px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-22"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>130px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-23"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-24">nav<span class="crayon-sy">,</span><span class="crayon-h"> </span>footer<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-25"><span class="crayon-h"> </span>clear<span class="crayon-o">:</span><span class="crayon-h"> </span>both<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-26"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>ffffff<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-27"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>aeaca8<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-28"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>30px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-29">nav<span class="crayon-h"> </span>ul<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-30"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-31"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>5px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>5px<span class="crayon-h"> </span>30px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-32">nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-33"><span class="crayon-h"> </span>display<span class="crayon-o">:</span><span class="crayon-h"> </span>inline<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-34"><span class="crayon-h"> </span>margin<span class="crayon-o">-</span>right<span class="crayon-o">:</span><span class="crayon-h"> </span>40px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-35">nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span>a<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-36"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>ffffff<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-37">nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span>a<span class="crayon-o">:</span>hover<span class="crayon-sy">,</span><span class="crayon-h"> </span>nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span>a<span class="crayon-sy">.</span>current<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-38"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>000000<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-39">section<span class="crayon-sy">.</span>courses<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-40"><span class="crayon-h"> </span>float<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-41"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>659px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-42"><span class="crayon-h"> </span>border<span class="crayon-o">-</span>right<span class="crayon-o">:</span><span class="crayon-h"> </span>1px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>eeeeee<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-43">article<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-44"><span class="crayon-h"> </span>clear<span class="crayon-o">:</span><span class="crayon-h"> </span>both<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-45"><span class="crayon-h"> </span>overflow<span class="crayon-o">:</span><span class="crayon-h"> </span>auto<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-46"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>100<span class="crayon-o">%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-47">hgroup<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-48"><span class="crayon-h"> </span>margin<span class="crayon-o">-</span>top<span class="crayon-o">:</span><span class="crayon-h"> </span>40px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-49">figure<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-50"><span class="crayon-h"> </span>float<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-51"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>290px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-52"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>220px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-53"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>5px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-54"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>20px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-55"><span class="crayon-h"> </span>border<span class="crayon-o">:</span><span class="crayon-h"> </span>1px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>eeeeee<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-56">figcaption<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-57"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>size<span class="crayon-o">:</span><span class="crayon-h"> </span>90<span class="crayon-o">%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-58"><span class="crayon-h"> </span>text<span class="crayon-o">-</span>align<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-59">aside<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-60"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>230px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-61"><span class="crayon-h"> </span>float<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-62"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>20px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-63">aside<span class="crayon-h"> </span>section<span class="crayon-h"> </span>a<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-64"><span class="crayon-h"> </span>display<span class="crayon-o">:</span><span class="crayon-h"> </span>block<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-65"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>10px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-66"><span class="crayon-h"> </span>border<span class="crayon-o">-</span>bottom<span class="crayon-o">:</span><span class="crayon-h"> </span>1px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>eeeeee<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-67">aside<span class="crayon-h"> </span>section<span class="crayon-h"> </span>a<span class="crayon-o">:</span>hover<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-68"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>985d6a<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-69"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>efefef<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-70">a<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-71"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>de6581<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-72"><span class="crayon-h"> </span>text<span class="crayon-o">-</span>decoration<span class="crayon-o">:</span><span class="crayon-h"> </span>none<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-73">h1<span class="crayon-sy">,</span><span class="crayon-h"> </span>h2<span class="crayon-sy">,</span><span class="crayon-h"> </span>h3<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-74"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>weight<span class="crayon-o">:</span><span class="crayon-h"> </span>normal<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-75">h2<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-76"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>10px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>5px<span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-77"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-78">h3<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-79"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>10px<span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-80"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>de6581<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-81">aside<span class="crayon-h"> </span>h2<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-82"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>30px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>10px<span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-83"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>de6581<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-84">footer<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-85"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>size<span class="crayon-o">:</span><span class="crayon-h"> </span>80<span class="crayon-o">%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-86"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>7px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>20px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0932 seconds] -->
<p>Penjelasan dari skrip CSS tidak dibahas disini, melainkan akan
dibahas dalam artikel membuat website sederhana bagian 2, untuk gambar
anda bisa mendownload-nya sekaligus beserta source code pada tombol
download diatas.</p>
<p>Cukup sampai disini tutorial <strong>cara membuat website sederhana dengan HTML 5</strong>,
Pada tahap ini kita sudah membuat website meskipun sangat sederhana,
simple dan terbilang cukup mudah, web sederhana ini hanya terdiri
dari satu halaman web saja. Kita bisa menambahkan halaman lain dengan
cara duplikat halaman web yang sudah dibuat dan isinya kita ganti dengan
yang lain.</p>
<p>Tutorial diatas masih sebatas cara membuat web simpel dan biasa,
yang perlu diketahui bahwa website simpel ini masih bersifat statis
tidak dinamis. Tutorial cara membuat website sederhana ini sangat jauh
dari kesempurnaan, maka dari itu kami sangat mengharapkan saran dan
kritikan yang membangun.</p>
<p>Happy Nyekrip!
</p><div class="sharedaddy sd-sharing-enabled">
<div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing">
<div class="sd-content">
<ul>
<li class="share-print"><a rel="nofollow" data-shared="" class="share-print sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#print" target="_blank" title="Klik untuk mencetak"><span>Cetak</span></a></li>
<li class="share-facebook"><a rel="nofollow" data-shared="sharing-facebook-650" class="share-facebook sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=facebook&nb=1" target="_blank" title="Klik untuk membagikan di Facebook"><span>Facebook</span></a></li>
<li class="share-twitter"><a rel="nofollow" data-shared="sharing-twitter-650" class="share-twitter sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=twitter&nb=1" target="_blank" title="Klik untuk berbagi pada Twitter"><span>Twitter</span></a></li>
<li class="share-google-plus-1"><a rel="nofollow" data-shared="sharing-google-650" class="share-google-plus-1 sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=google-plus-1&nb=1" target="_blank" title="Klik untuk berbagi via Google+"><span>Google</span></a></li>
<li class="share-linkedin"><a rel="nofollow" data-shared="sharing-linkedin-650" class="share-linkedin sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=linkedin&nb=1" target="_blank" title="Klik untuk berbagi di Linkedln"><span>LinkedIn</span></a></li>
<li class="share-end"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tags"><strong>Tagged:</strong><a href="http://www.nyekrip.com/tag/cara-membuat-web/" rel="tag">cara membuat website</a><a href="http://www.nyekrip.com/tag/membuat-website-dengan-html/" rel="tag">membuat website dengan html</a><a href="http://www.nyekrip.com/tag/membuat-website-sederhana/" rel="tag">membuat website sederhana</a></div>
<section id="entry-author" class="clearfix vcard author">
<h3 id="entry-author-title">About The Author</h3>
<div class="gravatar">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=140&d=mm&r=g 2x" class="avatar avatar-70 photo" height="70" width="70"> </div>
<h4 class="fn"><a class="author-link url" href="http://www.nyekrip.com/tentang-nyekrip/" rel="author">
Admin </a></h4>
<div class="entry-author-desc note">
Suka ingin berbagi pengetahuan dan pengalaman nyekrip program
yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan
Web Tutorial berbahasa Indonesia.
<a href="http://www.nyekrip.com/" title="nyekrip web tutorial indonesia">
<strong>Nyekrip - Web Tutorial Indonesia</strong></a> </div>
</section>
</article>
<section id="related-posts" class="clearfix">
<h3 id="related-posts-title">Artikel Terkait</h3>
<ul class="clearfix">
<li class="standard">
<h4 class="entry-title"><a href="http://www.nyekrip.com/cara-membuat-website-terbaru-dan-lengkap/" rel="bookmark" title="Cara Membuat Website Terbaru dan Lengkap">Cara Membuat Website Terbaru dan Lengkap</a></h4>
</li>
<li class="standard">
<h4 class="entry-title"><a href="http://www.nyekrip.com/tahapan-desain-dan-membuat-web/" rel="bookmark" title="Tahapan Desain dan Membuat Web">Tahapan Desain dan Membuat Web</a></h4>
</li>
<li class="standard">
<h4 class="entry-title"><a href="http://www.nyekrip.com/perlengkapan-membuat-web/" rel="bookmark" title="Mengetahui Perlengkapan Membuat Web">Mengetahui Perlengkapan Membuat Web</a></h4>
</li>
</ul></section>
<div id="comments" class="comments-area">
<h3 id="comments-title">Comments</h3>
<ol class="commentlist">
<li class="comment even thread-even depth-1" id="li-comment-51">
<article id="comment-51" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-51" onclick='return addComment.moveForm( "comment-51", "51", "respond", "650" )' aria-label="Balasan untuk Agus">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/c498416fd06f740698fc2a89f93fec85.jpg" srcset="http://0.gravatar.com/avatar/c498416fd06f740698fc2a89f93fec85?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Agus </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-51"><time pubdate="" datetime="2015-02-05T08:30:17+00:00">Februari 5, 2015 at 8:30 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Bermanfaat sekali tutorialnya, sangat jelas.. ditunggu jika ada tutorial membuat website dengan PHP. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-60">
<article id="comment-60" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-60" onclick='return addComment.moveForm( "comment-60", "60", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-60"><time pubdate="" datetime="2015-02-09T08:06:56+00:00">Februari 9, 2015 at 8:06 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Ditunggu Mas untuk website yang menggunakan PHP, Belajar yang statis dulu ya.. hehe..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even depth-2" id="li-comment-1115">
<article id="comment-1115" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1115" onclick='return addComment.moveForm( "comment-1115", "1115", "respond", "650" )' aria-label="Balasan untuk Zahro">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/233b80561417d614b525db005d34c0ec.jpg" srcset="http://2.gravatar.com/avatar/233b80561417d614b525db005d34c0ec?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Zahro </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1115"><time pubdate="" datetime="2015-09-28T14:44:04+00:00">September 28, 2015 at 2:44 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Bermanfaat sekali bagi pemula. Terimakasih ilmunya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-231">
<article id="comment-231" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-231" onclick='return addComment.moveForm( "comment-231", "231", "respond", "650" )' aria-label="Balasan untuk EvoNow">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8c223cf2e18881dca3b987bd41ffd50a.jpg" srcset="http://2.gravatar.com/avatar/8c223cf2e18881dca3b987bd41ffd50a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">EvoNow </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-231"><time pubdate="" datetime="2015-04-07T09:25:15+00:00">April 7, 2015 at 9:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>itu mengunakan WordPress atau blogger?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-233">
<article id="comment-233" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-233" onclick='return addComment.moveForm( "comment-233", "233", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-233"><time pubdate="" datetime="2015-04-08T10:03:21+00:00">April 8, 2015 at 10:03 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>bukan dua-duanya, ini murni html css dari awal. Kalau mau di
aplikasikan di blogger atau wordpress bisa dilakukan dengan merubahnya
menjadi tema atau template.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment odd alt depth-3" id="li-comment-713">
<article id="comment-713" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-713" onclick='return addComment.moveForm( "comment-713", "713", "respond", "650" )' aria-label="Balasan untuk Johan Edwart">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/22efa5ad97767aac00f98fe12f74875a.jpg" srcset="http://2.gravatar.com/avatar/22efa5ad97767aac00f98fe12f74875a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Johan Edwart </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-713"><time pubdate="" datetime="2015-08-07T21:17:36+00:00">Agustus 7, 2015 at 9:17 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cara merubah halaman html murni ke template wordpress gmana min?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-245">
<article id="comment-245" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-245" onclick='return addComment.moveForm( "comment-245", "245", "respond", "650" )' aria-label="Balasan untuk Abednego">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/09a486f352ed8ef6b6ff6c4d4311a645.jpg" srcset="http://0.gravatar.com/avatar/09a486f352ed8ef6b6ff6c4d4311a645?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Abednego </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-245"><time pubdate="" datetime="2015-04-16T05:57:57+00:00">April 16, 2015 at 5:57 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih min, Artikel Ini sangat membantu saya untuk menyelesaikan Tugas Kampus saya..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-365">
<article id="comment-365" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-365" onclick='return addComment.moveForm( "comment-365", "365", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-365"><time pubdate="" datetime="2015-05-12T03:58:11+00:00">Mei 12, 2015 at 3:58 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sama-sama mas, semoga membantu 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-313">
<article id="comment-313" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-313" onclick='return addComment.moveForm( "comment-313", "313", "respond", "650" )' aria-label="Balasan untuk Koko">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0500a4ae54f184cc468e169470394211.jpg" srcset="http://0.gravatar.com/avatar/0500a4ae54f184cc468e169470394211?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Koko </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-313"><time pubdate="" datetime="2015-05-10T08:23:26+00:00">Mei 10, 2015 at 8:23 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Bagaimana cara agar halaman web html5 ini bisa responsive?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-336">
<article id="comment-336" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-336" onclick='return addComment.moveForm( "comment-336", "336", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-336"><time pubdate="" datetime="2015-05-12T03:17:46+00:00">Mei 12, 2015 at 3:17 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>anda bisa mempelajari pada tutorial <a href="http://www.nyekrip.com/cara-membuat-template-web-responsive-html-5/" target="_blank" rel="nofollow">Cara Membuat Template Web Responsive HTML 5</a>, semoga membantu 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-327">
<article id="comment-327" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-327" onclick='return addComment.moveForm( "comment-327", "327", "respond", "650" )' aria-label="Balasan untuk Obat Herbal">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/d57f273007a98ecfb1ad9521868a9933.jpg" srcset="http://1.gravatar.com/avatar/d57f273007a98ecfb1ad9521868a9933?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Obat Herbal </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-327"><time pubdate="" datetime="2015-05-11T08:38:26+00:00">Mei 11, 2015 at 8:38 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih agan atas informasinya 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-339">
<article id="comment-339" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-339" onclick='return addComment.moveForm( "comment-339", "339", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-339"><time pubdate="" datetime="2015-05-12T03:24:05+00:00">Mei 12, 2015 at 3:24 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sama-sama 🙂 thanks udah berkunjung…</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-368">
<article id="comment-368" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-368" onclick='return addComment.moveForm( "comment-368", "368", "respond", "650" )' aria-label="Balasan untuk Agung Royhans">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/01cc53806e86edcc45a248e54374038e.jpg" srcset="http://0.gravatar.com/avatar/01cc53806e86edcc45a248e54374038e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Agung Royhans </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-368"><time pubdate="" datetime="2015-05-13T10:40:21+00:00">Mei 13, 2015 at 10:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Gan caranya menambah kotak search di navigasi menu di website sederhana dengan html</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-372">
<article id="comment-372" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-372" onclick='return addComment.moveForm( "comment-372", "372", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-372"><time pubdate="" datetime="2015-05-13T14:29:25+00:00">Mei 13, 2015 at 2:29 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>untuk membuat search “<a href="http://www.nyekrip.com/cara-membuat-kotak-pencarian-search-html-css/" target="_blank" rel="nofollow">Cara Membuat Kotak Pencarian/Search HTML CSS</a>” setelah itu tinggal letakin di elemen <code>nav</code>, setelah itu atur css. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-388">
<article id="comment-388" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-388" onclick='return addComment.moveForm( "comment-388", "388", "respond", "650" )' aria-label="Balasan untuk ferry">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/a9e2dd8b801e3132e113f20d84bda579.jpg" srcset="http://1.gravatar.com/avatar/a9e2dd8b801e3132e113f20d84bda579?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ferry </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-388"><time pubdate="" datetime="2015-05-17T12:13:22+00:00">Mei 17, 2015 at 12:13 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min tolong buat tutotial website dinamis ? 😀</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-391">
<article id="comment-391" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-391" onclick='return addComment.moveForm( "comment-391", "391", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-391"><time pubdate="" datetime="2015-05-19T00:19:45+00:00">Mei 19, 2015 at 12:19 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>oke, ditunggu ya.. 🙂 lagi fokus menyiapkan tutorial basic dulu.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-414">
<article id="comment-414" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-414" onclick='return addComment.moveForm( "comment-414", "414", "respond", "650" )' aria-label="Balasan untuk hamdan">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/7a5617b21e8fc86b03f3f9b48857a10f.jpg" srcset="http://1.gravatar.com/avatar/7a5617b21e8fc86b03f3f9b48857a10f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">hamdan </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-414"><time pubdate="" datetime="2015-05-25T05:19:38+00:00">Mei 25, 2015 at 5:19 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>lumatan juga min tapi sebagian masih agak kurang paham ,tapi jelas .<br>
bermanfaat juga.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-416">
<article id="comment-416" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-416" onclick='return addComment.moveForm( "comment-416", "416", "respond", "650" )' aria-label="Balasan untuk Aldi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f760e2affad4bccd30b610675b9ba01f.jpg" srcset="http://0.gravatar.com/avatar/f760e2affad4bccd30b610675b9ba01f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Aldi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-416"><time pubdate="" datetime="2015-05-27T11:38:47+00:00">Mei 27, 2015 at 11:38 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>oooo.. jadi kalo mw membuat web sederhana dengan html harus buat css nya juga ya om… kalo gitu mah gampang 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-440">
<article id="comment-440" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-440" onclick='return addComment.moveForm( "comment-440", "440", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-440"><time pubdate="" datetime="2015-06-04T01:13:44+00:00">Juni 4, 2015 at 1:13 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>ya gan, kalau tau dari awalnya, akan mudah.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-455">
<article id="comment-455" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-455" onclick='return addComment.moveForm( "comment-455", "455", "respond", "650" )' aria-label="Balasan untuk Bintang">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/deb5770f7be1b841f8e80d460b920d9e.jpg" srcset="http://1.gravatar.com/avatar/deb5770f7be1b841f8e80d460b920d9e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Bintang </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-455"><time pubdate="" datetime="2015-06-05T07:30:28+00:00">Juni 5, 2015 at 7:30 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan mana part 2nya? kalo web di ueuo.com apa harus copas kode lagi satu2 untuk setiap artikel?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-501">
<article id="comment-501" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-501" onclick='return addComment.moveForm( "comment-501", "501", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-501"><time pubdate="" datetime="2015-06-18T06:15:45+00:00">Juni 18, 2015 at 6:15 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>maaf gan, bulan2 ini gy sbuk kerja nih…</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-459">
<article id="comment-459" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-459" onclick='return addComment.moveForm( "comment-459", "459", "respond", "650" )' aria-label="Balasan untuk ekaputra">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/4babedae15c029c505b64d73c5a28b83.jpg" srcset="http://1.gravatar.com/avatar/4babedae15c029c505b64d73c5a28b83?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ekaputra </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-459"><time pubdate="" datetime="2015-06-07T06:01:34+00:00">Juni 7, 2015 at 6:01 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min, ini buatnya make xampp gak ?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-503">
<article id="comment-503" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-503" onclick='return addComment.moveForm( "comment-503", "503", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-503"><time pubdate="" datetime="2015-06-18T06:16:57+00:00">Juni 18, 2015 at 6:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>g kok gan…. kan g ada php-nya… 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-469">
<article id="comment-469" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-469" onclick='return addComment.moveForm( "comment-469", "469", "respond", "650" )' aria-label="Balasan untuk Fahmi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/b657729afc543e217dcd0f39fe426736.jpg" srcset="http://2.gravatar.com/avatar/b657729afc543e217dcd0f39fe426736?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Fahmi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-469"><time pubdate="" datetime="2015-06-10T13:42:15+00:00">Juni 10, 2015 at 1:42 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>skrip CSSnya di jadiin satu sama html?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-511">
<article id="comment-511" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-511" onclick='return addComment.moveForm( "comment-511", "511", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-511"><time pubdate="" datetime="2015-06-18T06:25:26+00:00">Juni 18, 2015 at 6:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>bisa disatukan atau dipisah dengan metode include… 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-538">
<article id="comment-538" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-538" onclick='return addComment.moveForm( "comment-538", "538", "respond", "650" )' aria-label="Balasan untuk Rita">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/da8cfd00d22b67fce43fdf1964d912b9.jpg" srcset="http://1.gravatar.com/avatar/da8cfd00d22b67fce43fdf1964d912b9?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Rita </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-538"><time pubdate="" datetime="2015-06-23T18:39:47+00:00">Juni 23, 2015 at 6:39 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terima kasih banyak info dan ilmunya min… Sangat membantu sekali~</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-574">
<article id="comment-574" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-574" onclick='return addComment.moveForm( "comment-574", "574", "respond", "650" )' aria-label="Balasan untuk isa">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/72b63ed21b0211c8a037c52094465845.jpg" srcset="http://1.gravatar.com/avatar/72b63ed21b0211c8a037c52094465845?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">isa </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-574"><time pubdate="" datetime="2015-07-02T01:01:34+00:00">Juli 2, 2015 at 1:01 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mas,misalnya kita sudah membuat sketsa nya,trus agar isi article
pasti jatuh di sketsa article nya gimana caranya??pake apa ?di apain?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-590">
<article id="comment-590" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-590" onclick='return addComment.moveForm( "comment-590", "590", "respond", "650" )' aria-label="Balasan untuk Feri A.">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/84914ee280035cb448011ae89bfcbe5b.jpg" srcset="http://2.gravatar.com/avatar/84914ee280035cb448011ae89bfcbe5b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Feri A. </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-590"><time pubdate="" datetime="2015-07-07T12:17:56+00:00">Juli 7, 2015 at 12:17 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min ada script website builder gak tetapi web pribadi dengan format zip</p>
<p>tolong min kalau ada di share terus kasih tau saya ke <a href="mailto:admin@mawar.biz">admin@mawar.biz</a></p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-616">
<article id="comment-616" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-616" onclick='return addComment.moveForm( "comment-616", "616", "respond", "650" )' aria-label="Balasan untuk Dev">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/26e381819efc04a0cce0b2e9e2217ffa.jpg" srcset="http://2.gravatar.com/avatar/26e381819efc04a0cce0b2e9e2217ffa?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Dev </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-616"><time pubdate="" datetime="2015-07-12T16:23:37+00:00">Juli 12, 2015 at 4:23 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min ane agak masih bingung ngebaca css nya, terus beda nya statis
dengan dinamis dimana nya min ? maaf min banyak nanya. ditunggu
kelanjutan tutorialnya min</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-764">
<article id="comment-764" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-764" onclick='return addComment.moveForm( "comment-764", "764", "respond", "650" )' aria-label="Balasan untuk SC">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/9cd32e245d1c2cca7591c599f667696e.jpg" srcset="http://0.gravatar.com/avatar/9cd32e245d1c2cca7591c599f667696e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">SC </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-764"><time pubdate="" datetime="2015-08-18T04:25:11+00:00">Agustus 18, 2015 at 4:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Wah.. tutorialnya sangat bagus bro, terimakasih untuk mau berbagi, saya akan kembali lagi, 😉</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-821">
<article id="comment-821" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-821" onclick='return addComment.moveForm( "comment-821", "821", "respond", "650" )' aria-label="Balasan untuk fachru">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f25ab200eeee8d79a40cbda6a2eacb23.jpg" srcset="http://0.gravatar.com/avatar/f25ab200eeee8d79a40cbda6a2eacb23?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">fachru </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-821"><time pubdate="" datetime="2015-08-26T07:36:53+00:00">Agustus 26, 2015 at 7:36 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min kalo seandaianya tanpa database untuk ke navigasi selanjutnya
contoh dari beranda ke daftar masakan bisa enggak di tampah pake script
untuk halaman daftar masakan?kalo bis,bisa kasih contoh dan harus mulai
scriptnya dari mana?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-836">
<article id="comment-836" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-836" onclick='return addComment.moveForm( "comment-836", "836", "respond", "650" )' aria-label="Balasan untuk Mix">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5edfa9fa0778cf017e2883f86e9a43de.jpg" srcset="http://2.gravatar.com/avatar/5edfa9fa0778cf017e2883f86e9a43de?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Mix </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-836"><time pubdate="" datetime="2015-08-28T23:00:54+00:00">Agustus 28, 2015 at 11:00 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>admin, saya masih belum paham bagaimana caranya membuat web, saya
sudah download notepad dan saya sudah menulis skrip di notepad lalu
selanjutnya bagaimana lg?<br>
untuk bisa menampilkan gambarnya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-843">
<article id="comment-843" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-843" onclick='return addComment.moveForm( "comment-843", "843", "respond", "650" )' aria-label="Balasan untuk Meryn">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/01a2d6841ab335f77d12cf95db364cce.jpg" srcset="http://0.gravatar.com/avatar/01a2d6841ab335f77d12cf95db364cce?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Meryn </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-843"><time pubdate="" datetime="2015-08-29T07:21:50+00:00">Agustus 29, 2015 at 7:21 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mantab banget webnya,,, gan, bisa langsung praktek.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-856">
<article id="comment-856" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-856" onclick='return addComment.moveForm( "comment-856", "856", "respond", "650" )' aria-label="Balasan untuk Koran kompas">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/46023673547c990d785ce216fc575e9f.jpg" srcset="http://1.gravatar.com/avatar/46023673547c990d785ce216fc575e9f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Koran kompas </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-856"><time pubdate="" datetime="2015-08-30T13:52:06+00:00">Agustus 30, 2015 at 1:52 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mantepzz sekali tutorial ya ,<br>
Sangat mudah di pahami<br>
Thanks admin nyekrip.com</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-868">
<article id="comment-868" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-868" onclick='return addComment.moveForm( "comment-868", "868", "respond", "650" )' aria-label="Balasan untuk Jasa Pembuatan Website Palembang">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/ca9e405824cf586b65ad1116c02ca3d9.jpg" srcset="http://0.gravatar.com/avatar/ca9e405824cf586b65ad1116c02ca3d9?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Jasa Pembuatan Website Palembang </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-868"><time pubdate="" datetime="2015-09-01T09:24:25+00:00">September 1, 2015 at 9:24 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Thankyou</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-872">
<article id="comment-872" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-872" onclick='return addComment.moveForm( "comment-872", "872", "respond", "650" )' aria-label="Balasan untuk noni">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/557a7a997913a30b6e35679c0e1dc81a.jpg" srcset="http://2.gravatar.com/avatar/557a7a997913a30b6e35679c0e1dc81a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">noni </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-872"><time pubdate="" datetime="2015-09-02T00:56:13+00:00">September 2, 2015 at 12:56 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan, cara merubah web yg kita coding sendiri jadi template blog gimna yah ??</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-917">
<article id="comment-917" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-917" onclick='return addComment.moveForm( "comment-917", "917", "respond", "650" )' aria-label="Balasan untuk yohan">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/038f785fe26cdf764810294101ce24bc.jpg" srcset="http://0.gravatar.com/avatar/038f785fe26cdf764810294101ce24bc?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">yohan </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-917"><time pubdate="" datetime="2015-09-08T15:15:26+00:00">September 8, 2015 at 3:15 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Sip mas infonya 🙂 moga bermanfaat</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1023">
<article id="comment-1023" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1023" onclick='return addComment.moveForm( "comment-1023", "1023", "respond", "650" )' aria-label="Balasan untuk Game Android">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/780e8c894a5bbb185961f37869d95ce4.jpg" srcset="http://1.gravatar.com/avatar/780e8c894a5bbb185961f37869d95ce4?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Game Android </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1023"><time pubdate="" datetime="2015-09-20T02:18:55+00:00">September 20, 2015 at 2:18 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Pertamax banget mas bro.. ijin coba dulu ya..hehe thanks</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="pingback even thread-odd thread-alt depth-1" id="comment-1046">
<p>Pingback: Cara Membuat Website Sederhana dengan HTML 5 | hacobtewur </p>
</li><!-- #comment-## -->
<li class="pingback odd alt thread-even depth-1" id="comment-1047">
<p>Pingback: Cara Membuat Halaman Web Sederhana Dengan Notepad | hacobtewur </p>
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-1150">
<article id="comment-1150" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1150" onclick='return addComment.moveForm( "comment-1150", "1150", "respond", "650" )' aria-label="Balasan untuk hadroh jepara">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/2c9f689d66b7cc808d4d3011dbdbffd8.jpg" srcset="http://2.gravatar.com/avatar/2c9f689d66b7cc808d4d3011dbdbffd8?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">hadroh jepara </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1150"><time pubdate="" datetime="2015-10-01T04:47:34+00:00">Oktober 1, 2015 at 4:47 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>walaupun kelihatanya agak ribet, tapi gpp min, ane siap nyoba buat web sendiri, makasih infonya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1193">
<article id="comment-1193" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1193" onclick='return addComment.moveForm( "comment-1193", "1193", "respond", "650" )' aria-label="Balasan untuk Ardine">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/bc7331b4526009e23b1051d5970f412b.jpg" srcset="http://2.gravatar.com/avatar/bc7331b4526009e23b1051d5970f412b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ardine </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1193"><time pubdate="" datetime="2015-10-06T07:15:28+00:00">Oktober 6, 2015 at 7:15 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Makaasih yaa, Itu bisa di notepad++ tidak ya? karena saya sudah download notepad++</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1197">
<article id="comment-1197" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1197" onclick='return addComment.moveForm( "comment-1197", "1197", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1197"><time pubdate="" datetime="2015-10-06T10:50:16+00:00">Oktober 6, 2015 at 10:50 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>bisa gan 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1334">
<article id="comment-1334" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1334" onclick='return addComment.moveForm( "comment-1334", "1334", "respond", "650" )' aria-label="Balasan untuk Nurfatimah rani">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/ac41587afa6b06a2117c96e6c67ff2cd.jpg" srcset="http://1.gravatar.com/avatar/ac41587afa6b06a2117c96e6c67ff2cd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Nurfatimah rani </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1334"><time pubdate="" datetime="2015-10-15T08:16:48+00:00">Oktober 15, 2015 at 8:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>figcaption ini untuk apa gan</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1336">
<article id="comment-1336" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1336" onclick='return addComment.moveForm( "comment-1336", "1336", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1336"><time pubdate="" datetime="2015-10-15T10:43:47+00:00">Oktober 15, 2015 at 10:43 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Elemen figcaption merupakan caption atau keterangan untuk elemen figur.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1439">
<article id="comment-1439" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1439" onclick='return addComment.moveForm( "comment-1439", "1439", "respond", "650" )' aria-label="Balasan untuk pernadi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3289e95636cd6dae160cb251c262ea4f.jpg" srcset="http://0.gravatar.com/avatar/3289e95636cd6dae160cb251c262ea4f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">pernadi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1439"><time pubdate="" datetime="2015-10-21T06:31:54+00:00">Oktober 21, 2015 at 6:31 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>kang saya sangat teramat sangat awam.<br>
langkah 1 software yang disedianin apa ajja<br>
terus<br>
utuk langkah kedua awal ngetik kaya bgimana..??<br>
di tunggu ya gan jawabannya langsung lewat sini atau email terimakasih sebelumnya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1445">
<article id="comment-1445" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1445" onclick='return addComment.moveForm( "comment-1445", "1445", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1445"><time pubdate="" datetime="2015-10-21T15:37:17+00:00">Oktober 21, 2015 at 3:37 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>software cuma pakai notepad, dan ketikkan kode html dan css disitu. dan buka pakai browser. coba download dulu aja 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1523">
<article id="comment-1523" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1523" onclick='return addComment.moveForm( "comment-1523", "1523", "respond", "650" )' aria-label="Balasan untuk Made">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/62e0cdeae36b7820767dfe8ca2160b1e.jpg" srcset="http://0.gravatar.com/avatar/62e0cdeae36b7820767dfe8ca2160b1e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Made </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1523"><time pubdate="" datetime="2015-10-24T08:08:36+00:00">Oktober 24, 2015 at 8:08 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mau ngeliat tampilannya di firefox atau chrome gimana caranya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1528">
<article id="comment-1528" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1528" onclick='return addComment.moveForm( "comment-1528", "1528", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1528"><time pubdate="" datetime="2015-10-24T09:42:21+00:00">Oktober 24, 2015 at 9:42 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>download dulu, habis itu buka dengan browser. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1859">
<article id="comment-1859" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1859" onclick='return addComment.moveForm( "comment-1859", "1859", "respond", "650" )' aria-label="Balasan untuk ita handayani">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/10af9e7063957572d699abc34458305f.jpg" srcset="http://1.gravatar.com/avatar/10af9e7063957572d699abc34458305f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ita handayani </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1859"><time pubdate="" datetime="2015-10-30T00:11:50+00:00">Oktober 30, 2015 at 12:11 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terima kasih share ilmunya mas, bermanfaat banget buat saya yang masih dalam belajar, mampir juga mas ke blog saya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-1987">
<article id="comment-1987" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1987" onclick='return addComment.moveForm( "comment-1987", "1987", "respond", "650" )' aria-label="Balasan untuk mqelbajrie">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/b246e7fdca339a59eae186adf8dfbb3e.jpg" srcset="http://2.gravatar.com/avatar/b246e7fdca339a59eae186adf8dfbb3e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">mqelbajrie </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1987"><time pubdate="" datetime="2015-11-17T00:16:01+00:00">November 17, 2015 at 12:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Alhamdulillah ilmu y’ sangat bermanfaat gan, saya mau bertanya
bagaimana cara menyisipkan login di page index ya? di tunggu tutorialnya
ya terima kasih</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1991">
<article id="comment-1991" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1991" onclick='return addComment.moveForm( "comment-1991", "1991", "respond", "650" )' aria-label="Balasan untuk sidik">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/d9ca6401131fb08f9a183a1f54a60b7a.jpg" srcset="http://1.gravatar.com/avatar/d9ca6401131fb08f9a183a1f54a60b7a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">sidik </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1991"><time pubdate="" datetime="2015-11-17T06:45:33+00:00">November 17, 2015 at 6:45 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Sangat bermanfaat nih share nya, tks</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2016">
<article id="comment-2016" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2016" onclick='return addComment.moveForm( "comment-2016", "2016", "respond", "650" )' aria-label="Balasan untuk sinta">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3979576bcdcbd166d005a5b225e1bc52.jpg" srcset="http://0.gravatar.com/avatar/3979576bcdcbd166d005a5b225e1bc52?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">sinta </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2016"><time pubdate="" datetime="2015-11-23T02:37:23+00:00">November 23, 2015 at 2:37 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih artikelnya bermanfaat banget, </p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2038">
<article id="comment-2038" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2038" onclick='return addComment.moveForm( "comment-2038", "2038", "respond", "650" )' aria-label="Balasan untuk Yudadu">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5f731bc0ef50c7fe68463f29c4dad4dd.jpg" srcset="http://2.gravatar.com/avatar/5f731bc0ef50c7fe68463f29c4dad4dd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Yudadu </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2038"><time pubdate="" datetime="2015-11-26T12:23:09+00:00">November 26, 2015 at 12:23 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Min.. kalau udah buat web. Gimana caranya agar bisa diakses all over the world?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2041">
<article id="comment-2041" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2041" onclick='return addComment.moveForm( "comment-2041", "2041", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2041"><time pubdate="" datetime="2015-11-27T01:27:37+00:00">November 27, 2015 at 1:27 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>upload ke web hosting. 🙂 pastikan sudah ada domain.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2094">
<article id="comment-2094" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2094" onclick='return addComment.moveForm( "comment-2094", "2094", "respond", "650" )' aria-label="Balasan untuk Alboin Saragih">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/a9762618932ff5c288728a00ed2dc088.jpg" srcset="http://1.gravatar.com/avatar/a9762618932ff5c288728a00ed2dc088?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Alboin Saragih </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2094"><time pubdate="" datetime="2015-12-05T12:51:32+00:00">Desember 5, 2015 at 12:51 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gak ngerti blasss….aku</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2097">
<article id="comment-2097" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2097" onclick='return addComment.moveForm( "comment-2097", "2097", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2097"><time pubdate="" datetime="2015-12-06T00:54:12+00:00">Desember 6, 2015 at 12:54 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>g ngerti yang dimana? jangan2 dari awal sudah tidak mengerti? silahkan belajar membuat halaman web dulu… jangan tergesa-gesa… 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2101">
<article id="comment-2101" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2101" onclick='return addComment.moveForm( "comment-2101", "2101", "respond", "650" )' aria-label="Balasan untuk tya">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/e5ea643259527afe656327c1da9f5e9e.jpg" srcset="http://2.gravatar.com/avatar/e5ea643259527afe656327c1da9f5e9e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">tya </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2101"><time pubdate="" datetime="2015-12-06T12:54:57+00:00">Desember 6, 2015 at 12:54 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mau nanya, punya contoh website yang desain halaman postingnya keren ga?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2107">
<article id="comment-2107" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2107" onclick='return addComment.moveForm( "comment-2107", "2107", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2107"><time pubdate="" datetime="2015-12-07T14:30:42+00:00">Desember 7, 2015 at 2:30 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>waduh saya g ada yang seperti itu, pokonya enak dibaca aja kalau saya.. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2104">
<article id="comment-2104" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2104" onclick='return addComment.moveForm( "comment-2104", "2104", "respond", "650" )' aria-label="Balasan untuk Grosir Tas Kertas Moca">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/369ebfaad15a5aef815d2f34f3d8bd63.png" srcset="http://0.gravatar.com/avatar/369ebfaad15a5aef815d2f34f3d8bd63?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Grosir Tas Kertas Moca </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2104"><time pubdate="" datetime="2015-12-07T02:06:20+00:00">Desember 7, 2015 at 2:06 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Untuk Backend sendiri kita menggunakan apa?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2108">
<article id="comment-2108" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2108" onclick='return addComment.moveForm( "comment-2108", "2108", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2108"><time pubdate="" datetime="2015-12-07T14:33:08+00:00">Desember 7, 2015 at 2:33 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>di tutorial ini backend belum ada, murni html dan css… untuk kedepannya bisa pakai php atau asp.. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2151">
<article id="comment-2151" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2151" onclick='return addComment.moveForm( "comment-2151", "2151", "respond", "650" )' aria-label="Balasan untuk wisnu">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/fc9978a655c1272a52be28fab507244b.jpg" srcset="http://0.gravatar.com/avatar/fc9978a655c1272a52be28fab507244b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">wisnu </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2151"><time pubdate="" datetime="2015-12-14T07:48:51+00:00">Desember 14, 2015 at 7:48 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>kalau coding searchnya gimana ya?<br>
saat mau akan search dan nanti begitu di klik link yang dituju maka akan menuju ke link yang di klik</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2171">
<article id="comment-2171" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2171" onclick='return addComment.moveForm( "comment-2171", "2171", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2171"><time pubdate="" datetime="2015-12-17T16:16:39+00:00">Desember 17, 2015 at 4:16 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>koding search yang mana nih? kan ini buat web sederhana, belum kearah cms..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2245">
<article id="comment-2245" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2245" onclick='return addComment.moveForm( "comment-2245", "2245", "respond", "650" )' aria-label="Balasan untuk enas nasrudin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/c042bc86562a4afa6238fbe01da663a8.jpg" srcset="http://0.gravatar.com/avatar/c042bc86562a4afa6238fbe01da663a8?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">enas nasrudin </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2245"><time pubdate="" datetime="2016-01-04T00:22:17+00:00">Januari 4, 2016 at 12:22 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan ane dah download file template html5 yang sudah jadi, seperti contoh di gambar ini isi file nya <a href="https://goo.gl/RmQVQF" rel="nofollow">https://goo.gl/RmQVQF</a>,
gimana sih gan cara masang nya isi file2 ini harus dipasang gimana ya
ane bingung, rencana sih mau ganti template blogger sama template yg
html5</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2279">
<article id="comment-2279" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2279" onclick='return addComment.moveForm( "comment-2279", "2279", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2279"><time pubdate="" datetime="2016-01-16T06:40:37+00:00">Januari 16, 2016 at 6:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>wah kalau mau ke blogger ya harus disesuaikan dengan pengaturan
skrip template pada blogger… coba pelajari dulu cara membuat template
blogger. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2258">
<article id="comment-2258" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2258" onclick='return addComment.moveForm( "comment-2258", "2258", "respond", "650" )' aria-label="Balasan untuk Raddent Barat">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/fd5cee7d581facf33db1436d37b441fd.jpg" srcset="http://0.gravatar.com/avatar/fd5cee7d581facf33db1436d37b441fd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Raddent Barat </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2258"><time pubdate="" datetime="2016-01-10T15:49:37+00:00">Januari 10, 2016 at 3:49 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Alhamdulillah , Makasih Mimin , Buat UAS inih 😀<br>
hihii</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2259">
<article id="comment-2259" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2259" onclick='return addComment.moveForm( "comment-2259", "2259", "respond", "650" )' aria-label="Balasan untuk Diana Rosi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f4a0750c42a010e84250929ba534e20a.jpg" srcset="http://0.gravatar.com/avatar/f4a0750c42a010e84250929ba534e20a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Diana Rosi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2259"><time pubdate="" datetime="2016-01-11T02:22:56+00:00">Januari 11, 2016 at 2:22 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mas maaf ni kenapa untuk image bakcground nyas gak mau keganti yaaa.???</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2321">
<article id="comment-2321" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2321" onclick='return addComment.moveForm( "comment-2321", "2321", "respond", "650" )' aria-label="Balasan untuk Rental Speedboat Jakarta">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/ea25f071ed288e810545384a6cdf1683.jpg" srcset="http://2.gravatar.com/avatar/ea25f071ed288e810545384a6cdf1683?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Rental Speedboat Jakarta </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2321"><time pubdate="" datetime="2016-01-24T20:27:12+00:00">Januari 24, 2016 at 8:27 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Thanks berat Mas. Informasinya berguna banget</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2334">
<article id="comment-2334" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2334" onclick='return addComment.moveForm( "comment-2334", "2334", "respond", "650" )' aria-label="Balasan untuk Wahyu Himawan (@whyu46)">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8095da7537cefe07ff1274e3dfbb88f4.jpg" srcset="http://2.gravatar.com/avatar/8095da7537cefe07ff1274e3dfbb88f4?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Wahyu Himawan (@whyu46) </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2334"><time pubdate="" datetime="2016-01-27T06:40:45+00:00">Januari 27, 2016 at 6:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan kalo uda bikin sesuai tutorial yg agan kasih. lalu domainnya mau di bikin .com gmn ya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2520">
<article id="comment-2520" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2520" onclick='return addComment.moveForm( "comment-2520", "2520", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2520"><time pubdate="" datetime="2016-03-09T03:41:31+00:00">Maret 9, 2016 at 3:41 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>ikuti tutorial terbaru, cara membuat website terbaru, search aja di web ini 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2336">
<article id="comment-2336" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2336" onclick='return addComment.moveForm( "comment-2336", "2336", "respond", "650" )' aria-label="Balasan untuk Arsala">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8797a42f0e1ae44694cbbdd33e720ce9.jpg" srcset="http://2.gravatar.com/avatar/8797a42f0e1ae44694cbbdd33e720ce9?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Arsala </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2336"><time pubdate="" datetime="2016-01-27T23:15:29+00:00">Januari 27, 2016 at 11:15 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih tipsnya mas<br>
mas saya mau tanya, kalau bikin web itu butuh domain sama hosting. yang dua ini apa si fungsinya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2351">
<article id="comment-2351" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2351" onclick='return addComment.moveForm( "comment-2351", "2351", "respond", "650" )' aria-label="Balasan untuk cahaya istiqomah">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8ca172cd62058c5619a1a04c7f174f31.jpg" srcset="http://2.gravatar.com/avatar/8ca172cd62058c5619a1a04c7f174f31?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">cahaya istiqomah </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2351"><time pubdate="" datetime="2016-02-02T01:55:34+00:00">Februari 2, 2016 at 1:55 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Jazakumullah atas share ilmunya !!!!</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2378">
<article id="comment-2378" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2378" onclick='return addComment.moveForm( "comment-2378", "2378", "respond", "650" )' aria-label="Balasan untuk Egi Andriana">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/fca413b65ab85d5b11fbc32a89df1047.jpg" srcset="http://0.gravatar.com/avatar/fca413b65ab85d5b11fbc32a89df1047?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Egi Andriana </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2378"><time pubdate="" datetime="2016-02-13T08:54:08+00:00">Februari 13, 2016 at 8:54 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>klo content”nya kaya daftar masakahndll ingin bisa di klik terus
setelah di klik ke page itu tapi background tetap seperti beranda gimana
ya caranya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2447">
<article id="comment-2447" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2447" onclick='return addComment.moveForm( "comment-2447", "2447", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2447"><time pubdate="" datetime="2016-02-28T05:10:49+00:00">Februari 28, 2016 at 5:10 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>pingin cepat ya pakai wordpress 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2417">
<article id="comment-2417" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2417" onclick='return addComment.moveForm( "comment-2417", "2417", "respond", "650" )' aria-label="Balasan untuk Honda Surabaya">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/40142a46563f582b07cbe99e63e433a3.jpg" srcset="http://1.gravatar.com/avatar/40142a46563f582b07cbe99e63e433a3?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Honda Surabaya </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2417"><time pubdate="" datetime="2016-02-26T08:38:32+00:00">Februari 26, 2016 at 8:38 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Sangat berguna kak, jadi pengen belajar HTML lagi.. salam </p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2424">
<article id="comment-2424" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2424" onclick='return addComment.moveForm( "comment-2424", "2424", "respond", "650" )' aria-label="Balasan untuk fikiefendi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/12f49f954f200c0a2bb8acf1553be16c.jpg" srcset="http://1.gravatar.com/avatar/12f49f954f200c0a2bb8acf1553be16c?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">fikiefendi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2424"><time pubdate="" datetime="2016-02-27T08:27:52+00:00">Februari 27, 2016 at 8:27 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mantab juga nih cara membuat layoutnya, update terus min hihihi.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2427">
<article id="comment-2427" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2427" onclick='return addComment.moveForm( "comment-2427", "2427", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2427"><time pubdate="" datetime="2016-02-28T04:25:13+00:00">Februari 28, 2016 at 4:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>terimakasih sudah berkunjung 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2486">
<article id="comment-2486" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2486" onclick='return addComment.moveForm( "comment-2486", "2486", "respond", "650" )' aria-label="Balasan untuk Internetaann">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/b76b7c47be7a46b5100ba2dcc1981f69.jpg" srcset="http://2.gravatar.com/avatar/b76b7c47be7a46b5100ba2dcc1981f69?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Internetaann </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2486"><time pubdate="" datetime="2016-03-04T16:58:21+00:00">Maret 4, 2016 at 4:58 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cepet paham, sederhana trus juga sangat berkelas. thnks min !</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2548">
<article id="comment-2548" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2548" onclick='return addComment.moveForm( "comment-2548", "2548", "respond", "650" )' aria-label="Balasan untuk Ferart">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5c4d00d1c724063b6d7f7a46f0a91479.jpg" srcset="http://2.gravatar.com/avatar/5c4d00d1c724063b6d7f7a46f0a91479?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ferart </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2548"><time pubdate="" datetime="2016-03-10T08:16:10+00:00">Maret 10, 2016 at 8:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Min…</p>
<p>Kalo buat search dan model2 log in pake html gimana?</p>
<p>UpDate Min tutorialnya hehehe 😀</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2569">
<article id="comment-2569" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2569" onclick='return addComment.moveForm( "comment-2569", "2569", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2569"><time pubdate="" datetime="2016-03-13T13:17:26+00:00">Maret 13, 2016 at 1:17 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>buat form login? ada kok tutorialnya di web nyekrip. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2613">
<article id="comment-2613" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2613" onclick='return addComment.moveForm( "comment-2613", "2613", "respond", "650" )' aria-label="Balasan untuk frely">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0f2e5e7cf99a6a32bdb9010771eb6705.jpg" srcset="http://0.gravatar.com/avatar/0f2e5e7cf99a6a32bdb9010771eb6705?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">frely </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2613"><time pubdate="" datetime="2016-03-22T10:40:24+00:00">Maret 22, 2016 at 10:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min fungsinya buat apa dah????</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2616">
<article id="comment-2616" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2616" onclick='return addComment.moveForm( "comment-2616", "2616", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2616"><time pubdate="" datetime="2016-03-22T13:36:23+00:00">Maret 22, 2016 at 1:36 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>fungsinya untuk belajar membuat web dari awal, maka skill html
dan css harus sudah ada. dan melalui tutorial ini diharapkan akan
mempunyai skill basic dulu. jika anda ingin cepat dan g begitu pusing,
silahkan pakai blogger atau template gratisan, dijamin g bakal pusing,
tinggal pakai dan tidak usah nyekrip. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2718">
<article id="comment-2718" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2718" onclick='return addComment.moveForm( "comment-2718", "2718", "respond", "650" )' aria-label="Balasan untuk Nazriel">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/c7ac5f6ef73f63aff30bba4532e1b3fd.jpg" srcset="http://0.gravatar.com/avatar/c7ac5f6ef73f63aff30bba4532e1b3fd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Nazriel </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2718"><time pubdate="" datetime="2016-04-13T16:03:30+00:00">April 13, 2016 at 4:03 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terima kasih gan, disini selalu lengkap dan deatil dalam membuat
postingan, sehingga bisa dipelajari dengan seksama, hehehe… Maju terus
nyekrip.com</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2765">
<article id="comment-2765" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2765" onclick='return addComment.moveForm( "comment-2765", "2765", "respond", "650" )' aria-label="Balasan untuk Doa meminta rezeki">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8d7551aba8def6027d22f473d2de61d7.jpg" srcset="http://2.gravatar.com/avatar/8d7551aba8def6027d22f473d2de61d7?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Doa meminta rezeki </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2765"><time pubdate="" datetime="2016-04-29T11:37:33+00:00">April 29, 2016 at 11:37 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mantap gan artikelnya,,,saya tunggu yg terbaru?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2794">
<article id="comment-2794" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2794" onclick='return addComment.moveForm( "comment-2794", "2794", "respond", "650" )' aria-label="Balasan untuk Ensiklopediasli">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0952402abd2dd49c4ed35a247d810b48.jpg" srcset="http://0.gravatar.com/avatar/0952402abd2dd49c4ed35a247d810b48?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ensiklopediasli </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2794"><time pubdate="" datetime="2016-05-02T15:35:11+00:00">Mei 2, 2016 at 3:35 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sangat bermanfaat sekali, izin copas mas admin 😀</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment odd alt depth-2" id="li-comment-2815">
<article id="comment-2815" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2815" onclick='return addComment.moveForm( "comment-2815", "2815", "respond", "650" )' aria-label="Balasan untuk abi manyu">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0ab5d26480674dce9fdb968cfbf442bd.jpg" srcset="http://0.gravatar.com/avatar/0ab5d26480674dce9fdb968cfbf442bd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">abi manyu </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2815"><time pubdate="" datetime="2016-05-09T15:25:28+00:00">Mei 9, 2016 at 3:25 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>itu tutor nomor 1 gmana ya??</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2800">
<article id="comment-2800" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2800" onclick='return addComment.moveForm( "comment-2800", "2800", "respond", "650" )' aria-label="Balasan untuk amant">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/546de15727c0443e07ba4680fa1327fc.jpg" srcset="http://2.gravatar.com/avatar/546de15727c0443e07ba4680fa1327fc?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">amant </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2800"><time pubdate="" datetime="2016-05-05T03:50:12+00:00">Mei 5, 2016 at 3:50 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sangat membantu menambah inspirasi thanks lot gan</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2849">
<article id="comment-2849" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2849" onclick='return addComment.moveForm( "comment-2849", "2849", "respond", "650" )' aria-label="Balasan untuk Andi Mariadi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f05943171627601f4ab8c979ed47fa8b.jpg" srcset="http://0.gravatar.com/avatar/f05943171627601f4ab8c979ed47fa8b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Andi Mariadi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2849"><time pubdate="" datetime="2016-05-21T13:32:39+00:00">Mei 21, 2016 at 1:32 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Keren mas, akhirnya saya bisa juga nih belajar HTML walaupun cuma sedikit-sedikit..hhe</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2893">
<article id="comment-2893" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2893" onclick='return addComment.moveForm( "comment-2893", "2893", "respond", "650" )' aria-label="Balasan untuk indi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/75922052adfabf938abf82b8025602ff.jpg" srcset="http://1.gravatar.com/avatar/75922052adfabf938abf82b8025602ff?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">indi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2893"><time pubdate="" datetime="2016-06-04T14:32:03+00:00">Juni 4, 2016 at 2:32 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>fungsi section diatas apakah pengganti div ya mas?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2908">
<article id="comment-2908" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2908" onclick='return addComment.moveForm( "comment-2908", "2908", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2908"><time pubdate="" datetime="2016-06-11T13:38:31+00:00">Juni 11, 2016 at 1:38 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>iya bener mas… 🙂 penggunaan div semakin di perjelas di html 5</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3009">
<article id="comment-3009" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3009" onclick='return addComment.moveForm( "comment-3009", "3009", "respond", "650" )' aria-label="Balasan untuk obat jantung alami">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/6d51d7ae22d68b98718f49977ad5936f.jpg" srcset="http://0.gravatar.com/avatar/6d51d7ae22d68b98718f49977ad5936f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">obat jantung alami </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3009"><time pubdate="" datetime="2016-07-10T10:25:15+00:00">Juli 10, 2016 at 10:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Artikel yang sangat membantu admin, saya sangat terbantu setelah membacanya. Terimakasih atas tip dan cara-caranya.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3219">
<article id="comment-3219" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3219" onclick='return addComment.moveForm( "comment-3219", "3219", "respond", "650" )' aria-label="Balasan untuk wok kian gie warsi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/eda8afff6ecec224fa50ed75172a898c.jpg" srcset="http://2.gravatar.com/avatar/eda8afff6ecec224fa50ed75172a898c?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">wok kian gie warsi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3219"><time pubdate="" datetime="2016-10-10T19:38:36+00:00">Oktober 10, 2016 at 7:38 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>meski msh dalam bentuk web sederhana namun untuk pemula itu sudah
sangat membantu sekali. terima kasih banyak atas ilmu yg sudah di share
di sini. yuk kunjungi web saya hxxp://www.obat-pelancarhaid.info buat
kalian yang mempunyai trouble soal siklus menstruasi Anda. dan saya
ucapkan terima kasih banyak buat kalian yang sudah mampir di web saya.
salam kenal semuanya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3273">
<article id="comment-3273" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3273" onclick='return addComment.moveForm( "comment-3273", "3273", "respond", "650" )' aria-label="Balasan untuk paket umroh murah 2017">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/2d5ba8431858c4c834503e651b968e68.jpg" srcset="http://2.gravatar.com/avatar/2d5ba8431858c4c834503e651b968e68?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">paket umroh murah 2017 </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3273"><time pubdate="" datetime="2016-10-28T23:35:15+00:00">Oktober 28, 2016 at 11:35 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Artikelnya yang sangat membantu setelah saya baca dan pelajari
sangat membantu sy yang lagi banyak belajar .semoga terus bisa berkarya
dan memberikan keilmuaann.Terimakasih atas tip dan cara-caranya.semoga
sukses slalu.<br>
salam kenal salam silahturahmi wahyudin 081283893898<br>
hxxp://www.paketumrohmurah2017.com</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3284">
<article id="comment-3284" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3284" onclick='return addComment.moveForm( "comment-3284", "3284", "respond", "650" )' aria-label="Balasan untuk Zulkipli">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/05e59d37a4c64bfee6da6abfb77c40be.jpg" srcset="http://0.gravatar.com/avatar/05e59d37a4c64bfee6da6abfb77c40be?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Zulkipli </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3284"><time pubdate="" datetime="2016-11-04T00:17:21+00:00">November 4, 2016 at 12:17 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Trim’s ala dulu atas petunjuknya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3376">
<article id="comment-3376" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3376" onclick='return addComment.moveForm( "comment-3376", "3376", "respond", "650" )' aria-label="Balasan untuk Rand">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/17bacffb9d64214724bd73b9da89953b.jpg" srcset="http://1.gravatar.com/avatar/17bacffb9d64214724bd73b9da89953b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Rand </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3376"><time pubdate="" datetime="2016-12-17T05:06:36+00:00">Desember 17, 2016 at 5:06 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cara beri link sob?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3383">
<article id="comment-3383" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3383" onclick='return addComment.moveForm( "comment-3383", "3383", "respond", "650" )' aria-label="Balasan untuk Alghifari Fikri Santoso">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f5d4227989feecbd5d4c1302cc586d39.jpg" srcset="http://0.gravatar.com/avatar/f5d4227989feecbd5d4c1302cc586d39?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Alghifari Fikri Santoso </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3383"><time pubdate="" datetime="2017-01-13T08:57:47+00:00">Januari 13, 2017 at 8:57 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>artikelnya sangat membantu dan bermanfaat sekali, menarik untuk dibaca.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3409">
<article id="comment-3409" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3409" onclick='return addComment.moveForm( "comment-3409", "3409", "respond", "650" )' aria-label="Balasan untuk Asyarh">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/e76fe440d8ff7de13b13fea8a6e0973f.jpg" srcset="http://2.gravatar.com/avatar/e76fe440d8ff7de13b13fea8a6e0973f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Asyarh </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3409"><time pubdate="" datetime="2017-02-08T11:12:02+00:00">Februari 8, 2017 at 11:12 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Haha..<br>
memang mantap artkelnya guys, aku bisa mulai ngedit template yang
didownload dari pihak ketiga. Makasih min, maulah baca artikel html
lainnya. Responnya min.. hehe</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3429">
<article id="comment-3429" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3429" onclick='return addComment.moveForm( "comment-3429", "3429", "respond", "650" )' aria-label="Balasan untuk ari">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5d9c7f31876014599dfd7036c5f6ee12.jpg" srcset="http://2.gravatar.com/avatar/5d9c7f31876014599dfd7036c5f6ee12?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ari </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3429"><time pubdate="" datetime="2017-02-18T23:51:21+00:00">Februari 18, 2017 at 11:51 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mantap gan tutorialnya buat newbe seperti saya, ijin comot gan.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3486">
<article id="comment-3486" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3486" onclick='return addComment.moveForm( "comment-3486", "3486", "respond", "650" )' aria-label="Balasan untuk Ari Kurniawan">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/4097804ba69ff0c6a1e9c161270b7b1f.jpg" srcset="http://1.gravatar.com/avatar/4097804ba69ff0c6a1e9c161270b7b1f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ari Kurniawan </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3486"><time pubdate="" datetime="2017-03-21T07:03:49+00:00">Maret 21, 2017 at 7:03 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cara membuat website dinamis dengan template html yang kita
download bagaimana? biar bisa nge blog gtu? tapi murni di website kita
bukan download script macam worpress???</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-3509">
<article id="comment-3509" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3509" onclick='return addComment.moveForm( "comment-3509", "3509", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3509"><time pubdate="" datetime="2017-04-02T04:33:58+00:00">April 2, 2017 at 4:33 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>yang jelas buat dulu databasenya untuk post yang akan
ditampilkan, selanjutnya atur atau buat kode php untuk memunculkan
sesuai isi database..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-3498">
<article id="comment-3498" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3498" onclick='return addComment.moveForm( "comment-3498", "3498", "respond", "650" )' aria-label="Balasan untuk spacexzone">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/25bdd4d97de041bfc30392b355bf592d.jpg" srcset="http://2.gravatar.com/avatar/25bdd4d97de041bfc30392b355bf592d?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">spacexzone </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3498"><time pubdate="" datetime="2017-03-27T15:02:58+00:00">Maret 27, 2017 at 3:02 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mantab min , lumayan buat tugas kuliah hehe<br>
kunjungi juga hxxps://spacexzone.com/</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .commentlist -->
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Tinggalkan Balasan <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#respond" style="display:none;">Batalkan balasan</a></small></h3> <form action="http://www.nyekrip.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
<p class="comment-notes"><span id="email-notes">Alamat surel Anda tidak akan dipublikasikan.</span> Ruas yang wajib ditandai <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Komentar</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p><p></p><div id="anr_captcha_field_1"><div style="width: 304px; height: 78px;"><div><iframe name="undefined" scrolling="no" title="recaptcha widget" src="is_files/anchor.htm" frameborder="0" height="78" width="304"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea></div></div><noscript>
<div>
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6Le1-g8TAAAAADja8zaYxRTmQ6Vf6u9HbsW-Ult8"
frameborder="0" scrolling="no"
style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
</div>
<div style="width: 300px; height: 60px; border-style: none;
bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response-1" name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
margin: 10px 25px; padding: 0px; resize: none;" ></textarea>
</div>
</div>
</noscript><p></p><p class="comment-form-author"><label for="author">Nama <span class="required">*</span></label> <input id="author" name="author" size="30" maxlength="245" aria-required="true" required="required" type="text"></p>
<p class="comment-form-email"><label for="email">Surel <span class="required">*</span></label> <input id="email" name="email" size="30" maxlength="100" aria-describedby="email-notes" aria-required="true" required="required" type="text"></p>
<p class="comment-form-url"><label for="url">Situs Web</label> <input id="url" name="url" size="30" maxlength="200" type="text"></p>
<p class="form-submit"><input name="submit" id="submit" class="submit" value="Kirim Komentar" type="submit"> <input name="comment_post_ID" value="650" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
</p><p style="display: none;"><input id="akismet_comment_nonce" name="akismet_comment_nonce" value="4c68739ee1" type="hidden"></p><p class="comment-subscription-form"><input name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" type="checkbox"> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Beritahu saya akan tindak lanjut komentar melalui surel.</label></p><p class="comment-subscription-form"><input name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" type="checkbox"> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Beritahu saya akan tulisan baru melalui surel.</label></p><p style="display: none;"></p> <input id="ak_js" name="ak_js" value="1491389183233" type="hidden"></form>
</div><!-- #respond -->
</div><!-- #comments .comments-area -->
</section>
<!-- #content -->
<!-- #sidebar -->
<aside id="sidebar" role="complementary">
<div id="blog_subscription-2" class="widget jetpack_subscription_widget clearfix"><h4 class="widget-title"><span>Berlangganan</span></h4>
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
<div id="subscribe-text"><p>Silahkan masukkan Email Anda untuk Berlangganan Tutorial terbaru dari blog sederhana ini :) . Happy Nyekrip!</p>
</div> <p id="subscribe-email">
<label style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;" id="jetpack-subscribe-label" for="subscribe-field-blog_subscription-2">
Email .. </label>
<input name="email" required="required" class="required" id="subscribe-field-blog_subscription-2" placeholder="Email .." type="email">
</p>
<p id="subscribe-submit">
<input name="action" value="subscribe" type="hidden">
<input name="source" value="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/" type="hidden">
<input name="sub-type" value="widget" type="hidden">
<input name="redirect_fragment" value="blog_subscription-2" type="hidden">
<input value="Berlangganan" name="jetpack_subscriptions_widget" type="submit">
</p>
</form>
<script>
/*
Custom functionality for safari and IE
*/
(function( d ) {
// In case the placeholder functionality is available we remove labels
if ( ( 'placeholder' in d.createElement( 'input' ) ) ) {
var label = d.querySelector( 'label[for=subscribe-field-blog_subscription-2]' );
label.style.clip = 'rect(1px, 1px, 1px, 1px)';
label.style.position = 'absolute';
label.style.height = '1px';
label.style.width = '1px';
label.style.overflow = 'hidden';
}
// Make sure the email value is filled in before allowing submit
var form = d.getElementById('subscribe-blog-blog_subscription-2'),
input = d.getElementById('subscribe-field-blog_subscription-2'),
handler = function( event ) {
if ( '' === input.value ) {
input.focus();
if ( event.preventDefault ){
event.preventDefault();
}
return false;
}
};
if ( window.addEventListener ) {
form.addEventListener( 'submit', handler, false );
} else {
form.attachEvent( 'onsubmit', handler );
}
})( document );
</script>
</div><div id="st_popular_articles_widget-2" class="widget st_popular_articles_widget clearfix">
<h4 class="widget-title"><span>Tutorial Populer</span></h4>
<ul class="clearfix">
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-blog-di-blogspot-lengkap-gambar/" rel="bookmark">Cara Membuat Blog di Blogspot Lengkap Gambar</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-menu-dropdown-sederhana/" rel="bookmark">Cara Membuat Menu Dropdown Sederhana</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-form-login-dengan-php-mysql/" rel="bookmark">Cara Membuat Form Login Dengan PHP MySQL</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-blog-di-wordpress-gratis-lengkap/" rel="bookmark">Cara Membuat Blog di WordPress Gratis Lengkap</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/membuat-form-html-dg-post-dan-get-di-php/" rel="bookmark">Cara Membuat Form HTML POST dan GET PHP</a>
</li>
</ul>
</div><div id="categories-3" class="widget widget_categories clearfix"><h4 class="widget-title"><span>Tutorial Kategori</span></h4> <ul>
<li class="cat-item cat-item-52"><a href="http://www.nyekrip.com/category/blog/" title="Kategori Blog - Nyekrip | Dalam kategori ini akan membahas tentang tutorial seputar Blog dan hal-hal lain yang berkaitan atau berhubungan.">Blog</a>
</li>
<li class="cat-item cat-item-28"><a href="http://www.nyekrip.com/category/css/" title="Kategori CSS - Nyekrip | Dalam kategori ini akan membahas tentang tutorial CSS dan hal-hal lain yang berkaitan atau berhubungan.">CSS</a>
</li>
<li class="cat-item cat-item-11"><a href="http://www.nyekrip.com/category/html/" title="Kategori HTML - Nyekrip | Dalam kategori ini akan membahas tentang tutorial HTML dan hal-hal lain yang berkaitan atau berhubungan.">HTML</a>
</li>
<li class="cat-item cat-item-40"><a href="http://www.nyekrip.com/category/internet/" title="Kategori Internet - Nyekrip | Dalam kategori ini akan membahas tentang tutorial Internet dan hal-hal lain yang berkaitan atau berhubungan.">Internet</a>
</li>
<li class="cat-item cat-item-3"><a href="http://www.nyekrip.com/category/nyekrip/" title="Kategori Nyekrip - Nyekrip | Dalam kategori ini akan membahas tentang tutorial Nyekrip dan hal-hal lain yang berkaitan atau berhubungan.">Nyekrip</a>
</li>
<li class="cat-item cat-item-33"><a href="http://www.nyekrip.com/category/php/" title="Kategori PHP - Nyekrip | Dalam kategori ini akan membahas tentang tutorial PHP dan hal-hal lain yang berkaitan atau berhubungan.">PHP</a>
</li>
<li class="cat-item cat-item-43"><a href="http://www.nyekrip.com/category/website/" title="Kategori Website - Nyekrip | Dalam kategori ini akan membahas tentang tutorial Website dan hal-hal lain yang berkaitan atau berhubungan.">Website</a>
</li>
</ul>
</div><div id="st_articles_widget-2" class="widget st_articles_widget clearfix">
<h4 class="widget-title"><span>Tutorial Terbaru</span></h4>
<ul class="clearfix">
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-mempercepat-loading-website-blog-lengkap/" rel="bookmark">Cara Mempercepat Loading Website Blog Lengkap</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/persamaan-dan-perbedaan-blog-website/" rel="bookmark">Persamaan dan Perbedaan Blog dengan Website</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-website-terbaru-dan-lengkap/" rel="bookmark">Cara Membuat Website Terbaru dan Lengkap</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-konten-post-seo-dan-menarik/" rel="bookmark">Cara Membuat Konten Post SEO dan Menarik</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-system-dengan-object-oriented/" rel="bookmark">Cara Membuat System dengan Object Oriented</a>
</li>
</ul>
</div><!-- #sidebar -->
</aside>
</div>
<!-- .container -->
</div>
<!-- /#primary -->
<!-- #footer-widgets -->
<!-- /#footer-widgets -->
<!-- #site-footer -->
<footer id="site-footer" class="clearfix" role="contentinfo">
<div class="container">
<nav id="footer-nav" role="navigation">
<ul id="menu-footer-menu" class="nav-footer clearfix"><li id="menu-item-901" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-901"><a href="http://www.nyekrip.com/kontak-kami/">Kontak Kami</a></li>
<li id="menu-item-430" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-430"><a href="http://www.nyekrip.com/disclaimer/">Disclaimer</a></li>
<li id="menu-item-429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-429"><a href="http://www.nyekrip.com/kebijakan-privasi/">Kebijakan Privasi</a></li>
<li id="menu-item-431" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-431"><a href="http://www.dmca.com/Protection/Status.aspx?ID=4ac5986f-d0ce-4be1-80ec-28ef79dc1bcb">DMCA</a></li>
</ul> </nav>
<small id="copyright">
<div class="copyfoot">© Copyright 2015, <a title="nyekrip web tutorial indonesia" href="http://www.nyekrip.com/">
<strong>Nyekrip - Web Tutorial Indonesia</strong></a></div> </small>
</div>
</footer>
<!-- /#site-footer -->
<!-- /#site-container -->
</div>
<script type="text/javascript">
var anr_onloadCallback = function() {
var anr_captcha_1;
anr_captcha_1 = grecaptcha.render('anr_captcha_field_1', {
'sitekey' : '6Le1-g8TAAAAADja8zaYxRTmQ6Vf6u9HbsW-Ult8',
'theme' : 'light',
'size' : 'normal'
});
};
</script>
<script src="is_files/api.js" async="" defer="defer">
</script>
<script type="text/javascript">
window.WPCOM_sharing_counts = {"http:\/\/www.nyekrip.com\/cara-membuat-website-sederhana-dengan-html-5\/":650};
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-facebook' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
return false;
});
});
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-twitter' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' );
return false;
});
});
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-google-plus-1' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomgoogle-plus-1', 'menubar=1,resizable=1,width=480,height=550' );
return false;
});
});
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-linkedin' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' );
return false;
});
});
</script>
<script type="text/javascript" src="is_files/form.js"></script>
<script type="text/javascript" src="is_files/jquery.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptchaEmpty":"Please verify that you are not a robot.","sending":"Sedang mengirimkan ...","cached":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/scripts.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var JQLBSettings = {"fitToScreen":"1","resizeSpeed":"0","displayDownloadLink":"0","navbarOnTop":"1","loopImages":"","resizeCenter":"","marginSize":"0","linkTarget":"","help":"","prevLinkTitle":"previous image","nextLinkTitle":"next image","prevLinkText":"\u00ab Previous","nextLinkText":"Next \u00bb","closeTitle":"close image gallery","image":"Image ","of":" of ","download":"Download","jqlb_overlay_opacity":"80","jqlb_overlay_color":"#000000","jqlb_overlay_close":"1","jqlb_border_width":"10","jqlb_border_color":"#ffffff","jqlb_border_radius":"0","jqlb_image_info_background_transparency":"100","jqlb_image_info_bg_color":"#ffffff","jqlb_image_info_text_color":"#000000","jqlb_image_info_text_fontsize":"10","jqlb_show_text_for_image":"1","jqlb_next_image_title":"next image","jqlb_previous_image_title":"previous image","jqlb_next_button_image":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/next.gif","jqlb_previous_button_image":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/prev.gif","jqlb_maximum_width":"","jqlb_maximum_height":"","jqlb_show_close_button":"1","jqlb_close_image_title":"close image gallery","jqlb_close_image_max_heght":"22","jqlb_image_for_close_lightbox":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/closelabel.gif","jqlb_keyboard_navigation":"1","jqlb_popup_size_fix":"0"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/wp-lightbox-2.js"></script>
<script type="text/javascript" src="is_files/devicepx-jetpack.js"></script>
<script type="text/javascript" src="is_files/functions.js"></script>
<script type="text/javascript" src="is_files/comment-reply.js"></script>
<script type="text/javascript" src="is_files/wp-embed.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var sharing_js_options = {"lang":"en","counts":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/sharing.js"></script>
<script type="text/javascript" src="is_files/e-201714.js" async="" defer="defer"></script>
<script type="text/javascript">
_stq = window._stq || [];
_stq.push([ 'view', {v:'ext',j:'1:4.0.3',blog:'77890375',post:'650',tz:'0',srv:'www.nyekrip.com'} ]);
_stq.push([ 'clickTrackerInit', '77890375', '650' ]);
</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56246041-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<script async="" type="text/javascript" src="is_files/default.js"></script>
<script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs2.uzone.id/2fn7a2/request" + "?id=1" + "&enc=9UwkxLgY9" + "¶ms=" + "4TtHaUQnUEiP6K%2fc5C582CL4NjpNgssKDQDd4hYyglQ0FTs2aC7H%2fRoKKXCAdMfB1ezDPVtUST29ZfL7DhbNEB2XNjUfPWfKy%2bcAIZtK3f6Yu33bkXfp9Tz9sE1wP6Bw3NYrlLbdvtCT2hPgWsgjGR2czrtyeOFexXf1yqrt7SvJpPho7DpZv3C2CKQu3QHvcI6H6DtGLNPBX%2bHsoA4Nn9L6q8%2baHeAbUzjx3gSlR0PBGB9P0%2bzXE1uMguxb8izIp9A9O48KLAayJmTPJ0MdXirseI2Log8ha9wmX52U4rcDfdzAtvadpiKZv%2bh3jqmhORiLDtleGV9i9M61eyXjmk3WOZsH%2bYeQ671n8YSE3PUcYtqpV%2f%2fVY%2bb5qaS8xMc0xZSc8JsitevibUHAyA0X17hABW7Fk4hOPkQeKQDqWwO5YtMAuMQlMQPdY%2bMm1eYQPqTsQyHDgLBfPE6uTcE9Rqo%2bcs%2fbT3x7ZGtxrj0gK1DZ5UcrI1%2fKEjlYdPY4qyGS2VCT9Dii3UKULVCRTKzrdMGm9cKhVLL6TxfCWNmblsBzPSKtB%2bb3DL5q3LmW7wp5" + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script>
<img id="wpstats" alt=":)" src="is_files/g.gif" height="5" width="6">
<script id="" type="text/javascript">_atrk_opts={atrk_acct:"m/hBm1akKd60bm",domain:"uzone.id",dynamic:!0};(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://d31qbv1cthcecs.cloudfront.net/atrk.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();</script>
<noscript><img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=m/hBm1akKd60bm" style="display:none" height="1" width="1" alt=""></noscript>
<div style="background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); position: absolute; left: 0px; top: -10000px; transition: visibility 0s linear 0.3s, opacity 0.3s linear; opacity: 0; visibility: hidden; z-index: 2000000000;"><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000000000; background-color: #fff; opacity: 0.05; filter: alpha(opacity=5)"></div><div class="g-recaptcha-bubble-arrow" style="border: 11px solid transparent; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -11px; z-index: 2000000000;"></div><div class="g-recaptcha-bubble-arrow" style="border: 10px solid transparent; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -10px; z-index: 2000000000;"></div><div style="z-index: 2000000000; position: relative;"><iframe name="zgik02rw533e" scrolling="no" style="width: 100%; height: 100%;" title="recaptcha challenge" src="is_files/bframe.htm" frameborder="0"></iframe></div></div></body></html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Minified using disk
Page Caching using disk: enhanced
Database Caching 4/72 queries in 0.207 seconds using disk
Object Caching 8243/9554 objects using disk
Served from: www.nyekrip.com @ 2017-04-05 09:46:05 by W3 Total Cache -->
<html idmmzcc-ext-docid="702527488" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" lang="id-ID"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="is_files/atrk.js" async="" type="text/javascript"></script><script src="is_files/gtm.js" async="">
</script><link rel="stylesheet" type="text/css" href="is_files/default.css" media="all">
<meta charset="UTF-8">
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Cara Membuat Website Sederhana dengan HTML 5 - Nyekrip</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.nyekrip.com/xmlrpc.php">
<!-- This site is optimized with the Yoast SEO plugin v3.3.4 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Oh ya, dalam tutorial cara membuat website sederhana dengan html 5
ini kita menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti biasanya..">
<meta name="robots" content="noodp">
<meta name="keywords" content="cara membuat website, membuat website sederhana, membuat website dengan html">
<link rel="canonical" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/">
<link rel="publisher" href="https://plus.google.com/+NyekripCom">
<meta property="og:locale" content="id_ID">
<meta property="og:type" content="article">
<meta property="og:title" content="Cara Membuat Website Sederhana dengan HTML 5 - Nyekrip">
<meta property="og:description" content="Oh ya, dalam tutorial cara membuat website sederhana dengan html 5
ini kita menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti biasanya..">
<meta property="og:url" content="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/">
<meta property="og:site_name" content="Nyekrip">
<meta property="article:publisher" content="https://www.facebook.com/nyekrip">
<meta property="article:author" content="https://www.facebook.com/nyekrip">
<meta property="article:tag" content="cara membuat website">
<meta property="article:tag" content="membuat website dengan html">
<meta property="article:tag" content="membuat website sederhana">
<meta property="article:section" content="Membuat Website">
<meta property="article:published_time" content="2015-02-05T05:16:57+00:00">
<meta property="article:modified_time" content="2015-04-21T15:40:45+00:00">
<meta property="og:updated_time" content="2015-04-21T15:40:45+00:00">
<meta property="fb:admins" content="100000016629259">
<meta property="og:image" content="http://www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="290">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Oh ya, dalam tutorial cara membuat website sederhana dengan html 5 ini kita menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti biasanya..">
<meta name="twitter:title" content="Cara Membuat Website Sederhana dengan HTML 5 - Nyekrip">
<meta name="twitter:site" content="@nyekrip">
<meta name="twitter:image" content="http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png?fit=1000%2C290">
<meta name="twitter:creator" content="@nyekrip">
<!-- / Yoast SEO plugin. -->
<link rel="alternate" type="application/rss+xml" title="Nyekrip » Feed" href="http://www.nyekrip.com/feed/">
<link rel="alternate" type="application/rss+xml" title="Nyekrip » Umpan Komentar" href="http://www.nyekrip.com/comments/feed/">
<link rel="alternate" hreflang="id" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5">
<link rel="alternate" hreflang="id-ID" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5">
<meta content="id" name="language">
<meta content="id" name="geo.country">
<meta content="Indonesia" name="geo.placename">
<link rel="alternate" type="application/rss+xml" title="Nyekrip » Cara Membuat Website Sederhana dengan HTML 5 Umpan Komentar" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/feed/">
<link rel="stylesheet" id="crayon-theme-new-idea-css" href="is_files/new-idea.css" type="text/css" media="all">
<link rel="stylesheet" id="wp-lightbox-2.min.css-css" href="is_files/lightbox.css" type="text/css" media="all">
<link rel="stylesheet" id="theme-style-css" href="is_files/style.css" type="text/css" media="all">
<link rel="stylesheet" id="theme-font-css" href="is_files/css.css" type="text/css" media="all">
<link rel="stylesheet" id="font-awesome-css" href="is_files/font-awesome.css" type="text/css" media="all">
<!--[if lte IE 7]>
<link rel='stylesheet' id='font-awesome-ie7-css' href='http://www.nyekrip.com/wp-content/themes/nyekrip/css/font-awesome-ie7.min.css?ver=6cfcdaffb04cb6d39e94e7a325df31e2' type='text/css' media='all' />
<![endif]-->
<link rel="stylesheet" id="genericons-css" href="is_files/genericons.css" type="text/css" media="all">
<script src="is_files/recaptcha__en.js" async="" type="text/javascript"></script><script src="is_files/analytics.js" async=""></script><script type="text/javascript" src="is_files/jquery_002.js"></script>
<script type="text/javascript" src="is_files/jquery-migrate.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/www.nyekrip.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/crayon.js"></script>
<link rel="https://api.w.org/" href="http://www.nyekrip.com/wp-json/">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.nyekrip.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.nyekrip.com/wp-includes/wlwmanifest.xml">
<link rel="shortlink" href="http://www.nyekrip.com/?p=650">
<link rel="alternate" type="application/json+oembed" href="http://www.nyekrip.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.nyekrip.com%2Fcara-membuat-website-sederhana-dengan-html-5%2F">
<link rel="alternate" type="text/xml+oembed" href="http://www.nyekrip.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.nyekrip.com%2Fcara-membuat-website-sederhana-dengan-html-5%2F&format=xml">
<link rel="dns-prefetch" href="http://i0.wp.com/">
<link rel="dns-prefetch" href="http://i1.wp.com/">
<link rel="dns-prefetch" href="http://i2.wp.com/">
<style type="text/css">img#wpstats{display:none}</style><!--[if lt IE 9]><script src="http://www.nyekrip.com/wp-content/themes/nyekrip/js/html5.js"></script><![endif]--><!--[if (gte IE 6)&(lte IE 8)]><script src="http://www.nyekrip.com/wp-content/themes/nyekrip/js/selectivizr-min.js"></script><![endif]--><link rel="shortcut icon" href="http://www.nyekrip.com/wp-content/uploads/2014/12/favicon.ico">
<script src="is_files/request" async="" type="text/javascript"></script></head>
<body class="single single-post postid-650 single-format-standard">
<!-- #site-container -->
<div id="site-container" class="clearfix">
<!-- #primary-nav-mobile -->
<nav id="primary-nav-mobile">
<a class="menu-toggle clearfix" href="#">MENU<i class="icon-reorder"></i></a> <!-- edit 0-->
<ul id="mobile-menu" class="clearfix"><li id="menu-item-426" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-426"><a href="http://www.nyekrip.com/">Beranda</a></li>
<li id="menu-item-425" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-425"><a href="http://www.nyekrip.com/skrip">Skrip</a></li>
<li id="menu-item-906" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-906"><a href="http://www.nyekrip.com/glosarium/">Glosarium</a></li>
<li id="menu-item-427" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a href="http://www.nyekrip.com/tentang-nyekrip/">Tentang</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.nyekrip.com/nyekrip-yuk/">Nyekrip Yuk</a></li>
</ul></nav>
<!-- /#primary-nav-mobile -->
<!-- #header -->
<header id="site-header" class="clearfix" role="banner">
<div class="container">
<!-- #logo -->
<div id="logo">
<a title="Nyekrip" href="http://www.nyekrip.com/">
<img alt="Nyekrip" src="is_files/Nyekrip-Logo.png">
Web Tutorial Indonesia </a>
</div>
<!-- /#logo -->
<!-- #primary-nav -->
<nav id="primary-nav" role="navigation" class="clearfix">
<ul id="menu-main-menu" class="nav sf-menu clearfix sf-js-enabled"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-426"><a href="http://www.nyekrip.com/">Beranda</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-425"><a href="http://www.nyekrip.com/skrip">Skrip</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-906"><a href="http://www.nyekrip.com/glosarium/">Glosarium</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a href="http://www.nyekrip.com/tentang-nyekrip/">Tentang</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.nyekrip.com/nyekrip-yuk/">Nyekrip Yuk</a></li>
</ul> </nav>
<!-- #primary-nav -->
</div>
</header>
<!-- /#header -->
<!-- #live-search -->
<div id="live-search">
<div class="container">
<div id="search-wrap">
<form role="search" method="get" id="searchform" class="clearfix" action="http://www.nyekrip.com/">
<input onfocus="if (this.value == 'Cari Tutorial di Nyekrip ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Cari Tutorial di Nyekrip ...';}" value="Cari Tutorial di Nyekrip ..." name="s" id="s" autocapitalize="off" autocorrect="off" autocomplete="off" type="text">
<i class="live-search-loading icon-spinner icon-spin"></i>
<button type="submit" id="searchsubmit">
<i class="icon-search"></i><span>Cari</span>
</button>
</form>
</div>
</div>
</div>
<!-- /#live-search -->
<!-- #primary -->
<!--
<div id="primary" class="sidebar-left clearfix"> -->
<div id="primary" class="sidebar-right clearfix">
<!-- .container -->
<div class="container">
<!-- #content -->
<section id="content" role="main">
<article id="post-650" class="clearfix post-650 post type-post status-publish format-standard has-post-thumbnail hentry category-membuat-website tag-cara-membuat-web tag-membuat-website-dengan-html tag-membuat-website-sederhana has_thumb">
<!-- #page-header -->
<header id="page-header" class="clearfix">
<span class="entry-title">
<h1 class="page-title entry-title">Cara Membuat Website Sederhana dengan HTML 5</h1>
</span>
<p id="breadcrumbs"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://www.nyekrip.com/" rel="v:url" property="v:title">Nyekrip</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://www.nyekrip.com/category/website/" rel="v:url" property="v:title">Website</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://www.nyekrip.com/category/website/membuat-website/" rel="v:url" property="v:title">Membuat Website</a> » <span class="breadcrumb_last">Cara Membuat Website Sederhana dengan HTML 5</span></span></span></span></span></p></header>
<!-- /#page-header -->
<ul class="entry-meta clearfix">
<li class="date">
<i class="icon-time"></i> Updated on
<time class="post-date date updated" datetime="2015-04-21" itemprop="datePublished">April 21, 2015</time>
</li>
<li class="author">
<i class="icon-user"></i>
Admin</li>
<li class="category">
<i class="icon-folder-close"></i>
<a href="http://www.nyekrip.com/category/website/membuat-website/" rel="category tag">Membuat Website</a> </li>
<li class="comments">
<i class="icon-comment"></i>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comments">101 Comments</a></li>
</ul>
<!-- .entry-header -->
<header class="entry-header">
<figure class="entry-thumb">
<img src="is_files/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png" class="attachment-post size-post wp-post-image" alt="Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com" srcset="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png?w=1000 1000w, http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Nyekrip-com.png?resize=300%2C87 300w" sizes="(max-width: 1000px) 100vw, 1000px" height="290" width="1000">
</figure>
</header>
<!-- /.entry-header -->
<div class="entry-content">
<p><span class="entry-content">Pada kesempatan kali ini kita
akan membahas cara membuat website sederhana dengan html 5, sebelumnya
anda diharapkan sudah mengerti <strong><a title="Pengenalan HTML: Langkah Dasar" href="http://www.nyekrip.com/pengenalan-html-langkah-dasar/" target="_blank">dasar HTML</a></strong>
dan CSS karena pada tutorial ini tidak akan dijelaskan secara mendetail
mengenai HTML dan CSS, tutorial ini hanya menjelaskan secara garis
besar fungsi dari elemen yang dipakai.</span></p>
<p>Jika anda belum pernah membuat halaman web sederhana, sangat
disarankan untuk latihan membuat halaman web secara sederhana di artikel
” <strong><a title="CARA MEMBUAT HALAMAN WEB SEDERHANA" href="http://www.nyekrip.com/cara-membuat-halaman-web-sederhana/" target="_blank">CARA MEMBUAT HALAMAN WEB SEDERHANA</a></strong> ” dalam artikel ini juga dijelaskan secara mendetail tentang apa saja alat yang digunakan dalam membuat website.</p>
<p>Hasil akhir dari membuat website adalah seperti gambar dibawah ini, klik ” <strong>Run Skrip</strong>
” jika ingin melihat hasil secara online sekaligus merubah source
code, silahkan anda ikuti langkah-langkah membuat website sederhana
dengan html ini.</p>
<div id="attachment_652" style="width: 812px" class="wp-caption aligncenter"><a href="http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png" rel="lightbox[650]"><img class="size-full wp-image-652" src="is_files/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png" alt="Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip" srcset="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png?w=802 802w, http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png?resize=300%2C236 300w, http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-Nyekrip.png?resize=367%2C290 367w" sizes="(max-width: 802px) 100vw, 802px" data-recalc-dims="1"></a>
<p class="wp-caption-text">Website Sederhana dengan HTML 5</p>
</div>
<div class="ph-float">
<a href="http://www.nyekrip.com/nyekrip-yuk/index.php?fdata=skrip-cara-membuat-website-sederhana-dengan-html-5" target="_blank" class="ph-button ph-btn-blue">Run Skrip</a>
</div>
<p>Anda bisa download website sederhana ini dengan klik tombol ” <strong>Download Skrip</strong> “.</p>
<div class="ph-float">
<a href="http://www.nyekrip.com/download/skrip-cara-membuat-website-sederhana-nyekrip.rar" target="_blank" class="ph-button ph-btn-blue">Download Skrip</a>
</div>
<h2>Cara membuat website sederhana</h2>
<p>Oh ya, dalam tutorial cara membuat website sederhana ini kita
menggunakan HTML versi 5 dan juga sedikit CSS versi 3. Dan seperti
biasanya alat yang digunakan dalam membuat website pada tutorial ini ada
dua, yaitu;</p>
<ul>
<li><strong><a title="Google Chrome Best Browser" href="http://www.google.com/chrome/" target="_blank">Google Chrome</a></strong> sebagai browser</li>
<li><strong><a title="Notepad ++ Best Notepad Editor" href="http://notepad-plus-plus.org/" target="_blank">Notepad++</a></strong> sebagai tempat menulis skrip</li>
</ul>
<p>Jika anda belum mempunyai alat-alat tersebut, anda bisa download
chrome dan notepad++ secara gratis pada halaman web mereka. Mari kita
mulai tutorial cara membuat website sederhana yang terdiri dari 8
langkah.</p>
<h2>Langkah 1: Membuat Sketsa Desain halaman web</h2>
<p>Kita akan memulai membuat web dengan mempersiapakan sketsa halaman
web dulu, untuk membuat sketsa halaman web kita bisa menggunakan kertas
dulu baru setelah itu kita bisa memperhalusnya dengan photoshop. Berikut
adalah sketsa halaman web yang kita akan gunakan sebagai latihan.</p>
<div id="attachment_655" style="width: 472px" class="wp-caption aligncenter">
<a href="http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png" rel="lightbox[650]">
<img class="size-full wp-image-655" src="is_files/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png" alt="Cara Membuat Website Sederhana dengan HTML 5 - Sketsa - Nyekrip" srcset="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png?w=462 462w, http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png?resize=273%2C300 273w, http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png?resize=264%2C290 264w" sizes="(max-width: 462px) 100vw, 462px" data-recalc-dims="1"></a>
<p class="wp-caption-text">Sketsa Website Sederhana</p>
</div>
<p>Sketsa desain halaman web dapat memberikan gambaran mengenai layout
halaman web dan bagaimana cara mengatur letaknya. Dengan adanya sketsa
juga bisa mempermudah kita untuk menyiapkan skrip HTML dan CSS apa saja
yang dibutuhkan.</p>
<h2>Langkah 2: Menentukan Konsep membuat website</h2>
<p>Kita akan menggunakan HTML5, teknologi ini memperkenalkan beberapa
elemen baru yang memungkinkan kita untuk membagi bagian dari halaman.
Nama-nama elemen ini sesuai dengan jenis konten yang berada didalamnya.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d52423060320" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-15">15</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-16">16</div><div class="crayon-num" data-line="crayon-58e4bcd998d52423060320-17">17</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d52423060320-1"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"wrapper"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-2"><span class="crayon-i "> </span><span class="crayon-r "><header></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-3"><span class="crayon-i "> </span><span class="crayon-r "><h1></span><span class="crayon-i ">Warung Tegal</span><span class="crayon-r "></h1></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-4"><span class="crayon-i "> </span><span class="crayon-r "><nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-5"><span class="crayon-i "> </span><span class="crayon-c"><!-- nav content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-6"><span class="crayon-i "> </span><span class="crayon-r "></nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-7"><span class="crayon-i "> </span><span class="crayon-r "></header></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-8"><span class="crayon-i "> </span><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"courses"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-9"><span class="crayon-i "> </span><span class="crayon-c"><!-- section content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-10"><span class="crayon-i "> </span><span class="crayon-r "></section></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-11"><span class="crayon-i "> </span><span class="crayon-r "><aside></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-12"><span class="crayon-i "> </span><span class="crayon-c"><!-- aside content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-13"><span class="crayon-i "> </span><span class="crayon-r "></aside></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-14"><span class="crayon-i "> </span><span class="crayon-r "><footer></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-15"><span class="crayon-i "> </span><span class="crayon-c"><!-- footer content here --></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-16"><span class="crayon-i "> </span><span class="crayon-r "></footer></span></div><div class="crayon-line" id="crayon-58e4bcd998d52423060320-17"><span class="crayon-r "></div></span><span class="crayon-c"><!-- .wrapper --></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0014 seconds] -->
<p>Contoh pada kali ini yaitu membuat web masakan yang dibangun
menggunakan elemen HTML5 untuk membuat struktur halaman (bukan
sekedar pengelompokan menggunakan elemen <code><div></code>).</p>
<p>Sesuai dengan sketsa halaman web diatas, Header dan footer bertempat di dalam elemen <code><header></code> dan <code><footer></code>. Materi masakan dikelompokkan bersama di dalam elemen <code><section></code> yang memiliki atribut class yang nilainya <code>courses</code> (untuk membedakannya dari elemen <code><section></code> yang lain pada halaman). Sidebar berada di dalam sebuah elemen <code><aside></code> .</p>
<p>Setiap materi masakan berada di dalam sebuah elemen <code><article></code>, dan menggunakan elemen <code><figure></code> dan <code><figcaption></code>
untuk menyisipkan gambar. Judul pada masing-masing materi masakan
memiliki sub-judul, jadi judul-judul ini dikelompokkan dalam sebuah
elemen <code><hgroup></code>. Di sidebar, terdapat resep dan rincian kontak yang ditempatkan terpisah di dalam elemen <code><section></code>.</p>
<p>Halaman dikelola dan ditata menggunakan CSS. Agar CSS bisa bekerja di
versi IE 9 kebawah, halaman HTML5 berisi link ke HTML5 shiv JavaScript
(host di server <a title="Best Search Engine" href="https://www.google.com/" target="_blank">Google</a>) di dalam komentar bersyarat.</p>
<p>Oke, kita sudah menentukan konsep dari membuat web sederhana, mari kita lanjutkan dengan membuat skrip HTML dan skrip CSS.</p>
<h2>Langkah 3: Membuat Skrip Struktur Umum HTML</h2>
<p>Pembuatan skrip struktur umum HTML memudahkan kita untuk memulai
dalam membuat website, jika anda belum mengetahui apa itu struktur umum
HTML, anda bisa mempelajari terlebih dahulu di ” <strong><a title="Pengenalan HTML: Struktur Umum Part 1" href="http://www.nyekrip.com/pengenalan-html-struktur-umum-part-1/" target="_blank">Pengenalan HTML: Struktur Umum Part 1</a></strong> “. Berikut Skrip Struktur Umum HTML.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d6f600401376" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-mixed-highlight" title="Contains Mixed Languages"></span></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998d6f600401376-15">15</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-1"><span class="crayon-n"><!DOCTYPE html></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-2"><span class="crayon-r "><html></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-3"><span class="crayon-i "> </span><span class="crayon-r "><head></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-4"><span class="crayon-i "> </span><span class="crayon-r "><title></span><span class="crayon-i ">Web Warung Tegal</span><span class="crayon-r "></title></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-5"><span class="crayon-i "> <span class="crayon-ta"><style </span><span class="crayon-e ">type</span><span class="crayon-i ">="text/css"></span></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-6"><span class="crayon-h"> </span><span class="crayon-ta"></style></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-7"><span class="crayon-i "> </span><span class="crayon-c"><!--[if lt IE 9]></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-8"><span class="crayon-c"> <span class="crayon-ta"><script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://html5shiv.googlecode.com/svn/trunk/html5.js"</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-9"><span class="crayon-c"> <![endif]--></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-10"><span class="crayon-i "> </span><span class="crayon-r "></head></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-11"><span class="crayon-i "> </span><span class="crayon-r "><body></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-12"><span class="crayon-i "> </span><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"wrapper"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-13"><span class="crayon-i "> </span><span class="crayon-r "></div></span><span class="crayon-c"><!-- .wrapper --></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-14"><span class="crayon-i "> </span><span class="crayon-r "></body></span></div><div class="crayon-line" id="crayon-58e4bcd998d6f600401376-15"><span class="crayon-r "></html></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0043 seconds] -->
<p>Skrip HTML diatas terdapat baris skrip <code><style type="text/css"></code>, didalam skrip ini kita nantinya akan menaruh skrip CSS untuk mengatur layout halaman web. Sedangkan pada skrip <code><title>Web Warung Tegal</title></code> berfungsi untuk memberikan title halaman web. Dibawah tag <code><style></code> kita memberikan skrip <code>HTML5SHIV</code> yang berguna agar website kita berjalan dengan baik dalam browser IE versi 9 kebawah.</p>
<p>Skrip <code><div class="wrapper"></code> berfungsi untuk membungkus elemen halaman web, ” <strong>bungkusan</strong> ” ini kita beri class <code>wrapper</code>, dengan class ini kita bisa mengatur semua elemen yang berada didalamnya dengan skrip CSS.</p>
<p>Kesimpulan dari skrip diatas adalah kita telah memberikan judul halaman web dan menyediakan tempat untuk skrip CSS.</p>
<h2>Langkah 4: Membuat Elemen header dan nav HTML5</h2>
<p>Dalam contoh ini, Elemen <code><header></code> digunakan untuk tempat dari nama website dan navigasi utama. Berikut skrip header, letakkan persis dibawah <code><div class="wrapper"></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d7e637314124" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d7e637314124-12">12</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-1"><span class="crayon-r "><header></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-2"><span class="crayon-i "> </span><span class="crayon-r "><h1></span><span class="crayon-i ">Warung Tegal</span><span class="crayon-r "></h1></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-3"><span class="crayon-i "> </span><span class="crayon-r "><nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-4"><span class="crayon-i "> </span><span class="crayon-r "><ul></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-5"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"current"</span><span class="crayon-r ">></span><span class="crayon-i ">beranda</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-6"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">daftar masakan</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-7"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">katering</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-8"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">tentang</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-9"><span class="crayon-i "> </span><span class="crayon-r "><li></span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">kontak</span><span class="crayon-r "></a></span><span class="crayon-r "></li></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-10"><span class="crayon-i "> </span><span class="crayon-r "></ul></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-11"><span class="crayon-i "> </span><span class="crayon-r "></nav></span></div><div class="crayon-line" id="crayon-58e4bcd998d7e637314124-12"><span class="crayon-r "></header></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0820 seconds] -->
<p>Kita menggunakan elemen <code><nav></code> untuk membuat
navigasi . Elemen ini bisa digunakan di berbagai keperluan dalam
pembuatan navigasi, baik navigasi yang berada tepat dibawah header, atau
navigasi yang terletak pada footer.</p>
<p>Dalam skrip diatas kita menentukan judul halaman yang telah kita letakkan pada elemen <code><h1></code> dan memberikan daftar link navigasi sebagai alat navigasi untuk mempermudah dalam mengakses halaman web.</p>
<h2>Langkah 5: Membuat Elemen article HTML5</h2>
<p>Elemen <code><article></code> bertindak sebagai wadah untuk setiap bagian dari halaman yang dapat berdiri sendiri dan berpotensi Sindikasi.</p>
<p>Bisa berupa artikel atau tulisan blog, komentar atau posting forum,
atau lainnya. Jika halaman terdiri dari beberapa artikel, maka kita akan
meletakkan masing-masing artikel dalam elemen <code><article></code>. Berikut skripnya, dan kita bungkus skrip ini dengan elemen <code><section></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d8b691477462" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-15">15</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-16">16</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-17">17</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-18">18</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-19">19</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-20">20</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-21">21</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-22">22</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-23">23</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-24">24</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-25">25</div><div class="crayon-num" data-line="crayon-58e4bcd998d8b691477462-26">26</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-1"><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"courses"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-2"><span class="crayon-i "> </span><span class="crayon-r "><article></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-3"><span class="crayon-i "> </span><span class="crayon-r "><figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-4"><span class="crayon-i "> </span><span class="crayon-r "><img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"images/soto.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-o">=</span><span class="crayon-s ">"soto"</span><span class="crayon-r "> /></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-5"><span class="crayon-i "> </span><span class="crayon-r "><figcaption></span><span class="crayon-i ">Soto Indonesia</span><span class="crayon-r "></figcaption></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-6"><span class="crayon-i "> </span><span class="crayon-r "></figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-7"><span class="crayon-i "> </span><span class="crayon-r "><hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-8"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Soto Ayam</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-9"><span class="crayon-i "> </span><span class="crayon-r "><h3></span><span class="crayon-i ">Makanan Berkuah</span><span class="crayon-r "></h3></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-10"><span class="crayon-i "> </span><span class="crayon-r "></hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-11"><span class="crayon-i "> </span><span class="crayon-r "><p></span><span class="crayon-i ">Soto ayam adalah makanan khas Indonesia yang berupa </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-12"><span class="crayon-i "> sejenis sup ayam dengan kuah yang berwarna kekuningan.</span><span class="crayon-r "></p></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-13"><span class="crayon-i "> </span><span class="crayon-r "></article></span><span class="crayon-i "> </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-14"><span class="crayon-i "> </span><span class="crayon-r "><article></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-15"><span class="crayon-i "> </span><span class="crayon-r "><figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-16"><span class="crayon-i "> </span><span class="crayon-r "><img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"images/pecel.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-o">=</span><span class="crayon-s ">"pecel"</span><span class="crayon-r "> /></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-17"><span class="crayon-i "> </span><span class="crayon-r "><figcaption></span><span class="crayon-i ">Pecel Indonesia</span><span class="crayon-r "></figcaption></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-18"><span class="crayon-i "> </span><span class="crayon-r "></figure></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-19"><span class="crayon-i "> </span><span class="crayon-r "><hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-20"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Masakan Pecel</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-21"><span class="crayon-i "> </span><span class="crayon-r "><h3></span><span class="crayon-i ">Makanan dengan Bumbu Kacang</span><span class="crayon-r "></h3></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-22"><span class="crayon-i "> </span><span class="crayon-r "></hgroup></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-23"><span class="crayon-i "> </span><span class="crayon-r "><p></span><span class="crayon-i ">Pecel adalah makanan yang menggunakan bumbu sambal </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-24"><span class="crayon-i "> kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</span><span class="crayon-r "></p></span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-25"><span class="crayon-i "> </span><span class="crayon-r "></article></span><span class="crayon-i "> </span></div><div class="crayon-line" id="crayon-58e4bcd998d8b691477462-26"><span class="crayon-r "></section></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0023 seconds] -->
<p>Letakkan skrip diatas tepat dibawah skrip header yang sudah kita buat sebelumnya. Elemen <code><section></code> digunakan untuk mengelompokkan elemen konten yang terkait , dan biasanya setiap bagian akan memiliki judul tersendiri.</p>
<p>Elemen <code><figure></code> digunakan untuk menyisipkan gambar sedangkan elemen <code><figcaption></code> digunakan untuk memberi keterangan dalam gambar tersebut. Sedangkan tujuan dari elemen <code><hgroup></code> adalah mengelompokkan satu atau lebih elemen <code><h1></code> sampai <code><h6></code> sehingga mereka diperlakukan sebagai satu judul tunggal.</p>
<p>Kesimpulannya dalam skrip diatas kita membuat artikel masakan dengan memberinya judul, gambar beserta penjelasan.</p>
<h2>Langkah 6: Membuat Elemen Aside HTML5</h2>
<p>Elemen <code><aside></code> bertindak sebagai tempat/wadah
untuk konten yang berhubungan dengan seluruh halaman. Sebagai contoh,
elemen ini bisa berisi link ke halaman web lain, daftar posting terbaru,
kotak pencarian, atau widget-widget lainnya. Berikut skrip dari elemen
Aside. Letakkan skrip ini dibawah skrip <code><section></code> diatas, tepatnya setelah skrip <code></section></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998d99769739107" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998d99769739107-14">14</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998d99769739107-1"><span class="crayon-r "><aside></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-2"><span class="crayon-i "> </span><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"popular-recipes"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-3"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Masakan Populer</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-4"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Sop</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-5"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Asem</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-6"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Lodeh</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-7"><span class="crayon-i "> </span><span class="crayon-r "><a </span><span class="crayon-e ">href</span><span class="crayon-o">=</span><span class="crayon-s ">""</span><span class="crayon-r ">></span><span class="crayon-i ">Sayur Bayam</span><span class="crayon-r "></a></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-8"><span class="crayon-i "> </span><span class="crayon-r "></section></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-9"><span class="crayon-i "> </span><span class="crayon-r "><section </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"contact-details"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-10"><span class="crayon-i "> </span><span class="crayon-r "><h2></span><span class="crayon-i ">Kontak</span><span class="crayon-r "></h2></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-11"><span class="crayon-i "> </span><span class="crayon-r "><p></span><span class="crayon-i ">Warung Tegal</span><span class="crayon-r "><br </span><span class="crayon-r ">/></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-12"><span class="crayon-i "> di seluruh indonesia</span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-13"><span class="crayon-i "> </span><span class="crayon-r "></section></span></div><div class="crayon-line" id="crayon-58e4bcd998d99769739107-14"><span class="crayon-r "></aside></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0017 seconds] -->
<p>Dalam skrip diatas, kita meletakkan informasi daftar link yang berisi menu masakan yang populer dan daftar kontak.</p>
<h2>Langkah 7: Membuat Elemen Footer HTML5</h2>
<p>Setiap website akan punya footer, elemen <code><footer></code>
berguna untuk membuat footer, dengan footer kita bisa memberikan
informasi tambahan mengenai website seperti informasi hak cipta, link ke
halaman kebijakan privasi atau link lainnya. Berikut skrip footer.
Skrip Footer diletakkan setelah skrip <code><aside></code> diatas, tepatnya setelah skrip <code></aside></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998da5958937937" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip HTML</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -19px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998da5958937937-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998da5958937937-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998da5958937937-3">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998da5958937937-1"><span class="crayon-r "><footer></span></div><div class="crayon-line" id="crayon-58e4bcd998da5958937937-2"><span class="crayon-i "> &copy; 2015 Warung Tegal</span></div><div class="crayon-line" id="crayon-58e4bcd998da5958937937-3"><span class="crayon-r "></footer></span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>Pada tahap ini kita sudah membuat File HTML dan belum dilengkapi
dengan skrip CSS dan Gambar, sehingga pada tahap ini web sederhana kita
seperti gambar dibawah ini.</p>
<div id="attachment_663" style="width: 634px" class="wp-caption aligncenter"><a href="http://i1.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png" rel="lightbox[650]"><img class="size-full wp-image-663" src="is_files/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_.png" alt="Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip" srcset="http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png?w=624 624w, http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png?resize=300%2C292 300w, http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png?resize=297%2C290 297w" sizes="(max-width: 624px) 100vw, 624px" data-recalc-dims="1"></a>
<p class="wp-caption-text">Website Belum Menggunakan Skrip CSS dan Gambar</p>
</div>
<h2>Langkah 8: Membuat Skrip CSS dan Gambar</h2>
<p>Berikut skrip CSS yang nantinya kita insert ke dalam elemen <code><style type="text/css"></code>.</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-58e4bcd998db1551318647" class="crayon-syntax crayon-theme-new-idea crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" no-popup minimize scroll-always disable-anim" style="margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 16px ! important; height: auto;">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Skrip CSS</span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1;">
<table style="margin-left: -28px;" class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-1">1</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-2">2</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-3">3</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-4">4</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-5">5</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-6">6</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-7">7</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-8">8</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-9">9</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-10">10</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-11">11</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-12">12</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-13">13</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-14">14</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-15">15</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-16">16</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-17">17</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-18">18</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-19">19</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-20">20</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-21">21</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-22">22</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-23">23</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-24">24</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-25">25</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-26">26</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-27">27</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-28">28</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-29">29</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-30">30</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-31">31</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-32">32</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-33">33</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-34">34</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-35">35</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-36">36</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-37">37</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-38">38</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-39">39</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-40">40</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-41">41</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-42">42</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-43">43</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-44">44</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-45">45</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-46">46</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-47">47</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-48">48</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-49">49</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-50">50</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-51">51</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-52">52</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-53">53</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-54">54</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-55">55</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-56">56</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-57">57</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-58">58</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-59">59</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-60">60</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-61">61</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-62">62</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-63">63</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-64">64</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-65">65</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-66">66</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-67">67</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-68">68</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-69">69</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-70">70</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-71">71</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-72">72</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-73">73</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-74">74</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-75">75</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-76">76</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-77">77</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-78">78</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-79">79</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-80">80</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-81">81</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-82">82</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-83">83</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-84">84</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-85">85</div><div class="crayon-num" data-line="crayon-58e4bcd998db1551318647-86">86</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58e4bcd998db1551318647-1">header<span class="crayon-sy">,</span><span class="crayon-h"> </span>section<span class="crayon-sy">,</span><span class="crayon-h"> </span>footer<span class="crayon-sy">,</span><span class="crayon-h"> </span>aside<span class="crayon-sy">,</span><span class="crayon-h"> </span>nav<span class="crayon-sy">,</span><span class="crayon-h"> </span>article<span class="crayon-sy">,</span><span class="crayon-h"> </span>figure<span class="crayon-sy">,</span><span class="crayon-h"> </span>figcaption<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-2"><span class="crayon-h"> </span>display<span class="crayon-o">:</span><span class="crayon-h"> </span>block<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-3">body<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-4"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>666666<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-5"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>f9f8f6<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-6"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>image<span class="crayon-o">:</span><span class="crayon-h"> </span>url<span class="crayon-sy">(</span><span class="crayon-s ">"images/dark-wood.jpg"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-7"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>position<span class="crayon-o">:</span><span class="crayon-h"> </span>center<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-8"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>family<span class="crayon-o">:</span><span class="crayon-h"> </span>Georgia<span class="crayon-sy">,</span><span class="crayon-h"> </span>Times<span class="crayon-sy">,</span><span class="crayon-h"> </span>serif<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-9"><span class="crayon-h"> </span>line<span class="crayon-o">-</span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>1<span class="crayon-sy">.</span>4em<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-10"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-11"><span class="crayon-sy">.</span>wrapper<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-12"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>940px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-13"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>20px<span class="crayon-h"> </span>auto<span class="crayon-h"> </span>20px<span class="crayon-h"> </span>auto<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-14"><span class="crayon-h"> </span>border<span class="crayon-o">:</span><span class="crayon-h"> </span>2px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>000000<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-15"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>ffffff<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-16">header<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-17"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>160px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-18"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>image<span class="crayon-o">:</span><span class="crayon-h"> </span>url<span class="crayon-sy">(</span>images<span class="crayon-o">/</span>header<span class="crayon-sy">.</span>png<span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-19">h1<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-20"><span class="crayon-h"> </span>text<span class="crayon-o">-</span>indent<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">-</span>9999px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-21"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>940px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-22"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>130px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-23"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-24">nav<span class="crayon-sy">,</span><span class="crayon-h"> </span>footer<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-25"><span class="crayon-h"> </span>clear<span class="crayon-o">:</span><span class="crayon-h"> </span>both<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-26"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>ffffff<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-27"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>aeaca8<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-28"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>30px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-29">nav<span class="crayon-h"> </span>ul<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-30"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-31"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>5px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>5px<span class="crayon-h"> </span>30px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-32">nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-33"><span class="crayon-h"> </span>display<span class="crayon-o">:</span><span class="crayon-h"> </span>inline<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-34"><span class="crayon-h"> </span>margin<span class="crayon-o">-</span>right<span class="crayon-o">:</span><span class="crayon-h"> </span>40px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-35">nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span>a<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-36"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>ffffff<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-37">nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span>a<span class="crayon-o">:</span>hover<span class="crayon-sy">,</span><span class="crayon-h"> </span>nav<span class="crayon-h"> </span>li<span class="crayon-h"> </span>a<span class="crayon-sy">.</span>current<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-38"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>000000<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-39">section<span class="crayon-sy">.</span>courses<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-40"><span class="crayon-h"> </span>float<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-41"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>659px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-42"><span class="crayon-h"> </span>border<span class="crayon-o">-</span>right<span class="crayon-o">:</span><span class="crayon-h"> </span>1px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>eeeeee<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-43">article<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-44"><span class="crayon-h"> </span>clear<span class="crayon-o">:</span><span class="crayon-h"> </span>both<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-45"><span class="crayon-h"> </span>overflow<span class="crayon-o">:</span><span class="crayon-h"> </span>auto<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-46"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>100<span class="crayon-o">%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-47">hgroup<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-48"><span class="crayon-h"> </span>margin<span class="crayon-o">-</span>top<span class="crayon-o">:</span><span class="crayon-h"> </span>40px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-49">figure<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-50"><span class="crayon-h"> </span>float<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-51"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>290px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-52"><span class="crayon-h"> </span>height<span class="crayon-o">:</span><span class="crayon-h"> </span>220px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-53"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>5px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-54"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>20px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-55"><span class="crayon-h"> </span>border<span class="crayon-o">:</span><span class="crayon-h"> </span>1px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>eeeeee<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-56">figcaption<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-57"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>size<span class="crayon-o">:</span><span class="crayon-h"> </span>90<span class="crayon-o">%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-58"><span class="crayon-h"> </span>text<span class="crayon-o">-</span>align<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-59">aside<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-60"><span class="crayon-h"> </span>width<span class="crayon-o">:</span><span class="crayon-h"> </span>230px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-61"><span class="crayon-h"> </span>float<span class="crayon-o">:</span><span class="crayon-h"> </span>left<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-62"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>20px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-63">aside<span class="crayon-h"> </span>section<span class="crayon-h"> </span>a<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-64"><span class="crayon-h"> </span>display<span class="crayon-o">:</span><span class="crayon-h"> </span>block<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-65"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>10px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-66"><span class="crayon-h"> </span>border<span class="crayon-o">-</span>bottom<span class="crayon-o">:</span><span class="crayon-h"> </span>1px<span class="crayon-h"> </span>solid<span class="crayon-h"> </span><span class="crayon-o">#</span>eeeeee<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-67">aside<span class="crayon-h"> </span>section<span class="crayon-h"> </span>a<span class="crayon-o">:</span>hover<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-68"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>985d6a<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-69"><span class="crayon-h"> </span>background<span class="crayon-o">-</span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>efefef<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-70">a<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-71"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>de6581<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-72"><span class="crayon-h"> </span>text<span class="crayon-o">-</span>decoration<span class="crayon-o">:</span><span class="crayon-h"> </span>none<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-73">h1<span class="crayon-sy">,</span><span class="crayon-h"> </span>h2<span class="crayon-sy">,</span><span class="crayon-h"> </span>h3<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-74"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>weight<span class="crayon-o">:</span><span class="crayon-h"> </span>normal<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-75">h2<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-76"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>10px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>5px<span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-77"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-78">h3<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-79"><span class="crayon-h"> </span>margin<span class="crayon-o">:</span><span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>10px<span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-80"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>de6581<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-81">aside<span class="crayon-h"> </span>h2<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-82"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>30px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>10px<span class="crayon-h"> </span>0px<span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-83"><span class="crayon-h"> </span>color<span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">#</span>de6581<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-84">footer<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-85"><span class="crayon-h"> </span>font<span class="crayon-o">-</span>size<span class="crayon-o">:</span><span class="crayon-h"> </span>80<span class="crayon-o">%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-58e4bcd998db1551318647-86"><span class="crayon-h"> </span>padding<span class="crayon-o">:</span><span class="crayon-h"> </span>7px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>0px<span class="crayon-h"> </span>20px<span class="crayon-sy">;</span><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0932 seconds] -->
<p>Penjelasan dari skrip CSS tidak dibahas disini, melainkan akan
dibahas dalam artikel membuat website sederhana bagian 2, untuk gambar
anda bisa mendownload-nya sekaligus beserta source code pada tombol
download diatas.</p>
<p>Cukup sampai disini tutorial <strong>cara membuat website sederhana dengan HTML 5</strong>,
Pada tahap ini kita sudah membuat website meskipun sangat sederhana,
simple dan terbilang cukup mudah, web sederhana ini hanya terdiri
dari satu halaman web saja. Kita bisa menambahkan halaman lain dengan
cara duplikat halaman web yang sudah dibuat dan isinya kita ganti dengan
yang lain.</p>
<p>Tutorial diatas masih sebatas cara membuat web simpel dan biasa,
yang perlu diketahui bahwa website simpel ini masih bersifat statis
tidak dinamis. Tutorial cara membuat website sederhana ini sangat jauh
dari kesempurnaan, maka dari itu kami sangat mengharapkan saran dan
kritikan yang membangun.</p>
<p>Happy Nyekrip!
</p><div class="sharedaddy sd-sharing-enabled">
<div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing">
<div class="sd-content">
<ul>
<li class="share-print"><a rel="nofollow" data-shared="" class="share-print sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#print" target="_blank" title="Klik untuk mencetak"><span>Cetak</span></a></li>
<li class="share-facebook"><a rel="nofollow" data-shared="sharing-facebook-650" class="share-facebook sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=facebook&nb=1" target="_blank" title="Klik untuk membagikan di Facebook"><span>Facebook</span></a></li>
<li class="share-twitter"><a rel="nofollow" data-shared="sharing-twitter-650" class="share-twitter sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=twitter&nb=1" target="_blank" title="Klik untuk berbagi pada Twitter"><span>Twitter</span></a></li>
<li class="share-google-plus-1"><a rel="nofollow" data-shared="sharing-google-650" class="share-google-plus-1 sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=google-plus-1&nb=1" target="_blank" title="Klik untuk berbagi via Google+"><span>Google</span></a></li>
<li class="share-linkedin"><a rel="nofollow" data-shared="sharing-linkedin-650" class="share-linkedin sd-button share-icon" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/?share=linkedin&nb=1" target="_blank" title="Klik untuk berbagi di Linkedln"><span>LinkedIn</span></a></li>
<li class="share-end"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tags"><strong>Tagged:</strong><a href="http://www.nyekrip.com/tag/cara-membuat-web/" rel="tag">cara membuat website</a><a href="http://www.nyekrip.com/tag/membuat-website-dengan-html/" rel="tag">membuat website dengan html</a><a href="http://www.nyekrip.com/tag/membuat-website-sederhana/" rel="tag">membuat website sederhana</a></div>
<section id="entry-author" class="clearfix vcard author">
<h3 id="entry-author-title">About The Author</h3>
<div class="gravatar">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=140&d=mm&r=g 2x" class="avatar avatar-70 photo" height="70" width="70"> </div>
<h4 class="fn"><a class="author-link url" href="http://www.nyekrip.com/tentang-nyekrip/" rel="author">
Admin </a></h4>
<div class="entry-author-desc note">
Suka ingin berbagi pengetahuan dan pengalaman nyekrip program
yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan
Web Tutorial berbahasa Indonesia.
<a href="http://www.nyekrip.com/" title="nyekrip web tutorial indonesia">
<strong>Nyekrip - Web Tutorial Indonesia</strong></a> </div>
</section>
</article>
<section id="related-posts" class="clearfix">
<h3 id="related-posts-title">Artikel Terkait</h3>
<ul class="clearfix">
<li class="standard">
<h4 class="entry-title"><a href="http://www.nyekrip.com/cara-membuat-website-terbaru-dan-lengkap/" rel="bookmark" title="Cara Membuat Website Terbaru dan Lengkap">Cara Membuat Website Terbaru dan Lengkap</a></h4>
</li>
<li class="standard">
<h4 class="entry-title"><a href="http://www.nyekrip.com/tahapan-desain-dan-membuat-web/" rel="bookmark" title="Tahapan Desain dan Membuat Web">Tahapan Desain dan Membuat Web</a></h4>
</li>
<li class="standard">
<h4 class="entry-title"><a href="http://www.nyekrip.com/perlengkapan-membuat-web/" rel="bookmark" title="Mengetahui Perlengkapan Membuat Web">Mengetahui Perlengkapan Membuat Web</a></h4>
</li>
</ul></section>
<div id="comments" class="comments-area">
<h3 id="comments-title">Comments</h3>
<ol class="commentlist">
<li class="comment even thread-even depth-1" id="li-comment-51">
<article id="comment-51" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-51" onclick='return addComment.moveForm( "comment-51", "51", "respond", "650" )' aria-label="Balasan untuk Agus">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/c498416fd06f740698fc2a89f93fec85.jpg" srcset="http://0.gravatar.com/avatar/c498416fd06f740698fc2a89f93fec85?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Agus </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-51"><time pubdate="" datetime="2015-02-05T08:30:17+00:00">Februari 5, 2015 at 8:30 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Bermanfaat sekali tutorialnya, sangat jelas.. ditunggu jika ada tutorial membuat website dengan PHP. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-60">
<article id="comment-60" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-60" onclick='return addComment.moveForm( "comment-60", "60", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-60"><time pubdate="" datetime="2015-02-09T08:06:56+00:00">Februari 9, 2015 at 8:06 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Ditunggu Mas untuk website yang menggunakan PHP, Belajar yang statis dulu ya.. hehe..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even depth-2" id="li-comment-1115">
<article id="comment-1115" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1115" onclick='return addComment.moveForm( "comment-1115", "1115", "respond", "650" )' aria-label="Balasan untuk Zahro">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/233b80561417d614b525db005d34c0ec.jpg" srcset="http://2.gravatar.com/avatar/233b80561417d614b525db005d34c0ec?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Zahro </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1115"><time pubdate="" datetime="2015-09-28T14:44:04+00:00">September 28, 2015 at 2:44 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Bermanfaat sekali bagi pemula. Terimakasih ilmunya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-231">
<article id="comment-231" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-231" onclick='return addComment.moveForm( "comment-231", "231", "respond", "650" )' aria-label="Balasan untuk EvoNow">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8c223cf2e18881dca3b987bd41ffd50a.jpg" srcset="http://2.gravatar.com/avatar/8c223cf2e18881dca3b987bd41ffd50a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">EvoNow </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-231"><time pubdate="" datetime="2015-04-07T09:25:15+00:00">April 7, 2015 at 9:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>itu mengunakan WordPress atau blogger?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-233">
<article id="comment-233" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-233" onclick='return addComment.moveForm( "comment-233", "233", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-233"><time pubdate="" datetime="2015-04-08T10:03:21+00:00">April 8, 2015 at 10:03 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>bukan dua-duanya, ini murni html css dari awal. Kalau mau di
aplikasikan di blogger atau wordpress bisa dilakukan dengan merubahnya
menjadi tema atau template.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment odd alt depth-3" id="li-comment-713">
<article id="comment-713" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-713" onclick='return addComment.moveForm( "comment-713", "713", "respond", "650" )' aria-label="Balasan untuk Johan Edwart">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/22efa5ad97767aac00f98fe12f74875a.jpg" srcset="http://2.gravatar.com/avatar/22efa5ad97767aac00f98fe12f74875a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Johan Edwart </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-713"><time pubdate="" datetime="2015-08-07T21:17:36+00:00">Agustus 7, 2015 at 9:17 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cara merubah halaman html murni ke template wordpress gmana min?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-245">
<article id="comment-245" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-245" onclick='return addComment.moveForm( "comment-245", "245", "respond", "650" )' aria-label="Balasan untuk Abednego">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/09a486f352ed8ef6b6ff6c4d4311a645.jpg" srcset="http://0.gravatar.com/avatar/09a486f352ed8ef6b6ff6c4d4311a645?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Abednego </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-245"><time pubdate="" datetime="2015-04-16T05:57:57+00:00">April 16, 2015 at 5:57 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih min, Artikel Ini sangat membantu saya untuk menyelesaikan Tugas Kampus saya..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-365">
<article id="comment-365" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-365" onclick='return addComment.moveForm( "comment-365", "365", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-365"><time pubdate="" datetime="2015-05-12T03:58:11+00:00">Mei 12, 2015 at 3:58 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sama-sama mas, semoga membantu 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-313">
<article id="comment-313" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-313" onclick='return addComment.moveForm( "comment-313", "313", "respond", "650" )' aria-label="Balasan untuk Koko">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0500a4ae54f184cc468e169470394211.jpg" srcset="http://0.gravatar.com/avatar/0500a4ae54f184cc468e169470394211?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Koko </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-313"><time pubdate="" datetime="2015-05-10T08:23:26+00:00">Mei 10, 2015 at 8:23 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Bagaimana cara agar halaman web html5 ini bisa responsive?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-336">
<article id="comment-336" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-336" onclick='return addComment.moveForm( "comment-336", "336", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-336"><time pubdate="" datetime="2015-05-12T03:17:46+00:00">Mei 12, 2015 at 3:17 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>anda bisa mempelajari pada tutorial <a href="http://www.nyekrip.com/cara-membuat-template-web-responsive-html-5/" target="_blank" rel="nofollow">Cara Membuat Template Web Responsive HTML 5</a>, semoga membantu 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-327">
<article id="comment-327" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-327" onclick='return addComment.moveForm( "comment-327", "327", "respond", "650" )' aria-label="Balasan untuk Obat Herbal">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/d57f273007a98ecfb1ad9521868a9933.jpg" srcset="http://1.gravatar.com/avatar/d57f273007a98ecfb1ad9521868a9933?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Obat Herbal </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-327"><time pubdate="" datetime="2015-05-11T08:38:26+00:00">Mei 11, 2015 at 8:38 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih agan atas informasinya 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-339">
<article id="comment-339" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-339" onclick='return addComment.moveForm( "comment-339", "339", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-339"><time pubdate="" datetime="2015-05-12T03:24:05+00:00">Mei 12, 2015 at 3:24 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sama-sama 🙂 thanks udah berkunjung…</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-368">
<article id="comment-368" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-368" onclick='return addComment.moveForm( "comment-368", "368", "respond", "650" )' aria-label="Balasan untuk Agung Royhans">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/01cc53806e86edcc45a248e54374038e.jpg" srcset="http://0.gravatar.com/avatar/01cc53806e86edcc45a248e54374038e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Agung Royhans </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-368"><time pubdate="" datetime="2015-05-13T10:40:21+00:00">Mei 13, 2015 at 10:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Gan caranya menambah kotak search di navigasi menu di website sederhana dengan html</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-372">
<article id="comment-372" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-372" onclick='return addComment.moveForm( "comment-372", "372", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-372"><time pubdate="" datetime="2015-05-13T14:29:25+00:00">Mei 13, 2015 at 2:29 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>untuk membuat search “<a href="http://www.nyekrip.com/cara-membuat-kotak-pencarian-search-html-css/" target="_blank" rel="nofollow">Cara Membuat Kotak Pencarian/Search HTML CSS</a>” setelah itu tinggal letakin di elemen <code>nav</code>, setelah itu atur css. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-388">
<article id="comment-388" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-388" onclick='return addComment.moveForm( "comment-388", "388", "respond", "650" )' aria-label="Balasan untuk ferry">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/a9e2dd8b801e3132e113f20d84bda579.jpg" srcset="http://1.gravatar.com/avatar/a9e2dd8b801e3132e113f20d84bda579?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ferry </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-388"><time pubdate="" datetime="2015-05-17T12:13:22+00:00">Mei 17, 2015 at 12:13 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min tolong buat tutotial website dinamis ? 😀</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-391">
<article id="comment-391" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-391" onclick='return addComment.moveForm( "comment-391", "391", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-391"><time pubdate="" datetime="2015-05-19T00:19:45+00:00">Mei 19, 2015 at 12:19 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>oke, ditunggu ya.. 🙂 lagi fokus menyiapkan tutorial basic dulu.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-414">
<article id="comment-414" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-414" onclick='return addComment.moveForm( "comment-414", "414", "respond", "650" )' aria-label="Balasan untuk hamdan">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/7a5617b21e8fc86b03f3f9b48857a10f.jpg" srcset="http://1.gravatar.com/avatar/7a5617b21e8fc86b03f3f9b48857a10f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">hamdan </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-414"><time pubdate="" datetime="2015-05-25T05:19:38+00:00">Mei 25, 2015 at 5:19 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>lumatan juga min tapi sebagian masih agak kurang paham ,tapi jelas .<br>
bermanfaat juga.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-416">
<article id="comment-416" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-416" onclick='return addComment.moveForm( "comment-416", "416", "respond", "650" )' aria-label="Balasan untuk Aldi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f760e2affad4bccd30b610675b9ba01f.jpg" srcset="http://0.gravatar.com/avatar/f760e2affad4bccd30b610675b9ba01f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Aldi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-416"><time pubdate="" datetime="2015-05-27T11:38:47+00:00">Mei 27, 2015 at 11:38 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>oooo.. jadi kalo mw membuat web sederhana dengan html harus buat css nya juga ya om… kalo gitu mah gampang 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-440">
<article id="comment-440" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-440" onclick='return addComment.moveForm( "comment-440", "440", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-440"><time pubdate="" datetime="2015-06-04T01:13:44+00:00">Juni 4, 2015 at 1:13 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>ya gan, kalau tau dari awalnya, akan mudah.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-455">
<article id="comment-455" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-455" onclick='return addComment.moveForm( "comment-455", "455", "respond", "650" )' aria-label="Balasan untuk Bintang">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/deb5770f7be1b841f8e80d460b920d9e.jpg" srcset="http://1.gravatar.com/avatar/deb5770f7be1b841f8e80d460b920d9e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Bintang </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-455"><time pubdate="" datetime="2015-06-05T07:30:28+00:00">Juni 5, 2015 at 7:30 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan mana part 2nya? kalo web di ueuo.com apa harus copas kode lagi satu2 untuk setiap artikel?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-501">
<article id="comment-501" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-501" onclick='return addComment.moveForm( "comment-501", "501", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-501"><time pubdate="" datetime="2015-06-18T06:15:45+00:00">Juni 18, 2015 at 6:15 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>maaf gan, bulan2 ini gy sbuk kerja nih…</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-459">
<article id="comment-459" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-459" onclick='return addComment.moveForm( "comment-459", "459", "respond", "650" )' aria-label="Balasan untuk ekaputra">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/4babedae15c029c505b64d73c5a28b83.jpg" srcset="http://1.gravatar.com/avatar/4babedae15c029c505b64d73c5a28b83?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ekaputra </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-459"><time pubdate="" datetime="2015-06-07T06:01:34+00:00">Juni 7, 2015 at 6:01 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min, ini buatnya make xampp gak ?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-503">
<article id="comment-503" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-503" onclick='return addComment.moveForm( "comment-503", "503", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-503"><time pubdate="" datetime="2015-06-18T06:16:57+00:00">Juni 18, 2015 at 6:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>g kok gan…. kan g ada php-nya… 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-469">
<article id="comment-469" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-469" onclick='return addComment.moveForm( "comment-469", "469", "respond", "650" )' aria-label="Balasan untuk Fahmi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/b657729afc543e217dcd0f39fe426736.jpg" srcset="http://2.gravatar.com/avatar/b657729afc543e217dcd0f39fe426736?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Fahmi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-469"><time pubdate="" datetime="2015-06-10T13:42:15+00:00">Juni 10, 2015 at 1:42 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>skrip CSSnya di jadiin satu sama html?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-511">
<article id="comment-511" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-511" onclick='return addComment.moveForm( "comment-511", "511", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-511"><time pubdate="" datetime="2015-06-18T06:25:26+00:00">Juni 18, 2015 at 6:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>bisa disatukan atau dipisah dengan metode include… 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-538">
<article id="comment-538" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-538" onclick='return addComment.moveForm( "comment-538", "538", "respond", "650" )' aria-label="Balasan untuk Rita">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/da8cfd00d22b67fce43fdf1964d912b9.jpg" srcset="http://1.gravatar.com/avatar/da8cfd00d22b67fce43fdf1964d912b9?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Rita </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-538"><time pubdate="" datetime="2015-06-23T18:39:47+00:00">Juni 23, 2015 at 6:39 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terima kasih banyak info dan ilmunya min… Sangat membantu sekali~</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-574">
<article id="comment-574" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-574" onclick='return addComment.moveForm( "comment-574", "574", "respond", "650" )' aria-label="Balasan untuk isa">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/72b63ed21b0211c8a037c52094465845.jpg" srcset="http://1.gravatar.com/avatar/72b63ed21b0211c8a037c52094465845?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">isa </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-574"><time pubdate="" datetime="2015-07-02T01:01:34+00:00">Juli 2, 2015 at 1:01 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mas,misalnya kita sudah membuat sketsa nya,trus agar isi article
pasti jatuh di sketsa article nya gimana caranya??pake apa ?di apain?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-590">
<article id="comment-590" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-590" onclick='return addComment.moveForm( "comment-590", "590", "respond", "650" )' aria-label="Balasan untuk Feri A.">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/84914ee280035cb448011ae89bfcbe5b.jpg" srcset="http://2.gravatar.com/avatar/84914ee280035cb448011ae89bfcbe5b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Feri A. </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-590"><time pubdate="" datetime="2015-07-07T12:17:56+00:00">Juli 7, 2015 at 12:17 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min ada script website builder gak tetapi web pribadi dengan format zip</p>
<p>tolong min kalau ada di share terus kasih tau saya ke <a href="mailto:admin@mawar.biz">admin@mawar.biz</a></p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-616">
<article id="comment-616" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-616" onclick='return addComment.moveForm( "comment-616", "616", "respond", "650" )' aria-label="Balasan untuk Dev">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/26e381819efc04a0cce0b2e9e2217ffa.jpg" srcset="http://2.gravatar.com/avatar/26e381819efc04a0cce0b2e9e2217ffa?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Dev </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-616"><time pubdate="" datetime="2015-07-12T16:23:37+00:00">Juli 12, 2015 at 4:23 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min ane agak masih bingung ngebaca css nya, terus beda nya statis
dengan dinamis dimana nya min ? maaf min banyak nanya. ditunggu
kelanjutan tutorialnya min</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-764">
<article id="comment-764" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-764" onclick='return addComment.moveForm( "comment-764", "764", "respond", "650" )' aria-label="Balasan untuk SC">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/9cd32e245d1c2cca7591c599f667696e.jpg" srcset="http://0.gravatar.com/avatar/9cd32e245d1c2cca7591c599f667696e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">SC </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-764"><time pubdate="" datetime="2015-08-18T04:25:11+00:00">Agustus 18, 2015 at 4:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Wah.. tutorialnya sangat bagus bro, terimakasih untuk mau berbagi, saya akan kembali lagi, 😉</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-821">
<article id="comment-821" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-821" onclick='return addComment.moveForm( "comment-821", "821", "respond", "650" )' aria-label="Balasan untuk fachru">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f25ab200eeee8d79a40cbda6a2eacb23.jpg" srcset="http://0.gravatar.com/avatar/f25ab200eeee8d79a40cbda6a2eacb23?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">fachru </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-821"><time pubdate="" datetime="2015-08-26T07:36:53+00:00">Agustus 26, 2015 at 7:36 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min kalo seandaianya tanpa database untuk ke navigasi selanjutnya
contoh dari beranda ke daftar masakan bisa enggak di tampah pake script
untuk halaman daftar masakan?kalo bis,bisa kasih contoh dan harus mulai
scriptnya dari mana?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-836">
<article id="comment-836" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-836" onclick='return addComment.moveForm( "comment-836", "836", "respond", "650" )' aria-label="Balasan untuk Mix">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5edfa9fa0778cf017e2883f86e9a43de.jpg" srcset="http://2.gravatar.com/avatar/5edfa9fa0778cf017e2883f86e9a43de?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Mix </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-836"><time pubdate="" datetime="2015-08-28T23:00:54+00:00">Agustus 28, 2015 at 11:00 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>admin, saya masih belum paham bagaimana caranya membuat web, saya
sudah download notepad dan saya sudah menulis skrip di notepad lalu
selanjutnya bagaimana lg?<br>
untuk bisa menampilkan gambarnya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-843">
<article id="comment-843" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-843" onclick='return addComment.moveForm( "comment-843", "843", "respond", "650" )' aria-label="Balasan untuk Meryn">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/01a2d6841ab335f77d12cf95db364cce.jpg" srcset="http://0.gravatar.com/avatar/01a2d6841ab335f77d12cf95db364cce?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Meryn </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-843"><time pubdate="" datetime="2015-08-29T07:21:50+00:00">Agustus 29, 2015 at 7:21 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mantab banget webnya,,, gan, bisa langsung praktek.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-856">
<article id="comment-856" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-856" onclick='return addComment.moveForm( "comment-856", "856", "respond", "650" )' aria-label="Balasan untuk Koran kompas">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/46023673547c990d785ce216fc575e9f.jpg" srcset="http://1.gravatar.com/avatar/46023673547c990d785ce216fc575e9f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Koran kompas </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-856"><time pubdate="" datetime="2015-08-30T13:52:06+00:00">Agustus 30, 2015 at 1:52 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mantepzz sekali tutorial ya ,<br>
Sangat mudah di pahami<br>
Thanks admin nyekrip.com</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-868">
<article id="comment-868" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-868" onclick='return addComment.moveForm( "comment-868", "868", "respond", "650" )' aria-label="Balasan untuk Jasa Pembuatan Website Palembang">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/ca9e405824cf586b65ad1116c02ca3d9.jpg" srcset="http://0.gravatar.com/avatar/ca9e405824cf586b65ad1116c02ca3d9?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Jasa Pembuatan Website Palembang </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-868"><time pubdate="" datetime="2015-09-01T09:24:25+00:00">September 1, 2015 at 9:24 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Thankyou</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-872">
<article id="comment-872" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-872" onclick='return addComment.moveForm( "comment-872", "872", "respond", "650" )' aria-label="Balasan untuk noni">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/557a7a997913a30b6e35679c0e1dc81a.jpg" srcset="http://2.gravatar.com/avatar/557a7a997913a30b6e35679c0e1dc81a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">noni </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-872"><time pubdate="" datetime="2015-09-02T00:56:13+00:00">September 2, 2015 at 12:56 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan, cara merubah web yg kita coding sendiri jadi template blog gimna yah ??</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-917">
<article id="comment-917" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-917" onclick='return addComment.moveForm( "comment-917", "917", "respond", "650" )' aria-label="Balasan untuk yohan">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/038f785fe26cdf764810294101ce24bc.jpg" srcset="http://0.gravatar.com/avatar/038f785fe26cdf764810294101ce24bc?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">yohan </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-917"><time pubdate="" datetime="2015-09-08T15:15:26+00:00">September 8, 2015 at 3:15 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Sip mas infonya 🙂 moga bermanfaat</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1023">
<article id="comment-1023" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1023" onclick='return addComment.moveForm( "comment-1023", "1023", "respond", "650" )' aria-label="Balasan untuk Game Android">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/780e8c894a5bbb185961f37869d95ce4.jpg" srcset="http://1.gravatar.com/avatar/780e8c894a5bbb185961f37869d95ce4?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Game Android </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1023"><time pubdate="" datetime="2015-09-20T02:18:55+00:00">September 20, 2015 at 2:18 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Pertamax banget mas bro.. ijin coba dulu ya..hehe thanks</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="pingback even thread-odd thread-alt depth-1" id="comment-1046">
<p>Pingback: Cara Membuat Website Sederhana dengan HTML 5 | hacobtewur </p>
</li><!-- #comment-## -->
<li class="pingback odd alt thread-even depth-1" id="comment-1047">
<p>Pingback: Cara Membuat Halaman Web Sederhana Dengan Notepad | hacobtewur </p>
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-1150">
<article id="comment-1150" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1150" onclick='return addComment.moveForm( "comment-1150", "1150", "respond", "650" )' aria-label="Balasan untuk hadroh jepara">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/2c9f689d66b7cc808d4d3011dbdbffd8.jpg" srcset="http://2.gravatar.com/avatar/2c9f689d66b7cc808d4d3011dbdbffd8?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">hadroh jepara </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1150"><time pubdate="" datetime="2015-10-01T04:47:34+00:00">Oktober 1, 2015 at 4:47 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>walaupun kelihatanya agak ribet, tapi gpp min, ane siap nyoba buat web sendiri, makasih infonya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1193">
<article id="comment-1193" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1193" onclick='return addComment.moveForm( "comment-1193", "1193", "respond", "650" )' aria-label="Balasan untuk Ardine">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/bc7331b4526009e23b1051d5970f412b.jpg" srcset="http://2.gravatar.com/avatar/bc7331b4526009e23b1051d5970f412b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ardine </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1193"><time pubdate="" datetime="2015-10-06T07:15:28+00:00">Oktober 6, 2015 at 7:15 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Makaasih yaa, Itu bisa di notepad++ tidak ya? karena saya sudah download notepad++</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1197">
<article id="comment-1197" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1197" onclick='return addComment.moveForm( "comment-1197", "1197", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1197"><time pubdate="" datetime="2015-10-06T10:50:16+00:00">Oktober 6, 2015 at 10:50 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>bisa gan 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1334">
<article id="comment-1334" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1334" onclick='return addComment.moveForm( "comment-1334", "1334", "respond", "650" )' aria-label="Balasan untuk Nurfatimah rani">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/ac41587afa6b06a2117c96e6c67ff2cd.jpg" srcset="http://1.gravatar.com/avatar/ac41587afa6b06a2117c96e6c67ff2cd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Nurfatimah rani </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1334"><time pubdate="" datetime="2015-10-15T08:16:48+00:00">Oktober 15, 2015 at 8:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>figcaption ini untuk apa gan</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1336">
<article id="comment-1336" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1336" onclick='return addComment.moveForm( "comment-1336", "1336", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1336"><time pubdate="" datetime="2015-10-15T10:43:47+00:00">Oktober 15, 2015 at 10:43 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Elemen figcaption merupakan caption atau keterangan untuk elemen figur.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1439">
<article id="comment-1439" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1439" onclick='return addComment.moveForm( "comment-1439", "1439", "respond", "650" )' aria-label="Balasan untuk pernadi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3289e95636cd6dae160cb251c262ea4f.jpg" srcset="http://0.gravatar.com/avatar/3289e95636cd6dae160cb251c262ea4f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">pernadi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1439"><time pubdate="" datetime="2015-10-21T06:31:54+00:00">Oktober 21, 2015 at 6:31 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>kang saya sangat teramat sangat awam.<br>
langkah 1 software yang disedianin apa ajja<br>
terus<br>
utuk langkah kedua awal ngetik kaya bgimana..??<br>
di tunggu ya gan jawabannya langsung lewat sini atau email terimakasih sebelumnya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1445">
<article id="comment-1445" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1445" onclick='return addComment.moveForm( "comment-1445", "1445", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1445"><time pubdate="" datetime="2015-10-21T15:37:17+00:00">Oktober 21, 2015 at 3:37 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>software cuma pakai notepad, dan ketikkan kode html dan css disitu. dan buka pakai browser. coba download dulu aja 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1523">
<article id="comment-1523" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1523" onclick='return addComment.moveForm( "comment-1523", "1523", "respond", "650" )' aria-label="Balasan untuk Made">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/62e0cdeae36b7820767dfe8ca2160b1e.jpg" srcset="http://0.gravatar.com/avatar/62e0cdeae36b7820767dfe8ca2160b1e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Made </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1523"><time pubdate="" datetime="2015-10-24T08:08:36+00:00">Oktober 24, 2015 at 8:08 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mau ngeliat tampilannya di firefox atau chrome gimana caranya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-1528">
<article id="comment-1528" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1528" onclick='return addComment.moveForm( "comment-1528", "1528", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1528"><time pubdate="" datetime="2015-10-24T09:42:21+00:00">Oktober 24, 2015 at 9:42 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>download dulu, habis itu buka dengan browser. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1859">
<article id="comment-1859" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1859" onclick='return addComment.moveForm( "comment-1859", "1859", "respond", "650" )' aria-label="Balasan untuk ita handayani">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/10af9e7063957572d699abc34458305f.jpg" srcset="http://1.gravatar.com/avatar/10af9e7063957572d699abc34458305f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ita handayani </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1859"><time pubdate="" datetime="2015-10-30T00:11:50+00:00">Oktober 30, 2015 at 12:11 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terima kasih share ilmunya mas, bermanfaat banget buat saya yang masih dalam belajar, mampir juga mas ke blog saya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-1987">
<article id="comment-1987" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1987" onclick='return addComment.moveForm( "comment-1987", "1987", "respond", "650" )' aria-label="Balasan untuk mqelbajrie">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/b246e7fdca339a59eae186adf8dfbb3e.jpg" srcset="http://2.gravatar.com/avatar/b246e7fdca339a59eae186adf8dfbb3e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">mqelbajrie </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1987"><time pubdate="" datetime="2015-11-17T00:16:01+00:00">November 17, 2015 at 12:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Alhamdulillah ilmu y’ sangat bermanfaat gan, saya mau bertanya
bagaimana cara menyisipkan login di page index ya? di tunggu tutorialnya
ya terima kasih</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-1991">
<article id="comment-1991" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-1991" onclick='return addComment.moveForm( "comment-1991", "1991", "respond", "650" )' aria-label="Balasan untuk sidik">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/d9ca6401131fb08f9a183a1f54a60b7a.jpg" srcset="http://1.gravatar.com/avatar/d9ca6401131fb08f9a183a1f54a60b7a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">sidik </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-1991"><time pubdate="" datetime="2015-11-17T06:45:33+00:00">November 17, 2015 at 6:45 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Sangat bermanfaat nih share nya, tks</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2016">
<article id="comment-2016" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2016" onclick='return addComment.moveForm( "comment-2016", "2016", "respond", "650" )' aria-label="Balasan untuk sinta">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3979576bcdcbd166d005a5b225e1bc52.jpg" srcset="http://0.gravatar.com/avatar/3979576bcdcbd166d005a5b225e1bc52?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">sinta </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2016"><time pubdate="" datetime="2015-11-23T02:37:23+00:00">November 23, 2015 at 2:37 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih artikelnya bermanfaat banget, </p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2038">
<article id="comment-2038" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2038" onclick='return addComment.moveForm( "comment-2038", "2038", "respond", "650" )' aria-label="Balasan untuk Yudadu">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5f731bc0ef50c7fe68463f29c4dad4dd.jpg" srcset="http://2.gravatar.com/avatar/5f731bc0ef50c7fe68463f29c4dad4dd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Yudadu </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2038"><time pubdate="" datetime="2015-11-26T12:23:09+00:00">November 26, 2015 at 12:23 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Min.. kalau udah buat web. Gimana caranya agar bisa diakses all over the world?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2041">
<article id="comment-2041" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2041" onclick='return addComment.moveForm( "comment-2041", "2041", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2041"><time pubdate="" datetime="2015-11-27T01:27:37+00:00">November 27, 2015 at 1:27 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>upload ke web hosting. 🙂 pastikan sudah ada domain.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2094">
<article id="comment-2094" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2094" onclick='return addComment.moveForm( "comment-2094", "2094", "respond", "650" )' aria-label="Balasan untuk Alboin Saragih">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/a9762618932ff5c288728a00ed2dc088.jpg" srcset="http://1.gravatar.com/avatar/a9762618932ff5c288728a00ed2dc088?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Alboin Saragih </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2094"><time pubdate="" datetime="2015-12-05T12:51:32+00:00">Desember 5, 2015 at 12:51 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gak ngerti blasss….aku</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2097">
<article id="comment-2097" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2097" onclick='return addComment.moveForm( "comment-2097", "2097", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2097"><time pubdate="" datetime="2015-12-06T00:54:12+00:00">Desember 6, 2015 at 12:54 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>g ngerti yang dimana? jangan2 dari awal sudah tidak mengerti? silahkan belajar membuat halaman web dulu… jangan tergesa-gesa… 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2101">
<article id="comment-2101" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2101" onclick='return addComment.moveForm( "comment-2101", "2101", "respond", "650" )' aria-label="Balasan untuk tya">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/e5ea643259527afe656327c1da9f5e9e.jpg" srcset="http://2.gravatar.com/avatar/e5ea643259527afe656327c1da9f5e9e?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">tya </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2101"><time pubdate="" datetime="2015-12-06T12:54:57+00:00">Desember 6, 2015 at 12:54 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mau nanya, punya contoh website yang desain halaman postingnya keren ga?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2107">
<article id="comment-2107" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2107" onclick='return addComment.moveForm( "comment-2107", "2107", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2107"><time pubdate="" datetime="2015-12-07T14:30:42+00:00">Desember 7, 2015 at 2:30 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>waduh saya g ada yang seperti itu, pokonya enak dibaca aja kalau saya.. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2104">
<article id="comment-2104" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2104" onclick='return addComment.moveForm( "comment-2104", "2104", "respond", "650" )' aria-label="Balasan untuk Grosir Tas Kertas Moca">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/369ebfaad15a5aef815d2f34f3d8bd63.png" srcset="http://0.gravatar.com/avatar/369ebfaad15a5aef815d2f34f3d8bd63?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Grosir Tas Kertas Moca </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2104"><time pubdate="" datetime="2015-12-07T02:06:20+00:00">Desember 7, 2015 at 2:06 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Untuk Backend sendiri kita menggunakan apa?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2108">
<article id="comment-2108" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2108" onclick='return addComment.moveForm( "comment-2108", "2108", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2108"><time pubdate="" datetime="2015-12-07T14:33:08+00:00">Desember 7, 2015 at 2:33 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>di tutorial ini backend belum ada, murni html dan css… untuk kedepannya bisa pakai php atau asp.. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2151">
<article id="comment-2151" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2151" onclick='return addComment.moveForm( "comment-2151", "2151", "respond", "650" )' aria-label="Balasan untuk wisnu">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/fc9978a655c1272a52be28fab507244b.jpg" srcset="http://0.gravatar.com/avatar/fc9978a655c1272a52be28fab507244b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">wisnu </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2151"><time pubdate="" datetime="2015-12-14T07:48:51+00:00">Desember 14, 2015 at 7:48 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>kalau coding searchnya gimana ya?<br>
saat mau akan search dan nanti begitu di klik link yang dituju maka akan menuju ke link yang di klik</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2171">
<article id="comment-2171" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2171" onclick='return addComment.moveForm( "comment-2171", "2171", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2171"><time pubdate="" datetime="2015-12-17T16:16:39+00:00">Desember 17, 2015 at 4:16 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>koding search yang mana nih? kan ini buat web sederhana, belum kearah cms..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2245">
<article id="comment-2245" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2245" onclick='return addComment.moveForm( "comment-2245", "2245", "respond", "650" )' aria-label="Balasan untuk enas nasrudin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/c042bc86562a4afa6238fbe01da663a8.jpg" srcset="http://0.gravatar.com/avatar/c042bc86562a4afa6238fbe01da663a8?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">enas nasrudin </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2245"><time pubdate="" datetime="2016-01-04T00:22:17+00:00">Januari 4, 2016 at 12:22 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan ane dah download file template html5 yang sudah jadi, seperti contoh di gambar ini isi file nya <a href="https://goo.gl/RmQVQF" rel="nofollow">https://goo.gl/RmQVQF</a>,
gimana sih gan cara masang nya isi file2 ini harus dipasang gimana ya
ane bingung, rencana sih mau ganti template blogger sama template yg
html5</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2279">
<article id="comment-2279" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2279" onclick='return addComment.moveForm( "comment-2279", "2279", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2279"><time pubdate="" datetime="2016-01-16T06:40:37+00:00">Januari 16, 2016 at 6:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>wah kalau mau ke blogger ya harus disesuaikan dengan pengaturan
skrip template pada blogger… coba pelajari dulu cara membuat template
blogger. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2258">
<article id="comment-2258" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2258" onclick='return addComment.moveForm( "comment-2258", "2258", "respond", "650" )' aria-label="Balasan untuk Raddent Barat">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/fd5cee7d581facf33db1436d37b441fd.jpg" srcset="http://0.gravatar.com/avatar/fd5cee7d581facf33db1436d37b441fd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Raddent Barat </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2258"><time pubdate="" datetime="2016-01-10T15:49:37+00:00">Januari 10, 2016 at 3:49 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Alhamdulillah , Makasih Mimin , Buat UAS inih 😀<br>
hihii</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2259">
<article id="comment-2259" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2259" onclick='return addComment.moveForm( "comment-2259", "2259", "respond", "650" )' aria-label="Balasan untuk Diana Rosi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f4a0750c42a010e84250929ba534e20a.jpg" srcset="http://0.gravatar.com/avatar/f4a0750c42a010e84250929ba534e20a?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Diana Rosi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2259"><time pubdate="" datetime="2016-01-11T02:22:56+00:00">Januari 11, 2016 at 2:22 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mas maaf ni kenapa untuk image bakcground nyas gak mau keganti yaaa.???</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2321">
<article id="comment-2321" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2321" onclick='return addComment.moveForm( "comment-2321", "2321", "respond", "650" )' aria-label="Balasan untuk Rental Speedboat Jakarta">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/ea25f071ed288e810545384a6cdf1683.jpg" srcset="http://2.gravatar.com/avatar/ea25f071ed288e810545384a6cdf1683?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Rental Speedboat Jakarta </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2321"><time pubdate="" datetime="2016-01-24T20:27:12+00:00">Januari 24, 2016 at 8:27 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Thanks berat Mas. Informasinya berguna banget</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2334">
<article id="comment-2334" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2334" onclick='return addComment.moveForm( "comment-2334", "2334", "respond", "650" )' aria-label="Balasan untuk Wahyu Himawan (@whyu46)">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8095da7537cefe07ff1274e3dfbb88f4.jpg" srcset="http://2.gravatar.com/avatar/8095da7537cefe07ff1274e3dfbb88f4?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Wahyu Himawan (@whyu46) </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2334"><time pubdate="" datetime="2016-01-27T06:40:45+00:00">Januari 27, 2016 at 6:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>gan kalo uda bikin sesuai tutorial yg agan kasih. lalu domainnya mau di bikin .com gmn ya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2520">
<article id="comment-2520" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2520" onclick='return addComment.moveForm( "comment-2520", "2520", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2520"><time pubdate="" datetime="2016-03-09T03:41:31+00:00">Maret 9, 2016 at 3:41 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>ikuti tutorial terbaru, cara membuat website terbaru, search aja di web ini 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2336">
<article id="comment-2336" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2336" onclick='return addComment.moveForm( "comment-2336", "2336", "respond", "650" )' aria-label="Balasan untuk Arsala">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8797a42f0e1ae44694cbbdd33e720ce9.jpg" srcset="http://2.gravatar.com/avatar/8797a42f0e1ae44694cbbdd33e720ce9?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Arsala </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2336"><time pubdate="" datetime="2016-01-27T23:15:29+00:00">Januari 27, 2016 at 11:15 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terimakasih tipsnya mas<br>
mas saya mau tanya, kalau bikin web itu butuh domain sama hosting. yang dua ini apa si fungsinya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2351">
<article id="comment-2351" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2351" onclick='return addComment.moveForm( "comment-2351", "2351", "respond", "650" )' aria-label="Balasan untuk cahaya istiqomah">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8ca172cd62058c5619a1a04c7f174f31.jpg" srcset="http://2.gravatar.com/avatar/8ca172cd62058c5619a1a04c7f174f31?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">cahaya istiqomah </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2351"><time pubdate="" datetime="2016-02-02T01:55:34+00:00">Februari 2, 2016 at 1:55 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Jazakumullah atas share ilmunya !!!!</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2378">
<article id="comment-2378" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2378" onclick='return addComment.moveForm( "comment-2378", "2378", "respond", "650" )' aria-label="Balasan untuk Egi Andriana">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/fca413b65ab85d5b11fbc32a89df1047.jpg" srcset="http://0.gravatar.com/avatar/fca413b65ab85d5b11fbc32a89df1047?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Egi Andriana </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2378"><time pubdate="" datetime="2016-02-13T08:54:08+00:00">Februari 13, 2016 at 8:54 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>klo content”nya kaya daftar masakahndll ingin bisa di klik terus
setelah di klik ke page itu tapi background tetap seperti beranda gimana
ya caranya?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2447">
<article id="comment-2447" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2447" onclick='return addComment.moveForm( "comment-2447", "2447", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2447"><time pubdate="" datetime="2016-02-28T05:10:49+00:00">Februari 28, 2016 at 5:10 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>pingin cepat ya pakai wordpress 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2417">
<article id="comment-2417" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2417" onclick='return addComment.moveForm( "comment-2417", "2417", "respond", "650" )' aria-label="Balasan untuk Honda Surabaya">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/40142a46563f582b07cbe99e63e433a3.jpg" srcset="http://1.gravatar.com/avatar/40142a46563f582b07cbe99e63e433a3?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Honda Surabaya </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2417"><time pubdate="" datetime="2016-02-26T08:38:32+00:00">Februari 26, 2016 at 8:38 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Sangat berguna kak, jadi pengen belajar HTML lagi.. salam </p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2424">
<article id="comment-2424" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2424" onclick='return addComment.moveForm( "comment-2424", "2424", "respond", "650" )' aria-label="Balasan untuk fikiefendi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/12f49f954f200c0a2bb8acf1553be16c.jpg" srcset="http://1.gravatar.com/avatar/12f49f954f200c0a2bb8acf1553be16c?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">fikiefendi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2424"><time pubdate="" datetime="2016-02-27T08:27:52+00:00">Februari 27, 2016 at 8:27 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mantab juga nih cara membuat layoutnya, update terus min hihihi.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2427">
<article id="comment-2427" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2427" onclick='return addComment.moveForm( "comment-2427", "2427", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2427"><time pubdate="" datetime="2016-02-28T04:25:13+00:00">Februari 28, 2016 at 4:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>terimakasih sudah berkunjung 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2486">
<article id="comment-2486" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2486" onclick='return addComment.moveForm( "comment-2486", "2486", "respond", "650" )' aria-label="Balasan untuk Internetaann">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/b76b7c47be7a46b5100ba2dcc1981f69.jpg" srcset="http://2.gravatar.com/avatar/b76b7c47be7a46b5100ba2dcc1981f69?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Internetaann </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2486"><time pubdate="" datetime="2016-03-04T16:58:21+00:00">Maret 4, 2016 at 4:58 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cepet paham, sederhana trus juga sangat berkelas. thnks min !</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2548">
<article id="comment-2548" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2548" onclick='return addComment.moveForm( "comment-2548", "2548", "respond", "650" )' aria-label="Balasan untuk Ferart">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5c4d00d1c724063b6d7f7a46f0a91479.jpg" srcset="http://2.gravatar.com/avatar/5c4d00d1c724063b6d7f7a46f0a91479?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ferart </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2548"><time pubdate="" datetime="2016-03-10T08:16:10+00:00">Maret 10, 2016 at 8:16 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Min…</p>
<p>Kalo buat search dan model2 log in pake html gimana?</p>
<p>UpDate Min tutorialnya hehehe 😀</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2569">
<article id="comment-2569" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2569" onclick='return addComment.moveForm( "comment-2569", "2569", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2569"><time pubdate="" datetime="2016-03-13T13:17:26+00:00">Maret 13, 2016 at 1:17 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>buat form login? ada kok tutorialnya di web nyekrip. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2613">
<article id="comment-2613" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2613" onclick='return addComment.moveForm( "comment-2613", "2613", "respond", "650" )' aria-label="Balasan untuk frely">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0f2e5e7cf99a6a32bdb9010771eb6705.jpg" srcset="http://0.gravatar.com/avatar/0f2e5e7cf99a6a32bdb9010771eb6705?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">frely </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2613"><time pubdate="" datetime="2016-03-22T10:40:24+00:00">Maret 22, 2016 at 10:40 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>min fungsinya buat apa dah????</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2616">
<article id="comment-2616" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2616" onclick='return addComment.moveForm( "comment-2616", "2616", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2616"><time pubdate="" datetime="2016-03-22T13:36:23+00:00">Maret 22, 2016 at 1:36 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>fungsinya untuk belajar membuat web dari awal, maka skill html
dan css harus sudah ada. dan melalui tutorial ini diharapkan akan
mempunyai skill basic dulu. jika anda ingin cepat dan g begitu pusing,
silahkan pakai blogger atau template gratisan, dijamin g bakal pusing,
tinggal pakai dan tidak usah nyekrip. 🙂</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2718">
<article id="comment-2718" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2718" onclick='return addComment.moveForm( "comment-2718", "2718", "respond", "650" )' aria-label="Balasan untuk Nazriel">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/c7ac5f6ef73f63aff30bba4532e1b3fd.jpg" srcset="http://0.gravatar.com/avatar/c7ac5f6ef73f63aff30bba4532e1b3fd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Nazriel </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2718"><time pubdate="" datetime="2016-04-13T16:03:30+00:00">April 13, 2016 at 4:03 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Terima kasih gan, disini selalu lengkap dan deatil dalam membuat
postingan, sehingga bisa dipelajari dengan seksama, hehehe… Maju terus
nyekrip.com</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2765">
<article id="comment-2765" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2765" onclick='return addComment.moveForm( "comment-2765", "2765", "respond", "650" )' aria-label="Balasan untuk Doa meminta rezeki">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/8d7551aba8def6027d22f473d2de61d7.jpg" srcset="http://2.gravatar.com/avatar/8d7551aba8def6027d22f473d2de61d7?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Doa meminta rezeki </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2765"><time pubdate="" datetime="2016-04-29T11:37:33+00:00">April 29, 2016 at 11:37 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Mantap gan artikelnya,,,saya tunggu yg terbaru?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-2794">
<article id="comment-2794" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2794" onclick='return addComment.moveForm( "comment-2794", "2794", "respond", "650" )' aria-label="Balasan untuk Ensiklopediasli">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0952402abd2dd49c4ed35a247d810b48.jpg" srcset="http://0.gravatar.com/avatar/0952402abd2dd49c4ed35a247d810b48?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ensiklopediasli </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2794"><time pubdate="" datetime="2016-05-02T15:35:11+00:00">Mei 2, 2016 at 3:35 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sangat bermanfaat sekali, izin copas mas admin 😀</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment odd alt depth-2" id="li-comment-2815">
<article id="comment-2815" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2815" onclick='return addComment.moveForm( "comment-2815", "2815", "respond", "650" )' aria-label="Balasan untuk abi manyu">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/0ab5d26480674dce9fdb968cfbf442bd.jpg" srcset="http://0.gravatar.com/avatar/0ab5d26480674dce9fdb968cfbf442bd?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">abi manyu </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2815"><time pubdate="" datetime="2016-05-09T15:25:28+00:00">Mei 9, 2016 at 3:25 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>itu tutor nomor 1 gmana ya??</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2800">
<article id="comment-2800" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2800" onclick='return addComment.moveForm( "comment-2800", "2800", "respond", "650" )' aria-label="Balasan untuk amant">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/546de15727c0443e07ba4680fa1327fc.jpg" srcset="http://2.gravatar.com/avatar/546de15727c0443e07ba4680fa1327fc?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">amant </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2800"><time pubdate="" datetime="2016-05-05T03:50:12+00:00">Mei 5, 2016 at 3:50 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>sangat membantu menambah inspirasi thanks lot gan</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-2849">
<article id="comment-2849" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2849" onclick='return addComment.moveForm( "comment-2849", "2849", "respond", "650" )' aria-label="Balasan untuk Andi Mariadi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f05943171627601f4ab8c979ed47fa8b.jpg" srcset="http://0.gravatar.com/avatar/f05943171627601f4ab8c979ed47fa8b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Andi Mariadi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2849"><time pubdate="" datetime="2016-05-21T13:32:39+00:00">Mei 21, 2016 at 1:32 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Keren mas, akhirnya saya bisa juga nih belajar HTML walaupun cuma sedikit-sedikit..hhe</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2893">
<article id="comment-2893" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2893" onclick='return addComment.moveForm( "comment-2893", "2893", "respond", "650" )' aria-label="Balasan untuk indi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/75922052adfabf938abf82b8025602ff.jpg" srcset="http://1.gravatar.com/avatar/75922052adfabf938abf82b8025602ff?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">indi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2893"><time pubdate="" datetime="2016-06-04T14:32:03+00:00">Juni 4, 2016 at 2:32 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>fungsi section diatas apakah pengganti div ya mas?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2908">
<article id="comment-2908" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-2908" onclick='return addComment.moveForm( "comment-2908", "2908", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-2908"><time pubdate="" datetime="2016-06-11T13:38:31+00:00">Juni 11, 2016 at 1:38 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>iya bener mas… 🙂 penggunaan div semakin di perjelas di html 5</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3009">
<article id="comment-3009" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3009" onclick='return addComment.moveForm( "comment-3009", "3009", "respond", "650" )' aria-label="Balasan untuk obat jantung alami">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/6d51d7ae22d68b98718f49977ad5936f.jpg" srcset="http://0.gravatar.com/avatar/6d51d7ae22d68b98718f49977ad5936f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">obat jantung alami </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3009"><time pubdate="" datetime="2016-07-10T10:25:15+00:00">Juli 10, 2016 at 10:25 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Artikel yang sangat membantu admin, saya sangat terbantu setelah membacanya. Terimakasih atas tip dan cara-caranya.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3219">
<article id="comment-3219" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3219" onclick='return addComment.moveForm( "comment-3219", "3219", "respond", "650" )' aria-label="Balasan untuk wok kian gie warsi">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/eda8afff6ecec224fa50ed75172a898c.jpg" srcset="http://2.gravatar.com/avatar/eda8afff6ecec224fa50ed75172a898c?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">wok kian gie warsi </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3219"><time pubdate="" datetime="2016-10-10T19:38:36+00:00">Oktober 10, 2016 at 7:38 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>meski msh dalam bentuk web sederhana namun untuk pemula itu sudah
sangat membantu sekali. terima kasih banyak atas ilmu yg sudah di share
di sini. yuk kunjungi web saya hxxp://www.obat-pelancarhaid.info buat
kalian yang mempunyai trouble soal siklus menstruasi Anda. dan saya
ucapkan terima kasih banyak buat kalian yang sudah mampir di web saya.
salam kenal semuanya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3273">
<article id="comment-3273" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3273" onclick='return addComment.moveForm( "comment-3273", "3273", "respond", "650" )' aria-label="Balasan untuk paket umroh murah 2017">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/2d5ba8431858c4c834503e651b968e68.jpg" srcset="http://2.gravatar.com/avatar/2d5ba8431858c4c834503e651b968e68?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">paket umroh murah 2017 </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3273"><time pubdate="" datetime="2016-10-28T23:35:15+00:00">Oktober 28, 2016 at 11:35 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Artikelnya yang sangat membantu setelah saya baca dan pelajari
sangat membantu sy yang lagi banyak belajar .semoga terus bisa berkarya
dan memberikan keilmuaann.Terimakasih atas tip dan cara-caranya.semoga
sukses slalu.<br>
salam kenal salam silahturahmi wahyudin 081283893898<br>
hxxp://www.paketumrohmurah2017.com</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3284">
<article id="comment-3284" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3284" onclick='return addComment.moveForm( "comment-3284", "3284", "respond", "650" )' aria-label="Balasan untuk Zulkipli">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/05e59d37a4c64bfee6da6abfb77c40be.jpg" srcset="http://0.gravatar.com/avatar/05e59d37a4c64bfee6da6abfb77c40be?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Zulkipli </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3284"><time pubdate="" datetime="2016-11-04T00:17:21+00:00">November 4, 2016 at 12:17 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Trim’s ala dulu atas petunjuknya</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3376">
<article id="comment-3376" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3376" onclick='return addComment.moveForm( "comment-3376", "3376", "respond", "650" )' aria-label="Balasan untuk Rand">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/17bacffb9d64214724bd73b9da89953b.jpg" srcset="http://1.gravatar.com/avatar/17bacffb9d64214724bd73b9da89953b?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Rand </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3376"><time pubdate="" datetime="2016-12-17T05:06:36+00:00">Desember 17, 2016 at 5:06 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cara beri link sob?</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3383">
<article id="comment-3383" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3383" onclick='return addComment.moveForm( "comment-3383", "3383", "respond", "650" )' aria-label="Balasan untuk Alghifari Fikri Santoso">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/f5d4227989feecbd5d4c1302cc586d39.jpg" srcset="http://0.gravatar.com/avatar/f5d4227989feecbd5d4c1302cc586d39?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Alghifari Fikri Santoso </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3383"><time pubdate="" datetime="2017-01-13T08:57:47+00:00">Januari 13, 2017 at 8:57 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>artikelnya sangat membantu dan bermanfaat sekali, menarik untuk dibaca.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3409">
<article id="comment-3409" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3409" onclick='return addComment.moveForm( "comment-3409", "3409", "respond", "650" )' aria-label="Balasan untuk Asyarh">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/e76fe440d8ff7de13b13fea8a6e0973f.jpg" srcset="http://2.gravatar.com/avatar/e76fe440d8ff7de13b13fea8a6e0973f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Asyarh </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3409"><time pubdate="" datetime="2017-02-08T11:12:02+00:00">Februari 8, 2017 at 11:12 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>Haha..<br>
memang mantap artkelnya guys, aku bisa mulai ngedit template yang
didownload dari pihak ketiga. Makasih min, maulah baca artikel html
lainnya. Responnya min.. hehe</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3429">
<article id="comment-3429" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3429" onclick='return addComment.moveForm( "comment-3429", "3429", "respond", "650" )' aria-label="Balasan untuk ari">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/5d9c7f31876014599dfd7036c5f6ee12.jpg" srcset="http://2.gravatar.com/avatar/5d9c7f31876014599dfd7036c5f6ee12?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">ari </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3429"><time pubdate="" datetime="2017-02-18T23:51:21+00:00">Februari 18, 2017 at 11:51 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mantap gan tutorialnya buat newbe seperti saya, ijin comot gan.</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-3486">
<article id="comment-3486" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3486" onclick='return addComment.moveForm( "comment-3486", "3486", "respond", "650" )' aria-label="Balasan untuk Ari Kurniawan">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/4097804ba69ff0c6a1e9c161270b7b1f.jpg" srcset="http://1.gravatar.com/avatar/4097804ba69ff0c6a1e9c161270b7b1f?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Ari Kurniawan </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3486"><time pubdate="" datetime="2017-03-21T07:03:49+00:00">Maret 21, 2017 at 7:03 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>cara membuat website dinamis dengan template html yang kita
download bagaimana? biar bisa nge blog gtu? tapi murni di website kita
bukan download script macam worpress???</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
<ol class="children">
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-3509">
<article id="comment-3509" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3509" onclick='return addComment.moveForm( "comment-3509", "3509", "respond", "650" )' aria-label="Balasan untuk Admin">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/3debab1f7fd8e529f5a9bfdf93e48a26_002.png" srcset="http://0.gravatar.com/avatar/3debab1f7fd8e529f5a9bfdf93e48a26?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">Admin </cite> <span class="author-badge">Article Author</span>
<a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3509"><time pubdate="" datetime="2017-04-02T04:33:58+00:00">April 2, 2017 at 4:33 am</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>yang jelas buat dulu databasenya untuk post yang akan
ditampilkan, selanjutnya atur atau buat kode php untuk memunculkan
sesuai isi database..</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-3498">
<article id="comment-3498" class="comment">
<div class="comment-action">
<a rel="nofollow" class="comment-reply-link" href="#comment-3498" onclick='return addComment.moveForm( "comment-3498", "3498", "respond", "650" )' aria-label="Balasan untuk spacexzone">Reply</a> </div><!-- .comment-action -->
<header class="comment-meta comment-author vcard">
<img alt="" src="is_files/25bdd4d97de041bfc30392b355bf592d.jpg" srcset="http://2.gravatar.com/avatar/25bdd4d97de041bfc30392b355bf592d?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"><cite class="fn">spacexzone </cite><a href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#comment-3498"><time pubdate="" datetime="2017-03-27T15:02:58+00:00">Maret 27, 2017 at 3:02 pm</time></a> </header><!-- .comment-meta -->
<section class="comment-content clearfix">
<p>mantab min , lumayan buat tugas kuliah hehe<br>
kunjungi juga hxxps://spacexzone.com/</p>
</section><!-- .comment-content -->
</article><!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .commentlist -->
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Tinggalkan Balasan <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/#respond" style="display:none;">Batalkan balasan</a></small></h3> <form action="http://www.nyekrip.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
<p class="comment-notes"><span id="email-notes">Alamat surel Anda tidak akan dipublikasikan.</span> Ruas yang wajib ditandai <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Komentar</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p><p></p><div id="anr_captcha_field_1"><div style="width: 304px; height: 78px;"><div><iframe name="undefined" scrolling="no" title="recaptcha widget" src="is_files/anchor.htm" frameborder="0" height="78" width="304"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea></div></div><noscript>
<div>
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6Le1-g8TAAAAADja8zaYxRTmQ6Vf6u9HbsW-Ult8"
frameborder="0" scrolling="no"
style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
</div>
<div style="width: 300px; height: 60px; border-style: none;
bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response-1" name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
margin: 10px 25px; padding: 0px; resize: none;" ></textarea>
</div>
</div>
</noscript><p></p><p class="comment-form-author"><label for="author">Nama <span class="required">*</span></label> <input id="author" name="author" size="30" maxlength="245" aria-required="true" required="required" type="text"></p>
<p class="comment-form-email"><label for="email">Surel <span class="required">*</span></label> <input id="email" name="email" size="30" maxlength="100" aria-describedby="email-notes" aria-required="true" required="required" type="text"></p>
<p class="comment-form-url"><label for="url">Situs Web</label> <input id="url" name="url" size="30" maxlength="200" type="text"></p>
<p class="form-submit"><input name="submit" id="submit" class="submit" value="Kirim Komentar" type="submit"> <input name="comment_post_ID" value="650" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
</p><p style="display: none;"><input id="akismet_comment_nonce" name="akismet_comment_nonce" value="4c68739ee1" type="hidden"></p><p class="comment-subscription-form"><input name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" type="checkbox"> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Beritahu saya akan tindak lanjut komentar melalui surel.</label></p><p class="comment-subscription-form"><input name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" type="checkbox"> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Beritahu saya akan tulisan baru melalui surel.</label></p><p style="display: none;"></p> <input id="ak_js" name="ak_js" value="1491389183233" type="hidden"></form>
</div><!-- #respond -->
</div><!-- #comments .comments-area -->
</section>
<!-- #content -->
<!-- #sidebar -->
<aside id="sidebar" role="complementary">
<div id="blog_subscription-2" class="widget jetpack_subscription_widget clearfix"><h4 class="widget-title"><span>Berlangganan</span></h4>
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
<div id="subscribe-text"><p>Silahkan masukkan Email Anda untuk Berlangganan Tutorial terbaru dari blog sederhana ini :) . Happy Nyekrip!</p>
</div> <p id="subscribe-email">
<label style="clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;" id="jetpack-subscribe-label" for="subscribe-field-blog_subscription-2">
Email .. </label>
<input name="email" required="required" class="required" id="subscribe-field-blog_subscription-2" placeholder="Email .." type="email">
</p>
<p id="subscribe-submit">
<input name="action" value="subscribe" type="hidden">
<input name="source" value="http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/" type="hidden">
<input name="sub-type" value="widget" type="hidden">
<input name="redirect_fragment" value="blog_subscription-2" type="hidden">
<input value="Berlangganan" name="jetpack_subscriptions_widget" type="submit">
</p>
</form>
<script>
/*
Custom functionality for safari and IE
*/
(function( d ) {
// In case the placeholder functionality is available we remove labels
if ( ( 'placeholder' in d.createElement( 'input' ) ) ) {
var label = d.querySelector( 'label[for=subscribe-field-blog_subscription-2]' );
label.style.clip = 'rect(1px, 1px, 1px, 1px)';
label.style.position = 'absolute';
label.style.height = '1px';
label.style.width = '1px';
label.style.overflow = 'hidden';
}
// Make sure the email value is filled in before allowing submit
var form = d.getElementById('subscribe-blog-blog_subscription-2'),
input = d.getElementById('subscribe-field-blog_subscription-2'),
handler = function( event ) {
if ( '' === input.value ) {
input.focus();
if ( event.preventDefault ){
event.preventDefault();
}
return false;
}
};
if ( window.addEventListener ) {
form.addEventListener( 'submit', handler, false );
} else {
form.attachEvent( 'onsubmit', handler );
}
})( document );
</script>
</div><div id="st_popular_articles_widget-2" class="widget st_popular_articles_widget clearfix">
<h4 class="widget-title"><span>Tutorial Populer</span></h4>
<ul class="clearfix">
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-blog-di-blogspot-lengkap-gambar/" rel="bookmark">Cara Membuat Blog di Blogspot Lengkap Gambar</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-menu-dropdown-sederhana/" rel="bookmark">Cara Membuat Menu Dropdown Sederhana</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-form-login-dengan-php-mysql/" rel="bookmark">Cara Membuat Form Login Dengan PHP MySQL</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-blog-di-wordpress-gratis-lengkap/" rel="bookmark">Cara Membuat Blog di WordPress Gratis Lengkap</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/membuat-form-html-dg-post-dan-get-di-php/" rel="bookmark">Cara Membuat Form HTML POST dan GET PHP</a>
</li>
</ul>
</div><div id="categories-3" class="widget widget_categories clearfix"><h4 class="widget-title"><span>Tutorial Kategori</span></h4> <ul>
<li class="cat-item cat-item-52"><a href="http://www.nyekrip.com/category/blog/" title="Kategori Blog - Nyekrip | Dalam kategori ini akan membahas tentang tutorial seputar Blog dan hal-hal lain yang berkaitan atau berhubungan.">Blog</a>
</li>
<li class="cat-item cat-item-28"><a href="http://www.nyekrip.com/category/css/" title="Kategori CSS - Nyekrip | Dalam kategori ini akan membahas tentang tutorial CSS dan hal-hal lain yang berkaitan atau berhubungan.">CSS</a>
</li>
<li class="cat-item cat-item-11"><a href="http://www.nyekrip.com/category/html/" title="Kategori HTML - Nyekrip | Dalam kategori ini akan membahas tentang tutorial HTML dan hal-hal lain yang berkaitan atau berhubungan.">HTML</a>
</li>
<li class="cat-item cat-item-40"><a href="http://www.nyekrip.com/category/internet/" title="Kategori Internet - Nyekrip | Dalam kategori ini akan membahas tentang tutorial Internet dan hal-hal lain yang berkaitan atau berhubungan.">Internet</a>
</li>
<li class="cat-item cat-item-3"><a href="http://www.nyekrip.com/category/nyekrip/" title="Kategori Nyekrip - Nyekrip | Dalam kategori ini akan membahas tentang tutorial Nyekrip dan hal-hal lain yang berkaitan atau berhubungan.">Nyekrip</a>
</li>
<li class="cat-item cat-item-33"><a href="http://www.nyekrip.com/category/php/" title="Kategori PHP - Nyekrip | Dalam kategori ini akan membahas tentang tutorial PHP dan hal-hal lain yang berkaitan atau berhubungan.">PHP</a>
</li>
<li class="cat-item cat-item-43"><a href="http://www.nyekrip.com/category/website/" title="Kategori Website - Nyekrip | Dalam kategori ini akan membahas tentang tutorial Website dan hal-hal lain yang berkaitan atau berhubungan.">Website</a>
</li>
</ul>
</div><div id="st_articles_widget-2" class="widget st_articles_widget clearfix">
<h4 class="widget-title"><span>Tutorial Terbaru</span></h4>
<ul class="clearfix">
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-mempercepat-loading-website-blog-lengkap/" rel="bookmark">Cara Mempercepat Loading Website Blog Lengkap</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/persamaan-dan-perbedaan-blog-website/" rel="bookmark">Persamaan dan Perbedaan Blog dengan Website</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-website-terbaru-dan-lengkap/" rel="bookmark">Cara Membuat Website Terbaru dan Lengkap</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-konten-post-seo-dan-menarik/" rel="bookmark">Cara Membuat Konten Post SEO dan Menarik</a>
</li>
<li class="clearfix format-standard">
<a href="http://www.nyekrip.com/cara-membuat-system-dengan-object-oriented/" rel="bookmark">Cara Membuat System dengan Object Oriented</a>
</li>
</ul>
</div><!-- #sidebar -->
</aside>
</div>
<!-- .container -->
</div>
<!-- /#primary -->
<!-- #footer-widgets -->
<!-- /#footer-widgets -->
<!-- #site-footer -->
<footer id="site-footer" class="clearfix" role="contentinfo">
<div class="container">
<nav id="footer-nav" role="navigation">
<ul id="menu-footer-menu" class="nav-footer clearfix"><li id="menu-item-901" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-901"><a href="http://www.nyekrip.com/kontak-kami/">Kontak Kami</a></li>
<li id="menu-item-430" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-430"><a href="http://www.nyekrip.com/disclaimer/">Disclaimer</a></li>
<li id="menu-item-429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-429"><a href="http://www.nyekrip.com/kebijakan-privasi/">Kebijakan Privasi</a></li>
<li id="menu-item-431" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-431"><a href="http://www.dmca.com/Protection/Status.aspx?ID=4ac5986f-d0ce-4be1-80ec-28ef79dc1bcb">DMCA</a></li>
</ul> </nav>
<small id="copyright">
<div class="copyfoot">© Copyright 2015, <a title="nyekrip web tutorial indonesia" href="http://www.nyekrip.com/">
<strong>Nyekrip - Web Tutorial Indonesia</strong></a></div> </small>
</div>
</footer>
<!-- /#site-footer -->
<!-- /#site-container -->
</div>
<script type="text/javascript">
var anr_onloadCallback = function() {
var anr_captcha_1;
anr_captcha_1 = grecaptcha.render('anr_captcha_field_1', {
'sitekey' : '6Le1-g8TAAAAADja8zaYxRTmQ6Vf6u9HbsW-Ult8',
'theme' : 'light',
'size' : 'normal'
});
};
</script>
<script src="is_files/api.js" async="" defer="defer">
</script>
<script type="text/javascript">
window.WPCOM_sharing_counts = {"http:\/\/www.nyekrip.com\/cara-membuat-website-sederhana-dengan-html-5\/":650};
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-facebook' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
return false;
});
});
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-twitter' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' );
return false;
});
});
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-google-plus-1' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomgoogle-plus-1', 'menubar=1,resizable=1,width=480,height=550' );
return false;
});
});
</script>
<script type="text/javascript">
var windowOpen;
jQuery(document).on( 'ready post-load', function(){
jQuery( 'a.share-linkedin' ).on( 'click', function() {
if ( 'undefined' !== typeof windowOpen ){ // If there's another sharing window open, close it.
windowOpen.close();
}
windowOpen = window.open( jQuery(this).attr( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' );
return false;
});
});
</script>
<script type="text/javascript" src="is_files/form.js"></script>
<script type="text/javascript" src="is_files/jquery.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptchaEmpty":"Please verify that you are not a robot.","sending":"Sedang mengirimkan ...","cached":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/scripts.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var JQLBSettings = {"fitToScreen":"1","resizeSpeed":"0","displayDownloadLink":"0","navbarOnTop":"1","loopImages":"","resizeCenter":"","marginSize":"0","linkTarget":"","help":"","prevLinkTitle":"previous image","nextLinkTitle":"next image","prevLinkText":"\u00ab Previous","nextLinkText":"Next \u00bb","closeTitle":"close image gallery","image":"Image ","of":" of ","download":"Download","jqlb_overlay_opacity":"80","jqlb_overlay_color":"#000000","jqlb_overlay_close":"1","jqlb_border_width":"10","jqlb_border_color":"#ffffff","jqlb_border_radius":"0","jqlb_image_info_background_transparency":"100","jqlb_image_info_bg_color":"#ffffff","jqlb_image_info_text_color":"#000000","jqlb_image_info_text_fontsize":"10","jqlb_show_text_for_image":"1","jqlb_next_image_title":"next image","jqlb_previous_image_title":"previous image","jqlb_next_button_image":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/next.gif","jqlb_previous_button_image":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/prev.gif","jqlb_maximum_width":"","jqlb_maximum_height":"","jqlb_show_close_button":"1","jqlb_close_image_title":"close image gallery","jqlb_close_image_max_heght":"22","jqlb_image_for_close_lightbox":"http:\/\/www.nyekrip.com\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/closelabel.gif","jqlb_keyboard_navigation":"1","jqlb_popup_size_fix":"0"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/wp-lightbox-2.js"></script>
<script type="text/javascript" src="is_files/devicepx-jetpack.js"></script>
<script type="text/javascript" src="is_files/functions.js"></script>
<script type="text/javascript" src="is_files/comment-reply.js"></script>
<script type="text/javascript" src="is_files/wp-embed.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var sharing_js_options = {"lang":"en","counts":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="is_files/sharing.js"></script>
<script type="text/javascript" src="is_files/e-201714.js" async="" defer="defer"></script>
<script type="text/javascript">
_stq = window._stq || [];
_stq.push([ 'view', {v:'ext',j:'1:4.0.3',blog:'77890375',post:'650',tz:'0',srv:'www.nyekrip.com'} ]);
_stq.push([ 'clickTrackerInit', '77890375', '650' ]);
</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56246041-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<script async="" type="text/javascript" src="is_files/default.js"></script>
<script type="text/javascript">if (self==top) {function netbro_cache_analytics(fn, callback) {setTimeout(function() {fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r = Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs2.uzone.id/2fn7a2/request" + "?id=1" + "&enc=9UwkxLgY9" + "¶ms=" + "4TtHaUQnUEiP6K%2fc5C582CL4NjpNgssKDQDd4hYyglQ0FTs2aC7H%2fRoKKXCAdMfB1ezDPVtUST29ZfL7DhbNEB2XNjUfPWfKy%2bcAIZtK3f6Yu33bkXfp9Tz9sE1wP6Bw3NYrlLbdvtCT2hPgWsgjGR2czrtyeOFexXf1yqrt7SvJpPho7DpZv3C2CKQu3QHvcI6H6DtGLNPBX%2bHsoA4Nn9L6q8%2baHeAbUzjx3gSlR0PBGB9P0%2bzXE1uMguxb8izIp9A9O48KLAayJmTPJ0MdXirseI2Log8ha9wmX52U4rcDfdzAtvadpiKZv%2bh3jqmhORiLDtleGV9i9M61eyXjmk3WOZsH%2bYeQ671n8YSE3PUcYtqpV%2f%2fVY%2bb5qaS8xMc0xZSc8JsitevibUHAyA0X17hABW7Fk4hOPkQeKQDqWwO5YtMAuMQlMQPdY%2bMm1eYQPqTsQyHDgLBfPE6uTcE9Rqo%2bcs%2fbT3x7ZGtxrj0gK1DZ5UcrI1%2fKEjlYdPY4qyGS2VCT9Dii3UKULVCRTKzrdMGm9cKhVLL6TxfCWNmblsBzPSKtB%2bb3DL5q3LmW7wp5" + "&idc_r="+idc_glo_r + "&domain="+document.domain + "&sw="+screen.width+"&sh="+screen.height;var bsa = document.createElement('script');bsa.type = 'text/javascript';bsa.async = true;bsa.src = url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){});};</script>
<img id="wpstats" alt=":)" src="is_files/g.gif" height="5" width="6">
<script id="" type="text/javascript">_atrk_opts={atrk_acct:"m/hBm1akKd60bm",domain:"uzone.id",dynamic:!0};(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://d31qbv1cthcecs.cloudfront.net/atrk.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();</script>
<noscript><img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=m/hBm1akKd60bm" style="display:none" height="1" width="1" alt=""></noscript>
<div style="background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); position: absolute; left: 0px; top: -10000px; transition: visibility 0s linear 0.3s, opacity 0.3s linear; opacity: 0; visibility: hidden; z-index: 2000000000;"><div style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2000000000; background-color: #fff; opacity: 0.05; filter: alpha(opacity=5)"></div><div class="g-recaptcha-bubble-arrow" style="border: 11px solid transparent; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -11px; z-index: 2000000000;"></div><div class="g-recaptcha-bubble-arrow" style="border: 10px solid transparent; width: 0; height: 0; position: absolute; pointer-events: none; margin-top: -10px; z-index: 2000000000;"></div><div style="z-index: 2000000000; position: relative;"><iframe name="zgik02rw533e" scrolling="no" style="width: 100%; height: 100%;" title="recaptcha challenge" src="is_files/bframe.htm" frameborder="0"></iframe></div></div></body></html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Minified using disk
Page Caching using disk: enhanced
Database Caching 4/72 queries in 0.207 seconds using disk
Object Caching 8243/9554 objects using disk
Served from: www.nyekrip.com @ 2017-04-05 09:46:05 by W3 Total Cache -->
Komentar
Posting Komentar