Thursday 9 April 2015

HTML Layouts

Layout is a important part of web page. This is used for making web page attractive. Today css and javascript uses in making layouts but HTML is also fulfills same. Here i will teach you how to make HTML Layouts using tables.
Table is the part of HTML, it is denoted by <table /> tag.The full table tag is :

<table>
<tr>
 <td></td>
</tr>
</table>

These tables are arranged in rows and columns, so you an use these rows and columns as you want. Here <tr> tag used to create table rows and <td> tag is used for creating data cells.
The following Layout we will get via html table.Let's see :

<!DOCTYPE html>
<html>
<head>
<title>Layouts</title>
</head>
<body>
<table width="100%" border="5px">
<tr>
<td colspan="2" bgcolor="aqua">
<center>
<h1>This is my first web page</h1>
</center>
</td>
</tr>
<tr valign="top">
<td bgcolor="pink" width="10%">
<b>Main Menu</b><br><br>
About us<br><br>
Contact us<br><br>
Downloads
</td>
<td bgcolor="#eee" width="100" height="400">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
<font size = "5">
<b>Powered by : Amar Gangwar</b>
</center>
</td>
</tr>
</table>
</body>
</html> .


The output for above code will be :

HTML layout using tables

 We can say that HTML is also able to making attractive layouts for web pages.We just need complete knowledge about it. We can also make buttons,text area,images and many more things inside web page.
In my next article i will show you how to introduce CSS stylesheet in HTML.

No comments:

Post a Comment