Site Design

Page 2

Basic HTML

Okay, this page will still be on the basics, but it takes you to putting something on the page with some text and images.

Here we will do some elements such as a table to organize the page and give it some type of structure.  After all, a well organized web site is the key to success.

First, we create the basic page.

Starting a web page with Notepad:

First, you need to start the coding that will tell the browser (i.e. Internet Explorer Browser) that it is a web page.  To do this, you would type in this coding at the beginning of your document.

<html>

<head>

<title></title>

</head>

<body>

 

</body>

</html>

Next, between the body tags we create the table that will organize the page like this:

<html>

<head>

<title></title>

</head>

<body>

 

<table>

<tr>

<td>Your text goes here.</td>

<tr>

</table>

 

</body>

</html>

If you prefer to have a background, it would something like this:

<html>
<head>
<title></title>
</head>

<body background="yourimage.jpg">

<table border="1" background="yourimage.jpg">
<tr>
<td>
Text goes here.
</td>
</tr>
</table>

 

</body>

</html>

The table tags are your main elements to controlling your page and how each item is placed on the page.  Of course, the <table> is the beginning tag and the </table> is the ending tag.  The <tr></tr> and <td></td> are where you would place your text or images.  These are your rows to your table.

If you want to add columns to your table, you would simply do this:

<html>
<head>
<title>Title of Your Site Here</title>
</head>

<body background="yourimage.jpg">
<table border="1" background="yourimage.jpg">
<tr>
<td width="100%" height="1" colspan="6">
<p align="center">
<img border="0" src="yourimage.jpg">
</td>
</tr>
<tr>
<td width="34%" height="1" align="center">
<img border="0" src="yourimage.jpg">
</td>
<td width="33%" height="1" align="center" colspan="4">
<img border="0" src="yourimage.jpg">
</td>
</tr>
</table>

 

</body>

</html>

If you do not want the border showing on your page, simply put a 0 in the table where it says border="1".

If you want the table centered on the page, simply place <center> between the body and table tags and the ending center tag </center> at the bottom of the bottom like this:

<html>
<head>
<title>Title of Your Site Here</title>
</head>

<body background="yourimage.jpg">

<center>
<table border="1" background="yourimage.jpg">
<tr>
<td width="100%" height="1" colspan="6">
<p align="center">
<img border="0" src="yourimage.jpg">
</td>
</tr>
<tr>
<td width="34%" height="1" align="center">
<img border="0" src="yourimage.jpg">
</td>
<td width="34%" height="1" align="center" colspan="4">
<img border="0" src="yourimage.jpg">
</td>
</tr>
</table>

</center>

 

</body>

</html>

You can also place a table inside a table by doing this:

<html>
<head>
<title>Title of Your Site Here</title>
</head>

<body background="yourimage.jpg">

<center>
<table border="1" background="yourimage.jpg">
<tr>
<td width="100%" height="1" colspan="6">

<table border="1" background="yourimage.jpg">
<tr>
<td width="95%" height="1" colspan="6">
<p align="center">
<img border="0" src="yourimage.jpg">
</td>
</tr>
<tr>
<td width="34%" height="1" align="center">
<img border="0" src="yourimage.jpg">
</td>
<td width="34%" height="1" align="center" colspan="4">
<img border="0" src="yourimage.jpg">
</td>
</tr>
</table>

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

</center>

 

</body>

</html>

There are a number of ways you can design your web site with tables.  These are just a few.  I actually recommend using Mircosoft Frontpage for designing any web site because you don't need to know html in order to build.


[ Site Design 1 | Site Design 2 | Site Design 3 | Site Design 4 | Site Design 5 | Site Design 6 ]

  

[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]

  

Go to Top


Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline