I hope that you have been using the tags from the last two lessons to get your pages going and are ready to move on.

I am sure you have realized that there is no way you will learn all there is to know about HTML nor probably even all you NEED or WANT to know about it in this class.

This week, we will discuss using graphics and creating links. If you persevere, you will be doing far more than "constructing a home on the web." You will be constructing your own base of knowledge upon which to build your skills.

Hyperlinks

Hyperlinks give you great flexibility in your page design. You can use these to jump from your page to another page somewhere else on the WWW, to jump to another page you have created and even from place to place in a single web page. Following is a simplified explanation of URL's and "how to" tutorial on creating the most basic types of links.

The information you use to create a link is called a URL (pronounced "earl" or simply spelled "U-R-L") which stands for "Uniform Resource Locator". It is probably easiest to think of a URL as a "web address."

URLs are divided up into several parts.
1. "protocol" which tells the browser the method in which the information to be accessed is stored. For this class, your URLs will usually begin with the protocol HTTP, for hypertext transfer protocol. The HTTP portion is followed by a colon and two forward slashes, "://".
2. The next part of the URL is the server name and domain. This is the part that tells the browser what server to access for the information. These can take on various formats such as (but not limited to!) "www.geocities.com", "vu.org" or "rutgers.edu."
3. The final part of the address is the path to the exact document or image you want to have the browser open up for viewing. This may be a simple file name like "index.html" or a more detailed path. The exact path for the files on your home page should be available through your server's administrator.

Be sure you type the URL exactly as it appears. URLs may be case sensitive in some instances, so it is best to copy an URL EXACTLY with upper and lower case letters as they appear. (TIP: Copying the URL from your browser's location window and pasting it into your document can save time and prevent mistakes.) If you do make a mistake, you will probably get an error message when you try to access that URL; for example, "404 Error" or "File Not Found". It is always a good idea to check all URLs to be sure they work.

The <A HREF=>  </A> (LINK)Tag Set:

Creating links to other web pages is the easiest. The basic tag for creating a link is:

<A HREF="http://www.server.domain/pagename.html">Type clickable text here</A>

This tag is called an "anchor tag." In this case, it directs the browser to look at the location you typed for the specified HTML document. The text typed between the opening and closing anchors will create the underlined "link" to the document or image.

Links to Other Pages of Your Own:

Anchor tags can be used to direct the browser to other web pages or images that you have stored on your server. You still must know your URL. If your server allows you to store all of your web pages in a single directory, this will be very easy. You would simply make a link to the page by using the file name as the URL. <A HREF="page2.html">My Second Page</A>

If you have a question about the path to your files or how the URL should look, it's best to check with your server administrator. They will be able to tell you the basic path to your web page, and from there you should be able to figure things out on your own.

Hyperlinks within the same document

Many web pages present a large amount of content in one long document. If you decide to use this type of format, it is a good idea to provide navigational links to points within that document so visitors can maneuver around more quickly and easily. This is accomplished with another type of anchor tag, combined with one described above.

<A HREF="#Cats">Cats</A>

where you want to have a navigational aid or a "jump to" called "Cats" will create a link within your document to the place you have NAMED "Cats". The second anchor tag for this is <A NAME=> , for the example given here it would read:

<A NAME="Cats"> Cats are great ......</A>

Now if someone uses the link for Cats they will be brought down to the portion of your document dealing with cats.

A handy "jump to" to use, even if it is the ONLY one, is to <A NAME="top"> at the top of your page, with the <A HREF="#top">Back to the Top</A>placed at the bottom. This will allow people to jump back up to the top of the page, rather than having to scroll all the way back.

"MAILTO" Links

<A HREF="MAILTO:"yourname.your.provider">E-mail Me</A>

Provides the visitor to your site with an e-mail link to you. Should always be placed on your page for feedback and other comments.

Graphics

When surfing the web for graphics you must be sure you are not using graphics that have been copyright. Normally, they tell you so at the bottom of the page.

There are many non-copyrighted graphics to use. I have provided a page with my favorite places to find graphics.

Graphics sources on-line will sometimes have a sentence which reads something like this: "Hey, I made these graphics and I want you to use them, just be sure you give me credit/a link on your page!" If you use them, just be sure you abide by their request. Additionally, some commercial graphics packages, especially those indicating they are for use on the WWW may be okay to use; check the documentation that comes with the software for details of the conditions for use. Now on to Adding Graphics to Your Page:

The basic tag for adding images to your page is:

<IMG SRC="imagename.imagetype">

Of course you would substitute the name of your image where appropriate. Note that there is no closing tag required on this tag. As you need to know your URL when creating a link, you should know where on the server your images are stored. You can get the specifics from the administrator if the information is not provided for you. Sometimes images are held separately from HTML documents in a different directory or folder on the server. This may mean your image path will look more like this:

<IMG SRC="images/imagename.imagetype">

But for GeoCites we will use the first code and not the one above. Your graphics will all be in the same directory as your html pages.

There are two types of images usually used on web pages JPEGs and GIFs. These are the only two that can be viewed by most browsers without needing add-ons, plug-ins or special viewers, though with the rate HTML and browsers change, this will probably be a thing of the past soon.

JPEG OR JPG:

A graphics format developed by the Joint Photographic Experts Group (hence the name), this format compresses the image, with some data loss depending on the degree of the compression. Used frequently for photographs. Quality of the JPG images are good with image file sizes being a good bit smaller than comparable GIF format images, making it nice for using with the aforementioned photos and with large images or ones with a large number of colors.

GIF:

Graphical Interchange Format, a graphics format developed originally by CompuServe, used mainly for computer-generated graphics such as buttons and bars and clip art style images. It is limited to 256 colors and since the compression is less than for JPEGs, GIF's take more space.

GIF 89A

This type of gif is one that deserves separate mention. GIF 89A's are "transparent", what this means is that they have been manipulated in such a way that they seem to float on the page. These are the type of gif you will want to use for most images on the WWW.

Animated GIFS

Another GIF with a note of its own, Animated gifs have become VERY popular lately and are an easy way to get some motion on your web page. These gifs are created by using special software.

Sometimes people accessing your web page will be using non-graphical browsers, have the image viewing turned off, or may be visually impaired. To make your page accessible to these visitors you should include ALT text within the IMG SRC tag. ALT text is a brief description of the image.

<IMG SRC="cat.gif" ALT="cat">

By including the ALT=cat those people viewing without ability to see images will at least know in this case that a picture of a cat is on the page in that location. This can be a particularly important consideration if you are using graphics as navigational icons.

Additionally, if you are using graphics, it helps browsers read your page faster to include the height and width of your image in the tag:

<"cat.gif" ALT="cat" HEIGHT="100" WIDTH="75">

You can usually determine these attributes by viewing the image with your graphics program. Most show the height and width of the image displayed. Homesite both the free and registered version will size your graphics for you automatically, this is the main reason I recommend Homesite.

In order to have some control over your images, you can place attributes or elements to place them on your page or in relation to text.

These three will align the image on your page in relation to the page itself.

• ALIGN=CENTER
• ALIGN=RIGHT
• ALIGN=LEFT

<IMG SRC="cat.gif" ALT="cat" HEIGHT="100" WIDTH="75" ALIGN="LEFT"> will have the image in question sitting on the left side of the page. These will align an image according to the text on the line with it. Especially good for using with small icons and thumbnails.

• ALIGN=TOP
• ALIGN=MIDDLE
• ALIGN=BOTTOM

<IMG SRC="cat.gif" ALT="cat" HEIGHT="100" WIDTH="75" ALIGN="TOP">

will have the top border of the image aligned with the text.

This is the most basic guide for using images in web pages. There is much more to consider about choosing and using images that should be reviewed by anyone creating web pages.

For example, loading very large images with a web page should be avoided as it can take a long to have them come into view. A common way around this would be to have a smaller, or "thumbnail", version of the image on the page itself and link it to a larger image that can be viewed if the visitor chooses.

Placing An Image Within A Link

(6) <a href="lesson1.html"><img src="bigcat.gif" width=59 height=40 alt="Big Cat"></a>

Since the small picture of the cat appears between the two anchor tags, the small picture of the cat will appear in a part of the link that you can "click". Most browsers will display a blue border around the image to let visitors know that it is a link. You may want to get rid of the border, though it doesn't give your visitors the visual clue that it is a link. (They can tell if they run the cursor over it.) You can set the BORDER=0

<a href="lesson1.html"><img src="bigcat.gif" width=59 height=40 border=0 alt="Big Cat"></a>

This creates a link using no border around the smaller cat picture. Again this is intended to provide the basics only.

Some Additional Graphics Terminology

Thumbnails:

Small size images placed on a web page, usually as a link to a larger counterpart. This gives the visitor the option to take the time to view the larger image at their leisure.

Inline Images/Graphics:

Images that are placed into the web page so that they are viewed when the page is loaded.

Icons:

Small graphic representations used for various purposes, such as a picture of a house used as a link back to a home page or a small picture of a speaker to indicate a sound file.

Buttons:

Similar to icons, used to provide a way to move around a web page, buttons are places upon which you "click" to be taken to other parts of the web site.

Bars or Rules:

Graphics which divide the page horizontally. Can be a simple line, much like the <HR> tag but are frequently more ornate and complex. Those yellow and black "construction site" bars are a good example!

Bullets/Balls:

Small graphics, frequently round in shape that are used to set off items, such as a list of links.

Interlaced Graphics:

Graphics created so that they progressively fill in at increasing resolution.

LOWSRC=:

I have never used this tag and hope I never have to I am not sure I would know what to do with it.

An optional attribute for the <IMG SRC> tag, referencing an image of lower quality resolution (perhaps a black and white image), that will fill in first while the larger graphic loads over it.

NEXT WEEK ... "Dressing Up the Page"

Lesson One
Lesson Two
Lesson Three
Lesson Four
Lesson Five
Lesson Six
Page Extras
Netscape Color Codes
Links for Graphics