simple layout design in html and css code example

Example 1: html layout

<!DOCTYPE html> <!-- Start of coding page -->
<html> <!-- Start of html coding -->
  <head> <!-- Start of head -->
    <title>TITLE</title> <!-- Title -->
    <script>
      //JavaScript
    </script>
    <style>
      /* CSS */
    </style>
  </head> <!-- End of head -->
  <body> <!-- Start of body -->
    <h1>Hello!</h1>
  </body> <!-- End of body -->
</html> <!-- End of html coding -->

Example 2: 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