fbpx
April 2, 2020
html layout

Tutorial 27# Introduction to HTML Layout and How to Design Them

In this tutorial we will be looking at HTML layout and how you can design beautiful website layouts. In our previous tutorial we looked at HTML Javascript and how you can easily link or add javascript to your HTML web document. If you haven’t gone through the tutorial you can check it using the below link

Read previous tutorial on: Tutorial 26# Introduction to HTML javascript and How to Use Them

What is HTML layout?

An HTML webpage layout is the way you structure your webpage to give it a better or beautiful look.

Web page layout takes considerable amount of time to build. Most developers prefer the use of css and javascript to design responsive and dynamic websites with good layouts. we can design web layout using tables and also with the use of <div> and <span> HTML tags. In the course of this tutorial you will see different examples on how to structure a web layout using tables and html tags such as <div> and <span> tags.

Designing HTML LAYOUT using Tables

The simplest way of structuring a beautiful HTML layout or web layout is with the use of tables and the <table> tag. So we use the rows and columns with beautiful styles to customize the table. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Designing HTML LAYOUT using Tables</title>
</head>
<body>
   <table>
      <tr>
         <td colspan="2" bgcolor="yellow">
            <h1>This is the table menu</h1>
         </td>
      </tr>
      <tr valign="top">
         <td bgcolor="red" width='50' >
            <b>Main Menu</b><br />
            <li>
              <ol>HTML</ol> 
               <ol>CSS</ol>
               <ol>Javascript...</ol>

            </li>
               

         </td>
         <td bgcolor="green" width='100' height='200'>
            Web Development Tutorials 
         </td>
      </tr>

      <tr>
         <td colspan="2" bgcolor="blue">

            <center>
               copyright footer  2019 develoferd
            </center>


         </td>


      </tr>

   </table>


   
</body>
</html>

RESULT

Document

This is the table menu

Main Menu
    1. HTML
      CSS
      Javascript…
  • Web Development Tutorials
    copyright footer 2019 develoferd

    Designing Web Layout using Multiple Columns

    We can design the Web layout using Multiple columns. Instead of having your content on different pages, we can have them on a single page using multiple columns. Example shown below

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Designing Web Layout using Multiple Columns</title>
    </head>
    <body>
       <table>
        
          <tr >
             <td valign='top' bgcolor="red" width='50' height="200" >
                <p>First Column</p>
                HTML <br>
                CSS <br>
                JAVASCRIPT <br>
             </td>
             <td bgcolor="yellow" width='200' height="200" valign='top' >
                <center>
                   <p>Second Column</p>
             HTML <br>
             CSS <br>
             JAVASCRIPT <br>
                </center>  
             </td>
    
            <td bgcolor="green" width='50' height="200" valign='top' >
          
            <p>Third Column</p>
            HTML <br>
            CSS <br>
            JAVASCRIPT <br>
             
            </td>
             
       </tr>
    
       </table>
    
    </body>
    </html>

    RESULT ON WEB BROWSER

    Document

    First Column

    HTML
    CSS
    JAVASCRIPT

    Second Column

    HTML
    CSS
    JAVASCRIPT

    Third Column

    HTML
    CSS
    JAVASCRIPT

    Designing Web Layout Using <div> and <span> Tags

    Another good way we can structure our web layout is with the use of HTML tags such as the <div> and <span> tags. recall that the <div> tag is a block level element used for grouping elements while the <span> tag is used for inline styling. In this example below we will be using the inline styling using cascading style sheet.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       
       <title>Designing Web Layout Using <div> and <span> Tags</title>
    </head>
    <body>
       <div style="width: 100%;" >
          <div style="background-color: cornsilk;"   >
             <h1>This is the header section</h1>
          </div>
    
          <div style="width: 120px; height: 500px; background-color: crimson; float: left;"  >
             <div>MENU</div>
             CSS <br>
             HTML <br>
             JAVASCRIPT....
    
          </div>
    
          <div style="height:500px; width:350px; background-color: white; float: left;"  >
            <div style="text-align: center;">Web Development Tutorial</div>
            
          </div>
    
          <div style="width: 120px; height: 500px; background-color: yellow; float: right;"  >
             <div>MENU</div>
             CSS <br>
             HTML <br>
             JAVASCRIPT....
    
          </div>
    
    
          <div style = "background-color:green; clear:both">
             <center>
                Footer section of develoferd
             </center>
          </div>
    
       </div>
    
    </body>
    </html>

    RESULT

    Document

    This is the header section

    MENU
    CSS
    HTML
    JAVASCRIPT….
    Web Development Tutorial
    MENU
    CSS
    HTML
    JAVASCRIPT….
    Footer section of develoferd

    Conclusion

    Now you understand the how to structure HTML LAYOUT in web Documents and you are really doing great. For better understanding of Styling of web document please check out our course on Cascading Style Sheet (CSS)

    Leave a Reply

    Your email address will not be published. Required fields are marked *