Learn HTML and CSS in 24 Hours

How Web Pages Work

2007-12-14T06:11:00.000-08:00

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.

[View full size image]

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

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Tall Tales - The Game of Legends and Creative One-Upmanship

Tall Tales® Pocket Edition

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

alt="Tall Tales® Pocket Edition" / />

Tall Tales® Pocket Edition

Suggested retail: $14.95

Dimensions: 4 1/2" x 4 1/2" x 1 3/4"

Made in the U.S.A.

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:

alt="Tall Tales® Example Card" / />
alt="Topper® Example Card" / />
alt="Zinger® Example Card" / />

To learn more about Tall Tales, visit the Tall Tales Web site at href="http://www.talltalesgame.com/">www.talltalesgame.com.

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.

[View full size image]

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.

What is a webpage

2007-12-14T05:33:00.000-08:00

What Is a Web Page?
Once upon a time, back when there weren't any footprints on the moon, some far-sighted folks decided to see whether they could connect several major computer networks together. I'll spare you the names and stories (there are plenty of both), but the eventual result was the "mother of all networks," which we call the Internet.

Until 1990, accessing information through the Internet was a rather technical affair. It was so hard, in fact, that even Ph.D.-holding physicists were often frustrated when trying to swap data. One such physicist, the now-famous Tim Berners-Lee, cooked up a way to easily cross-reference text on the Internet through "hypertext" links. This wasn't a new idea, but his simple Hypertext Markup Language (HTML) managed to thrive while more ambitious hypertext projects floundered.

Hypertext originally meant text stored in electronic form with cross-reference links between pages. It is now a broader term that refers to just about any object (text, images, files, and so on) that can be linked to other objects.

Hypertext Markup Language is a language for describing how pages of text, graphics, and other information are organized and linked together.

By 1993, almost 100 computers throughout the world were equipped to serve up HTML pages. Those interlinked pages were dubbed the World Wide Web (WWW), and several web browser programs had been written to allow people to view web pages. Because of the popularity of the Web, a few programmers soon wrote web browsers that could view graphics images along with the text on a web page. One of these programmers was Marc Andressen; he went on to become rich and famous, selling one of the world's most popular web browsers, Netscape Navigator.

Today, HTML pages are the standard interface to the Internet. They can include animated graphics, sound and video, complete interactive programs, and good old-fashioned text. Millions of web pages are retrieved and viewed each day from thousands of web server computers around the world. Incidentally, the term "web" arose from the fact that web pages are linked together in such a way that they form a massive web of information, roughly akin to a spider's web. This is also why you sometimes hear the term "crawler," which refers to a program that wanders around the Web gathering information on web pages.

Coffee Break
Just in case you have it in your head that a web server must be some huge computer that runs off coal and causes the lights to dim when a page gets served up, allow me to introduce you to the world's smallest web server. A University of Massachusetts graduate student built a web server at a cost of less than $1 that is about the size of a match head. To learn more about this impressive technological feat, visit http://www-ccs.cs.umass.edu/~shri/iPic.html.

The Web is rapidly becoming a mass-market medium, as high-speed Internet connections through TV cables, modernized phone lines, direct satellite feeds, and both public and private wireless networks become increasingly commonplace. You can already browse the Web using a small box attached to your television instead of using your computer, with the cost of such devices likely to fall sharply over the next few years. In other words, it may not be necessary to rely on a computer for web browsing in the near future.

Yet the Internet is no longer the only place you'll find HTML. Most private corporate networks (called intranets) now use HTML to provide business information to employees and clients. HTML is now the interface of choice for publishing presentations on CD-ROM and the very popular high-capacity digital versatile disk (DVD) format. Microsoft has even integrated HTML directly into the Windows operating system, allowing every storage folder in your computer to be associated with an HTML page and hypertext links to other folders and pages.

In short, HTML is everywhere. Fortunately, you're in the right place to find out how HTML web pages work and how to create them.

By the Way
There are actually two flavors of HTML. One is called HTML 4 and the other is called XHTML 1.1. The X stands for eXtensible, and you'll find out later in this lesson why it isn't called HTML 5. You'll also find out what all this has to do with another new language called XML.

The most important thing to know from the outset is that all the examples in this book are compatible with both HTML 4 and XHTML (as well as XML) and should be fully compatible with future versions of any software that interprets any web page language.

If you have other books on creating web pages, the sample HTML in those books may look slightly different from what you see in this one. Even though the old-fashioned format shown in those books will work in the current crop of web browsers, I strongly recommend that you use the more modern approach shown in this book; this will ensure that your pages remain usable as far into the future as possible.

Hour 1. Understanding HTML and XHTML

2007-12-14T05:31:00.000-08:00

Before you begin creating your own web pages with HTML, you need a little background knowledge about what web pages are, how to view and edit them, and what you can expect to achieve with them. It might also help to have a basic understanding of how HTML differs from XHTML, and why there are two different languages designed to do the same thingcreate web pages. This hour provides a quick summary of HTML and XHTML basics, and gives some practical tips to make the most of your time as a web page author and publisher. It's not all theory, however; you do get to see a real web page and the HTML code behind it.

Try It Yourself

Here's a review of what you need to do before you're ready to use the rest of this book:

1. Get a computer. I used a computer with Windows XP to test the sample web pages and capture the figures in this book, but you can use any Windows, Macintosh, or UNIX machine to create and view your web pages. The speed of the computer itself doesn't matter much for accessing web pages; the speed of the computer's modem or network interface card (NIC), however, should be at least 56Kbps, and faster is better. If you have access to broadband Internet access via a cable modem, DSL modem, or wireless access point, that's even better!

2. Get a connection to the Internet. You can either dial up an Internet service provider (ISP) by using the modem in your computer or connect through the local network of your school or business. Most ISPs now offer dial-up Internet service for under $20 per month. If you don't mind spending a little more, a cable or DSL Internet service can dramatically improve the browsing experience, thanks to the speed and "always on" connection. The ISP, school, or business that provides your Internet connection can help you with the details of setting it up properly. Many public spaces such as airports, bookstores, and libraries also now offer free wireless Internet service that you can use if you have a laptop computer with Wi-Fi network support.

By the Way
Not sure how to find an ISP? The best way is to comparison-shop online (using a friend's computer that's already connected to the Internet). You'll find a comprehensive list of national and regional ISPs at http://thelist.internet.com/.

3. Get web browser software. This is the software your computer needs in order to retrieve and display HTML web pages. The most popular browser programs are currently Microsoft Internet Explorer, Netscape, Mozilla Firefox, Opera, and Safari (Macintosh only). It's not a bad idea to install several of these browsers so that you can experiment and make sure that your web pages look consistent across them all; you don't want to assume anything about the browsers other people are using. Web browsers are available at software retailers, or you can download them free over the Internet at www.microsoft.com/, browser.netscape.com/, www.getfirefox.com/, www.opera.com/, and www.apple.com/safari/.

By the Way
Although all web browsers process and handle information in the same general way, there are some specific differences among them that result in things not always looking the same in different browsers. Be sure to check your web pages in multiple browsers to make sure that they look reasonably consistent.

4. Explore! Use a web browser to look around the Internet for web pages that are similar in content or appearance to those you'd like to create. Note what frustrates you about some pages, what attracts you and keeps you reading others, and what makes you come back to some pages over and over again. If there is a particular topic that interests you, consider searching for it using a popular search engine such as Google (www.google.com/).

By the Way
If you plan to put your HTML pages on the Internet (as opposed to publishing them on CD-ROM or a local intranet), you'll need to transfer them to a computer that is connected to the Internet 24 hours a day. The same company or school that provides you with Internet access may also let you put web pages on their computer; if not, you may need to pay another company to host your pages.

You can start learning HTML with this book right away and wait to find an Internet host for your pages when they're done. However, if you want to have a place on the Internet ready for your very first page as soon as it is finished, you may want to read Hour 4, "Publishing Your HTML Pages," before you continue.