
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