HTML 5 Frames

Mastering HTML5 - Part 21

Forward: In this part of the series, we look at HTML5 Frames.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 21 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series, we look at HTML5 Frames.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

What is a Frame?
In this series, we have created many documents. Each of these documents begin with the <html> tag and ends with the </html> tag. Each of these documents indirectly belongs to one frame. You can actually partition a web page, so that each partition would have a frame. To achieve this, you need the frameset and the frame elements.

The frameset and frame Elements
The frameset Element is a double tag element. This element has a rows attribute, whose value is for the horizontal stripes you want for the web page. It also has the cols attribute, whose value is the vertical stripes you want. Each frame is represented by a frame element within the tags of the frameset element. You can have a frameset element in place of the frame element, to further partition the row or column stripe. Let us look at an example.

Frame Example
Consider the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frame Example</title>
</head>
<frameset rows="15%, 70%, 15%">
    <frame src="header.htm">
    <frameset cols="20%, 60%, 20%">
        <frame src="left.htm">
        <frame src="center.htm">
        <frame src="right.htm">
    </frameset>
    <frame src="footer.htm">
</frameset>
</html>

This is the code for a web page that has the frameset element. Note: in the web page of the frameset, there is no body element; the frameset element replaces the body element. There are two frameset elements in this case. The outermost frame set element has three row stripes as indicated by the value of the rows attribute. The value of the rows attribute has the heights of the row stripes as percentages of the height of the viewport (screen client area). The first element within the frameset tags is a frame element.  It has a src attribute. The value of its src attribute is the URL of the HTML document file for the frame. All frame elements behave in this way. This first frame element is for the first row stripe of the outer frameset element.

In the position of the frame for the second row stripe for the outer frameset element, we have but a new frameset element. This is OK. This frameset is used to divide the second row stripe into three columns. So the frameset needs a cols attribute and the value of the cols attribute consists of widths in percentage relative to the width of the viewport (screen client area). These percentage widths are for column stripes for the new (inner) frameset element. Within the inner frameset tags, you have three frame elements for the three columns.

For the third row stripe of the outer framset element, you have a frame element.

Experimenting
Read the above code, type and save it with the name, frameset.htm . Type the following code and save it with the name, header.htm , in the same directory that you saved the frameset.htm.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The header frame.
</body>
</html>

Type the following code and save it with the name, left.htm , in the same directory that you saved the frameset.htm.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The left frame.
</body>
</html>

Type the following code and save it with the name, right.htm , in the same directory that you saved the frameset.htm.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The right frame.
</body>
</html>

Type the following code and save it with the name, center.htm , in the same directory that you saved the frameset.htm.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
</head>
<body>
    The center frame.
</body>
</html>

Type the following code and save it with the name, footer.htm , in the same directory that you saved the frameset.htm.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
The footer frame.
</body>
</html>

Now, double click the frameset.htm file in the directory in which you saved it, and the browser should display one web page showing the frames and their contents. The frame contents are displayed in their respective positions. The frameset code is what governs the displayed web page. The content of the title element for the frameset code is what is displayed at the browser title bar for the web page.

With what you have learned here, you can use framesets and frames to produce other layouts.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

HTML 5 Frames

Mastering HTML5 - Part 21

Introduction

Related Links

Comments