Sunday, 24 May 2015

How To Create a Layout In HTML5

                1 comment   
HTML5 layout
Here is a very simple way you can create a new HTML5 layout. This is a responsive layout that means this will fit to any screen. you can check this by decreasing the width of your browser,  this will adjust with the screen. Here we use width as percentage(%), this will adjust the site with your screen.











<!DOCTYPE html>
<html>
<head>
 <style>
            /* Here is the CSS code */
 *
 {
  margin: auto;
 }
 h2
 {
  text-align: center;
  color: #fff;
 }
 header
 {
  width: 100%;
  height: 100px;
  background-color: #400000;
 }
 aside
 {
  width: 30%;
  height: 600px;
  float: left;
  background-color: #660066;
 }
 section
 {
  width: 100%;
  height: 600px;
  background-color: #663399;
 }
 footer
 {
  width: 100%;
  height: 50px;
  background-color: #400000;
  clear: both;
 }
 </style>
</head>
<body>
<!-- This is html code-->
<header>
 <h2>I am Header</h2>
</header>
<aside>
 <h2>Side Bar</h2>
</aside>
<section>
 <h2>Section</h2>
</section>
<footer>
 <h2>Footer</h2>
</footer>
</body>
</html>

1 comment: