Create one folder in your desktop or local drive. After creating a folder again create inner folers are css, images, javascrip etc,. Complete these process finally start the coding.....
Note : Save your main (home) page only index.html and another page names your wish.
<html>
<head>
<title>Basic HTML Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- Start Teplate -->
<div id="wrapper">
</div>
<!-- End Teplate -->
</body>
</html>/* (#) means ID Based */
/* (.) means class Based */
*{
margin-left:auto;
margin-right:auto;
}
body{
font-family:Arial, Helvetica, sans-serif;
background:#FFF;
margin:0px;
}
.clearfix{ clear:both;}
#wrapper{
width:1024px;
margin:0px auto;
background:#FFF;
border:1px solid #CCC;
}
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Servises</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>#nav{
width:1024px;
float:left;
background:#CCC;
}
#nav ul{
list-style:none;
}
#nav ul li{
list-style:none;
font-family:arial;
font-size:14px;
text-transform:uppercase;
padding:10px 0px 15px 0px;
margin:5px 0px 12px;
float:left;
font-weight:bold;
}
#nav ul li a{
padding:10px 45px 10px 45px;
margin:5px 0px;
text-decoration:none;
color:#000;
}
#nav ul li a:hover{
color:#000;
background:#FFF;
}
<div class="banner">
<img src="images/banner.jpg" alt="Banner Image" />
</div>.banner{
width:1024px;
height:auto;
}
<div class="content">
<div class="content-left">
<div class="content-header">Content Left</div>
<div class="clearfix"></div>
<img src="images/content-left.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,...</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="content-right">
<div class="content-header">Content Right</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,...</p>
<h4> Sample Heading</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,...</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s...</p>
</div>
</div>.content{
width:1022px;
height:auto;
border:1px solid #CCC;
float:left;
padding-bottom:20px;
}
.content-left{
width:290px;
height:auto;
float:left;
margin:5px;
}
p{
font-size:14px;
color:#000;
line-height:24px;
padding:10px;
text-align:justify;
}
.content-right{
width:712px;
height:auto;
float:left;
margin:5px;
}
.content-header{
background:#CCC;
color:#000;
font-size:18px;
text-align:justify;
padding:7px 10px 7px 10px;
}
.btn{
background:#069;
color:#FFF;
font-size:12px;
padding:7px 20px;
margin-left:10px;
text-decoration:none;
}
.btn:hover{
background:#004F75;
color:#FFF;
}
<div id="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Servises</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="clearfix"></div>
<div id="copyrights">
© 2018. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank">Free Time Learn</a>.
</div>
</div>#footer{
width:1024px;
float:left;
background:#CCC;
}
#footer ul{
list-style:none;
}
#footer ul li{
list-style:none;
font-family:arial;
font-size:10px;
text-transform:uppercase;
padding:15px 0px 5px 0px;
margin:5px 0px 12px;
float:left;
font-weight:bold;
}
#footer ul li a{
padding:10px 55px 10px 55px;
margin:5px 0px;
text-decoration:none;
color:#000;
}
#footer ul li a:hover{
color:#FFF;
}
#copyrights{
font-size:12px;
color:#000;
text-align:center;
padding:5px 0px 10px 0px;
}
#copyrights a{
color:#069;
text-decoration:none;
}
#copyrights a:hover{
color:#666;
}