Working with Linked Windows Figure 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 Figure 14.4. yellow.html web browser window named yellow_page. file:///G|/1/0672328860/ch14lev1sec2.html (3 von 7) [19.12.2006 13:49:37] Working with Linked Windows After 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 Figure 14.5. blue.html displayed in the web browser window named blue_window. file:///G|/1/0672328860/ch14lev1sec2.html (4 von 7) [19.12.2006 13:49:37] Working with Linked Windows Next, 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 file:///G|/1/0672328860/ch14lev1sec2.html (5 von 7) [19.12.2006 13:49:37] Working with Linked Windows window 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. Figure 14.6. green.html displayed in the web browser window named 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 file:///G|/1/0672328860/ch14lev1sec2.html (6 von 7) [19.12.2006 13:49:37] Working with Linked Windows parent.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. file:///G|/1/0672328860/ch14lev1sec2.html (7 von 7) [19.12.2006 13:49:37] Working with Frames Working 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. file:///G|/1/0672328860/ch14lev1sec3.html (1 von 7) [19.12.2006 13:49:38] Working with Frames Each 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. The cols Attribute 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 file:///G|/1/0672328860/ch14lev1sec3.html (2 von 7) [19.12.2006 13:49:38] Working with Frames <html> <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 Figure 14.8. The cols attribute defines the number of vertical frames or 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 file:///G|/1/0672328860/ch14lev1sec3.html (3 von 7) [19.12.2006 13:49:38] Working with Frames won'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 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 Figure 14.9. The rows attribute defines the number of horizontal frames or rows in a frameset. file:///G|/1/0672328860/ch14lev1sec3.html (4 von 7) [19.12.2006 13:49:38] Working with Frames Note If 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" /> file:///G|/1/0672328860/ch14lev1sec3.html (5 von 7) [19.12.2006 13:49:38] . 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. 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. frames, as you'll discover in the following section. In such cases, rather than including a target attribute for each < ;a& gt; tag, you can use another tag, <base>, to define a global