HTML and CSS Reference
In-Depth Information
The HTML code that creates this frame structure for the Web page shown in
Figure 1a on page HTML 395 is contained in the sf2index.html frame definition file, and
is as follows (line numbers have been added):
1 <!DOCTYPE html
2 PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
3 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
4 <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”
lang=”en”>
5 <head>
6 <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8” />
7 <title>Special Feature 2</title>
8 </head>
9 <frameset rows=”40%,60%”>
10 <frame src=”sf2menu.html” title=”menu” name=”menu”
frameborder=”0” />
11 <frame src=”sf2home.html” title=”win-main” name=”win-main”
frameborder=”0” />
12 </frameset>
13 </html>
Note that there are several differences between the initial HTML statements in
this ile as compared to what you have created throughout the topic. Lines 2 and 3 are
eliminated in the HTML5 doctype statement; line 4 is changed in HTML5. In this frame
sample code, it is necessary to declare a doctype of Frameset, as shown in line 2. The
<meta> statement on line 6 is also different in this code sample from what you have created
in all other HTML files. All of the other files provided for this project already contain the
expected HTML5 doctype and meta tags.
In the code above, also notice that one frameset (line 9) is inserted that contains two
rows (top and bottom) that create two sections (or frames) of 40% and 60% of the Web
page, respectively. (If you wanted to structure the frames with the navigation frame on
the left and the content frame on the right, you would change the attribute “rows” in the
frameset line of code to “cols” instead and adjust the percentages as needed.) There will
always be one frame for each <frame /> tag that is used. That is, the <frame /> tag defines
one particular window (or frame) within a frameset. Each frame in a frameset can have
different attributes, such as border, scrolling, the ability to resize, etc., but each frame
contains only one Web page at a time as described below.
When the Web page loads (on lines 10 and 11 of the code), you see that the
sf2menu.html file opens in the first (top) frame, and the sf2home.html file opens in
the second (bottom) frame (or row). In other words, the top frame (sf2menu.html,
which contains the logo and navigation bar) displays in the top 40% of the Web page,
while the content frame (or section) named sf2home.html displays in the bottom 60%
of the Web page. Also note that line 11 gives that frame the target name “win-main”
as an identifier. The name “win-main” is used by the sf2menu.html file (shown later)
as the target frame in which all content is displayed.
Framesets
A frameset can be thought
of as a window with
various windowpanes.
Within each pane is a
separate Web page. The
frame definition file is
the HTML file that defines
the Web pages that are
displayed in the individual
panes. Every Web page
used in a frameset can
be viewed independently
in the browser as well as
within the frameset.
