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 (Return to Contents)

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). (Return to Contents)

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. (Return to Contents)

Prepare Your First HTML Document (Return to Contents)
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 processer. From Windows 95 you should be able to reach it by using the menu associated with the START button. In Windows 3.1, you'll click the top left of the screen, go to Program Manager, and open your WP program as you normally would. If you're on a Mac, you're on your own -- don't know a thing about them.

Windows 95 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 intitial 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. For our example we'll save to the A-drive as test1.html. (Return to Contents)

Test Your Document (Return to Contents)
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 (Return to Contents)
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. (Return to Contents)

Adding Graphics (Return to Contents)
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 and see how it looks. Be sure to open test2.html, not test1.html.

Check out http://www.newnorth.net/get/tutor/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. (Return to Contents)

Resources (Return to Contents)

Graphics Resources

Barry's Clip Art at http://www.barrysclipart.com/
Yahoo Graphics Resources at http://www.yahoo.com/Computers_and_Internet/Multimedia/ Pictures/Clip_Art/

Web Page Editors (programs that make web page production a snap!)

Search for your HTML editor at http://www.tucows.com/
Adobe PageMill at http://www.adobe.com/prodindex/pagemill/main.html
HotDog at http://www.sausage.com/sitemap/index.html
on of the best!

BACK

Create Your Own Webpage Tutorial

Create Your Own Webpage
Tutorial