Layout in HTML

In this tutorial,it's describes as how to show content on a web page.

Examples of layout

Main title webtags

Main Menu
Home
About
Contact...
webdevelopment and technical shart courses.
Copyright © 2020 webtags.com
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Layout</title>
  </head>
  <body>
    <table width = "100%" border = "0">
      <tr>
        <td colspan = "2" bgcolor = "#b5dcb3">
          <h1>Main title webtags</h1>
        </td>
      </tr>
      <tr valign = "top">
        <td bgcolor = "#aaa" width = "50">
          <b>Main Menu</b><br />
              Home<br />
              About<br />
              Contact...
        </td>
        <td bgcolor = "#eee" width = "100" height = "200">
              webdevelopment and technical shart courses.
        </td>
      </tr>
      <tr>
        <td colspan = "2" bgcolor = "#b5dcb3">
          <center>
              Copyright © 2020 webtags.com
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
    

Explanation of above layout

Header Area

As in above source code sample, the beggining portion at the top of the page. Where <head> tag is used to add header section in web pages.It consists on title tag, meta tag and linking tags etc which are not shown in the browser bydefault.

Navigation bar

The navigation bar is same as side menu list which mostly consists on links. In above example is clearly shown having main menu.

Content Section

As in the above example, middle area is show with a paragraph is the content section which is the main part where content is shown.

Footer Area

As in the above source code, the last row which is showing the "Copyright © 2020 webtags.com" is the footer area. This is always used at the bottom of the page.








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


ads