Hello dear readers! welcome back to another section of my tutorial on Html, in this tutorial am going to be discussing about the Html Layouts.
A web page layout is important in giving a better look to your site. It takes a considerable amount of time to design a website's layout that has a great look and feel.
Now-a-days, all modern websites makes use of Css and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout by making use of simple HTML tables or even using Html division tags in combination with other formatting tags. This section of my tutorial on Html gives you a few examples on how to create a simple but working layout for your webpage by using pure Html and its attributes.
HTML Layout Using Tables
The most simplest way of creating layouts is by making use of Html <table> tag. These tables are been arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
Example
Below 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:
RECOMMENDED: The Doctype Declaration
<!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 tutorial on HTML Layout
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
Copyright © 2018 Webdesigntutorialz.blogspot.com
</center
</td>
</tr>
</table>
</body>
</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 tutorial on HTML Layout
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
Copyright © 2018 Webdesigntutorialz.blogspot.com
</center
</td>
</tr>
</table>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box. I will attend to them as soon as possible.
RECOMMENDED: Html Blocks
Multiple Columns Layout Using Tables
You can design your webpage in a way that you can put your content in multiple pages. Your contents can be kept in the middle column and you can use left column to use menu and the right column can be used to put advertisement or any other stuff.
Example
Here is a simple 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>
<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>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below if you have any.
HTML Layout Using DIV, SPAN Tags
The <div> element is a block level element that is used in grouping Html elements. While the <div> element is a block-level element, the <span> tag on the other hand, is used for grouping elements at an inline level.
Although some nice layouts can be achieved using Html tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.
Note: The example below uses Css, so before you can understand this example you need to have a better understanding of Css.
RECOMMENDED: Html Images
Example
Here we are going to try achieving the same result using <div> tag along side with Css, whatever you have achieved in the last 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>
<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>
Feel free to try the above code out using your text editor for a better understanding. You can also ask your questions where necessary.
RECOMMENDED: Html Document Structure
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, am going to be introducing you to Cascading Style Sheets (Css).
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.