NextIndex

Programs in HTML5

1. Creating a page layout using HTML5.

<html>
<head>
<title>My first page</title>
<style type="text/css">
header, nav, section, article, aside, footer{
      display:block;
  }
header{
	background-color:orange;
	width:980px;
	height:100px;
}
nav{
	background-color:yellow;
	width:980px;
	height:40px;
}
section{
	background-color:#099;
	width:830px;
	height:200px;
}
article{
	background-color:#FC6;
	width:830px;
	height:400px;
	
}
aside{
	background-color:#3F6;
	float:right;
	width:150px;
	height:600px;

}
footer{
	background-color:#66C;
	width:980px;
	height:40px;
}
div{
	width:980px;
	margin-left:auto;
	margin-right:auto;
	}
</style>
</head>
<body>
<div>
<header>
<h3>header</h3>

</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Projects</a> |
<a href="#">Features</a> |
<a href="#">Contact</a> |
</nav>
<aside>
aside
</aside>
<section>
section
</section>

<article>
article
</article>

<footer>
footer
</footer>
</div>
</body>
</html>

Output :





Developed by


World Wide Web Consortium WHATWG

World Wide Web Consortium & WHATWG