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
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.
The entire document should look like this:
<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
|
Internet Explorer
|
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
Web Page Editors (programs that make web page production a snap!)