Auto Loading Another Web Page
| When you are managing a web site, it may become necessary to move some pages from one address to another. You might decide, for example, to change the service provider or your whole site's domain name. You might just reorganize things and move some pages into a different directory folder. What happens, then, when someone visits his or her favorite web page on your site after you've moved it? If you don't want your visitor to be stranded with a Not Found error message, you should put a page at the old address that says This page has moved to... with the new address (and a link to it). Chances are you've encountered similar messages on the Internet yourself. Some of them probably employed the neat trick you're about to learn; they automatically transferred you to the new address after a few seconds, even if you didn't click a link. In fact, you can make any page automatically load any other page after an amount of time you choose. The secret to this trick is another variation of the <meta /> tag, which goes in the <head> section of a page and looks like the following: <meta http-equiv="refresh" content="5; url=nextpage.html" /> Replace 5 with the number of seconds to wait before loading the next page, and replace nextpage.html with the address of the next page to load. In addition to routing a visitor to a new page location, the automatic page-loading trick can be used to display a web page title that appears for a moment and then leads a visitor into the main area of a site. For example, take a look at the code in Listing 23.3, which looks as shown in Figure 23.3 when viewed in Mozilla Firefox. After 5 seconds, the <meta /> tag causes the page at http://www.stalefishlabs.com/news.html (given in Listing 23.4 and shown in Figure 23.4) to appear. Figure 23.3. This is the page contained in Listing 23.3, which serves as the introduction for a web site. Figure 23.4. The page given in Listing 23.3 and shown in Figure 23.3 automatically opens this page after a 5-second delay.
Listing 23.3. The <meta /> Tag Causes the Web Browser to Automatically Load the Page Shown in Figure 23.4 After 5 Seconds<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Stalefish Labs. Dead Serious About Fun.</title> <meta name="description" content="Stalefish Labs. Dead Serious About Fun." /> <meta name="keywords" content="games, toys, fun, social, entertainment, tall tales, tall tale, topper, zinger" /> <meta http-equiv="refresh" content="5; url=http://www.stalefishlabs.com/news.html" /> <base href="http://www.stalefishlabs.com/" /> </head> <body style="text-align:center"> <div style="width:100%; margin-top:100px; text-align:center"> <a href="news.html"><img src="/books/4/158/1/html/2/images/entertitle.gif" alt="Stalefish Labs. Dead Serious About Fun." style="border-style:none" /></a> </div> <div style="width:100%; text-align:center"> <a href="news.html"><img src="/books/4/158/1/html/2/images/enter.gif" alt="Click to enter." style="border-style:none" /></a> </div> </body> </html> The Stalefish Labs intro page includes a few other little HTML tricks that are worth pointing out before you move on. First off, the description and keyword <meta /> tags you learned about earlier are used here to help prep the site for search engines. Also, the margin-top style property is used in the first <div> tag to help provide some vertical space before the title image is displayed on the page. This improves the overall appearance of the page regardless of how large the browser window is sized. The last trick on the page involves the usage of the <base /> tag, which appears in the <head> of the page. Read on to learn why this tag is important. |
EAN: 2147483647
Pages: 345