Home...     Support...     Hosting...     Order...     Contact...


 

How to Build a Web Page in a Day!©

The single biggest stumbling block to a novice computer user is, "Where do I begin?" This little manual will walk you through building a web page, step by step. The assumption is that you are on a PC using Windows 95/98, and access to the Internet. So, let’s get started.

Make a new folder

You will be typing some text and gathering a graphic or two, and you will want a place to store these items so they are within easy access. Go to your desktop and right click your mouse in any open space. You will now see a menu with several options. Choose new/folder, then click. This will create a new folder right in front of your eyes. The little box under the folder will be flashing. Type in a name for your folder such as "Web page" and hit enter. Now you have a place to put the stuff you will be collecting as you construct your web page.

Using a text editor

If you are using Windows 95/98, your computer comes with a program called Notepad. This is a text editor. You will use this to type in your Hypertext Markup Language (HTML). This code is what your browser, such as Internet Explorer or Netscape, uses to translate what you type into text and graphics for your web page. This is a code standardized by the World Wide Web Consortium (W3C). Open Notepad by going to your start menu, then to programs/accessories/notepad. When you double click on Notepad, a small window opens (Fig 1).

 

 

 

 

 

 

 

Fig.1

Before typing anything in the text window, go to edit and click. A drop down menu will offer you some options. Click on word wrap. This makes sure your text does not go off the screen.

Now click anywhere in the big window and you will see a small flashing cursor. This is where you will type the following:

<html>

<head>

<title>My Page</title>

</head>

<body>

<center><h1>Welcome to My Page</h1></center>

</body>

</html>

This is the basic code that enables your browser to read your page. The <html> tells the browser to start reading here. <head> is another piece of beginning code that tells the browser that you are identifying your page. <title> tells the browser the name of your page and usually appears on the top of the window in your browser. The <body> is where you put all your text and graphics. <center> positions your welcome on the page and <h1> tells the browser how big to make your text. You must always close each piece of code. The </> is the signal to your browser to stop reading the type of code that is enclosed within the brackets. Hence </h1> tells the browser to make no other text this size, while </center> indicates that the next text to appear should be left aligned (the default alignment). The code </body> tells your browser that no other text or graphics will be entered, and the </html> means that this is where your page ends and the browser can now stop reading your page. Note: it is vital that you type your code exactly as shown. A browser makes no allowance for mistakes in spelling or coding and will not read what it cannot understand.

Presuming you have typed the above code into your notepad window, you must save this little file, as it will be used later. Go to the file menu in the notepad window, and choose save as. Another window will appear that will ask you where you want to save this file (Fig.2).

 

Your window should look like Fig. 2. It should show desktop in the save as window. The new folder that you made at the beginning of this tutorial should be visible in the big window. Double click on the folder and it will

 

 

 

 

 

Fig. 2

then appear in the save as window. Now go to the file name window and type in a name for your new html file. Let’s name it "page.html". No quotation marks, but be sure to add the ".html" after the name "page". Click on save.

View what you just made

You may minimize your text window now and open your browser. In your browser window, go to file and click on open. The dialog box will ask you where the file is that you want to open. Click on browse in this new window, find the folder you created on the desktop, click on open, and then click on ok. You should now see the file you saved and named page.html in your browser window (Fig. 3).

 

 

 

 

 

 

 

Fig. 3

You now have a web page. You may now minimize your browser and open the file called page.html that you minimized before.

Add some color

Place your cursor (the flashing I-beam) after the word body, but before the bracket. It should look like this: <body|>. Type <bgcolor="green">. Your coding now appears this way:

<body bgcolor="green">

You have just made the background of your page green. Changing the color of your text is simple, too. After the quotation marks following green, add the code so it looks like this:

<body bgcolor="green" text="white">

 

 

 

 

 

 

Fig. 4

You may now save what you have just typed by clicking on file/save. Maximize your browser window and click on the refresh or reload button. This will reload your file with the new changes you just made (Fig. 4).

Okay, the colors are ugly, but you can use any color on the following list. You can also use color codes. Visit davesite (see HTML online tutorial in References) for a color code picker.

aqua  black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow

Add a graphic

You need to find a picture or an icon that you like. If you find one on the Internet you can right click on the picture and save it to the folder that you placed on your desktop. You can also go to your paint program and draw your own graphic and save it to your folder.

Now that you have your graphic, write down its name, as you will need that name for the next part. Open your file called page.html. Your code should now look like this:

<html>

<head>

<title>My Page></title>

<body bgcolor="green" text="white">

<center><h1>Welcome to my page</h1></center>

</body>

</html>

After the code</center>, place your cursor and hit enter. To make a line break type <p>. This creates a blank line after your welcome text. Hit enter again and type this code:

<img src="NAME OF YOUR GRAPHIC HERE">

For the purposes of this tutorial a picture of a balloon will be used. The code for this graphic is:

<img src="C:\1data\image4bloon.gif">

This is where the image is located on my computer. (The above graphic name will be different on your computer.)

Your code should now look like this:

<html>

<head>

<title>My Page></title>

<body bgcolor="green" text="white">

<center><h1>Welcome to my page</h1></center>

<p>

<img src="YOUR GRAPHIC">

</body>

</html>

Save your changes as before. Open your browser and view your page with the graphic now in place (Fig. 5).

 

 

 

 

 

 

 

Fig. 5

As you can see, the browser automatically (by default) placed the graphic on the left margin. If you would like it centered, then change your code to this:

<center><img src="YOUR GRAPHIC"></center>

Add some text

Perhaps you would like to describe what your page is about. You may add text anywhere within the <body> code. Let’s add "I love balloons" after your welcome. You can type lots of text, but for this tutorial, we shall keep it short.

Position your cursor after the code <p> and hit enter. Type the following:

<center>I love balloons</center>

<p>

Add the second <p> to separate your text from your graphic. Your code should now look like this:

<html>

<head>

<title>My Page></title>

<body bgcolor="green" text="white">

<center><h1>Welcome to my page</h1></center>

<p>

<center>I love balloons</center>

<p>

<img src="YOUR GRAPHIC">

</body>

</html>

Save the file and again open your browser (remember to hit the refresh button) to view your work to this point (Fig. 6).

 

 

 

 

 

 

 

Fig. 6

As you can see by the illustration, the text "I love balloons" is difficult to see. You can make this text bolder and increase its size by adding this code:

<b><h3><center>I love balloons</center></h3></b>

The <b> tells the browser to bold the text. The <h3> tells the browser to increase the size. There are many ways to manipulate text size, color, and appearance, but for purposes of simplicity, they will not be covered in this tutorial. Please see References for additional resources.

Email

Would you like to add your email address so visitors to your page can contact you? In your text file, type in the following code right after your graphic code. Use your email address in place of "EMAIL".

<a href=mailto:EMAIL>Send me mail</a>

 

 

 

 

 

 



Fig. 7


When someone clicks on ‘Send me mail" they will be taken to their own email program with your address automatically entered in the send to window (Fig. 7).

The email link appears as blue text and underlined below your graphic. This underlining is a flag to visitors that it is a clickable link. The blue text is also a default color the browser chooses and may be changed to any color you like. Please visit davesite in the References for more in-depth instructions.

Add a link

It is possible to link to other sites just like you linked to your email. The code is very similar.

Let’s make a link to the Disney page. Type the following code right after your email code. You may want to add <p> before and after this link to separate it from your email code.

<a href="http://www.disney.com">Disney Page</a>

You can place a link to anywhere you like – just replace the http address with one of your choosing.

Find a home for your page

Numerous sites on the web offer you a free web page and have built–in page editors. Geocities is probably the largest, with Tripod coming in a close second. I use them both. There is no charge to join; you merely have to fill out a form, and in about five minutes you are ready to get started. Because Geocities and Tripod have a beginner’s html editor built in, you can create a simple web page quickly. They also offer graphics that are easy to use and there is no uploading involved. Most ISP's (Internet Service Providers) offer you a free 1 or 2 meg site, but you have to build the page and then upload it. Uploading means that you take your information, be it a text document or a web page, and send it to another computer. Downloading means bringing a document or program from another computer to your computer.

Conclusion

You now have a basic web page.

All the coding for this tutorial has been thoroughly tested. If you encounter any problems, or need additional help, consult References for help resources. You may  contact MouseBytes too.

Have fun!

References

 

Html help:

World Wide Web Consortium. http://www.w3c.com

Absolutely everything about html. http://www.quadzilla.com/

Color Picker:

http://www.quadzilla.com/trix/rgbtohex.htm

HTML Writers Guild. http://www.hwg.com

HTML online tutorial. http://www.davesite.com/webstation/html

Microsoft Site Builder. http://www.microsoft.com/sitebuilder

 

Graphics:

http://www.dreamscape.com/frankvad/free.webmaster.html

http://www.barrysclipart.com

Free web pages:

http://www.geocities.com

http://www.tripod.com

Acknowledgements:

Many thanks to Dr. Steven Olsen for editing this tutorial.
This tutorial is copyrighted by Mousebytes.net

 

If you would prefer to download this tutorial for future reference:

tutorial.zip


User Comments:

Using your tutorial on building a Web Page was easy.    This is the first thing I have read and done that made sense.  I have wanted to make a web page using my photos of my friends and family.  So other friends and family can see them.  I cannot do this now, but with your help in the tutorial maybe in the future.  I printed all the links so I can add them to my favorites.  Again thank you for having this wonderful site and not putting down people that do not have a lot of programming knowledge.
Roberta Kelty
 

Home...     Support...     Hosting...     Order...    Contact...

copyright©1996 - 2006  MouseBytes.net