How To Make a Website
There are lot of small business owners looking to make a web site for their business but do not want to spend the money for a web designer or fancy web site software. Are you one of them? How would you like to create a web site for free? You can build your own web site using this easy to understand tutorial.
Click here to see the web site that we are going to build. Feel free to download that sample, Read the tutorial to see how to modify it. Download it by choosing 'save as' from the file menu on your browser. Save it to a location on your computer that you'll be able to locate easily. Then edit it with either Microsoft's FrontPage Express which is a free download when you get the Internet Explorer web browser or Netscape's Composer. It is a good idea to look over this tutorial and familiarize your self with the html in the free template.
To build your own web site, we need to start off with a blank html document by inserting this code in a blank text document like Textpad (Windows) or Simple text (Mac) ... do not use Word or Word perfect.
<html>
<head>
<title>Place Your Page Title Here </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>Place Your Text here
</body>
</html>
If you simply place that code into a blank text document you would have your first web page. Simply save it as yourpagename.html make sure to add the extension .html to your page name. This is what defines it as a web page, then press save. You will have an instant web page. Simply double click on the file icon (I hope you saved in a convenient place) and your default web browser will open the file for you.
Now onto bigger and better things...
How to Insert a table;
Insert a table for your page header between the <body> </body> tags where it currently says Place your text here. (FYI anything that you want to be seen on the web page needs to be placed between the <body> </body> tags) Below is the html code for your table.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
Now add two lines of space to the table;
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p> </p>
<p> </p>
<p> </p></td>
</tr>
</table>
The code in red is what was added to the table in the last demonstration.
Begin writing the name of your web site on the middle line
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p> </p>
<p>YourDomain.com </p>
<p> </p></td>
</tr>
</table>
Now we need to make that a large font and change the color of the text so that it will stand out. This will take the place of a graphic header if you do not have one.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><br>
<font style="font-size: 60pt; font-weight: 700"><strong><font color="#FF6600">Your</font>Domain.com</strong></font><font style="font-size: 60pt; font-weight: 700"><strong></strong></font><br></td>
</tr>
</table>
The entire code for your website should now look like this;
<html>
<head>
<title>Place Your Page Title Here </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><br>
<font style="font-size: 60pt; font-weight: 700"><strong>
<font color="#FF6600">Your</font>Domain.com</strong>
</font><font style="font-size: 60pt; font-weight: 700"><strong></strong></font><br></td>
</tr>
</table>
</body>
</html>
|
Now we are going to add a navigation bar to the web page.
Choose a navigation bar for your web page. I have choosen this one (below) from my selection and I have centered the table. This is the html for our navigation bar.
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF">
<tr bgcolor="#FF6600">
<td width="20%" align="center"><a href="#">Home</a></td>
<td width="20%" align="center"><a href="#">About Us </a></td>
<td width="20%" align="center"><a href="#">Products</a></td>
<td width="20%" align="center"><a href="#">Prices</a></td>
<td width="20%" align="center"><a href="#">Contact Us </a></td>
</tr>
</table>
</table>
Customize the links inside the navigation bar to suit your website then add a blank line under the navigation table. Just placing the the tags <p> </p> will add a blank line to your document.
Now add one more table right beneath the last table,
This time I put two rows on this table and we are also going to make this table smaller than the header. I think 80% is a good size and I have centered it as well. Here is the html for our table with 2 rows. The tags <tr></tr> indicate the beginning and end of each row.
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Your text goes here </td>
</tr>
<tr>
<td>Your footer will go here </td>
</tr>
</table>
Now we will add some color to the last cell of that table.
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Your text goes here </td>
</tr>
<tr>
<td bgcolor="#FF6600">Your footer will go here</td>
</tr>
</table>
And then we'll add this note to that cell that we just added color to. This will be our footer it will contain our contact information, copyright info etc. Like this; ©2001 Lorem Ipsum Dolar Sic Amet • Consectetur
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> Your text goes here </td>
</tr>
<tr>
<td bgcolor="#FF6600"><p>©2001 Lorem Ipsum Dolar <a href="#">Sic Amet </a> • <a href="#">Consectetur </a></p></td>
</tr>
</table>
Your web page html code should now look like this;
<html>
<head>
<title>Place Your Page Title Here </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><br>
<font style="font-size: 60pt; font-weight: 700"><strong>
<font color="#FF6600">Your</font>Domain.com</strong>
</font><font style="font-size: 60pt; font-weight: 700"><strong></strong></font><br></td>
</tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> Your text goes here </td>
</tr>
<tr>
<td bgcolor="#FF6600"><p>©2001 Lorem Ipsum Dolar <a href="#">Sic Amet </a> • <a href="#">Consectetur </a></p>
</td>
</tr>
</table>
</body>
</html> |
You are almost done, now add a 'title' to your web page. This is the part of your web page that appears at the top of your browser window. It should contain key words related to your web site and it should acurately described what is on your web page. This line of code is between the <head> </head> tags.
<title>Place Your Page Title Here </title>
Next type in the main body of information for your web page where it now says Your text goes here and you now have a very good looking basic web page. This can all be done in just a few minutes.
Advanced steps
Add a picture to your website;
<p><img src="group.jpg" width="122" height="197" align="left">Your Text goes here </p>
Place that code anywhere you want a picture to appear on your page.
Take a look at the finished product here... ( I have added some filler for the body text so that it will look more complete) You are welcome to download and modify that web page template for your own web site!
Rate it! Please send me feedback on this tutorial, was it helpful or confusing? How can I improve it? Thanks! Send email to
Michelle [At] Cheap-webdesign.com |
