Okay, we we have learned how to create a simple Web page. We even know how to change the text size, shape and color, and we can do a large variety of different lists. However, if you want to create a Web site consisting of multiple pages, or create a links page of your favorite sites? Then what?

Simple Links

Before we can get started we need to discuss a couple of things.

In-site (Internal) Vs. Off-site (External) Links

In Day Four you were introduced to the basic format of a link. To refresh your memory the syntax is:

<A HREF ="http://www.cisteach.com">Descriptive text</A>

Notice that the address is a full Universal Resource Locator or URL. The URL starts with http and ends with com.

So, what in an extension? We are all used to the .com but what other ones are there, who can use them, and what do they mean? For more in depth informaton go to the following link. Domain Name Extensions

The format is simple. The A stands for anchor and the HREF stands for hypertext reference. It is a reference to another page, for example the Web address http://www.cisteach.com. This is an example of an external link. You are sending the user off your site to someone else's.

Now let's examine an internal link. This is a link that stays within you own site. By way of example one of your pages calling another page. Let's say it is a link from your home page to an auxiliary page. Here is its syntax:

<A HREF="htmltutorial.html">Descriptive text</A>

Notice here we are calling the address without the full address attached. We are basically calling a file name. Why? Since is is internal we do not need to provide the entire path as part of the link. For a little added clarification let's look at some directory structures. If you are going to be a Web Developer you are going to have to learn a little DOS. (MSDOS for Microsoft Disk Operating System or DOS for Disk Operating System.).

Directory Structure

In this example you have purchased a site location on which to host your work. You could just locate everything in your root or main directory but that would be like putting all your clothes in one dresser drawer. What a mess!

The figure above is a small sample of how a site might be laid out.

The main site link would be <A HREF="http://www.cisteach.com">. This would take you to the site's main page. I did not have to specify a file name. The file called index.html is an auto executing file which launches when the page is called by the end user. (Much like the autoexec.bat file in DOS).

Under my Main Directory I have two subdirectories one called HTML Class and the other called Images. An example of a link going to the HTML class would be<A HREF="http://www.cisteach.com/HTMLClass">. Remember links and file names are case sensitive.

Under HTML Class there are several more subdirectories called Week One through Week Four. The directory structure of an A HREF would be <A HREF="http://www.cisteach.com/HTMLClass/Week1"> If I wanted to call a specific file the the syntax would be <A HREF="/http://www.cisteach.com/HTMLClass/Week1/lists.html> where lists.html is the name of the file..

Using a directory structure can save you a lot of work by placing like files in the same directory, in addition it helps avoid the duplication of files. For example the Images subdirectory could contains all of the images used throughout the site. This site makes use on an image called hint.gif

by placing the hint.gif file in the image subdirectory I can link to it and not have to replicate the file in multiple locations. Additionally if I need to change the image I would only have to change it in one location. Later in the Web Developer program we will learn about Cascading Style Sheets. This will allow us to have an external style sheet that control the look and feel of the entire site.

Let's review the structure.

External Link <A HREF="http://www.cisteach.com">Descriptive text</A>

Internal Link <A HREF="week1.html">Descriptive text</A>

Internal Page Links

This is a great way to allow people to navigate a really long page. You may have already seen them on a long page where an icon can return you to the top of a page.

To accomplish this you need two items.

• A basic link command
• The point on the page where the user will jump

Here's the basic syntax for the link portion:

<A HREF="#codeword">TOP</A>

And then the syntax of where the link will jump to within the page:

<A NAME="codeword">

• The A HREF command is the same as a basic link except the link is the code word rather than a URL. (Yes, it is case sensitive)
• Please notice that there is # sign in front of the code word, it denotes it as being an internal link. Without the # sign, the browser will look for something outside the page named after your code word.
• Your "code word" can be just about anything you want, I try my best to make it represent the location I am jumping to like "TOP" for going to the top of a page.
• The point where the page jumps to follows the same general format, except you replace the HERF with the word NAME. Please also note there is no # sign in the name command.
• Where you place the <A NAME="---"> the target is the section of the HTML page that appears at the top of the browser window after the page jump occurs.

Jumping to a Specific Location on a Returning Page

Let's say you have written a link to goes out to a specific page, and upon returning to the sending page you want to relocate to a specific location. You will use the same basic HERF command with a slight change to denote both the sending page and the specific target area to return to.

Target Area this will be our target area. Let's go to an external page. See it works. It may not take you to the exact spot but it's pretty darn close.

Here's the syntax.

Sending page <A HREF="externalpage.htm>external page</A>

Returning page <A NAME=week3.html#target>Go back to Sending Page</A>

Notice there is no space between the end of the file name and the # to specify the target.

Active Images (Images That Act Like Links)

I know we covered this in the introductory section, but I thought it was worth a little review.

First I need an image. This one will do. I case you are wondering this is my daughter's drawing of me.(See was 6 when she drew it.) Let's use this link to go to my home page for my on-line classes. Click on my picture and off we go!

Here's the syntax:

<A HREF="http://www.cisteach.com"><IMG SRC="dmr.gif"></A>

Just that easy. Instead of writing in descriptive text you place your image/graphic in its place..

Removing the Border from Around an Image

See the border above. Hate that border, okay let's get rid of it. Simply tell the <IMG SRC> flag you don't want a border.

Here's the syntax.

<A HREF="http://www.cisteach.com"><IMG SCR="dmr.gif" BORDER=0></A>

How easy is that?

Getting a Page to Change Automatically

Here is a great effect if you want to put together a slide show or if your site has a splash screen and you want users to automatically advance to the next page, or if you have moved you site to a new location. (For the defination of a spash page Click Here.

Here's the syntax:

<META HTTP-EQUIV="refresh" CONTENT="5";URL="http://www.hwg.org">

The above code is placed right after the <HTML> and <HEAD> flag if you are using one and just before the <TITLE> and </TITLE> commands.

• META HTTP-EQUIV tells the computer that after the page has completely loaded to go to an HTTP EQUIV, in other words proceed to another Web page.
• REFRESH tells the computer that it's supposed to refresh the page. The system begins to reloads the page, but because we are offering a new URL, it actually loads a new page rather than refreshing the old one. (This is the same as holding your shift key down when clicking the refresh icon on your Web browser. It forces the browser to go the server which the page is stored on and retrieve the most current copy.)
• CONTENT is rather a strange use of the word it denotes the number of seconds before the meta-refresh is to occur. I have set this one to 5 seconds but you can use whatever time frame you desire. The point here is to make sure the first page is fully loading before sending the users to the new one. So if your page is primarily text 5 seconds should be okay, but if yoru original page is full of graphics you'll need to set a higher limit.
• URL is the address it is you are sending the end user to after the specified time, in this case 5 seconds.

How to Add Sound

Here's another cool thing you can do with the META format. Remember the sound track you heard when this page initially opened?

Here the syntax:

<META HTTP-EQUIV="refresh" CONTENT="5"; URL="wk3.au">

Just a side note but an important one this is an Internet Explorer only command, Netscape just ignores the command totally.
(For samples of other sound tags Click Here)

Adding Images and Backgrounds

Images are a big part of what makes a Web site either good or bad. Learning how to manipulate images on your Web pages is one of the major keys to building a great Web site.

Graphics Packages

Here are some popular shareware programs available on the Web.

For even more Graphic Editors Click Here

Grabbing Images Off the Web

Let's get the tough part out of the way up front. Just because you can do something does not mean you should, especially legally. Copyright laws do still apply to the Internet, contrary to public opinion. Before taking an image from someone's page, the easiest rule of thumb is ASK. Most people will grant your request, unless it is for commercial gain. People tend to get touchy about you making a profit off of their work. (As a photographer who has taken pictures for atleast 20 years I would.)

On with the Show!

How do I take an image off the net?

Let's look at the image below.

Cool Graphic! You want it? Take it!

Step One

Place your pointer on the image, and click your right mouse button. Macintosh users should push the mouse button and hold it. A context menu will appear. A context menu is just a submenu of options for the action you are trying tocomplete.

Step Two

Here is the context menu that will appear. Go to the Save Image As... option. Left mouse click and tell the computer the location where you want to save the image.

Take the above image of "techo the computer" and post it to your web site for the class.

Aligning Text and Images

Before proceeding you may want to review Day 5 on images. This section will deal with what to do with the images once you have them.

Getting text to wrap

Left Align - <IMAGE SRC="image.XXX" ALIGN="left">

Getting text to wrap around the image is perhaps the most common technique you will need to master. It is accomplished through the use of two basic tag sets. <IMAGE SRC="Dock.gif" ALIGN="left">. Through the use of these tags you can have your text wrap to the right side of an image. You are actually telling the browser where not to align the text. This is accomplished by using the ALIGN="left" tag inside a conventional image flag. I know what you are thinking the the image way already aligned to the left, and you are absolutely correct. It is the ALIGN portion the will permit the text to actually wrap around the image. Keep watching, are you still watching, it is going to wrap any second now. Oh heck I'll take the easy way out. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text See I told you it actually wraps. Lets try the right hand side next.

Right Align - <IMAGE SRC="image.XXX" ALIGN="right">

The tag set here is the same basic syntax as the ALIGN="left" only to change it to the right of an image use the following syntax.. <IMAGE SRC="Dock.gif" ALIGN="right". Here it is in action. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Tada! Another nice wrapping job accomplished.

Center Align ?

Whoa! pretty cool. A image in the middle and the text wrapping around it.

Neat trick? Nope, there is actually no ALIGN="CENTER" tag. While the image appears to be in the center with text wrapping around it in fact it is three column table with an image in the center column and a border of zero.. More on tables later.

Align One Line of Text

If you want to align one line of text for emphasis for use as a image title, you will use one of the three tags in connection with the ALIGN tag: top, middle, or bottom. Keep in mind these tags refer to the text placement only. These tags will not align headings, headings require a space of their own. To get bigger text use the <FONT SIZE> command.

Align Top

This text is aligned at the top of the image. The syntax for this command is <img src="tiger.jpg" align="top"> Notice that if I keep typing instead of wrapping around the picture the text simply jumps to below the image. Not very pretty and a huge waste of space.

Align Middle

This text aligns in the middle of the picture. The syntax for doing this is <img src="tiger.jpg" align="middle"> Again if I keep typing the text goes below the image.

Align Bottom

This text aligns at the bottom of the image. The syntax for doing this is <img src="tiger.jpg" align="bottom"> and yes if I keep typing the text will continue below the image.

Using Height, Width, and Alt Command to Load Images Faster

Have you ever gone to a page and sat there looking at a blank screen for a long time? You know the page is loading because those little numbers are moving on the bottom of the page. The following commands will make your page appear to load faster. Your text will appear almost at once and the images will follow. By using this method the viewer has something the look at and your pages appear to be loading faster.

This is accomplished by combining three additional tags within your image tag. Look at the image below and examine how the syntax works.

Here's the accompanying image flag for this picture <IMG SRC="AirShow.jpg" WIDTH="171" HEIGHT="83" ALIGN="left" ALT="Sunset picture of pilot in cockpit and NAS Lemoore Air Show">

• WIDTH = the width I want my image displayed in pixels
• HEIGHT = the height I want my image displayed in pixels
• ALIGN = how I want my text aligned around the image
• ALT = an alternate description of what the image is. This serves two purposes (1) it tells the views a little more about what the image actually is and (2) for the visually impaired who may be using a screen reader it servers to tell them an image is present and what is contained in the image. For this reason I suggest using a real description and not simple saying something like plane.

Note: The height and width information also insures your picture appears in the right shape and size that you intended. For example

While the image at the left might work fine as a thumbnail it is probably not what I wanted the visitors to my page to see. Using the height and width tags I insure they see the image exactly the way I want them to. Click on the tumbnail to the left to see a larger image.

Now isn't that better?

How do I Find Each Image's Size?

It is not a hard as you think. Here are the steps required to accomplish your task

1. Right click on the image above (MAC users click the button and hold it down).
2. From the context box the pops up select the View Image Option (this will open only the image in its own window)

Right click on the image again and select the View Info Option. There is the information you need is right at the top of the screen.

I use a product called Thumbs+ from Cerious at http://www.cerious.com/ to locate, view, edit, print and organize my images. It cost about 74.95$US and can be down loaded directly from their site. You DO NOT need it for this class it is just on of my favorite reasonably priced applications. You can download a trial version for the duration of the class.(Note: I will not answer questions about how Thumbs+ works.)

Creating Thumbnail Images

Ever load a page with a bunch of large images, and it takes forever. Here's where thumbnail images come in handy. If you are displaying a bunch of images let the viewer decide which one they would like to view. The question to be asked is when should you or shouldn't you use a thumbnail? If page is displaying 200 pictures of your dog playing with a stick in the back yard, thumbnails are probably very appropriate. However, if it is the main logo for your company than a thumbnail is not appropriate. This is one of the areas where you have to use your own judgment..

A great program I use to create thumbnail images is AU2HTML. It can be down loaded for free at http://www.filehouse.com. and takes about ½ hour on a 56K modem.

  Image displayed as a larger size.

Some final thoughts on images and thumbnails

Images are great there is no doubting it, but remember the majority of people surfing the net are dial-up users. Pages will load only as fast as your server gives and your modem accepts a page. Here are a few tips:

• Using a 100K image in JPG format takes upwards to a minute to load at 28.8, so go as small as you can go.
• Use GIF format for smaller images such as icons or line style drawings, and JPGs for larger images.
• Remember to go for content and not flash. A page that contains up to thirty images may be really cool to look at, but not if there is no one to look at it because the got tired of waiting for the images to load.

Backgrounds

One of the staples for building a great Web page is the inclusion of a nice background, either in the form of a nice color or an image. The difference between a great Web site is knowing when the background is pleasing to the viewer's eye and adds to the page or accomplishes just the opposite. This is one of those gray areas I really can not teach you which is best, this is up to individual taste. Look at all my web pages and you see a nice, clean white background. Why? I personally think it looks professional. (No e-mail's please!)

Changing Background Colors

You need two things to change the background color of a page: the command that accomplishes the task and the color code of the background you wish to use.

1. The command the change the background color is imbedded in the <BODY> command right after the closing </HEAD> command.
   
   Here's the syntax:

   <BODY BGCOLOR="######">

2. Now you need the color code. (Remember that chart I told you to print out?) I have found it is best to use a hex code instead of words to represent your colors. A complete code for a white background would look like this:

   <BODY BGCOLOR="#FFFFFF">

That's all there is to is. WAIT!! There is one major rule, not matter what background color your chosen make sure your text is easily readable.

Background Wallpaper

Let's think about wallpaper for a second. In the real world wallpaper is one continuos pattern that is repeated at regular intervals, right? That is exactly what it is on a Web page. Generally a wallpaper for a Web page is a GIF or JPG that is small in size and repeated throughout the page. The advantage of this is that the background can grow or shrink to fit the end user's monitor size.

Here are some backgrounds to play with and also to show you backgrounds can come from anywhere. The first one is a scanned piece of parchment paper, the second one is the back of a album cover, the other three I took for various sites. Notice they are all different shapes and sizes. A really great site to mix and match backgrounds is Background by Marie located at http://www.artistic-designers.com/bkgds/mixnmatch.html

Here is the syntax:

<BODY BACKGROUND="image.gif:>

Please note the image can be either a GIF or a JPG. Click on the images above to see some samples of their respective backgrounds.

Have fun with background but be careful they add to your site not detract from it.

Last new task for the week!

Creating Image Maps

An image map is a image which has been divided into regions or "hotspots"; when the "hotspot" is clicked the page's viewer is taken to a new location. Use the Image inspector to graphically create and edit client-side image maps.

Image maps are not overly difficult, but they are a bit time consuming. This section will attempt to take you through the creation of an image map in plain English.

Where do I get a map? Good question. You have to make it. You can't just go somewhere and download a map for your image/gif. The map you use for your image map has to be custom made for your purposes.

Click here for a sample Image Map

Let's look at the above image. We want the image to accomplish the following functions:

• Clicking on the pen allows the viewer to e-mail us
• Clicking on the Guest Book takes them to the guest book
• Clicking on the Check Book take them to an order form.

Here is what some of the source code might would look like:

<map name="sampleone">

<area shape="poly" coords="58,84,58,84,144,52,172,41,161,58,144,69,115,85,94,94,76,103,57,112,42,120,30,123,20,125,8,126,3,123,3,109,137,77,29,97,20,104,37,98,44,98" a href="mailto:david@cisteach.com" alt="mailto" title="mailto">

<area shape="poly" coords="140,77,187,80,230,76,256,77,278,78,304,79,339,79,355,77,353,58,350,46,366,42,385,34,387,26,381,19,377,13,340,15,303,14,279,15,247,15,197,15,180,14,181,13,181,13" href="guestbook.html">

<area shape="rect" coords="353,46,523,130" href="orderform.html">

</map>

    What you are looking at in a grid system that is placed on top of the picture with points that denote each URL or hotspot. A hotspot is the location to which you want to redirect your page viewer. When the mouse is on a certain area on the map grid the mouse pointer changes to a pointing finger indicating the viewer is being sent to a specific location. Note the different shapes which can be used are circle, rect for rectangle and poly for polygon.

     There are a ton of shareware programs out there that enable you to make an image map. I could not even begin to explain each one here. You must go out, find one you like, and use its instructions to make your map.

Here are some popular shareware programs available on the Web.

These pages are wonderful and have program tutorials on them for the specific product. They also include FAQs.

Locate a program you like and bookmark the accompanying site. Download the program you have selected, work through the tutorial provided.

Once you have created your map, you can place it in any directory you want as long as the path to the map is correct. I always place my map and the .gif that goes along with it in the same place. It just makes things a little easier.

The .gif

       No matter what map creation software you choose, you will be asked to create your map using a .gif. This .gif will, of course, be the .gif that will appear on the page as your image map. For instance, the map above was created over top of the .gif you see. It's just the way the programs work. Usually a large gif with uncomplicated area works best.

     The last part of the image map command is the .gif name..

     The syntax for a .gif is:

 Notice it is just a normal image tag with the addition of the text ISMAP. The computer will display the named .gif for people to view and selectable areas for them to click on.

The reason you place the ISMAP inside the image command is to alert the computer not to activate the image, but to rather read the map that is lying on top of it.

For more background information on image maps and images click here. Caution this page loads slow!

What You Have Made

I understand it all may seem somewhat mind-boggling at first, but try to go through it one step at a time. Once you complete your first map, you'll wonder why you thought it was so hard.

Create and upload a page(s) with the following criteria:

a) Common HTML tag set
c) At least 2 images (One GIF and one JPG) including the appropriate ALT tags and height and width tags
d) 2 external links (one to a site for GIF/JPEGs and one to a link on how to create links)
e) 2 thumbnail gifs linking to larger gifs
h) A <HR> tag with a width of 80%
i) An image map with an external link to MAPEDIT's home page site (Use the mapedit.jpg as your image source and make the parlor the hot spot)

Material for this lesson has been adapted from the HTML GOODIES site created by Joe Burns located at http://www.htmlgoodies.com/

Date of last update: Aprl 2009