Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

HTML Layout

In this tutorial, we will learn to design basic webpage layout in HTML with the help of examples.


Layout

Html layout provides a way to arrange web pages in well-structured, well-mannered way which make the web pages look better.
Now-a-days, all the websites are using CSS and JavaScript based frameworks for creating layouts for responsive and dynamic website designing.
Page layout works with the arrangement of visual elements of an HTML document.
Web page layout is the most important part to keep in mind while creating a website. So, our website can appear professional with a great look.


Basic Web Page Layout

Image not loaded


Layout Elements

Every website has a specific layout to display content in a specific manner.
Html has several semantic elements that define the different parts of a web page.

  • <header> : It is used to define a header for a document or a section.
  • <nav> : It is used to define a container for navigation links.
  • <section> : It is used to define a section in a document.
  • <article> : It is used to define an independent self-contained article.
  • <aside> : It is used to define content aside from the content(like a sidebar).
  • <footer> : It is used to define a footer for a document or a section.
  • <detail> : It is used to define additional details.
  • <summary> : It is used to define a heading for the <detail> element.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Layout</title>
    <style>
      header {
        background-color : black;
        color : white;
        text-align : center;
        padding : 5px;
      }
      nav {
        line-height : 30px;
        background-color : #eee321;
      }
      ul {
        display : flex;
        flex-direction : row;
      }
      ul li, li a{
        list-style : none;
        padding : 0 10px;
        text-decoration : none;
        font-size : 20px;
      }
      aside {
        float : left;
        background-color : skyblue;
        height : 300px;
        padding : 5px;
        line-height : 30px;
      }
      section, article {
        float : left;
        width : 350px;
        padding : 10px;
      }
      footer {
        background-color : black;
        color : white;
        text-align : center;
        padding : 5px;
      }
      details {
        padding : 5px;
        background-color : pink;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>online exam</h1>
    </header>
    <nav>
      <ul>
        <li><a href = "#">Home</a></li>
        <li><a href = "#">About</a></li>
        <li><a href = "#">News</a></li>
        <li><a href = "#">Login</a></li>
      </ul>
    </nav>
    <aside>
      <h2>Sidebar</h2>
      <p>Some Content...</p>
      <p>Home</p>
      <p>About</p>
    </aside>
    <section>
      <h2>Introduction Of HTML</h2>
      <p>HTML is a markup language which is used fo creating web
pages.</p>
    </section>
    <article>
      <h2>Introduction Of CSS</h2>
      <p>CSS stands for Cascading Style Sheet. </p>
    </article>
    <footer>
      <h3>Footer</h3>
      <p>@ Copyright 2020</p>
    </footer>
    <details>
      <summary>This is visible section: click to see other
details</summary>
      <p>This section shows when user click on it.</p>
    </details>
  </body>
</html>

Output

 

 

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!