A Tutorial on How to Create a Page Layout on HTML

HTML provides the structure around which you can build your site.

HTML, or HyperText Markup Language, is the basic code used to design websites, so learning how to lay out a web page using some basic HTML is essential if you want to code your own website. Use a few simple HTML codes to create a simple layout with tables, which you can later fill with information and media according to your needs.

Instructions

1. Begin by creating the overall table. Follow the format of: "<table cellspacing="1" cellpadding="0" border="1" bgcolor="white" id="shell" heigh="400" width="600">". Replace the values with whatever you want. You can play around with them until you get the desired effect.

2. Create the first table within the overall table, where you can put the banner for your site. Use the "TR" and "TD" tags to establish the table's attributes. For example: "<tr height="40"><td colspan="1" bgcolor="yellow">". Note that "td colspan" establishes how many columns are in that table cell, so if you choose "2" you might have a table to the side for links and to the right would be where you would feature the main content. Open the tag for a new table to actually place the table cell within the overall table: "<table title="Table1" id="table1" border="0">. Place the actual text of the banner immediately after: "<tr><td>Banner goes here</td></tr>".

3. Close the "table" tag by writing "</table>" when you are done with the table. Close the "TD" and "TR" tags as well with "</td></tr>".

4. Repeat the above steps to create more tables within the overall table.

5. Close the overall table when you are finished with all the other tables: "</td></tr></table>".

References

• Tizag: HTML - Layout
• Tutorials Point: HTML Page Layouts