Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
- divs have a special class/id associated with them.
<div class = "header"> ..... </div>
<div class = "section"> ..... </div>
<div class = "footer"> ..... </div>
Page Layout Information:
- 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.s
Syntax:
<header>
<h1> ----- </h1>
<h2> ----- </h2>
----------------
----------------
</header>
- 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.
Syntax:
<nav>
<ul>
<li> ..... </li>
<li> ..... </li>
</ul>
</nav>
- 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.
Syntax:
<footer>
.....
</footer>
Example:
html
<!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>
<div class="head1">
GeeksforGeeks
</div>
<div class="head2">
A computer science portal for geeks
</div>
</header>
<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>
<main class="body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</main>
<footer>Footer Section</footer>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Jul, 2023
Like Article
Save Article