html layout designer code example

Example: html how to create a basic layout

<!-- This is a full html and css page on how to create a basic webpage -->

<!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>

<!-- css page called 'style.css' -->
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;
}

Tags:

Html Example

Recent Posts