Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The legacy frame specification from HTML3 and 4 has been obsoleted in HTML5. We're going to cover it here so you can recognize it when you see it. If you don't expect to be maintaining old legacy websites, then feel free to skip the rest of this movie. Let's make a working copy of frameset.html, and I'll rename this to frameset-working.html. This file actually loads some of the files from this frame subdirectory, and these are all very simple HTML files, as we'll see.
Open up frameset-working.html in the text editor and as you can see, this is a very short document. You'll notice that it doesn't have a doc type at the top, because this is not actually legal HTML5, so we don't want the browser to think that it is. We've a title here in the head section and after that the head section, you'll notice that there's no body; instead of a body we have a frame set, and a frame set contains a frame. It can also contain other frame sets. So we open this in the browser.
You see that this document has these three frames, and each of these frames is actually opening an HTML file from this frame subdirectory. So the first frame here is f1, the second one is f2, and this third one is f3. And if I right-click on this f1, you see it says This Frame, and I can View Frame Source, and there is that document. It says Frame One in it. So let's look at the syntax of these tags. The frameset tag has a cols attribute or a rows attribute, and then inside quotation marks it has a specification for how those columns are laid out.
In this case, the right column is taking up 75% of the space, and the left column is taking whatever is left. That asterisk means evenly divide up whatever is left, so you could have more than one of them, and it would evenly divide them. So as I change the size of this window, you notice that the right-hand side continues to take up 75% of however much space that is. So it has got those two columns: 75% on the right and whatever is left on the left. And then left to right, we load up those columns.
So the first column is a frame, and it has a source file (src) of this f1.html, so that's this frame here, Frame One. That's f1.html. And the second column has a frameset with the rows, and the rows are 100 pixels and whatever is left. So as I change the height of this window, you see that that top frame remains the same size. It is always 100 pixels, and whatever is left is taken up by Frame Three. So we have these files--f2 and f3--and those are taking up the rows. The first one is the top row and the second one is the next row down.
And then we close our frameset elements, and that's it. So you might notice one other thing about this is that there is this horrible- looking border things. And you can actually use those to drag around these borders, which is a pretty bad idea actually. Let me reload this and make them default again. So mostly I think you're going to want to get rid of those borders, because they don't serve any useful purpose. They serve a rather nasty non- useful purpose and they are ugly. So the way to get rid of them is with the frame border attributes.
So here on frameset, I am just going to say frameborder="0". When I save this and reload it, you notice that all the frameborders go away. In some older browsers, that won't quite get rid of all the frameborders; you'll need to also put that same attribute down here on this other frameset. And so I am going to go ahead and do that anyway and hit Reload over here. Now we don't have these borders. I can't grab them and change their size, and they're working exactly as they are supposed to work.
It's also worth noting that there is no CSS equivalent of that frameborder=0. Because this tag is so old and not part of any recent specification, CSS simply does not have a selector for selecting a frameset. So the code I've shown you in this movie is considered obsolete. It still works in modern browsers, because the browsers all go to great lengths to support legacy code. But this is not standard HTML, and you should not use this feature in any new code.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98482 Viewers
61 Video lessons · 85764 Viewers
71 Video lessons · 69669 Viewers
56 Video lessons · 101993 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.