Layout Components
Layouts | Descriptions |
---|---|
Header | The part of the front end which is used at the top of the page. <header> tag is used to add a header section on web pages. |
Navigation bar | The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks. <nav> tag is used to add the nav section(nav elements) in web pages. |
Index / Sidebar | It holds additional information or advertisements and is not always necessary to be added to the page. |
Content Section | The content section is the central part where content is displayed.<main> tag is used to add the main content of the webpages. |
Footer | The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag sets the footer on web pages. |
Example: In this example we defines a page layout with a header, navigation menu, body section, and footer. It includes CSS styling for elements like headings, menu, and footer, enhancing visual appeal and user experience.
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size: 40px;
color: #009900;
font-weight: bold;
}
.head2 {
font-size: 17px;
margin-left: 10px;
margin-bottom: 15px;
}
body {
margin: 0 auto;
background-position: center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding: 10px 0px 10px 0px;
color: white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top: 20px;
padding-bottom: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.body_sec {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="head1">
w3wiki
</div>
<div class="head2">
A computer science portal for geeks
</div>
</header>
<!-- Menu Navigation Bar -->
<nav class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">
NOTIFICATIONS
</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>
<!-- Body section -->
<main class="body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</main>
<!-- Footer Section -->
<footer>Footer Section</footer>
</body>
</html>
Output:
HTML Layout
HTML layouts are the backbone of web pages, structuring content for user-friendly navigation. They ensure organized presentation and enhance user experience. This guide explores elements and techniques vital for crafting effective HTML layouts.