For best performance and viewing, please update your browser to Netscape 7.0, or IE 5.0 or greater.
Northern New England's Largest Internet Service Provider
GWI: Great Works Internet Technical Support
Residential services Business services About us Technical support About your account
Using the Internet Dial Up Support Email Support Web Page Help Broadband Support Phone Support Internet Security Contact Support
Text size smaller normal larger largest
HOW TO CREATE A WEB PAGE
A Basic Tutorial

Creating a basic web page can be fun and easy. This is a brief tutorial and doesn't get into the more advanced features of HTML and web design. To learn more, look for a good book on Mastering HTML 4. Look for a technical level you are comfortable with and browse through before purchasing. Another good way to learn is to view other web pages. Both Internet Explorer and Netscape will let you view the Page Source. The Page Source will show you the HTML code which makes a webpage look like it does. If you want to see how something is done, for instance blinking text or how an image is inserted, view the source. The best way to learn is to open your text editor and start building a web page.

Before you start you will need a couple tools. You will need a simple text editor (notepad or simple text) or a HTML editor and a FTP client. To get these tools, go to our Web Tools section, choose your operating system and click on the corresponding links.


Let's start with the basics of HTML. First, there is the <html> tag. Then the header tag <head>. Between the header tags is the <title> tag. Most tags have a closing tag as you will see in the beginning of this sample HTML document. The closing tags will be preceded by a /. See the example below:

<html>
<head>
<title>Sample HTML</title>
</head>

The next tag which will follow will be the <body> tag. Both the <html> and <body> tags will have their closing tags at the end of the HTML document. See example below:

<body>

So far we have:

<html>
<head>
<title>Sample HTML</title>
</head>
<body>

The body tag is primarily used to define your background, color of your text and the color of your links, active and visited. You can use an image or a color for your background. The example below shows the syntax for setting the body tag to use a background image or a background color and how to add color to your text and links. *Note: whether your using an image or color for your background, you will want to specify just one of these, not both. If you choose to use an image (e.g. background.jpg), this image must be in your root directory or www directory. See example below:

<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">

So far we have:

<html>
<head>
<title>Sample HTML</title>
</head>
<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">

So far we have the first part of the HTML document completed. Now for the body of the document.

First we'll create a title for the page. "Sample HTML" will do. We'll center this title with the <center> tag. Then we'll put some text to follow. "How to create a web page. Creating a basic web page can be fun and easy."

You may want to format this text and we'll do that with the <font> tag. See example below:

<center>
<font size="+2">How to Create a Web Page</font>
</center>
<p>
<font face="arial">Creating a basic web page can be fun and easy.</font>

So far we have:

<html>
<head>
<title>Sample HTML</title>
</head>
<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">
<center>
<font size="+2">How to Create a Web Page</font>
</center>
<p>
<font face="arial">Creating a basic web page can be fun and easy.</font>

As you can see, we centered the title with the <center> tag and closed it after the title so the rest of the document doesn't center and we set the font size to "+2". As for the text we left it at the standard size by specifying nothing and set the font face to "arial". You'll notice the <p> tag. This is a paragraph tag. We use this tag so the text will drop down below the title.

The next thing we will put into this html document will be a link. We'll make a link to a html tutorial site. For this we will use the <a href> combined with the closing anchor tag </a>. See example below:

<a href> </a>

So far we have:

<html>
<head>
<title>Sample HTML</title>
</head>
<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">
<center>
<font size="+2">How to Create a Web Page</font>
</center>
<p>
<font face="arial">Creating a basic web page can be fun and easy.</font>
<p>
<font face="arial">Click on links below for html tutorials</font>
<p>
<a href="http://htmlprimer.com/">http://htmlprimer.com</a>

The <a href> tag is closed by the anchor tag <a>. Whatever you put between these tags becomes the link to the address you specified in the <a href> tag.

The last thing we will cover will be how to insert an image. Images can enhance the looks of a website and can be manipulated in a variety of ways to get a certain look or feel. As a general rule, images should'nt be larger than 20k. Sometimes this is unavoidable, but the quicker your website loads, the better chances you will have at keeping people at your site. Again, the image you specify to load in your website must be in your root or www directory. See example below:

<img src="image.gif">

So far we have:

<html>
<head>
<title>Sample HTML</title>
</head>
<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">
<center>
<font size="+2">How to Create a Web Page</font>
</center>
<p>
<font face="arial">Creating a basic web page can be fun and easy.</font>
<p>
<font face="arial">Click on links below for html tutorials</font>
<p>
<a href="http://htmlprimer.com/">http://htmlprimer.com</a>
<p>
<img src="image.gif">

Now we have an image inserted in this html document. You may want to add a couple options to this image tag. Some people use text only browsers so you may want to add the <alt> tag and label your image. You may want a border around your image using the <border> tag. See example below:

<img src="image.gif" alt="HTML Logo" border="2">

So far we have:

<html>
<head>
<title>Sample HTML</title>
</head>
<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">
<center>
<font size="+2">How to Create a Web Page</font>
</center>
<p>
<font face="arial">Creating a basic web page can be fun and easy.</font>
<p>
<font face="arial">Click on links below for html tutorials</font>
<p>
<a href="http://htmlprimer.com/">http://htmlprimer.com</a>
<p>
<img src="image.gif" alt="HTML Logo" border="2">

Now we will complete the document by adding the closing </body> and </html> tags. See example below.

</body>
</html>

Finally we have a completed HTML document.

<html>
<head>
<title>Sample HTML</title>
</head>
<body background="background.jpg" bgcolor="white" text="black" link="blue" vlink="magenta" alink="red">
<center>
<font size="+2">How to Create a Web Page</font>
</center>
<p>
<font face="arial">Creating a basic web page can be fun and easy.</font>
<p>
<font face="arial">Click on links below for html tutorials</font>
<p>
<a href="http://htmlprimer.com/">http://htmlprimer.com</a>
<p>
<img src="image.gif" alt="HTML Logo" border="2">
</body>
</html>

You can work on your html documents and even view them offline. Simply open your browser of choice and choose to work offline or cancel your internet connection. Close any error messages you may get. In your browser go to File -> Open. Browse to the folder where you have your html document and open it. Voila! There is your webpage. You will want to keep open your html editor and browser and toggle back and forth as you edit your html document. Once your html document is done you will want to upload it to the server.

My html document is done and ready to upload.

We have included some links to other HTML Tutorial sites for your conveniance. Have Fun!

http://htmlprimer.com/
http://htmlguide.findhere.com/
http://vzone.virgin.net/sizzling.jalfrezi/