First Chapter

Creating Cool Web Sites with HTML, XHTML, and CSS

John Wiley & Sons

Chapter One

In This Chapter

Looking at linear media and hypermedia

Checking out some cool Web sites

Examining FTP

Introducing Microsoft Internet Explorer

Learning about URLs

This chapter covers the basics of the Web, showing how information pointers help you organize information and illustrating how Web browsers can simplify file transfer, searches, and other Internet services. It also introduces you to Microsoft Internet Explorer.

First, however, I define the concept a web of information. So before you study the basics of creating cool Web pages, take a close look at what the Web is, how it works, and what HTML is all about. I promise to be brief!

What Is the Web Anyway?

To understand the World Wide Web, consider how information is organized in print media. Print media, I think, is a good model for the Web, although others may feel that adventure games, movies, TV, or other information-publishing media provide a better comparison.

Linear media

Consider the physical and organizational characteristics of this book for a second. What is most notable? The book has discrete units of information-pages. The pages are conceptually organized into chapters. The chapters are bound together to comprise the book itself. What you have in your hands is a collection of pages organized in a format conducive to your reading them from the first page to last. However, there's no reason why you can't riffle through the pages and create your own strategy for navigating this information.

Are you still with me? The book is an example of linear information organization. Most books, including this one, are organized with the expectation that you'll start at the beginning and finish at the end.

Hypermedia

Imagine that instead of physically turning the page, you can simply touch a spot at the bottom of each page-a forward arrow-to flip to the next page. Touching a different spot-a back arrow-moves you to the preceding page. Furthermore, imagine that when you look at the table of contents, you can touch the description of a chapter to flip directly to the page where that chapter begins. Touch a third spot-a small picture of a dictionary-and move to another book entirely.

Such a model, based on the user being able to move around quickly with the click of a button, is called hypermedia or hypertext, terms coined by mid-twentieth-century computer visionaries, most notably Ted Nelson in his book Computer Lib. This more dynamic approach to information organization offers a number of benefits to the reader. One immediate boon is that the topical index becomes really helpful: Because you can touch an item of interest in the index, whether an explanatory narrative or descriptive reference material, you can use the same book as a reference work or as the linearly organized tutorial that it's intended to be. It's like the best of two worlds-the linear flow of an audio or video tape and the instant access of a DVD or music CD.

note

Another benefit of hypertext is how it presents footnotes. Footnote text no longer clutters up the bottom of the page. With hypertext, you merely touch the asterisk or footnote number in the text, and a tiny page pops up to display the footnote.

You can also touch an illustration to zoom into a larger version of that illustration or maybe even convert the illustration into an animated sequence or 3D space. Within the 3D space, you can cruise around and examine the item from a variety of vantage points.

Obviously, what I'm describing here are Web pages. An additional capability of the Web makes things much more fun and interesting: These pages of information can reside on systems throughout the world.

The pages themselves can be quite complex (and, ideally, cool and attractive) documents. Instead of writing on your Web page "Visit the White House Web site to learn more" (leaving readers stranded and unsure of how to proceed), you can provide a direct link to that site. Readers can click certain highlighted words-or a picture of the building-and immediately zoom to the White House site. Very cool, huh?

Cool spots on the Web

Figure 1-1 shows a typical Web document that you will explore later in the book. Notice, in particular, the underlined words, each of which is a link to another Web document on the Internet.

If you're on the Internet and you click the phrase National Institute for Literacy, for example, you travel (electronically) to the institute's headquarters in Washington, D.C., as shown in Figure 1-2.

What makes this electronic travel from Web site to Web site so compelling for me (and for millions of other users) is that there aren't just thousands or tens of thousands of Web documents to visit-there are millions. So many pages exist, in fact, that no one has ever visited all of them. Because so many documents are available, finding the information you're seeking is perhaps the single greatest challenge on the Internet.

Although it's certainly true that much of the information on the World Wide Web consists of rich multimedia documents written in HTML specifically for the enjoyment of Web readers, a surprising number of documents actually come from other types of information-publishing services on the Internet. These documents are presented in the most attractive formats possible within the Web browser itself.

The simplest of these alternative information services on the Internet is FTP (File Transfer Protocol). FTP is a mechanism for accessing lists of remote folders on hard disks and then directly accessing specific files within those folders. It's been around for a long time-long before the Web was ever envisioned. Traditionally, working with FTP has been a pain, and the interface has always been only a tiny step away from programming the computer directly. From a Unix host, for example, you type the following sequence of steps to connect to the Microsoft Corporation FTP archive called ftp.microsoft.com. (What you type is shown in boldface in the following listing; everything else is output from the system):

$ ftp ftp.microsoft.com Connected to ftp.microsoft.com. 220 Microsoft FTP Service Name (ftp.microsoft.com:taylor): anonymous 331 Anonymous access allowed, send identity (e-mail name) as password. Password: 230-This is FTP.Microsoft.Com. 230 Anonymous user logged in. Remote system type is Windows_NT. ftp> dir MISC1 227 Entering Passive Mode (207,46,133,140,58,113). 125 Data connection already open; Transfer starting.

dr-xr-xr-x 1 owner group 0 Aug 2 2002 beckyk dr-xr-xr-x 1 owner group 0 Aug 14 2002 BUSSYS dr-xr-xr-x 1 owner group 0 Aug 14 2002 DESKAPPS dr-xr-xr-x 1 owner group 0 Aug 14 2002 DEVELOPR dr-xr-xr-x 1 owner group 0 Aug 1 2002 FULLKB dr-xr-xr-x 1 owner group 0 Mar 28 2002 jeffreyf -r-xr-xr-x 1 owner group 6029 Aug 7 2002 kb.CSS dr-xr-xr-x 1 owner group 0 Aug 1 2002 KBSPV dr-xr-xr-x 1 owner group 0 Aug 14 2002 PEROPSYS 226 Transfer complete. ftp>

Calling such a procedure complex would be an understatement. Of course, FTP is fast and easy to use after you learn all the magic. However, using a computer should enable you to focus on what you want to accomplish instead of how to accomplish it.

Compare the preceding example with the following procedure that shows you how to use Microsoft Internet Explorer to access the same archive directly (see Figure 1-3). Instead of typing all the information required in the preceding method, you simply choose File[right arrow]Open and type ftp://ftp.microsoft.com/MISC1 in the Open box. In this example, ftp indicates what kind of service you want, the :// part is some fancy (if mysterious) notation, and ftp.microsoft.com/MISC1 is the name of the remote system and the directory to view. Finally, you just click on OK or press Enter.

The location format (ftp://ftp.microsoft.com/MISC1) is called a Uniform Resource Locator (URL).

Ready to visit a listed directory or folder? Click it, and you move to that spot. Ready to grab a file? Just click the file, and Explorer automatically figures out the file type, asks what you want to call the file on your PC, and transfers it across. No fuss, no hassle.

tip

Throughout this book, I use PC to refer generally to any personal computer. I'm actually writing this book on a Macintosh and double-checking things on a Windows XP system.

Easy FTP isn't a unique feature of Explorer; it's a capability of all Web browser packages, including the popular Camino open source browser on Mac OS X. Figure 1-4 shows the Microsoft FTP site in Camino.

Here's where the difference between the paper and the words becomes important: The type of service that you can connect with is what I call the information transfer system, and the actual information presented is the content. By analogy, the Web is the information transfer system, and Hypertext Markup Language-HTML-is the format used for content. Some of the HTML documents available on the Internet aren't available within the Web itself; instead, they are accessible directly via FTP. Furthermore, some documents may be right on your hard disk or on a local CD-ROM, in which case you are seeing the formatting but not the usual transport mechanism.

Introduction to Internet Explorer

Unless you were living under a rock back then, you probably noticed the hoopla surrounding the unveiling of Windows 95 in 1995. Windows 95 was much more than just an operating system; it was a whole new environment for PC users-an environment focused on making the computer easier to use and the interface more seamless and consistent. Then Microsoft released Windows 98, Windows 2000, and their latest OS, Windows XP. Each release has included a successively more sophisticated version of Internet Explorer, and each has also more tightly integrated the Web browser into the operating system itself.

Just as Netscape made constant revisions to its Navigator browser in the past, Microsoft has been on an aggressive upgrade path with major releases distributed as fast as the company can complete them. By this point, Microsoft has pulled ahead, and Netscape, now a part of Time Warner Corporation, has morphed into an open source project called Mozilla. Because of its dominant position in the marketplace, I focus primarily on Internet Explorer in this book; but where it is important, I examine pages in other browsers and talk about compatibility and cross-platform consistency of appearance.

Launching Internet Explorer

When you're ready to start browsing the Web, you need to find and launch Internet Explorer. You can most easily do so by double-clicking the e icon on your desktop, or launching the application from the ubiquitous Start button in Windows.

The first time you start Explorer, it tries to connect to the Microsoft home page on the World Wide Web. This could be a problem if you don't already have your Internet connection up and running. If a problem occurs, don't worry; just choose Cancel when a dialog box pops up asking for a phone number to dial or the program otherwise indicates that it's waiting for a Net connection. You end up looking at a blank page, but all the controls are there. Now, from the File menu, choose Open. That brings up the Open dialog box, as shown in Figure 1-5.

Now you're getting somewhere! Type the URL for this book, intuitive.com/ coolsites/, and click OK, and Internet Explorer should promptly open up the file and the associated graphics, displaying it all in one neat window. You might have different toolbars appearing on your screen, but it's easy to change back and forth by using the Preferences settings. Figure 1-6 shows how the Creating Cool Web Sites Web page should look on your screen.

If the Standard toolbar is displayed, you see a set of small buttons that can help you move around the Web. Starting from the left, these buttons let you move backward and forward in the set of pages you're viewing or stop the transfer of a slow page. You can also refresh the current page (that is, get a new copy of the page and rewrite the screen-this will prove a huge help as you develop your own Web pages). Finally, you can instantly zip back to your home-or default-page.

The magnifying glass enables you to pop straight to your favorite Web search engine, and the star icon enables you to open your list of favorite sites; you might have heard this called your Bookmark list. Immediately next to the star icon is a small globe and musical note button, which offers easy access to various media on the Net, including Internet radio. Next is the history button, a clock with a green arrow. (It's kind of hard to figure out the meaning of this icon. It was different in previous versions.) Use this if you forgot to bookmark a page you visited 20 minutes ago. It returns you to previous pages you've visited, in order of most recent to least recent.

The Envelope button lets you send and receive electronic mail (e-mail). Finally, use the Print button (the printer) to print the page you're viewing and the Edit button to transfer the current page into Microsoft FrontPage (if you have that program installed).

Changing the default page

Now that you have the program running, here's a useful trick before you begin your exploration of HTML and the mysteries and adventure of building cool Web pages: Change your default (home) page to the Cool Web Sites page, which should be the page currently displayed on your screen. When you have learned how to write cool Web pages, you can change the default to your own page or perhaps to a useful site on the Internet.

To change your default page, follow these steps:

1. Choose Tools[right arrow]Internet Options. You should see something remarkably similar to Figure 1-8.

2. Because you're currently viewing the page that you want to make your default page, simply click the Use Current button, and you're finished.

That's all there is to it. The next time you start up Internet Explorer, you'll find the cheery Creating Cool Web Sites page conveniently accessible.

Take a few minutes now to scroll around and click the Examples button to see how I've laid out the hundreds of example files so that they parallel what's discussed in this book. Remember that you can always use the back arrow on the toolbar to go back to the preceding page.

All about URLs

As our society has made the transition from products to information, we have seen the rapid acceleration of an age-old problem: identifying needed resources. Finding and obtaining resources have been important themes of world history, whether those resources be spices, fuel, raw materials, or information.

Today, computers should make searching easier.

Continues...

---

Excerpted from Creating Cool Web Sites with HTML, XHTML, and CSS by Dave Taylor Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

---