Tutorial Membuat Responsive Template dengan HTML5 dan CSS (Source Code)

Tutorial Membuat Responsive Template dengan HTML5 dan CSS - Hai, kali ini saya akan memberikan tutorial untuk membuat Responsive Template dengan HTML5 dan CSS.
mungkin sebagian dari kalian sudah move on ke framework semacam bootstrap untuk membuat responsive template. Yup saya akui juga menggunakan bootstrap membuat pekerjaan menjadi lebih mudah dan secara defaultnya pun terlihat sudah bagus, kalo kata dosen saya sudah ada nilai jualnya.

yup tapi gak ada salahnya juga buat belajar responsive selain dari bootstrap, yah anggap saja kamu bisa paham bagaimana responsive itu bekerja.
oh ya video ini saya dapet dari chanel 1stWebDesigner , buat kamu yang mau liat videonya silahkan kesana, tapi mereka tidak menyediakan script jadinya.

ok langsung aja, so what we need?

1. Siapkan folder dan filenya
Ok disini saya buat folder dengan nama tesweb dengan folder image di dalamnya, dan file index.html serta style.css

2. Buat Script untuk index.html
<!DOCTYPE html>
<html>
<head>
<title>html responsive</title>

</head>
<body class="body">
<header class="mainheader">
<img src="img/bndrea.jpg">
<nav>
<ul>
<li><a href="">home</a></li
<li><a href="">about</a></li>
<li><a href="">porto</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>
<div class="maincontent">
<div class="content">
<article class="topcontent">
<header>
<h2><a href="#" title="first post">First post</a></h2>
</header>
<footer>
<p class="post-info">post ditulis oleh kodekidi</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</content>
</article>
<article class="bottomcontent">
<header>
<h2><a href="#" title="second post">second post</a></h2>
</header>
<footer>
<p class="post-info">post ditulis oleh kodekidi</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim eniam,is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse illum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat no proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</article>
</aside>
<footer class="mainfooter">
<p>copyright © <a href="kodekidi">kodekidi</a></p>
</footer>
</body>
</html>

dalam script tersebut terdapat salah satu atribut dari html5, yaitu <article>
Jika dijalankan hasilnya akan seperti ini:

3. Buat script CSSnya
scriptnya saya beri nama style.css
body
{

color: #000305;
font-size: 87.5%; /*base font size adalah 14px*/
font-family: arial, 'lucida sans Unicode';
line-height: 1.5;
text-align: left;
background-image: url('img/asanoha-400px.png');
}

a{
text-decoration: none;
}

a:link, a:visited
{
color: #CF5C3F;
}

a:hover, a:active{
background-color: #CF5C3F;
color: #FFF;
}

.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2% 0;
}

.mainheader nav
{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul{
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li
{
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited
{
color: #fff;
display: inline-block;
padding: 10px 25px ;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active
.mainheader nav .active a:link, .mainheader nav .active a:visited
{
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a
{
.border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.maincontent
{
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

}
.content{
width: 70%;
float: left;

}
.topcontent
{
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent
{
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.top-sidebar
{
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
padding: 2% 3%;
margin-bottom: 2%;
margin-top: 2%;
}
.post-info
{
font-style: italic;
color: #999;
font-size: 85%;
}

.middle-sidebar
{
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
padding: 2% 3%;
margin-top: 2%;

}
.bottom-sidebar
{
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
padding: 2% 3%;
margin-top: 2%;
}

.mainfooter
{
width: 100%;
height: 40px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 2% 0;
background-color: #666;

}
.mainfooter p
{
width: 92%;
margin: 10px auto;
color: #fff;
}
setelah di sisipkan pada file index sebelumnya dan dijalankan, maka hasilnya akan seperti gambar dibawah

Sebenarnya tampilan tersebut sudah dapat mengecil sesuai dengan ukuran device karena menggunakan atribut dari html5, tapi masih acak acakan karena tidak menggunakan script @media
nah script @media ini yang akan saya bahas pada langkah berikutnya

4. Mebuat script @media
@media only screen and (min-width: 150px) and (max-width: 600px )
{
.body{
width: 90%;
font-size: 95%;
}
.mainheader img {
width: 100%;
}
.mainheader nav
{
height: 160px;
}
.mainheader nav ul{
padding-left: 0;
}
.mainheader nav ul li
{
width: 100%;
text-align: center;
}
.mainheader nav a:link, .mainheader nav a:visited
{

padding: 10px 25px ;
height: 20px;
display: block;
}
.content{
width: 100%;
float: left;
margin-top: 2%;
}
.post-info{
display: none;
}
.topcontent
{
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 4%;
margin-bottom: 4%;
}
.bottomcontent
{
margin-top: 3%;
}
.top-sidebar
{
width: 94%;
margin: 2% 0 2% 0;
padding: 2% 3%;
}
.middle-sidebar
{
width: 94%;
margin: 2% 0 2% 0;
padding: 2% 3%;

}
.bottom-sidebar
{
width: 94%;
margin: 2% 0 2% 0;
padding: 2% 3%;
}

}

script di atas untuk membuat template dapat menyesuaikan ukuran device
maka hasilnya akan seperti ini

<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}

menu nav, post , sidebar dan footer menjadi sejajar saat script sudah dijalankan

Ok sekia Tutorial Membuat Responsive Template dengan HTML5 dan CSS, semoga bermanfaat.

kalo ada pertanyaan silahkan tanyakan di kolom comment

Download

About kodekidi

KodeKidi.com Situs Tutorial Pemograman Berbahasa Indonesia

KodeKidi - Situs Tutorial Pemrograman Berbahasa Indonesia

Tutorial Membuat Responsive Template dengan HTML5 dan CSS (Source Code)

About kodekidi

0 comments:

Post a Comment

Tutorial Membuat Responsive Template dengan HTML5 dan CSS (Source Code)

About kodekidi

RELATED POSTS

0 comments:

Post a Comment