Kode Template Dasar HTML5 Blank

Kode Template Dasar HTML5 Blank,

Adalah sesuai judul artikel ini, pengertian selanjutnya terserah pembaca mengartikannya,

Kode Template Dasar HTML5 Blank adalah kode dasar dari pembuatan template html 5, dan html 5 jualah kode yang mudah buat menjadi template valid atau tanpa error ketika di cek di W3,

Sebelumya baca juga: Tiga Cara Mudah Memilih Template Hebat

Ok

Sebelum mencoba simpan template yang ada dulu,
Kode Template Dasar HTML5 Blank:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

<head>

<title>Bloqcoba</title>

<b:skin><![CDATA[ ]]></b:skin>

</head><body></body></HTML>

Simpan.

Untuk Desaign Responsive simple:

Struktur desain dengan CSS:

/* -- Flexible Grid / Layout -- */
*{
margin:0;
padding:0;
}
body {
background-color:#000;
color:#fff;
}
#wrap{
width:1024px;
background-color:#333;
margin:0 auto;
padding:10px;
}
.header{
height:150px;
width:auto;
background-color:#0069B6;
margin-bottom:1px;
}
.main-wrap{
background-color:#770DB7;
}
.content{
float:left;
width:68.35%;
background-color:#770DB7;
margin-bottom:1px;
}
.sidebar{
overflow:hidden;
float:right;
width:29.29%;
background-color:#54A743;
}
.footer{
clear:both;
height:150px;
background-color:#D95445;
width:auto;
}
/* -- Menu Navigation -- */
.menu {
width:100%;
margin-bottom:1px
}
#nav {
font-weight:bold;
background-color:#FFC40D
}
#nav ul {
height:auto;
margin:0;
padding:0
}
#nav li {
list-style:none;
display: inline-block;
margin:0;
padding:0
}
#nav li a {
display:block;
line-height:30px;
text-decoration:none;
color:white;
padding:0 15px
}
#nav li a:hover {
color:black
}

Langkah yang kedua adalah karena teknik ini flexible sesuai resolusi jadi kita harus menentukan kondisi layout dari resolusi dengan menggunakan CSS media queries

/* -- RESPONSIVE DENGAN MEDIA QUERIES -- */
@media screen and (max-width: 1024px){
/* CSS styles */
#wrap{
width:90%;
}
}
@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}

Langkah ketiga mari kita membuat struktur HTML dasar. Seperti yang kalian lihat desain layout atau template ini terdiri dari enam blok yaitu Wrapper, Header, Menu, Content, Sidebar dan Footer.

<div id="wrap">
<div class="header">
<h1>Header</h1>
</div>
<div class="menu">
<nav id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Help</a></li>
<li><a href='/'>Forum</a></li>
</ul>
</nav>
</div>
<div class="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi aliquet euismod nulla. Maecenas facilisis consectetuer purus. Nulla vestibulum molestie elit. Pellentesque pellentesque. Donec congue tempus velit. Sed aliquet risus ut sem. Vivamus et diam eu dui tincidunt viverra. Mauris malesuada pede nec justo. Nulla pulvinar. Pellentesque tincidunt nisi sit amet odio.</p>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>

Jika dituliskan secara lengkap dalam HTML5 kalian bisa mempelajari contoh koding dibawah ini:

<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<title>Belajar Responsive Web Design (RWD)</title>
<style type='text/css'>
/* -- CSS UTAMA DISINI -- */
*{ margin:0;padding:0; }
body {
background-color:#000;
color:#fff;
}
/* -- Flexible Grid / Layout -- */
#wrap{
width:1024px;
background-color:#333;
margin:0 auto;
padding:10px;
}
.header{
height:150px;
width:auto;
background-color:#0069B6;
margin-bottom:1px;
}
.main-wrap{
background-color:#770DB7;
}
.content{
float:left;
width:68.35%;
background-color:#770DB7;
margin-bottom:1px;
}
.sidebar{
overflow:hidden;
float:right;
width:29.29%;
background-color:#54A743;
}
.footer{
clear:both;
height:150px;
background-color:#D95445;
width:auto;
}
/* -- Menu Navigation -- */
.menu {
width:100%;
margin-bottom:1px
}
#nav {
font-weight:bold;
background-color:#FFC40D
}
#nav ul {
height:auto;
margin:0;
padding:0
}
#nav li {
list-style:none;
display: inline-block;
margin:0;
padding:0
}
#nav li a {
display:block;
line-height:30px;
text-decoration:none;
color:white;
padding:0 15px
}
#nav li a:hover {
color:black
}

/* -- RESPONSIVE DENGAN MEDIA QUERIES -- */
@media screen and (max-width: 1024px){
/* CSS styles */
#wrap{
width:90%;
}
}
@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="header">
<h1>Header</h1>
</div>
<div class="menu">
<nav id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Help</a></li>
<li><a href='/'>Forum</a></li>
</ul>
</nav>
</div>
<div class="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi aliquet euismod nulla. Maecenas facilisis consectetuer purus. Nulla vestibulum molestie elit. Pellentesque pellentesque. Donec congue tempus velit. Sed aliquet risus ut sem. Vivamus et diam eu dui tincidunt viverra. Mauris malesuada pede nec justo. Nulla pulvinar. Pellentesque tincidunt nisi sit amet odio.</p>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</HTML>

Untuk Menu Navigasi Responsive tanpa Javascript:
Bisa menggunakan CSS dibawah ini:

/* -- Menu Navigation -- */
.menu {
width:100%;
}
#nav {
font-weight:bold;
background-color:#FFC40D
}
#nav ul {
height:auto;
margin:0;
padding:0
}
#nav li {
list-style:none;
display: inline-block;
margin:0;
padding:0
}
#nav li a {
display:block;
line-height:30px;
text-decoration:none;
color:white;
padding:0 15px
}
#nav li a:hover {
color:black
}

Cara memanggil kode CSS diatas sebagai berikut:
<div class="menu">
<nav id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Forum</a></li>
</ul>
</nav>
</div>

Selesai

Judul : Kode Template Dasar HTML5 Blank
Deskripsi : Kode Template Dasar HTML5 Blank, Adalah sesuai judul artikel ini, pengertian selanjutnya terserah pembaca mengartikannya, Kode Templ...