Jonny's Frames Tutorial

Webhelp.org Presents:

Crashcourse in FRAMES

...Part Two...

HyperLinks And Frames:

Now for the part MOST of you have been waiting for!! Links in FRAMES!!

If you were to put a normal HyperLink within one of your frames, the frameset would maintain it's integrity, but the window the link is in changes. As an example, I will make a simple 50/50 frameset, one side blue, one side red and put the following hyperlink to green within the blue frame. This will be your ordinary Hyperlink like so:

Here's a link in blue's HTML that will link green to load in it's frame:

<A HREF="green.html">CLICK HERE!!!</A>

To open this example CLICK HERE and click on the link in the example to see what happens with the above HyperLink.

Now, I get the feeling that a lot of you don't want to do JUST that, so I'm going to show you how you change one frame, from another frame. In this case, I'm going to change RED into GREEN by clicking on a HyperLink in BLUE. To do this, your frames will have to have names. Here is what the FRAMESET for the next example will look like and please note the NAMEs of the frames....

The HyperLink in "blue" will be very similair to what you are used to, but with the TARGET tag added:

Here's HTML for "blue" to load "green" into "red":

<A HREF="green.html" TARGET="red">CLICK HERE!!!</A>

Can you see what this should accomplish? You want to HyperLink "green", but you want it to load in a frame with the name "red". In other words: Your target for "green" is "red". To check this out, CLICK HERE.

You can see that, thanks to the TARGET command, it will be easy to have a menu in one frame and load elements into another. A common use of frames.

There are default targets as well. You've seen what happens when a target is left out of a HyperLink, and what happens when you target the name of a frame. There is also:

<A HREF="green.html" TARGET="_top">CLICK HERE!!!</A>

This clears the FRAMESET and loads "green" on TOP in the browser...Especially useful to transport one from a FRAME page to a non-FRAMES page as in this... EXAMPLE.

<A HREF="green.html" TARGET="_blank">CLICK HERE!!!</A>

This opens a whole new, or BLANK, browser window and loads "green" into it... EXAMPLE

<A HREF="green.html" TARGET="_parent">CLICK HERE!!!</A>

This clears the last FRAMESET created and loads "green" in that part of the browser...HUH?! Well, that almost made sense! Now we get advanced....NOW WE GET ADVANCED?!? Looks like a new chapter!

Nested Frames and the _parent target:

Let's try explaining that again....If you have a frameset nested in a frameset, then targeting _parent will only load the HyperLinked file into the last frameset built.

What is a nested frameset? It's when you have one frameset and within one of the frame src's another frameset is built. That frameset would be nested.

Here's an example:

<FRAMESET COLS="55%,45%">
<FRAME SRC="blue.html">
<FRAME SRC="frame.hmtl">
< /FRAMESET>

This will draw up a simple frameset. You can probably guess what "blue.html" is, but what is in "frame.html" is going to be what makes this a "nested frameset".

Here's the HTML for "frame.html":

You see, the frameset created in "frame.html" will split up the 45% given to it in the first example into two more frames that are 55% and 45% of that. Now these frames are "nested" and the end product will not look to different from one of our very first examples:

Now, why would you want to do this if you could just do this in one frameset?? Here's why: The Parent Tag. If you are within "frame.html" with a link and targeted "_parent" then ONLY the frameset in "frame.html" will change! For example, let's make another frameset and call it "newframe.html" and in it have two new frames with the same parameters, but different colors:

Here's the HTML for "newframe.html":

Now let's put a link within "red.html" that will clear out "frame.html" and load "newframe.html" in it's place.

<A HREF="newframe.html" target="_parent">CLICK HERE!!!</A>

Want to try it out? CLICK HERE.

Now of course, this works if the FRAMEs are NAMED. If I named the frame that had frame.html in it "moreframes" and used target="moreframes" it would've worked the same way. As is the case if I wanted a link in "blue" to change the frameset in "frame.html", I would target the name of the frame. Here's a rewrite of the initial frameset:

And in "blue.html" we are going to have this HyperLink:

<P><BIG>Here's "blue's" HTML that will load "newframe.html" into the frame named "moreframes":</BIG><BR>
< A HREF="newframe.html" target="moreframes">CLICK HERE!!!</A>

And the same effect will happen, but the link is in the blue frame instead. CLICK HERE to find out what it does.

Using The WILDCARD...

There is a little something you can use in frameset called a WILDCARD that is quite useful. The wildcard is represented with the asterisk (*). It is used in place of an integer to designate "whatever isn't already defined". For instance:

<FRAMESET ROWS="50%,50%">

Can be represented as:

<FRAMESET ROWS="50%,*">

instead....Why? Well, that's why I saved this for last. You see, you wouldn't use it in most cases, since 100% is 100% no matter how you look at it, but one way you can define the parameters of your FRAMESET other than using percentages is pixels. Yes, you can define your frameset in number of pixels in width or height. But how many pixels across is your visitors display? You don't know this. One of the reasons why I like using percentages INSTEAD of pixels. Say, however, you have a menu bar on the left that has a neato graphic for it's links, and this graphic is exactly 89 pixels wide. You want the graphic to reside in a frame that is exactly 99 pixels wide. This is when using pixel widths and heights come in handy:

<FRAMESET COLS="99,*">

This will create a FRAMESET that is 99 pixels wide on the left, while the rest of the browser's screen is the rest of the frameset. Therefore, if someone's display settings are 800X600 and their browser is blown up to full screen, then 99 pixels are for the left and the remainding 701 pixels are on the right. On the other hand, if the browser is sitting in a little window that is only 200 pixels wide, the left column will still be 99 pixels wide, but the right will only be 101 pixels wide because that is all that remains available. No matter what, the defined number will never change. If the left column is greater than the number of pixels available in the browser, than a left to right scroll bar appears, and your page can be "scrolled" inside the browser. It's difficult for me to explain this in my typical "plain english" manner, so I was very happy to make one of my infamous, but not yet patented EXAMPLES. This one will open in it's own window. Resize the browser every which way and you'll see that no matter what, the column on the left remains to be 99 pixels wide.

This, my friends, concludes my lesson on Frames. I believe I've exhausted explaining all of the basics, so if you'd like to return to my site, CLICK HERE! You will find more on HTML, Frames and more, there.

Peace, Jonny....

E-Mail Jonny Webhead