Next, create a document called yellow.html see Figure 14.4 by entering the following code: Input Yellow Page Yellow Page This is the first target page.. After saving yellow.html, cre
Trang 1Figure 14.3 The parent window (the red page).
This creates a light-red page that links to the other three pages Save this HTML source as parent.html
Next, create a document called yellow.html (see Figure 14.4) by entering the following code:
Input
<html>
<head>
<title>Yellow Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Yellow Page</h1>
<p>This is the first target page Its target is <b>yellow_page</b></p>
</body>
</html>
Output
Trang 2After saving yellow.html, create another document called blue.html (see Figure 14.5) by entering the following code:
Input
<html>
<head>
<title>Blue Page</title>
</head>
<body bgcolor="#99ccff">
<h1>Blue Page</h1>
<p>This is the second target page Its target is <b>blue_page</b>.</p>
</body>
</html>
Output
blue_window.
Trang 3Next, create a fourth document called green.html, which looks like the following:
<html>
<head>
<title>Green Page</title>
</head>
<body bgcolor="#ccffcc">
<h1>Green Page</h1>
<p>This is the third target page Its target is <b>yellow_page</b>.
It should replace the yellow page in the browser.</p>
</body>
</html>
To complete the exercise, load parent.html (the red page) into your web browser Click the first hyperlink to open the yellow page in a second browser window This happens because the first hyperlink contains the attribute target="yellow_page", as the following code from parent html demonstrates:
<p><a href="yellow.html" target="yellow_page">Open</a> the Yellow Page in a new window.<br />
Now return to the red page and click the second link The blue page opens in a third browser window Note that the new windows probably won't be laid out like the ones shown in Figure 14.2; they usually overlap each other The following target="blue_page" statement in the parent.html page is what causes the new window to open:
<a href="blue.html" target="blue_page">Open</a> the Blue Page in a new
window.</p>
The previous two examples opened each of the web pages in a new browser window The third link, however, uses the target="yellow_page" statement to open the green page in the
Trang 4window named yellow_page You accomplish this using the following code in parent.html:
<p><a href="green.html" target="yellow_page">Replace</a> the yellow page
with the Green Page.</p>
Because you already opened the yellow_page window when you clicked the link for the yellow page, the green page should replace the page that's already in it To verify this, click the third hyperlink on the red page This replaces the contents of the yellow page (with the yellow_page target name) with the green page (green.html), as shown in Figure 14.6
green_page.
The <base> Tag
When you're using the target attribute with links, you'll sometimes find that all or most of the hyperlinks on a web page point to the same window This is especially true when you're using frames, as you'll discover in the following section
In such cases, rather than including a target attribute for each <a> tag, you can use another tag, <base>, to define a global target for all the links on a web page The <base> tag is used as follows:
<base target="window_name">
If you include the <base> tag in the <head> </head> block of a document, every <a> tag that doesn't have a target attribute will be directed to the window indicated by the base tag For example, if you had included the tag <base target="yellow_page"> in the HTML source for
Trang 5parent.html, the three hyperlinks could have been written the following way:
<html>
<head>
<title>Parent Window - Red</title>
<base target="yellow_page"> <! add base target="value" here >
</head>
<body bgcolor="#ff9999">
<h1>Parent Window - Red</h1>
<p>
<a href="yellow.html">Open</a> <! no need to include a target >
the Yellow Page in a new window.<br />
<a href="blue.html" target="blue_page">Open</a> the Blue Page in a new
window </p>
<p><a href="green.html">Replace</a> <! no need to include a target >
the yellow page with the Green Page.</p>
</body>
</html>
In this case, yellow.html and green.html load into the default window assigned by the <base>
tag (yellow_page); blue.html overrides the default by defining its own target window of
blue_page
You also can override the window assigned with the <base> tag by using one of two special
window names If you use target="_blank" in a hyperlink, it opens a new browser window that
doesn't have a name associated with it Alternatively, if you use target="_self", the current
window is used rather than the one defined by the <base> tag
Note
If you don't provide a target using the <base> tag and you don't indicate a target in a link's
<a> tag, the link will load the new document in the same frame as the link
Trang 6Working with Frames
The introduction of frames in Netscape 2.0 heralded a new era for web publishers With frames, you can create web pages that look and feel entirely different from other pages You can have tables of contents, banners, footnotes, and sidebars, just to name a few common features
At the same time, frames change what a "page" means to the browser and to your visitors Unlike all the preceding examples, which use a single HTML page to display a screen of information, a single
screen actually consists of a number of separate HTML documents that interact with each other Figure 14.7 shows how a minimum of five separate documents is needed to create the screen shown earlier in
Figure 14.1
Figure 14.7 You must create a separate HTML document for each frame.
The first HTML document you need to create is called the frameset document In this document, you
define the layout of your frames, and the locations of the documents to be initially loaded in each frame The document in Figure 14.7 has three frames
Trang 7Each of the three HTML documents other than the frameset document, the ones that load in the frames, contain normal HTML tags that define the contents of each separate frame area These documents are referenced by the frameset document
The <frameset> Tag
To create a frameset document, you begin with the <frameset> tag When used in an HTML document, the <frameset> tag replaces the <body> tag, as shown in the following code:
<html>
<head>
<title>Page Title</title>
</head>
<frameset>
your frameset goes here
</frameset>
</html>
It's important that you understand up front how a frameset document differs from a normal HTML
document If you include a <frameset> tag in an HTML document, you cannot include a <body> tag also The two tags are mutually exclusive In addition, no other formatting tags, hyperlinks, or document text should be included in a frameset document (The exception to this is the <noframes> tag, which you'll learn about later today in the section called, appropriately enough, "The <noframes> Tag.") The
<frameset> tags contain only the definitions for the frames in this documentwhat's called the page's
frameset.
The HTML 4.01 specification supports the <frameset> tag along with two possible attributes: cols and rows
When you define a <frameset> tag, you must include one of two attributes as part of the tag definition The first of these attributes is the cols attribute, which takes the following form:
<frameset cols="column width, column width, ">
The cols attribute tells the browser to split the screen into a number of vertical frames whose widths are
defined by column width values separated by commas You define the width of each frame in one of
three ways: explicitly in pixels, as a percentage of the total width of the <frameset>, or with an asterisk (*) When you use the asterisk, the framescompatible browser uses as much space as possible for the specified frame
When included in a complete frame definition, the following <frameset> tag creates a screen with three vertical frames, as shown in Figure 14.8 The fifth line in the following code example creates a left frame
100 pixels wide, a middle column that's 50% of the width of the screen, and a right column that uses all the remaining space:
Input
Trang 8<head>
<title>Three Columns</title>
</head>
<frameset cols="100,50%,*">
<frame src="leftcol.html">
<frame src="midcol.html">
<frame src="rightcol.html">
</frameset>
</html>
Output
columns in a frameset.
Note
Because you're designing web pages for users with various screen sizes, you should use absolute frame sizes sparingly Whenever you do use an absolute size, ensure that one of the other frames is defined using an * to take up all the remaining screen space
Tip
To define a frameset with three columns of equal width, use cols="*,*,*" This way, you
Trang 9won't have to mess around with percentages because frames-compatible browsers
automatically assign an equal amount of space to each frame assigned a width of *
The rows attribute works the same as the cols attribute, except that it splits the screen into horizontal frames rather than vertical ones To split the screen into two frames of equal height, as shown in Figure 14.9, you would write the following:
Input
<html>
<head>
<title>Two Rows</title>
</head>
<frameset rows="50%,50%">
<frame src="toprow.html">
<frame src="botrow.html">
</frameset>
</html>
Alternatively, you could use the following line:
<frameset rows="*,*">
Output
rows in a frameset.
Trang 10If you try either of the preceding examples for yourself, you'll find that the <frameset> tag
doesn't appear to work You get this result because there are no contents defined for the
rows or columns in the frameset To define the contents, you need to use the <frame> tag,
which is discussed in the next section
The <frame> Tag
After you have your basic frameset laid out, you need to associate an HTML document with each frame
by using the <frame> tag, which takes the following form:
<frame src="document URL">
For each frame defined in the <frameset> tag, you must include a corresponding <frame> tag, as shown
in the following:
Input
<html>
<head>
<title>The FRAME Tag</title>
</head>
<frameset rows="*,*,*">
<frame src="document1.html" />