website page layout html code example
Example 1: html layout
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example 2: html how to create a basic layout
<!DOCTYPE html>
<html>
<head>
<title>My Graphics Page</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Header text</h1>
</header>
<nav>
<h1>Nav text</h1>
</nav>
<main>
<h1>Main text</h1>
</main>
<aside>
<h1>Aside text</h1>
</aside>
<footer>
<h1>Footer text</h1>
</footer>
</body>
</html>
header{
background-color: orange;
width: 100%;
height: 150px;
text-align: center;
}
nav{
background-color: lime;
width: 24%;
height: 400px;
float: left;
text-align: center;
margin-right: 1%;
}
main{
background-color: yellow;
width: 50%;
height: 400px;
text-align: center;
float: left;
}
aside{
width: 24%;
background-color: lightblue;
height: 400px;
float: right;
text-align: center;
margin-left: 1%;
}
footer{
background-color: pink;
width: 100%;
height: 150px;
text-align: center;
clear: both;
}