Whenever you add links and images to an HTML documents, the hardest part can be getting the addresses correct. So lets take some time and set things up to try to make things easier. If you
haven't already, create a folder (directory) just for your web site. This will be called the "root" directory. Put the HTML document that you have been working on in that
directory. Anything and everything that is going on this web site should be kept in this one folder, this will make things a lot easier. You could just place everything in this folder, without
any organization, or you could create sub-directories (folder inside a folder) to help keep things organized. Some people like to organize by topic, (i.e. one folder for all the Shakespeare
stuff, and one for all the Edgar Allen Poe stuff, etc.) or by type of files (i.e. one folder for all the images, one for all the pages, etc.) This is how I like to do it, as you can see: 
NOTE: The folder "Class Notes" are notes from the class I took to create this staff development class. (It was a Staff Development class to create a Staff Development class?!?!) The
folder "resources" is where I keep things that I might use or that I am currently working on. These two folders are removed before the web site it uploaded to a server.
I would like you to create a root directory, this is where we will keep all the pages. Then create 2 sub-directories, one for images and one for downloads. We are going to keep our file structure simple for this course. Once you begin writing your own web sites, you can create your own organizational structure.
First we are going to learn how to add an image to our page. (Hopefully you have already placed your HTML document into the root directory.) To make thing simple, I have already gathered a few images for you to use, you can download them here. You will want to copy the 4 images into your "images" sub-directory. You can always use your own images or look for them on the web - but for now, lets use these four.
After you have moved the 4 images into your images folder, we are going to add the IMG tag to our HTML document. Edit your HTML document so that it looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
</HEAD>
<BODY>
<H1>This is Header Level 1</H1><H2>This is Header Level 2</H2>
<H3>This is Header Level 3</H3><H4>This is Header Level 4</H4>
<H5>This is Header Level 5</H5><H6>This is Header Level 6</H6>
Hello World!<BR>
How are you doing?<BR>
<IMG SRC="images/bookstack.jpg" ALT="A stack of Books"> Here is a picture of a stack of books<BR>
<IMG SRC="images/multineonbar55.gif" ALT="---------------"> Here is a Horizontal Line<BR>
</BODY>
</HTML>
After you save, and view your document, you'll notice that the image is one its own line. This is another default behavior of HTML rendering. If you want your words to rap around a picture,
like you see above, then you need to add ALIGN="option" after the ALT attribute. I will leave it up to you to look up the different options (Look in the W3C HTML Help guide I gave you.)
The IMG tag must have the SRC attribute, this is where you put the address to the picture you want to add. Notice that ours says look in the images folder for the file
bookstack.jpg. The ALT attribute should include a description of the picture. This is used by text browsers, and browser that have the image loading turned off. Notice that I used
"---------------" for my horizontal line. This way even if your browser does not load the image, you will still see a horizontal line.
<A HREF="address to link">link name</A>
Where the address to link is either a web address (like http://www.google.com) or a local address (like page02.html). The link name is what will show up on the webpage (usually blue and underlined) as the link.
Now lets try this on our own. First you will have to have a page to link to, so we'll create a new HTML document. Lets keep it simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My Second HTML Page</TITLE>
</HEAD>
<BODY>
This is my second HTML page.<BR>
<A HREF="my_1st_webpage.html">return to my first page</A>
</BODY>
</HTML>
Make sure that where I have "my_1st_webpage.html", you put the name of your first HTML page. Then save it as "my_2nd_webpage.html" in your root directory. Now go to your first
HTML page and add the following lines:
<A HREF="my_2nd_webpage.html">go to my second page</A><BR>
<A HREF="http://www.google.com">The best search engine around</A><BR>
Now save it, then view it. You should have two links on your 1st page along with one return link on your 2nd page. Test them and see how they work. Linking to a file is done in the same manner as you link to a page. In fact you use the same tag, just change the address to link to reflect a file instead of a page.
We first need a file to link to, so the easiest thing would be to place the images.zip file that you downloaded earlier into you downloads folder. After
you have done that place the following line in the BODY of one of your HTML pages:
<A HREF="downloads/images.zip">images.zip</A>
That should do it. Just save, view and test your new link. You should now be able to write a webpage that includes images, links to other pages, and links to files. Make sure you now take some time and check out your HTML editor. Each one has some kind of "shortcut" you can use for links. It should be some kind of dialog where you enter in the information, and the editor writes the tag for you. Also make sure you take some time and check out the W3C HTML Help file I gave you and read about the ANCHOR and IMG tags.
When you are ready, we can proceed to lesson 6 - Validators, or you can return to the lesson index page.