| Table of Contents | Previous Next |
1.4 Hyperlinks, tables, and framesApart from the "http" command on the browser, the anchor element <a> in XHTML provides another powerful method to connect to pages and documents on other Web sites. For example, a single anchor element such as <a href=http://www.othersite.com>Link To www.othersite.com</a> could link (or hyperlink) your page to the site www.othersite.com. This feature can connect your page to millions of other servers or Web pages on the Internet and therefore reach a truly world-wide scale. 1.4.1 Hyperlink to the Web worldWhen a browser executes the following code with anchor <a href="http://www.hotmail.com">Microsoft Hotmail</a> it will display and underline the text "Microsoft Hotmail" on the screen. If the Web user clicks the underlined text with a mouse, the browser will invoke the hyper reference attribute href and perform the action http://www.hotmail.com. That is, it jumps to the home page of the "Microsoft Hotmail" and displays it on the browser screen. If you use the attribute target associated with the anchor element such as <a href="http://www.hotmail.com" target="_blank">Microsoft Hotmail</a> then the browser will open another new browser window and use it to connect to www.hotmail.com, keeping the original browser screen unchanged. The actions associated with href can be virtually anything supported by your browser, including:
For example, when a user clicks the underlined text "Sound Of A Broken Glass" in the code <a href="glass.wav">Sound Of A Broken Glass</a> the href action is to get the sound file glass.wav and play the sound on your machine. Similar code and processes also apply to other picture and multimedia movie files. However, not all browser software supports all types of multimedia files. Multimedia and browser differences will be discussed in Chapter 4. The following is an example of the <a href="xxx"> element at work: Example: ex01-13.htm - Hyper Links 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> Hyper Links ex01-13.htm</title> 7: </head> 8: 9: <body style="background:#000088"> 10: <div style="text-align:center"> 11: <span style="font-family:arial;font-size:18pt;color:#ffff00"><br /> 12: <b>My Favorite Web Pages</b><br /></span> 13: <span style="font-family:arial;font-size:16pt;color:#00ffff"> 14: <b>(Practical Web Technologies)</b><br /><br /></span> 15: <img alt="pic" src="line1.gif" width="550" height="4" /><br /><br /> 16: </div> 17: 18: 19: <img alt="pic" src="bullet1.gif" width="15" height="15" 20: align="top" hspace="60" vspace="5" /> 21: <a href="http://www.pwt-ex.com" target="_blank" 22: style="font-family:arial;font-size:16pt;color:#ffff00"> 23: <b>www.pwt-ex.com</b></a><br /><br /> 24: 25: <img alt="pic" src="bullet1.gif" width="15" height="15" 26: align="top" hspace="60" vspace="5" /> 27: <a href="http://www.hotmail.com" target="_blank" 28: style="font-family:arial;font-size:16pt;color:#ffff00"> 29: <b>www.hotmail.com</b></a><br /><br /> 30: 31: <img alt="pic" src="bullet1.gif" width="15" height="15" 32: align="top" hspace="60" vspace="5" /> 33: <a href="mailto:" 34: style="font-family:arial;font-size:16pt;color:#ffff00"> 35: <b>Send An Email To Someone</b></a><br /><br /> 36: 37: <img alt="pic" src="bullet1.gif" width="15" height="15" 38: align="top" hspace="60" vspace="5" /> 39: <a href="file://c:" target="_blank" 40: style="font-family:arial;font-size:16pt;color:#ffff00"> 41: <b>Files On My C Drive</b></a><br /><br /> 42: 43: </body> 44: </html> Figure 1.17 shows the screen shot of example ex01-13.htm. Figure 1.17. ex01-13.htm
This is a page containing four anchor elements. Let's consider them one by one in detail. The first bullet option on the screen was generated by the following XHTML code fragment: 19: <img alt="pic" src="bullet1.gif" width="15" height="15" 20: align="top" hspace="60" vspace="5" /> 21: <a href="http://www.pwt-ex.com" target="_blank" 22: style="font-family:arial;font-size:16pt;color:#ffff00"> 23: <b>www.pwt-ex.com</b></a><br /><br /> First the text "www.pwt-ex.com" in line 23 is underlined by the browser. By default, the browser will underline all messages or texts bounded by the anchor element <a>. When this underlined text is clicked on using a mouse, the attribute href="www.pwt-ex.com" in line 21 is activated and the browser jumps to the corresponding Web site. The target attribute target="_blank" used in line 21 makes sure that a new browser window is opened. Web visitors will notice a change in the shape of the mouse cursor when it runs over the underlined text. This indicates that the hyperlink is ready for a click. The image file bullet1.gif used in line 19 is actually a bullet shape picture with a size of 15x15 pixels. The new image attributes hspace and vspace defined in line 20 are used to control the positions of the bullet picture. For example, hspace="60" sets a space of 60 pixels on both the left and right sides of the picture and vspace="5" sets a size of 5 pixels on both the top and bottom of the picture. They are used to make sure that the bullet is located at the proper location against the text. If you click on the third option "Send An Email To Someone" (line 35) then the action in line 33 33: <a href="mailto:" 34: style="font-family:arial;font-size:16pt;color:#ffff00"> 35: <b>Send An Email To Someone</b></a><br /><br /> is activated. This "mailto" command sends a signal to the browser to launch the default email software in your system. In our case, "Microsoft Outlook Express" is activated (see Fig. 1.18). More discussion on this mail agent will be continued in Part II. Figure 1.18. Mail agent
In some cases, browsers can also be used to browse all files and directories of your file system. In fact, some Web servers will even allow you to browse their file systems remotely. To demonstrate this functionality, let's click on the final option "Files On My C Drive" (line 41) in our example. This action activates the statement in line 39 39: <a href="file://c:" target="_blank" 40: style="font-family:arial;font-size:16pt;color:#ffff00"> 41: <b>File On My C Drive</b></a><br /><br /> and the browser will browse the whole C drive of your PC. A browsing result on our PC is shown in Fig. 1.19. Figure 1.19. Browsing the C drive
1.4.2 XHTML tables and formattingTables in XHTML are controlled by the element pair <table> and </table>. Between the table element pair, table rows can be defined by
Inside each table row, table data (or table cell) elements can be defined as
A typical table of two rows by three columns with width="500" and border="2" can be defined by the following code: Listing: ex01-05.txt 1: <table width="500" border="2"> 2: <tr> 3: <td>Row 1 Col 1</td><td>Row 1 Col 2</td><td>Row 1 Col 3</td> 4: </tr> 5: <tr> 6: <td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td> 7: </tr> 8: </table> The width attribute in line 1 sets the width of the entire table as 500 pixels. The border attribute is used to set whether the table should have a border. To put this into practice, a "Shopping Note" page is developed in example ex01-14.htm. Example: ex01-14.htm - XHTML Table 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> XHTML Table ex01-14.htm</title> 7: </head> 8: <body style="background:#444488"> 9: 10: <div align="center" style="font-family:arial;font-size:12pt"> 11: <span style="font-size:23pt;color:#00ff00"> 12: <b>Shopping Note</b><br /><br /></span> 13: 14: <table width="500" border="2"> 15: <tr align="center"> 16: <td><span style="color:#ffff00"><b>Product</b></span></td> 17: <td><span style="color:#ffff00"><b>Unit Price</b></span></td> 18: <td><span style="color:#ffff00"><b>Quantities</b></span></td> 19: <td><span style="color:#ffff00"><b>Sub-Total</b></span></td> 20: </tr> 21: <tr align="center"> 22: <td><span style="color:#00ffff"><b>CD-RW Disks</b></span></td> 23: <td><span style="color:#00ff00"><b>0.30</b></span></td> 24: <td><span style="color:#00ff00"><b>50</b></span></td> 25: <td><span style="color:#ffff00"><b>15.00</b></span></td> 26: </tr> 27: <tr align="center"> 28: <td><span style="color:#00ffff"><b>Color Printer</b></span></td> 29: <td><span style="color:#00ff00"><b>250</b></span></td> 30: <td><span style="color:#00ff00"><b>1</b></span></td> 31: <td><span style="color:#ffff00"><b>250.00</b></span></td> 32: </tr> 33: <tr align="center"> 34: <td><span style="color:#00ffff"><b>Printer Paper</b></span></td> 35: <td><span style="color:#00ff00"><b>4.00 per 500</b></span></td> 36: <td><span style="color:#00ff00"><b>5 x 500</b></span></td> 37: <td><span style="color:#ffff00"><b>20.00</b></span></td> 38: </tr> 39: <tr align="center"> 40: <td><span style="color:#00ffff"><b>CD Case</b></span></td> 41: <td><span style="color:#00ff00"><b>7.00</b></span></td> 42: <td><span style="color:#00ff00"><b>1</b></span></td> 43: <td><span style="color:#ffff00"><b>7.00</b></span></td> 44: </tr> 45: </table> 46: </div> 47: </body> 48: </html> This table has five rows and four columns and can be seen easily by the arrangement of the <tr> and <td> elements. Another feature of this example is that you can define an individual typeface, font size, and color for each table cell. This can help to increase the readability of a table and highlight some important items. A screen shot of this example is shown in Fig. 1.20. Figure 1.20. ex01-14.htm
If you create a table without a border (i.e., border="0"), the table can be used as a great tool for text alignment and integration of images. For example, the following simple code fragment can be used to construct a title page for this book with a logo: Listing: ex01-06.txt 1: <table width="550" border="0"> 2: <tr> 3: <td width="80%" align="center"> 4: <span style="font=family:arial;font-size:30pt;color:#ffff00"> 5: <b>Welcome To</b><br> 6: <span style="font=family:arial;font-size:30pt;color:#00ffff"> 7: <b>Practical Web Technologies</b> 8: </td><td> 9: <img src="logo_web.jpg" width="140" height="70"> 10: </td> 11: </tr> 12: </table> 13: <img src="line1.gif" width="550" height="6"> This simple table has one row and two columns. There is a welcome message in the first column and a logo picture logo_web.jpg in the second (see Fig. 1.21). The width attribute of the first <td> element in line 3 <td width="80%" align="center"> Figure 1.21. ex01-15.htm
indicates that the first column of this table occupies 80% of the entire row length. This means that the book logo will have the remaining 20% of space for display. This table can be used as the header of your Web page. Now, you can write a summary of this chapter and put the text into a new table as illustrated in the listing ex01-07.txt: Listing: ex01-07.txt 1: <table width="500" border="0" cellspacing="10" align="center"> 2: <tr align="left"> 3: <td width="25"> 4: <img alt="pic" src="bullet1.gif" width="15" height="15" /></td> 5: <td><span style="font-family:arial;font-size:16pt;color:#00ffff"> 6: <b>Introduction: Building An Instant Online Web Site</b></span></td> 7: .... xx: </table> The cellspacing attribute in line 1 <table width="500" border="0" cellspacing="10" align="center"> sets a space="10" pixels for all table cells. This is used to control the spacing between the bullet and the text. The alignment attribute align is also included for backward compatibility with some older browsers. The full listing of this example is given in ex01-15.htm below. Figure 1.21 shows this example at work. Example: ex01-15.htm - Formatting With Tables 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>Formatting With Tables ex01-15.htm</title> 7: </head> 8: 9: <body style="background:#000088"> 10: 11: <table width="550" border="0" align="center"> 12: <tr> 13: <td width="80%" align="center"> 14: <span style="font-family:arial;font-size:18pt;color:#ffff00"> 15: <b>Welcome To</b><br /></span> 16: <span style="font-family:arial;font-size:18pt;color:#00ffff"> 17: <b>Practical Web Technologies</b></span> 18: </td><td> 19: <img alt="pic" src="logo_web.jpg" width="140" height="70" /> 20: </td> 21: </tr> 22: </table> 23: 24: <div style="text-align:center"> 25: <img alt="pic" src="line1.gif" width="550" height="6" /> 26: <span style="font-family:arial;font-size:18pt;color:#ffff00"> 27: <br /><br /><b>Chapter One: Summary</b><br /></span> 28: <span style="font-family:arial;font-size:16pt;color:#00ff00"> 29: <b>An XHTML Revision And The Web</b><br /><br /></span> 30: </div> 31: 32: <div style="text-align:center"> 33: <table width="500" border="0" cellspacing="10" align="center"> 34: <tr align="left"> 35: <td width="25"> 36: <img alt="pic" src="bullet1.gif" width="15" height="15" /></td> 37: <td><span style="font-family:arial;font-size:16pt;color:#00ffff"> 38: <b>Introduction: Building An 39: Instant Online Web Site</b></span></td></tr> 40: <tr align="left"> 41: <td width="25"> 42: <img alt="pic" src="bullet1.gif" width="15" height="15" /></td> 43: <td><span style="font-family:arial;font-size:16pt;color:#00ffff"> 44: <b>A Quick Start With Web Pages</b></span></td> 45: </tr> 46: <tr align="left"> 47: <td width="25"> 48: <img alt="pic" src="bullet1.gif" width="15" height="15" /></td> 49: <td><span style="font-family:arial;font-size:16pt;color:#00ffff"> 50: <b>Using Images On XHTML</b></span></td> 51: </tr> 52: <tr align="left"> 53: <td width="25"> 54: <img alt="pic" src="bullet1.gif" width="15" height="15" /></td> 55: <td><span style="font-family:arial;font-size:16pt;color:#00ffff"> 56: <b>Hyper Links, Tables and Frames</b></span></td> 57: </tr> 58: <tr align="left"> 59: <td width="25"> 60: <img alt="pic" src="bullet1.gif" width="15" height="15" /></td> 61: <td><span style="font-family:arial;font-size:16pt;color:#00ffff"> 62: <b>How To Publish Your Page on Internet 63: and Search Engines</b></span></td></tr> 64: </table> 65: </div> 66: </body> 67: </html> 1.4.3 A simple photo album using tablesAs a practical application of XHTML tables, you can construct a simple photo album for "Wild Life." Suppose you have a collection of wild life pictures:
You want to create a Web page to display all of them. Since you may have difficulty displaying them all at the same time, one popular solution is to:
The first step is simple and can be done by a number of graphics packages. Here, Microsoft Photo Editor was used to scale down all pictures by 75% and save them as files with prefix "s." That is, we have s01_img.jpg, …, s08_img.jpg files in our file system. You can use the XHTML <table> element to display all small pictures in a single page. In order to have an organized photo album, the pictures are arranged into three categories
and a table used for each of these categories as shown in Fig. 1.22. Figure 1.22. ex01-16.htm
Finally, the linking between small pictures and big pictures can be achieved by the <a> element. For example, the XHTML code fragment for "Wild Life I" is given in listing ex01-08.txt. Listing: ex01-08.txt 1: <table width="500" border="0" cellspacing="10"> 2: <tr align="center"> 3: <td><a href="01_img.jpg" target="_blank"> 4: <img alt="pic" src="s01_img.jpg" /></a></td> 5: <td><a href="02_img.jpg" target="_blank"> 6: <img alt="pic" src="s02_img.jpg" /></a></td> 7: <td><a href="03_img.jpg" target="_blank"> 8: <img alt="pic" src="s03_img.jpg" /></a></td> 9: </tr> 10: </table> 11: <span style="font-family:arial;font-size:5;color:#ffff00"> 12: <b>Wild Life I</b> </span> This is a table with three cells. The first cell, line 4, is a small picture called s01_img.jpg. This picture is displayed on the screen by <img alt="pic" src="s01_img.jpg" /> Since this small image is entirely inside the anchor element (line 3) <a href="01_img.jpg" target="_blank"> the hyperlink action to display the big picture 01_img.jpg is triggered by clicking on the small picture. The attribute target ="_blank"makes sure that the browser will open another browser window for the display. This technique (changes from a small picture to a big picture) has been popular amongst Web developers and programmers. Many commercial Web sites and programmers generate this page using programming languages such as C/C++ or Visual Basic. Generating XHTML code using a programming language, in general, establishes an effective way to handle and maintain a large number of images. A screen shot of the big picture 01_img.jpg triggered by the small one s01_img.jpg is shown in Fig. 1.23. Figure 1.23. Picture 01_img.jpg
A complete listing of this page appears in ex01-16.htm: Example: ex01-16.htm - Small Picture Link To Big Picture 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> Small Picture Link To Big Picture ex01-16.htm</title> 7: </head> 8: 9: <body style="background:#888888"> 10: <div style="font-family:arial;text-align:center"> 11: <span style="font-size:24pt; color:#ffff00"> 12: <b>A Simple Photo Album</b><br /></span> 13: <span style="font-size:18pt; color:#00ff00"> 14: <b>Click Small Picture To Display Big Picture</b></span><br /> 15: <img alt="pic" src="line1.gif" width="550" height="6" /><br /><br /> 16: 17: <table width="500" border="0" align="center" cellspacing="15"> 18: <tr> 19: <td><a href="01_img.jpg" target="_blank"> 20: <img alt="pic" src="s01_img.jpg" width="170" height="110" /></a></td> 21: <td><a href="02_img.jpg" target="_blank"> 22: <img alt="pic" src="s02_img.jpg" width="170" height="110" /></a></td> 23: <td><a href="03_img.jpg" target="_blank"> 24: <img alt="pic" src="s03_img.jpg" width="170" height="110" /></a></td> 25: </tr> 26: </table> 27: 28: <span style="font-size:18pt;color:#ffff00"> 29: <b>Wild Life I</b></span><br /><br /> 30: 31: <table width="350" border="0" cellspacing="15" align="center"> 32: <tr align="center"> 33: <td><a href="04_img.jpg" target="_blank"> 34: <img alt="pic" src="s04_img.jpg" width="170" height="110" /></a></td> 35: <td><a href="05_img.jpg" target="_blank"> 36: <img alt="pic" src="s05_img.jpg" width="170" height="110" /></a></td> 37: </tr> 38: </table> 39: 40: <span style="font-size:18pt;color:#ffff00"> 41: <b>Butterflies</b></span><br /><br /> 42: 43: <table width="500" border="0" cellspacing="15" align="center"> 44: <tr align="center"> 45: <td><a href="06_img.jpg" target="_blank"> 46: <img alt="pic" src="s06_img.jpg" width="170" height="110" /></a></td> 47: <td><a href="07_img.jpg" target="_blank"> 48: <img alt="pic" src="s07_img.jpg" width="170" height="110" /></a></td> 49: <td><a href="08_img.jpg" target="_blank"> 50: <img alt="pic" src="s08_img.jpg" width="170" height="110" /></a></td> 51: </tr> 52: </table> 53: <span style="font-size:18pt;color:#ffff00"><b>Wild Life II</b></span> 54: </div> 55: </body> 56: </html> Most computer systems such as Microsoft Windows and UNIX allow you to open windows on the screen. Can we create some windows for our Web pages? This is not an easy question to answer. One of the earliest responses from Web developers was the idea of "frames" and "iframe" (inline frame). Although these features are handy in partitioning the browser screen, they also raise questions about the structural functionalities of XML and XHTML. This is the reason why the W3C authority set up another header document called frameset dedicated to them. Since frame and iframe are popular in some areas, we will discuss these elements in sections 1.4.41.4.6. 1.4.4 Frames: windows on Web pages?The concept of frames is very simple. If you partition a single Web page into a number of independent pages, then each independent page is a frame of the original. Naturally, one of the first operations to do with page partitions (or frames) is to assign names to each of them. This is the reason for the attribute target=xxxx. Since each frame can be an independent XHTML file, you may consider them as windows (or still windows) on Web pages. Consider the following example to cut a Web page vertically into two pages: Example: ex01-17.htm - Frames 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html 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: <title>My First Frame ex01-17.htm</title> 7: </head> 8: <frameset cols="240,*"> 9: <frame src="ex01-17l.htm" name="left" scrolling="auto" /> 10: <frame src="ex01-17r.htm" name="right" /> 11: </frameset> 12: </html> Basically, this code cuts the page into two frames and loads the files ex01-17l.htm and ex01-17r.htm into the left and right frames for display In lines 23, the keyword frameset is used in the header to specify that this is a frame application. In line 8, the new element <frameset> defines the partition of the page into frames. The attribute cols="240,* " indicates that the first part is from the first column to the column of 240 pixels. The remainder is the second part of the page. In line 9, the element <frame> is used to define the details of the first frame. This frame is called left and the primary XHTML file is ex01-17l.htm. The other attribute scrolling="auto" means that the browser can assign a scroll bar to this frame if necessary. Line 10 is the definition of another frame called right and with primary display XHTML file ex01-17r.htm. The details of the left frame page (i.e., ex01-17l.htm) are listed below: Example: ex01-17l.htm - The Left Frame For ex01-17.htm 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>The Left Frame Page of ex01-17.htm: </title> 7: </head> 8: <body style="background:#000088;font-family:arial; 9: font-size:16pt;text-align:center"> 10: <span style="color:#00ffff"> 11: Frame Example<br /><br /></span> 12: <span style="color:#ffff00"> 13: Left Frame of <br />ex01-17.htm<br /><br /> 14: File Name: ex01-17l.htm</span> 15: </body> 16: </html> This is a simple XHTML page to display some messages on the left frame of ex01-17.htm. The right frame page ex01-17r.htm for ex01-17.htm is also a very simple one: Example: ex01-17r.htm - The Right Frame For ex01-17.htm 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>The Right Frame Page of ex01-17.htm: </title> 7: </head> 8: 9: <body style="background:#000088;font-family:arial; 10: font-size:16pt;text-align:center"> 11: <span style="color:#00ffff"> 12: Frame Example<br /><br /></span> 13: <span style="color:#ffff00"> 14: Right Frame of <br />ex01-17.htm<br /><br /> 15: File Name: ex01-17r.htm</span> 16: </body> 17: </html> If both the files ex01-17l.htm and ex01-17r.htm are available in the default Web directory, ex01-17.htm generates a display as shown in example Fig. 1.24. Figure 1.24. ex01-17.htm
1.4.5 A page to link all examplesOne of the direct applications of the previous frame example is to build a catalog for this chapter. You can put all the major examples to the left frame and the summary of this chapter to the right. The main XHTML page now looks like the following: Example: ex01-18.htm - A Page To Link All Examples 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html 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: <title> A Page To Link All Examples ex01-18.htm</title> 7: </head> 8: <frameset cols="165,*"> 9: <frame src="ex01-18l.htm" name="left_f" scrolling="auto" /> 10: <frame src="ex01-15.htm" name="right_f" /> 11: </frameset> 12: </html> This is a frameset example very similar to the previous one. Line 10 loads the summary page ex01-15.htm into the right frame. For the left frame, a new XHTML example ex01-18l.htm is used. This page incorporates all previous examples and is listed below: Example: ex01-18l.htm - The Left Frame For ex01-18.htm 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> Left Frame For ex01-18.htm ex01-18l.htm</title> 7: </head> 8: 9: <body style="background:#000088;font-family:arial; 10: font-size:14pt;text-align:center"> 11: 12: <span style="color:#00ffff">Chapter One<br />Examples<br /> 13: <img alt="pic" src="line1.gif" width="140" height="6"<br /></span> 14: 15: <table align="center" style="text-align:center;font-size:10pt"> 16: <tr><td><a href="ex01-15.htm" target="right_f"> 17: <span style=";font-size:14pt;color:#00ff00"> 18: <b>Contents</b><br /></span></a></td></tr> 19: <tr><td><a href="ex01-03.htm" target="right_f"> 20: <span style=" color:#ffff00"><b>Ex01-03.htm</b></span></a></td></tr> 21: <tr><td><a href="ex01-04.htm" target="right_f"> 22: <span style=" color:#ffff00"><b>Ex01-04.htm</b></span></a></td></tr> 23: <tr><td><a href="ex01-05.htm" target="right_f"> 24: <span style=" color:#ffff00"><b>Ex01-05.htm</b></span></a></td></tr> 25: <tr><td><a href="ex01-06.htm" target="right_f"> 26: <span style=" color:#ffff00"><b>Ex01-06.htm</b></span></a></td></tr> 27: <tr><td><a href="ex01-07.htm" target="right_f"> 28: <span style=" color:#ffff00"><b>Ex01-07.htm</b></span></a></td></tr> 29: <tr><td><a href="ex01-08.htm" target="right_f"> 30: <span style=" color:#ffff00"><b>Ex01-08.htm</b></span></a></td></tr> 31: <tr><td><a href="ex01-09.htm" target="right_f"> 32: <span style=" color:#ffff00"><b>Ex01-09.htm</b></span></a></td></tr> 33: <tr><td><a href="ex01-10.htm" target="right_f"> 34: <span style=" color:#ffff00"><b>Ex01-10.htm</b></span></a></td></tr> 35: <tr><td><a href="ex01-11.htm" target="right_f"> 36: <span style=" color:#ffff00"><b>Ex01-11.htm</b></span></a></td></tr> 37: <tr><td><a href="ex01-12.htm" target="right_f"> 38: <span style=" color:#ffff00"><b>Ex01-12.htm</b></span></a></td></tr> 39: <tr><td><a href="ex01-13.htm" target="right_f"> 40: <span style=" color:#ffff00"><b>Ex01-13.htm</b></span></a></td></tr> 41: <tr><td><a href="ex01-14.htm" target="right_f"> 42: <span style=" color:#ffff00"><b>Ex01-14.htm</b></span></a></td></tr> 43: <tr><td><a href="ex01-15.htm" target="right_f"> 44: <span style=" color:#ffff00"><b>Ex01-15.htm</b></span></a></td></tr> 45: <tr><td><a href="ex01-16.htm" target="right_f"> 46: <span style=" color:#ffff00"><b>Ex01-16.htm</b></span></a></td></tr> 47: </table> 48: 49: </body> 50: </html> This is a table application and the key point of this example is the following code fragment (lines 1920): <tr><td><a href="ex01-03.htm" target="right_f"> <span style="color:#ffff00"><b>Ex01-03.htm</b></span></a></td></tr> First, the browser displays the underlined text "Ex01-03.htm" on the left frame. When the user clicks on the text, the XHTML file ex01-3.htm is loaded and then displays to target="right_f", which is the right frame defined by the main page (see Fig. 1.25). Figure 1.25. ex01-18.htm
You now have a Web page that links and runs all examples in this chapter. 1.4.6 Open an internal window with iframesOne of the advantages of inline frames (or iframes) is that they can be freely positioned almost anywhere inside a page. They don't need a master frame page to partition the screen (or parent frame). With a simple command format <iframe>, the inline frame is an XHTML element that opens an internal window anywhere to load another page. Consider the following example ex01-19.htm: Example: ex01-19.htm - IFrame 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>Using IFrame ex01-19.htm</title> 7: </head> 8: <body style="background:#aaccaa;font-family:arial;color:#000088"> 9: <div style="text-align:center;font-size:26pt"> 10: An Internal Window <br />For Wild Life<br /> 11: <iframe src="ex01-20.htm" align="center" 12: width="350" height="260" scrolling="auto" /> 13: </div> 14: </body> 15: </html> After the page message in line 10, we have the inline frame definition <iframe> (lines 1112). This iframe has a rectangular dimension of 350x260 pixels right after the page message. Inside this box, we have another page called ex01-20.htm. This is an ordinary page to be loaded inside the iframe. The attribute scrolling="auto" is used to generate scroll bars if necessary. The iframe page ex01-20.htm is listed as follows: Example: ex01-20.htm - A Wild Life Page For ex01-19.htm 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> A Page For Wild Life ex01-20.htm</title> 7: </head> 8: <body style="font-family:arial;color:#000088"> 9: <table cellspacing="15"> 10: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 11: <a href="01_img.jpg" target="_blank"><img src="s01_img.jpg" width="270" 12: height="190" alt="pic" /><br />Grass Hopper<br /></a></td></tr> 13: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 14: <a href="02_img.jpg" target="_blank"><img src="s02_img.jpg" width="270" 15: height="190" alt="pic" /><br />Peacock<br /></a></td></tr> 16: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 17: <a href="03_img.jpg" target="_blank"><img src="s03_img.jpg" width="270" 18: height="190" alt="pic" /><br />Eagle I<br /></a></td></tr> 19: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 20: <a href="04_img.jpg" target="_blank"><img src="s04_img.jpg" width="270" 21: height="190" alt="pic" /><br />Butterfly I<br /></a></td></tr> 22: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 23: <a href="05_img.jpg" target="_blank"><img src="s05_img.jpg" width="270" 24: height="190" alt="pic" /><br />Butterfly II<br /></a></td></tr> 25: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 26: <a href="06_img.jpg" target="_blank"><img src="s06_img.jpg" width="270" 27: height="190" alt="pic" /><br />Wild Duck<br /></a></td></tr> 28: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 29: <a href="07_img.jpg" target="_blank"><img src="s07_img.jpg" width="270" 30: height="190" alt="pic" /><br />Eagle II<br /></a></td></tr> 31: <tr><td style="font-size:14pt;font-weight:bold;text-align:center"> 32: <a href="08_img.jpg" target="_blank"><img src="s08_img.jpg" width="270" 33: height="190" alt="pic" /><br />Parrot<br /></a></td></tr> 34: </table> 35: </body> 36: </html> This page is a strip of eight images arranged in a vertical direction. Since they are loaded into a box window of the main page, users can use the scroll bar to see them one by one. When you click on the small picture, a bigger picture is displayed in another browser window. This is a good technique to set up an online catalog for customers. Some screen shots are shown in Figs. 1.26 and 1.27. Figure 1.26. ex01-19.htm
Figure 1.27. A window inside a page
|
| Table of Contents | Previous Next |
