Section 5.1. Understanding Text and the Web

5.1. Understanding Text and the Web

Sooner or later, every Web site creator discovers that designing for the Web is pretty different than designing something that's going to be printed out. Before you can unleash your inner graphic designer, there are a few conceptual hurdles to clear.

To understand the problem you're facing , it helps to consider the difference between an HTML page and a document you might create in a program like Microsoft Word. Word processing programs help you prepare your content so that you can print it out. In that environment, you know all the details about your output medium (things like the paper size , whether or not the printer supports color , what fonts are available, and so on). As a result, your word processor gives you absolute control over every detail.

HTML is a more freewheeling standard. When you create an HTML document, you have no idea who's going to look at it or what kind of monitor, screen settings, Web browser, and so on they'll be using to view it. The way your document appears could change dramatically, depending on whether the person viewing your page turns on large text, shrinks the browser window to microscopic proportions , or switches off pictures. And if people surf to your site using a trendy pocket- sized PC, they'll get a completely different view compared to those who have the latest widescreen computer monitor.

Tip: HTML was designed to avoid compatibility problems by giving you less control. Instead of allowing you to place everything in an exact spot, HTML forces you to use tags to shape the basic structure of your work (for example, to indicate paragraphs, headings, and lists). However, it's up to the Web browser to decide how to display these details on a given computer. In other words, HTML was designed as a compromise that sacrifices control for the sake of simplicity, flexibility, and compatibility.
Understanding Resolution

A resolution of 800 x 600 means that the entire monitor shows a grid that's 800 pixels wide and 600 pixels high. A pixel is the smallest unit of measurement on a computer monitor, and is otherwise known as a "dot." In other words, a resolution of 800 x 600 gives programs 480,000 pixels to play with, while a mediocre 640 x 480 resolution offers only 307,200. Clearly, higher resolutions can fit in a lot more content.

It's important to realize screen resolution isn't directly tied to the size of your monitor. In other words, a 17" monitor can have a higher resolution (and show more information) than a 19" monitor. However, it makes sense for larger monitors to use higher resolutions. That's because on a small monitor, high resolutions look cramped. Monitors support a wide range of resolutions, and you can choose the best compromise between showing lots of content (a higher resolution) and making sure that content isn't too small (a lower resolution).

5.1.1. The Problem of Layout

One of the most important considerations in print design is the physical size of the document. For example, you need to use much larger text on a poster than a business card. In the world of the Web, you don't have the luxury of worrying about size. Web surfers can shrink your window at will, changing it drastically (see Figure 5-1). You need to accept this reality, and make sure your Web page looks good regardless of who's viewing it or what kind of browser they're using.

Figure 5-1. Left: At 800 x 600 pixels (a common monitor resolution), you get a great view of this article.
Right: At the smaller, but still supported resolution of 640 x 480, the Web page is still readable, albeit much more cramped. Designing for variable window sizes is one of the endless headaches that confronts every Web artist.

In some rare cases, you might know how big a browser window your visitors will use. For example, if you're designing a private Web site for an internal company network, where computers are all configured the same way, you can depend on everyone having the same view. But in most cases, you'll need to aim for a design that satisfies a broad range of viewers .

The first step in your quest for design equilibrium is to determine the smallest window size you want to support. See the box "How Big Is Your Window?" below for some good tips on choosing the right size for your pages.

Once you know the window sizes you're aiming for, the next step is to resize your Web browser window to match these dimensions. That way, as you're creating your pages, you can preview each page in a browser and make sure it looks okay. Fortunately, many HTML editors have a feature that opens your page in a browser window set to a fixed size. For example, in FrontPage you can choose File Preview in Browser, which has options for common window sizes.

How Big Is Your Window?

Here are three good guidelines that the Web's most successful sites follow:

  • Your page should be usable in a window that's 640 x 480 pixels. In other words, maybe folks whose monitors are set to this resolution will have to scroll a bit (up or down, or left or right) to see your initial screen, but for the most part everything you want them to see will be viewable. Most ancient Windows-95era computers came with monitors whose screens could display a maximum of 640 x 480 pixels; designing with these people in mind means you won't be alienating any of these antique PC owners .

  • Your page should look its best at 800 x 600 pixels. This is the most common full-screen size for today's generation of computers, although higher resolutions (like 1024 x 768) are becoming increasingly common.

  • Your page should still look respectable at sizes above 800 x 600 pixels.

For an example, surf over to read an article on the New York Times Web site ( If you adjust the size of your browser window so that it measures 640 x 480, you'll be able to see the full width of an article along with the links for moving from one page to the next. (Any narrower, and some text is cut off.) At 800 x 600, you see the outskirts of the page, which includes related links and advertising banners. At 1024 x 768, life doesn't change very muchyou just wind up with an extra margin of blank space on the right-hand side.

To achieve this kind of good-for-all-viewers result, you'll need to use the layout features described in Chapter 9. However, you can start following good design principles right away, by testing your pages at all these sizes.

5.1.2. Logical Structure vs. Physical Formatting

Before you start tagging up your Web pages, there's one other concept you should understandthe difference between structuring a document (arranging it into sections like headings, paragraphs, and lists) and formatting a document (making the sections look different). Novice Web masters who don't understand this difference always end up formatting when they should be structuring, which leads to messy HTML that's difficult to edit.

In keeping with this distinction, HTML has two types of tags:

  • Logical tags (sometimes called idiomatic tags ) describe the type of content. For example, logical tags identify headings, paragraphs, quotations, code snippets, and emphasized text. However, logical tags don't determine the specific formatting details about how your content is displayed in the browser.

  • Physical tags (sometimes called typographic tags ) are all about formatting. Examples include tags that apply italics, boldface, underlining, and different fonts. Physical tags don't tell you anything about the content of the text within them.

These two types of tags represent two different ways of thinking about HTML. When you use logical tags, you define the structure of your document. For example, you use logical tags to organize the r sum document in Chapter 2 into separate sections, including a heading, several paragraphs, and a bulleted list.

Using JavaScript to Resize a Window

If you can't (or don't want) to use your HTML editor's preview tool, there is a devious workaround. You can add a block of JavaScript code into your Web page that takes charge and automatically resizes your browser window. (JavaScript is a simple scripting language that allows you to give browsers additional instructions. You'll learn more about it in Chapter 14.)

Assuming your browser supports JavaScript (and almost all do), you can embed JavaScript code using a <script> tag. Here's an example, with the JavaScript code highlighted:

 <html> <head> <title>Resizable Page</title> <script type="text/javascript"> self.resizeTo(640, 480); </script> </head> <body> <p>Put your normal Web page here</p> </body> </html> 

In this example, the self.resizeTo() command changes the size of the window while the page is loading. The first number in parentheses is the width, and the second number is the height. Replace these numbers with your own numbers to test different window sizes. Just remember to remove the <script> block when you're finished testing.

You could use the same devious trick in your finished page to resize a window without your visitors' permission. But don't. This tactic is guaranteed to drive visitors away from your site in record time.

When you use logical tags, it's up to the browser to decide what formatting to use. The perfect example of a logical tag is <address>, which is occasionally used to identify contact information (like a Web or postal address):


Most browsers format addresses in italics, just as though you used the <i> tag. But the important point is that a browser doesn't need to format address tagged-content in italics. Instead, you're using the <address> tag to identify the type of content.

On the other hand, when you use a physical tag, you specify the exact formatting you want to appearin other words, you're micromanaging your Web page. It's like telling the browser: "Listen up. Put this word in italics; and put that phrase in bold face." In fact, two of the most popular physical tags are the <b> and <i> tags (for bold and italics) that you learned about in Chapter 2.

Tip: This book focuses on the HTML tags that are most widespread today. That means you'll learn about the most popular logical and physical tags, which makes it easier to carry on a conversation with other Web-heads.

Logical tags have ruled the roost ever since HTML was invented. The creators of HTML imagined a world where document writers didn't want the hassle of formatting, particularly because different types of browsers would present the same document in different ways, depending on the capabilities of the Web surfer's computer. Even better, logical tags let programs other than Web browsers analyze HTML documents. For example, someone could create an automated search program that scans Web pages, and extracts just the top-level headings to give you a barebones outline. Or browses Amazon to find book reviews. Or creates a junk-mail list by reading <address> tags. A comparable program that came across a Web page filled with nothing but physical tags wouldn't be nearly as interesting. For example, who cares how much text is in bold on eBay?

Tip: The vision of a Web where tags indicate what a page contains (prices, size information, email addresses, and so on) rather than how a page looks, is called the semantic Web . According to the visionaries who first built the Internet, the semantic Web could usher in a golden age of information access and super-smart searching. Many of the same gurus are still at work planning the semantic Web with new XML-based standards. For a preview of the possible future, surf to

5.1.3. CSS (Cascading Style Sheets)

All of this discussion raises a good questionif Web page writers are supposed to describe the content and structure of their pages, what's left to make sure the page looks good? The HTML powers-that-be could create more tags just for formatting, but that would force page creators to do more work, make HTML more complicated, and choke the average Web page in a swamp of ugly details about fonts, colors, and alignment. Even worse , because the content and the formatting information would be glued together, it would be hard to change. Imagine a page in which you not only had to tag every paragraph, but you also had to indicate which font you wanted to use. What a headache . To avoid problems like these, HTML only has a few, idiosyncratic formatting tags like the aforementioned <i> and <b> tags. Web purists hate them.

The solution that HTML gurus finally hit on was to separate the formatting information from the document's content, and place these two pieces into separate files. Here's how it works. First of all, the HTML documents you create in this scenario continue to look more or less the samejust like the ones you learned how to create in Chapter 2. They keep the same tags for paragraphs, headings, and lists, but not much more. This is good news alreadyit means you don't need to change your approach or throw out the basic tags once you've mastered them.

Next, you create a separate document using a standard called CSS (Cascading Style Sheets). The style sheet defines how every type of element in your HTML document should be formatted. For example, it contains instructions like "make every heading bright red" and "give all paragraphs a 15-pixel margin."

Once you've perfected your Web site's look and feel, you link your Web page to the style sheet and the transformation takes place (see Figure 5-2).

Figure 5-2. Left: This page is plain but ready for style sheets. It's been carefully separated into logical sections.
Right: With the application of a style sheet, the formatting and layout changes dramatically. You'll see an example of this in Chapter 9 (Section 9.2.4).

There are many benefits to the style sheet system. First of all, you can reuse the same style sheet for many Web pages. Because getting your formatting right can be a long and tedious chore, this is a major timesaver. Even better, when you're ready for a new look, you don't need to mess with your HTML documentsinstead, just tweak the style sheet and every linked page gets an instant facelift.

Tip: Now that you've understood the role of style sheets, you'll understand why this chapter concentrates on structuring your text, rather than formatting it. There are some formatting features built into HTML, but they aren't as powerful as style sheets, and they're a lot messier. Now that you're thinking with style sheets in mind, you're ready to steer clear of those headaches, and concentrate on becoming comfortable with the staples of the HTML dietthe tags for structuring text.

Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
Year: 2003
Pages: 135 © 2008-2017.
If you may any questions please contact us: