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
cyan.html
green.html
pink.html
red.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.
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 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".
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.
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.
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.
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 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.
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.
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.
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%.
25% + 25% + 25% + 25% = 100%
Click here to see the finished page above
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 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!
|
