Приглашаем посетить
Хемницер (hemnitser.lit-info.ru)

How Web Pages Work

Previous Page
Table of Contents
Next Page

How Web Pages Work

When 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.

How Web Pages Work


By the Way

Although Internet Explorer is currently the number-one web browser in terms of user base, Mozilla Firefox is hot on its heels, and stands a realistic chance of unseating the giant at some point. Firefox is currently in second place in the latest round of browser wars, far ahead of Opera and Apple's Safari browser. Runner-up browser vendors have largely done a better job than Microsoft in adhering to web standards and addressing security issues, which is why browsers such as Firefox and to a lesser extent Opera are rapidly gaining in popularity.


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&reg; Pocket Edition
    </p>
    <p>
      Tall Tales&reg; 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&reg; Pocket Edition" />
      </a><br />
      Tall Tales&reg; 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&reg; and Zinger&reg; cards are trivia
      cards that include questions and answers, while the Topper&reg; 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&reg; Example Card" /></a>
      <a href="pg_games_topcard_lg.gif"><img src="pg_games_topcard_sm.gif"
      alt="Topper&reg; Example Card" /></a>
      <a href="pg_games_zngcard_lg.gif"><img src="pg_games_zngcard_sm.gif"
      alt="Zinger&reg; 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.

Did you Know?

To see the HTML commands for any page on the Web, click with the right mouse button (or hold down the Control key while clicking if you're using a Macintosh computer), and then select View Source from the pop-up menu in Internet Explorer, or View Page Source in Firefox. This is a great way to get an intuitive idea of how HTML works and learn by others' examples. Some web sites may have the right mouse button disabled, in which case you can rely on the Source (Internet Explorer) and Page Source (Firefox) commands from the View menu.

Some web pages use an advanced feature called frames to display more than one HTML page at the same time. In most web browsers, you can view the HTML commands for any frame by right-clicking it and selecting View Frame Source.

Regardless of how you go about viewing the source for existing web pages, keep in mind that many commercial web pages use complex HTML code that can be difficult to read and understand. So don't get discouraged if you view the source of a popular web site and the code is more complex than you had imagined.


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.

How Web Pages Work


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.


Previous Page
Table of Contents
Next Page