How Web Pages WorkWhen you are viewing web pages, they look a lot like paper pages. At first glance, the process of displaying a web page is simple: You tell your computer which page you want to see, and the page appears on your screen. If the page is stored on a disk inside your computer, it appears almost instantly. If it is located on some other computer, you might have to wait for it to be retrieved. Of course, web pages can do some very convenient things that paper pages can't. For example, you can't point to the words "continued on page 57" in a paper magazine and expect page 57 to automatically appear before your eyes. Nor can you tap your finger on the bottom of a paper order form and expect it to reach the company's order fulfillment department five seconds later. You're not likely to see animated pictures or hear voices talk to you from most paper pages either (newfangled greeting cards aside). All these things are commonplace on web pages. But there are some deeper differences between web pages and paper pages that you'll need to be aware of as a web page author. For one thing, what appears as a single page on your screen may actually be an assembly of elements located in many different computer files. In fact, it's possible (though uncommon) to create a page that combines text from a computer in Australia with pictures from a computer in Russia and sounds from a computer in Canada. Figure 1.1 shows a typical page as shown by Microsoft Internet Explorer, currently the world's most popular software for viewing web pages. The page in Figure 1.1 would look roughly the same if viewed in Netscape, Firefox, or some other web browser. I say "roughly" because web browsers don't always interpret web pages exactly the same, even though in theory they should. For the sake of simplicity, let's for now assume that all the major web browsers display pages without any major differences. Figure 1.1. A web browser assembles separate text and image files to display them as an integrated page.
A web browser such as Internet Explorer does much more than just retrieve a file and put it on the screen. It actually assembles the component parts of a page and arranges those parts according to commands hidden in the text by the author. Those commands are written in HTML. A web browser is a computer program that interprets HTML commands to collect, arrange, and display the parts of a web page. Listing 1.1 shows the text, including the HTML commands, I typed to create the page shown in Figure 1.1. This text file can be read and edited with any word processor or text editor. It looks a bit strange with all those odd symbols and code words, but the text file itself doesn't include any embedded images, boldface text, or other special formatting. The words between < and > are HTML tags. Listing 1.1. Text Used to Create the Page Shown in Figure 1.1<?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>Tall Tales - The Game of Legends and Creative One-Upmanship</title> </head> <body> <p> Tall Tales® Pocket Edition </p> <p> Tall Tales® Pocket Edition is the first game in the Tall Tales line, and is a compact game designed for the ultimate in flexible game play. Tall Tales Pocket Edition includes 120 trivia cards, and is for curious and crafty storytellers ages 10 and up. No board, writing, or dice rolling makes Tall Tales Pocket Edition a great casual or travel game. We like to call it a "lounge game." </p> <p> <a href="ttpe_box_pic.jpg"><img src="ttpe_box_sm.gif" alt="Tall Tales® Pocket Edition" /> </a><br /> Tall Tales® Pocket Edition<br /> Suggested retail: $14.95<br /> Dimensions: 4 1/2" x 4 1/2" x 1 3/4"<br /> Made in the U.S.A. </p> <p> Each type of card in Tall Tales corresponds to a certain type of question or topic, and is themed to a legendary creature (Loch Ness Monster, Bigfoot, and Alien). The Tall Tales® and Zinger® cards are trivia cards that include questions and answers, while the Topper® cards provide topics that you use as the basis for sharing a whopper of a story. Playing the game simply involves drawing and playing these cards: </p> <p> <a href="pg_games_ttcard_lg.gif"><img src="pg_games_ttcard_sm.gif" alt="Tall Tales® Example Card" /></a> <a href="pg_games_topcard_lg.gif"><img src="pg_games_topcard_sm.gif" alt="Topper® Example Card" /></a> <a href="pg_games_zngcard_lg.gif"><img src="pg_games_zngcard_sm.gif" alt="Zinger® Example Card" /></a> </p> <p> To learn more about Tall Tales, visit the Tall Tales Web site at <a href="http://www.talltalesgame.com/">www.talltalesgame.com</a>. </p> </body> </html> </body></html> Internet Explorer reads the commands in the HTML code shown in Listing 1.1 and then displays all the images and text you see in Figure 1.1. The coded HTML commands in the text instruct the browser to look for separate image files and display them along with the text. Other commands tell it how to break up the lines of text on the page. Although there is certainly some code in the listing that looks a bit strange to the untrained HTML eye, you can still pick through the code and make out much of the content that appears on the page. The web page shown in Figure 1.1 and listed in Listing 1.1 was deliberately designed with very little formatting so that the code would be less cluttered. HTML is obviously capable of much more, and I thought it was worth demonstrating how the application of a little formatting can dramatically affect the appearance of a web page. Figure 1.2 contains the same web page with some additional formatting applied, including a background image and some font tweaks. Figure 1.2. You can dramatically change the look of a web page by styling the page, without even altering the content.The styled version of the page contains the same content (text and images) as the unstyled version, but the end result is considerably different. Throughout the book you learn how to apply styles to HTML code to achieve dramatic visual effects. |