|
From : Create your
Own Webpage Tutorial
You see all of those great web pages as you
browse around. You think, "Wow! I wish I could do something like that!" Well - -
you can. And it is really not that hard. There are some pretty cool programs out
there to help you do it with class and ease. Prior to using any of those
shortcuts, however, it's a good idea to get your feet wet with some basic HTML
(Hyper-Text Markup Language).
So -- climb aboard and let's get busy
creating your own web page! To begin, you might want to print out a hard copy of
this guide to have as reference while you work -- or save it to your hard drive
and read it from your browser.
Contents
-
What You'll Need
-
What is HTML?
-
What is a Tag?
-
Prepare Your First HTML
Document
-
Test Your Document
-
Acquiring Graphics
-
Adding Graphics
-
Resources
What You'll
Need
1. A word processing program that allows
you to save your document as a text (or ASCII) file. I can't think of any,
offhand, that don't. Microsoft Works, Claris Works; both of them fit the
bill.
2. A web browser - Netscape Navigator or Microsoft Internet
Explorer.
3. An Internet Connection
What is
HTML?
It stands for Hyper-Text Markup
Language. There are a number of markup languages. In short, a markup language is
an assortment of tags that are placed around pieces of text in a document. These
tags are special in that they instruct a special program, called a browser, how
to display the "tagged"-text. HTML is special in that it includes the power to
view "tagged" material as hyper-links to other locations on the World Wide Web
(WWW).
What is a
Tag?
"Tag" is the name given to a command in
HTML. Tag's are easily identified because they are enclosed by angle brackets --
<
and >. When tags are placed in front of or around words in a document they
send a message to the Web Browser telling it what to do with the words -- start
a new paragraph, italicize, insert a picture, make a hyper-link, etc. For
example, if you wanted to make the word "Dog" appear in italics, the HTML tag
would look like this: <i>Dog</i>, which would produce Dog. The "<i>" turned on the italics, the </i> turned it
off.
Prepare Your First HTML
Document
The
"doing" of HTML will make things a lot clearer than a lengthy explanation of
what it is. So we are going to get right down to the business of preparing a web
page.
First you'll need to open up your word
processor. From Windows you should be able to reach it by using the menu
associated with the START button.
Windows is nice in that you can view your
WP and this document at the same time. After you've opened your WP, right-click
your mouse on the task bar and select "tile vertically". Both documents will
appear side by side. Other-wise, you should print a hard-copy of this tutorial
at this point so that you'll have it to refer to during the the typing
parts.
Now, let's go! What you type is in
red italics. The explanation of what each item means to your browser is
in black. We'll go through line by line of your first document. After you type an
item, hit your enter key so that you go to the next line on your word processing
document.
-
<html>
This
is an HTML document
-
<head>
The
following text is used by your browser, but does not appear on the web page
itself.
-
<title>My
(or whatever your name
is) First Web Page</title>
The text between the title
tags will appear in the header of the browser you are using. Remember -
<title> signifies the beginning of the title, </title> signifies
the end.
-
</head>
The
end of your heading information, closes out the part begun by the <head>
command.
-
<body>
All
that follows this will be items that actually appear on your web
page.
-
<h1><center>My (or whatever your name is)
First Web Page</center></h1> The <h1> tag displays the largest text size
available. (note: there are 6 from <h1> to <h6>, <h1> being
the largest). The <center> tag will center text that follows
horizontally on the web page. The </...> tags close out the initial
commands. Note how they are "nested" -- the two "h1" tags are to the outside,
the two "center" tags are to the inside.
-
<hr>
Places
a horizontal line across the page. These are good for separating sections of a
document.
-
<p><h2>Here
are some of my favorite Free Homepages sites:</h2>
The "p" designates a new paragraph (a blank
line between it and preceding text). Note that there is no </p> command.
This is not necessary. The "h2" tags designate start and stop for the 2nd
largest font size.
-
<p>The <a
href=http://www.freehomepages.com/>Free Homepages;/a>
The "p" designates a new paragraph. The <a
href=....> tag designates the web location that will be reached by
hyper-link off of the text that follows. The </a> closes the hyperlink.
Thus, "Free Homepages" will appear as a hyper-link that, when clicked, will
launch the browser to the site at http://freehomepages.com/.
-
<p><a
href=http://www.cyberturf.com/>Cyberturf</a>
Creates a hyper-link to the designated
site.
-
<p><a
href=http://www.powow.com/>POWOW</a>
Creates a hyper-link to the designated
site.
-
<p><hr>
Another horizontal line.
-
<p> Updated: 8/97
(month/year) <br> New paragraph. The <br> tag "breaks" the text,
causing following text to appear on a new line without skipping a
line.
-
Your
Name
(your name) <br>
-
http://www.freehomepages.com/yourname/test1.html
The location of your web page goes
here.
-
</body>End
of material that will appear on your web page.
-
</html>
End
of the HTML document.
The entire document should look
like this:
|
<html>
<head>
<title>My First Web
Page</title>
</head>
<body>
<h1><center>My
First Web
Page</center></h1>
<hr>
<p><h2>Here
are some of my favorite Free Homepages sites:</h2>
<p><a
href=http://www.freehomepages.com/>Free
Homepages</a>
<p><a
href=http://www.cyberturf.com/>Cyberturf</a>
<p><a
href=http://www.powow.com/>POWOW</a>
<p><hr>
<p>Updated:
8/97<br>
Your
Name<br>
http://www.newnorth.net/~tlelem/test.html
</body>
</html> |
Once you complete the document,
you need to save it as a text file. Use the "File...", "Save As..." feature of
your WP program. Designate the type of document you would like it to be saved as
-- "Text Document - DOS Format". Give the new document a name - - "test1.html".
Designate where it will be saved to -- if you don't know how to do this, get
some help, because you'll need to be able to find this document again. We
suggest you save it to a floppy disk, or a place you will remember on your hard
drive. For our example we'll save to the A-drive
as test1.html.
Test Your Document
Congratulations!! You've created it. Now let's look at it in your browser
and see how it works. Here's how you'll do it:
|
Netscape
-
Open the browser.
-
Use the "File...", "Open File..."
option.
-
Type in "A:\test1.html" and press
"Open"
-
You hould now be looking at your
document. |
Internet Explorer
-
Open the browser.
-
Use the "File..", "Open.."
option.
-
Type in "A:\test1.html" and press
"OK"
-
You should now be looking at your
document. |
How does it look? It should
look like this one: see1.html.
While connected to the
Internet, check out the hyper-links on your page. Do they
work?
If something doesn't work or
doesn't look right, carefully check what you typed against the example in the
section above. A misplaced period, <>, or mispelling in a tag can totally
negate the process. (Return to Contents)
Acquiring Graphics
Your
page is great, although somewhat dull. It needs a little color to spice it up.
Graphics are a great way to do this. But, before you can add the pictures, you
need to get them. The Internet is loaded with sites that have graphics for the
grabbing. There are a few listed at the end of this
tutorial.
For our purposes, you'll practice by grabbing
your graphics from one of my pages. Using your browser and internet connection,
take off to Borrow My Graphics
(http://www.newnorth.net/get/tutor/borrow.html). On this page you'll see a gold
square, a colored bar, and a little pot of gold. You're going to copy these
three images to your diskette.
First place the cursor arrow on the gold
square. Right-click your mouse button. [For Mac - hold down on the mouse button]
Choose "Save Image (Picture) As..." and designate it to go to your floppy disk
where your test1.html file is located. Click on "Save" and you're done.
Can you believe how simple that is? Do the same for the other two images. You
will have saved these three image files to your disk: square.gif,
bar.gif, and gold.gif.
Adding Graphics
We'll
now revisit our first web page and spice it up by adding some graphic tags,
which tell the browser to access and display picture files.
The tags we will be adding will follow this
format:
<IMG SRC=image
location ALT="text for browser
display">
In English, what this tag says is, "The
source for the image is this file, and here's what will show instead of the
picture if a browser reads only text." A tag to bring in your
square.gif image would look like this:
<IMG SRC=square.gif
ALT="*">
This tag will tell the browser to display the
square.gif image, or a text star in its place for a text-only browser.
So, we will be adding the following three graphics tags to your
document:
<IMG SRC=square.gif
ALT="*">
<IMG SRC=bar.gif ALT="++++++++++++++++++">
<IMG
SRC=gold.gif ALT=";-)">
Now, go to your word processor and open up
your file test1.html. Replace the <hr> tags in
the document with the graphics tag containing bar.gif. Center each of
these images using the <center>, </center> tags.
Place the graphics tag containing
gold.gif in front of each hyper-link tag for the three educational web
sites (the <a href=....> tags). And place the graphics tag containing
square.gif in front of your name at the bottom of your
document.
Once you have completed making the changes,
save the document as a text file named test2.html. Follow the
instructions in Test Your Document
above, and
see how it looks. Be sure to open test2.html, not
test1.html.
Check out http://www.roxydoll12.com/help/gettingstarted/see2.html for a view of what your document should look
like. If there are problems, compare your text with the text
below.
<html>
<head>
<title>My First Web
Page</title>
</head>
<body>
<h1><center>My
First Web Page</center></h1>
<center><IMG
SRC=bar.gif
ALT="+++++++++++++++"></center>
<p><h2>Here are
some of my favorite educational sites:</h2>
<p><IMG
SRC=gold.gif ALT="*"><a href=http://www.freehomepages.com/>Free
Homepages</a>
<p><IMG SRC=gold.gif ALT="*"><a
href=http://www.cyberturf.com/>Cyberturf</a>
<p><IMG
SRC=gold.gif ALT="*"><a
href=http://www.powow.com/>POWOW</a>
<p><center><IMG
SRC=bar.gif ALT="+++++++++++++++"></center>
<p>Updated:
8/97<br>
<IMG SRC=square.gif ALT=";-)">Your
Name<br>
http://www.freehomepages.com/
</body>
</html> |
Hey! Nice job! You are now a web page author.
| 
