Layout Website yang akan dibuat adalah merupakan tampilan website yang paling sederhana dan banyak dijumpai, seperti gambar berikut ini.
Kode : templatesederhana.html
it916@planning-ho-pc:~$ cat /var/www/html/lth5-templsederhana/templatesederhana.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="templatesederhana.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Learning By Doing</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
Sidebar
<ul>
<li><a href="#">Tutorial HTML Dasar</a></li>
<li><a href="#">Tutorial CSS Dasar</a></li>
<li><a href="#">Tutorial PHP Dasar</a></li>
<li><a href="#">Tutorial JQuery Dasar</a></li>
</ul>
</div>
<div class="content">
Content
</div>
</div>
<div class="clear"></div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
Kode : templatesederhana.css
it916@planning-ho-pc:~$ cat /var/www/html/lth5-templsederhana/templatesederhana.css
.wrap {
background: blue;
width: 900px;
margin: 10px auto;
}
/*Bagian Header*/
.wrap .header {
background: green;
/*height 50px*/
padding: 2px 10px;
}
/*Akhir Header*/
/*Bagian Menu*/
.wrap .menu {
background: yellow;
}
.wrap .menu ul {
padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.wrap .menu ul li {
float: left;
list-style-type: none;
padding: 10px;
}
/*Akir menu*/
.clear {
clear: both;
}
.badan {
height: 450px;
}
/*Bagian Sidebar*/
.wrap .badan .sidebar {
background: orange;
float: left;
width: 25%;
height: 100%;
}
/*Akhir Sidebar*/
/*Bagian Content*/
.wrap .badan .content {
background: red;
float: left;
height: 100%;
width: 75%;
}
/*Akhir Content*/
/*Bagian Footer*/
.wrap .footer {
width: 100%;
padding: 10px;
}
/*Akhir Footer*/
Hasil akhirnya akan seperti gambar berikut ini.
Demikian dan selamat mencoba.
Sumber : http://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/