In this tutorial you will learn the HTML Layout. HTML page layout plays a vital role to develop web content. It means where you need to put header, footer, section content, sidebar, etc to look at your site better. In other words, the website page layout is a part of Graphics Designing which deals with the management of live elements on a web page. Page layout is used to make your website look better for user experiences. It helps the developer to make a website page smooth, the eye-catching movement for the highest impact.
So, we will some examples of webpage Layout.
Header Example:
<header style="background-color: yellow; height: 80px; width: 100%"> <h1 style="font-size: 30px; color: black;text-align: center; padding-top: 15px;">The Header Layout</h1> </header>
In the above example you have to see the header layout. In the header section sorted background style to yellow and in <h1> style defines the font size color black align, padding, etc. In HTML layout you can change it yourself easily.
Footer Example:
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;"> <h2 style="background:black">The Footer Layout</h2> <p>© Copyright 2020-2030. </p> </footer>
The above example dive in the Footer web page layout. The <footer> element defines the footer section and has put footer background color black well. You can change it on your self.
Section Example:
<section style="background-color:black; width: 100%; border: 1px solid purple;"> <h2 style="color:white">Introduction to HTML</h2> <p style="color:yellow">HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser..</p> </section>
The section element defines the separate sections on a website page. It means where you want to put a section for the topic” Learn HTML” and after that, you need to add the “HTML Elements” section. It is important to separate the sections.