Creating a Document Without Using a Style Sheet
| HTML 3.2 has some attributes and elements commonly called extensions that allow you to specify the layout to some degree. However, this is done at the cost of making the document less portable and more difficult to maintain. These extensions were added by various browser vendors before it was clear that style sheets would provide a better alternative. Most of these stem from the Netscape browser. In HTML 4.0, most of these extensions are no longer available, although there is a companion version of HTML 4.0, called HTML 4.0 Transitional, in which they still exist. In the new, XML-based version of HTML, XHTML, they have disappeared completely. When it is still necessary to use these elements and attributes (because the document is to be displayed on old, pre-HTML 4.0 browsers, for example), you have to write your document in HTML 4.0 Transitional or in HTML 3.2. Using Elements for LayoutSome elements have little or no meaning apart from indicating a certain style, while some others are structural elements that have often been misused for the effect they usually have on the layout. The first category contains the following elements. Note that many of these are not part of HTML, but are browser-specific extensions:
Structural elements that are often abused for their visual effect include BLOCKQUOTE, DL (to indent paragraphs), and the heading elements H1 to H6 (to enlarge the text). SUB and SUP are borderline cases: It is arguable whether they carry semantics or not. Their role is to indicate subscripts and superscripts, but they don't tell anything beyond that. They don't tell how the subscript or superscript is used (for example, as an index item, an exponent, an atom number, and so on). However, inventing more meaningful names than SUB and SUP would be almost impossible because so many different functions exist. In mathematics, many of the roles subscripts and superscripts play don't even have agreed-upon names.
Also borderline is BR. Recall that it is an empty element that represents a hard line break; a line break will be placed where it is used, no matter how the text of the paragraph around it is aligned or justified. Like SUB and SUP, BR doesn't tell why there is a line break at that point: Is it because a line in a poem ended? Does it separate lines of an address? It really should have been a character instead of an element, but the intended character is not part of the Latin-I character set. This character set contains only about 200 characters and was the only one allowed in early versions of HTML. With the advent of support for the Unicode character set of more than 30,000 characters, BR could have been replaced by, for example, the line separator character. But, people were used to BR, so it stuck. Here is an example that exclusively uses the extension elements: <font size="+2"><b>How to write HTML</b></font><br><br> For headings, the FONT element is ideal, since it can enlarge the font. The BR breaks lines, so two BR's in a row make for a perfect paragraph separator. When a word needs emphasis, the I tag will <i>italicize</i> it. For even more emphasis, the B element puts the text in <b>bold</b>... Because extensions are inserted purely to force a particular style, their meanings can be expressed completely in CSS, as given in Table 15.1.
MARQUEE is not translatable to CSS2. Its effect is to make the text scroll horizontally. It would be a text decoration, much like blink. FRAME divides the window into a number of rectangles, each containing a different document. In CSS2, the same effect can be achieved with absolute positioning (in particular, using position: fixed). That has the added benefit that the entire document is in a single file. See Chapter 9, "Relative and absolute positioning," for examples of fixed positioning. Frames are often used to keep part of the user's screen the same while he navigates related pages. With fixed positioning, that requires that the shared part of the screen is repeated in every page. If the shared part is large, that may result in slightly longer download time, but in view of the frustration that frames cause users (cannot bookmark, hard to get rid of unwanted frames, and hard to navigate without a mouse), that is well worth it. Using Attributes for LayoutYou can also use these extension attributes on a number of elements to set layout:
ALIGN combines a number of functions, depending on the element to which it is attached and on the value. On headings and paragraphs, it sets the alignment of the text. For example, to center a title, you would write the following: <H1 ALIGN=CENTER>Centered title</H1> On IMG, it makes the image float to the left or right or align vertically with the text around it. For example, the following two lines have the same effect: <IMG src="/books/2/664/1/html/2/image" ALIGN=left> <IMG src="/books/2/664/1/html/2/image" STYLE="float: left"> as have these: <IMG src="/books/2/664/1/html/2/image" ALIGN=top> <IMG src="/books/2/664/1/html/2/image" STYLE="vertical-align: top"> WIDTH and HEIGHT on IMG allow an image to be scaled. HSPACE and VSPACE add padding around an image. BORDER sets the thickness of a border around an image, in case it is part of a hyperlink. All these attributes accept only numbers as values, which are interpreted as lengths in pixels.
WIDTH on table cells allow the cells to be rendered with a fixed size in pixels or as a percentage of the screen width. A fixed-size table is often misused to add fixed margins to a text or to align the text to a background image. On a browser that supports tables but not CSS, this is the only way to get something that looks like margins or side heads, but it is also one of the worst offences against accessibility. We would like to urge authors not to do this, even if that means the text looks less attractive on certain browsers. Consider also that the number of such browsers will diminish, while the number of browsers that cannot show tables in this way is increasing: handheld devices, TV-based browsers, and speech browsers. Some of those will even support CSS and @media. (See Chapter 12, "Printing and other media.") ALINK, BACKGROUND, BGCOLOR, LINK, TEXT, and VLINK, set on BODY, are means to add a background image and color to the document and set colors for link anchors. The Single-Pixel GIF Trick for Controlling SpaceOne trick to control the spacing outside of a style sheet comes from David Siegel, who is the author of Creating Killer Web Sites. He calls it the "single-pixel GIF trick." The trick is to create a transparent GIF image of IxI pixel. Although the image is essentially invisible, it still takes up space. Everywhere you need to add some space, you insert such an image. For example, here's how to indent paragraphs using this trick: <P><IMG src="/books/2/664/1/html/2/1pixel.gif" WIDTH=20 HEIGHT=1> text text text...
Don't look at a document like this with image loading turned off! You can even use this trick to affect line spacing. Here's how you would insert a few extra pixels between lines: ... some text<IMG src="/books/2/664/1/html/2/1pixel.gif" WIDTH=1 HEIGHT=20 ALIGN=MIDDLE> with a narrow, tall<IMG src="/books/2/664/1/html/2/1pixel.gif" WIDTH=1 HEIGHT=20 ALIGN=MIDDLE> image every four words<IMG src="/books/2/664/1/html/2/1pixel.gif" WIDTH=1 HEIGHT=20 ALIGN=MIDDLE> or so... Doing this is a bit of a gamble because you don't know the size of the user's font. Assuming that, in many cases, the font will be around 14 pixels high, creating a 20-pixel image should therefore ensure about 6 pixels between lines. The single-pixel GIF trick also can do word spacing and letter spacing. The nice part of doing this is that it doesn't add much to the download time. The downside is that pages containing these images are a nightmare to maintain: You have to make sure that there is an image between every two words or every two letters, and that they are all the same. If you change one, you'll have to change all of them. Also, robots will have a difficult time finding the keywords among the images. |
EAN: 2147483647
Pages: 215