Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Work with HTML Layouts

In this article we will cover the different types of HTML Layouts. I will use the some examples to demonstrate the functionality.

Introduction:

Web page is the first interaction between the web user and websites. So it is necessary to organize the site for better look and easy to understand. You must have seen that some websites are divided in column and rows and information are divided into the boxes like newspaper. To organize website we use the html layout.

There are multiple numbers of column created by using the <div> and <Table> tags, Both elements are used to create layout in html. HTML <table> can create a nice layout. Table can present tabular data but it does not mean that it is a layout tool.

HTML layout never uses heavy component or complex component technology. So it is easy to use and start working with zero startup time.

Benefits of HTML Layout:

  • HTML layout is a solution for preparing front report.
  • It can be used as “skins” for the any applications.
  • HTML layout helps to create an application with “web style”.
  • It can create a resizable screen layout.
  • It can create a managed layout for the complex application forms.
  • It can build a help system by using html layout, html lightweight browser, html book reader and so many other applications.
  • You can separate application layer from user interaction on your applications.

HTML Layout: <div> Element:

The below example will help you to understand the <div> tags.

Listing 1: Simple script for creating layout with the <div> element

<!DOCTYPE html>
<html>
<body>
<div id="Mr.bool" style="width:400px">
<div id="Folder" style="background-color:Blue;">
<h1 style="margin-bottom:0;">This is the Mr.bool Main Title of Web Page</h1></div>
<div id="Index" style="background-color:pink;height:250px;width:75px;float:left;">
<strong>Index</strong><br>
Layout<br>
Block<br>
Forms </div>
<div id="Complex" style="background-color:Yellow;height:250px;width:200px;float:left;">
this is the content area</div>
<div id="bottom" style="background-color:pink;clear:both;text-align:right;">
Copyright © mrbool.com</div>
</div>
</body>
</html>
Above figure is the output of the layout with the <div> element

Figure 1: Above figure is the output of the layout with the <div> element

In the above script you can change height, color, gaps between two columns and other parameters also. it is used to grouping the html elements.

HTML layout: <Table> Element:

This is the simplest way to create a html layout. In this we can create layout by using rows and column and then put the content inside the layout.

Listing 2: Simple script for creating layout with the table element

<!DOCTYPE html>
<html>
<body>
<table width="500" border="1">
<tr>
<td colspan="2" style="background-color:pink;">
<h1>Mr.bool: Title of this Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:pink;width:75px;text-align:top;">
<strong>Title</strong><br>
Block<br>
Layout<br>
Form
</td>
<td style="background-color:yellow;height:175px;width:400px;text-align:top;">
You can write your content here</td>
</tr>
<tr>
<td colspan="2" style="background-color:pink;text-align:Right;">
Copyright © Mr.bool.com</td>
</tr>
</table>
</body>
</html>
Above figure is the output of the layout with the table element

Figure 2: Above figure is the output of the layout with the table element.

HTML layout: Table Element - Example 2:

Here is another simple way to create a layout and giving a structured look to your website.

Listing 3: Another structure using table element

<!DOCTYPE html>
<html>
<body>
<table id="block" title="block" height="180" width="475"
border="0" bgcolor="green" cellspacing="2" cellpadding="1">
<tr height="75">
<td bgcolor="pink">
<table title="Mr.bool" id="Mr.bool">
<tr><td>Mr.bool Main title of the web page  </td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="yellow">
<table title="Sheet" id="nSheet">
<tr><td>How</td>
<td>are</td>
<td>you</td></tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="pink">
<table title="footer" id="footer">
<tr>
<td>you can write your content here</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Above figure is the output of the layout with the table element

Figure 3: Above figure is the output of the layout with the table element.

Conclusion:

Advanced layout creation is the time taking and comparatively little hard so you can use the templates. For that you can search on Google for ‘website templates’. You can create the CSS structure in another style sheet file and use it in web pages. This will centralize the structuring process and modifying at one place will reflect in all the places. .

So go through the examples given with this article and let me know in case of any questions.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login