Advanced HTML!


HyperText Markup Language

HTML Lesson 4

Frames and Image Maps


Before starting this lesson, you should be fairly comfortable with the basics of HTML that we discussed in the first and second lessons. I won't waste your time going over the things that we have already talked about. If you feel that you need a refresher, please see the first lesson entitled "Writing Your Own WebPages (HTML)" or the second lesson entitled "Moving Along with HTML!" There is also a third lesson, which deals with tables. It is called "Intermediate HTML!" You may want to read it as well, if you haven't already.

In this lesson we are going to create a WebPage with frames. We will use an image map to navigate through the frames. I have tried to keep everything as simple as possible. The WebPages that we will use with the frames do not have anything except a different colored background, so that we can track which page is where. Below are six pictures of HTML code for the six pages with different colored backgrounds. Go ahead and create each page with Notepad, saving them together in the same folder. You will need to save each one of them with the same name that I used. You will find the name of the page below each picture. The code is very short, so it won't take long.

blue.html
blue.html

cyan.html
cyan.html

green.html
green.html

pink.html
pink.html

red.html
red.html

yellow.html
yellow.html

You will also need the image that we are going to use for the image map. You can download it below. Save this image in the same folder as the other html files above. It's nothing fancy, but like I said, I'm trying to keep everything simple and easy to understand. Don't change the name of the image. It needs to remain "image.gif" in order for everything to work! If you want to take a sneak-peak at the finished WebPage, you can click on the link below the image link.

This is the image file you will need
[ image.gif ]

Click here to see the finished page

First, we need to talk about image maps. The picture below represents an image that is 7 pixels wide and 7 pixels high. Each square represents one pixel. An actual pixel is very small, much smaller than a grain of sand. This would be a very tiny image if it was indeed 7 pixels by 7 pixels, but I am only using this picture to explain how to find, (or map), the pixel locations of an image. The actual image that we are going to use is 150 pixels wide and 300 pixels high. The pixel in the upper left-hand corner is the first pixel. Its location is at X=0, Y=0. As you move to the right the X value increases. As you move down the Y value increases. Each pixel has its own different X and Y value. Study the picture closely to see what I am talking about before moving on.

Image



Image

The image shown above is the same size as the one we are going to use with our image map. The only difference in the two is that this one is missing the word "RESET". It also shows each X,Y location that we will need for the image map. The image is 150 pixels wide and 300 pixels high, the same as our image map image. You can find the width and height information by right clicking on the image and selecting "Properties." You will need an image editing program like Paint to find the X and Y locations, (or coordinates), of an image.

Open the "image.gif" image that you saved above in Paint, then maximize the Paint program on your screen. Select the pencil and move it over the image. If you look at the bottom of the Paint program on the status bar, you will notice two numbers separated by a comma. They change as you move the pencil around over the image. The first number is the X value and the second number is the Y value of the pixel location the tip of the pencil is over. If you move all the way to the bottom right-hand side of the image, the numbers should be 149,299. If the image is 150 x 300, why doesn't it say 150,300? The reason is because we begin counting at 0 and not at 1. Remember, the first pixel is at the coordinates 0,0 and not 1,1.

Let's go ahead and create the html file that we will use for our image map now. It is shown below. Just copy everything exactly as you see it in the picture. Save the file in the same folder as the others. You will need to save this html file as: "side.html". You can click the image of the HTML code to open it in a new window if you like.

Click to open in a new window

Click here for a text file of the side.html file

The first new tag that you should notice is the <MAP> tag. The only attribute used with this tag is the NAME attribute for the image map, which I chose to call "MyMap".

Image

Below the <MAP> tag are the <AREA> tags. Each of these <AREA> tags are used to define the areas of the image map. The first one defines the black area with the word "RESET" in it. This area begins at pixel location 0,0 and ends at pixel location 74,49. The beginning location is the top left pixel location and the ending location is the bottom right pixel location of the area we want to define. The shape of each area that we are going to define is rectangular, so for the value of the SHAPE attribute we put RECT. Other possible values for SHAPE are CIRC for a circle and POLY for a polygon shape. The next attribute inside the <AREA> tags is the COORDS, (or coordinates), attribute.

Image

Inside the first <AREA> tag are the coordinates for the black "RESET" area. This area begins at X=0 and Y=0. This is the first two values within the COORDS attribute. The next two values are where the rectangle ends. This location is 74,49. This is the second two values within the COORDS attribute. We define the coordinates of this rectangle like this: COORDS="0,0,74,49". Make sure you understand how we got that! The first two numbers of a rectangle's coordinates are always its top left-hand X,Y pixel location. The second two numbers are always its bottom right-hand X,Y pixel location. These two X,Y pixel locations are all that you will need to define any rectangle. It may be a bit confusing at first, but these COORDS attributes within the <AREA> tags are what define each area of the image map. The COORDS for a circle and polygon are done a little differently. We won't go into those in this lesson, but they are very similar. You should already be familiar with the HREF attribute.

Image

The TARGET attribute is a little more important when working with frames. The values that you see inside of each TARGET attribute are the names of the frames that we are going to create next. The only TARGET attribute that isn't a frame is the first one. I used TARGET="_top" for that one. This will "reset" the frames by reloading the entire page. When working with frames, it is very important that you send the right html file or link to the right target, (or frame). Before we create our frame html file, let's look at one other thing.

Image

Inside of the <IMG> tag you will notice a new attribute called USEMAP. This attribute tells the Web browser which image map to use with our image. Since we only have one image map, and the name we used was MyMap, the value for USEMAP is written like this: USEMAP="#MyMap", with the # sign in front of the name. Study the <AREA> tags a little bit. Try to get an idea of how each of the COORDS attributes map out each area of the image. When you're ready, copy the HTML code in the picture below and save it as "frame.html" in the same folder as the other files. Again, you can click on the image to open it in a new window if you want.

Click to open in a new window

Click here for a text file of the frame.html file

The first new tag here is the <FRAMESET> tag. We use this tag to position and help format each of the frames.

Image

The COLS attribute defines frames that you want to use in columns. I created two columns. One was 25% of the width of the page. The other was 75% of the width of the page. I could have added more, but I only wanted two. The ROWS attribute is used if you want your frames to be in rows. Here I created two rows of frames. One row was 75% of the height of the page. The other was 25% of the height of the page. Normally I wouldn't create this many frames, but I wanted to show you how it could be done for this lesson. The FRAMEBORDER attribute can be 1 if you want a border around your frame or 0 if you don't. The FRAMESPACING attribute is used to set the amount of space in pixels between each frame. Another attribute that you can use within the <FRAMESET> tag is the SCROLLING attribute. It is used to display scroll bars. It can be set to YES, NO, or AUTO. I didn't use it here.

Image

Below the <FRAMESET> tag is a <NOFRAME> tag. It is used to give a message and/or link to users who do not have Web browsers capable of viewing frames. There aren't many of those around anymore, so some people don't even use it, but it doesn't hurt anything to include it. Following the closing </NOFRAME> tag are the tags that define each individual frame. Inside the <FRAMESET> tag, the first frame defined in the COLS attribute was 25% wide. This is the first frame. Frames are created in the order that you define them within the COLS and ROWS attributes of the <FRAMESET> tag. Since we defined the COLS first, they will be created before the ROWS.

Image

Inside the first <FRAME> tag you will notice the NAME attribute. Remember the target names that we used with the TARGET attributes of the image map? This is how they know which frame to send those html files or links to in the image map's <AREA> tag's HREF attribute. I named each frame according to its location. The value of the first frame's NAME attribute is "topleft". You can name frames anything, but it helps to name them something that you will be able to remember. The SRC attribute is the html file or link that is loaded when the frames are first created. The FRAMEBORDER attribute can be 1 if you want a border around your frame or 0 if you don't. The NORESIZE attribute can be used if you don't want people resizing your frames by dragging them and making them bigger or smaller. Other attributes that you can use are MARGINHEIGHT and MARGINWIDTH. The values for each are numbers, in pixels, that you can use to set the size for your frame's margins. You can also use the SCROLLING attribute with an individual frame, just like it is used with the <FRAMESET> tag.

You should now be ready to open the "frame.html" file and see your new WebPage with frames and an image map. If something doesn't seem to be working properly, check your code for mistakes, comparing it with the code we used above. Play around with everything, changing the values to see what happens. Spend some time altering the COORDS attributes of the image map. If you mess anything up, remember that you can always come back here and compare your code with the code above. If using both the ROWS and COLS attributes together with the <FRAMESET> tag is confusing, try using only one or the other. Below are two different examples. Just remember that the sum of your percentages should always add up to 100%.



Image

25% + 25% + 25% + 25% = 100%

Click here to see the finished page above



Image

50% + 20% + 20% + 10% = 100%

Click here to see the finished page above



Before we end this lesson, I want to mention one other thing. There is also an <IFRAME> tag that some people like to use. It puts what is called a "floating frame" inside of a WebPage. I don't use it much, because I have read that it's not compatible with some Web browsers. I'm not really sure which Web browsers this includes, but I will show it to you just in case you decide you want to use it.

Below is a picture of the code I used to create a basic iframe. You can copy it and play around with it if you want to. I have included a link below the picture to the actual WebPage that it will create. If you look at the finished page, below the iframe are two links that you can click on to see how it works. There are several other attributes that you can use with an <IFRAME> tag that I didn't use. One attribute is the ALIGN attribute, with the values TOP, MIDDLE, BOTTOM, LEFT, and RIGHT. Other attributes are FRAMEBORDER, MARGINHEIGHT, MARGINWIDTH, NORESIZE, and SCROLLING. They are used the same way they are used with regular frames. The image below can also be clicked on and opened in a new window.

Click to open in a new window

Click here to see the finished page

This lesson was a bit longer than some of the others, but hopefully you have learned a few new things that you can use when creating WebPages. Don't forget to experiment! You can't hurt anything! The worst thing that could happen is that you might have to come back here and recopy a file or something. If you don't experiment you won't learn anything! Now that you've come this far, you will probably want to find a good HTML reference in order to continue your learning experience. Below are a few links that will hopefully help you to expand your knowledge of HTML even more! Good luck!


~ HTML Links ~

Lisa Explains It

HTML Goodies

HTML Goodies Reference

HTML Code Tutorial

Learning HTML - UT

Dave's HTML Tutorial

W3Schools Tutorials

W3Schools HTML Reference

W3C HTML Home Page



Back to Learn