| 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
|
