Thursday, January 18, 2018

Html Layout(Html)

Hello guys morning and welcome to this section of my tutorial, in this tutorial i wanna be talking about HTML Layouts.
A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.
Now-a-days, all modern websites are using CSS and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout using sim ple HTML tables or division tags in combination with other formatting tags. This section of my tutorial gives you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.
HTML Layout Using Tables
The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Example
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute:

<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width="100%"   border="1">
    <tr>
          <td colspan="2"  bgcolor="#b5dcb3">
               <h1>Main title</h1>
          </td>
    </tr>
    <tr  valign="top">
          <td bgcolor="#aaa"  width="50">
               <b>Main Menu</b> <br />
               HTML<br />
               PHP<br />
               MySQL...
          </td>
          <td  bgcolor="#eee"  width="100"  height="250">
                  Web design tutorail on HTML Layout
          </td>
    </tr>
    <tr>
          <td  colspan="2"  bgcolor="#b5dcb3">
                <center>
                    Copyright ©  2018  Webdesigntutorialz.blogspot.com 
                 </center
          </td>
    </tr>
</table>
</body>
</html> 

You can try the above code out your self to see the results and to have a better understanding of HTML Layout. Also feel free to drop your questions on the comment box below, they will be attended to as soon as possible.

Multiple Columns Layout Using Tables
You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. 

Example
Here is a brief example on how to create a three column layout using a HTML table: 

<!DOCTYPE  html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table  width="100%"  border="1">
    <tr  valign="top"> 
          <td  bgcolor="#aaa"  width="20"> 
              <b>Main Menu</b><br  />
              HTML<br  />
              PHP<br  />
              MYSQL... 
          </td>
          <td  bgcolor="#b5dcb3"  height="250"  width="60%"> 
                Web design tutorialz
          </td>
          <td  bgcolor="#aaa"  width="20">
              <b> Right Menu</b><br  />
              HTML<br  />
              PHP<br  />
              MYSQL...
          </td>
    </tr>
</table>
</body>
</html>

You can also try the above code out for better understanding, drop your questions on the comment box below if you have any.

HTML Layout Using DIV, SPAN Tags
The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level.
Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

Note:This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have better understanding of CSS.

Example
Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved in the previous examples that we used table.

<!DOCTYPE  html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div  style="width:100%">
     <div  style="background-color:#b5dcb3;  width:100%">
           <h1>Page Main title</h1>
     </div>
     <div  style="background-color:#aaa;  height:250px;  
      width:100px;  float:left;">
         <div><b>Main Menu</b></div>
          HTML<br  />
          PHP<br  />
          MYSQL...
     </div>
     <div  style="background-color:#eee;  height:250px;  
      width:350px;  float:left;">
           <p>Web design tutorilz</p> 
     </div>
     <div  style="background-color:#aaa;  height:250px;  
      width:100px;  float:right;">
          <div><b>Right Menu</b></div>
          HTML<br  />
          PHP<br  />
          MYSQL...
     </div>
     <div  style="background-color:#b5dcb3;  clear:both">
     <center>
           Copyright ©  2018  Webdesigntutorialz.blogspot.com
     </center>
     </div>
</div>
</body>
</html>

You can try the above code out for better understanding, feel free to ask your questions.

Alright guys thats it for this tutorial on HTML Layout, in my next tutorial am gonna be introducing Cascading Style Sheet (CSS), don't forget to subscribe with us. Like our facebook page and do invite your friends to this great tutorial blog, thank you.  

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks , Html Backgrounds , Html Fonts , How to create Html Forms (Web Design Tutorial)How to Embed Multimedia into a Html web page(web design) , Html Marquees (Web design) , Html Header (Html tutorail) , Html Stylesheet (Html) , Javascript (Html)
Share:

0 comments:

Post a Comment