HTML Approach to Visual Design
| < Day Day Up > |
While HTML was not designed with layout in mind, it has been abused and extended to support layout as best it can. Today there are many elements, both standard and nonstandard, that can provide layout control. These include the various align values for elements, the ubiquitous table tag, and even browser-specific proprietary tags such as <spacer> and <multicol> . This section covers some of the basic HTML and XHTML elements, both standard and proprietary, that are used to control text and screen layout. Remember that the use of such approaches is best suited to environments that must deal with older browsers ”those that do not support technologies such as Cascading Style Sheets. Ultimately, the role of HTML, and of course XHTML, will not be for presentation, but for structure.
Basic Text Layout with HTML Elements
The first thing to consider in the HTML approach to layout is all the elements and attributes used to position text and objects on a page. Web page designers have long tended to use the default presentation of tags such as <blockquote> or <ul> to attempt to move text around the page, as shown in the example here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Simple HTML Layout</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <blockquote> This is indented text </blockquote> <blockquote><blockquote> This text is indented more. </blockquote></blockquote> <blockquote><blockquote><blockquote><blockquote><blockquote><blockquote> This is indented heavily, but it may not produce the effect you expect because it indents from both sides. </blockquote></blockquote></blockquote></blockquote></blockquote></blockquote> </body> </html>
See Figure 6-1 for a rendering of formatting using the block element.
Figure 6-1: Text indentation using <blockquote>
Many HTML page development tools still use <blockquote> to move things around the screen. If you are unconvinced, just try using the indent feature in a WYSIWYG editor; then view the generated HTML. This is an improper use of the tag, which is further complicated by the fact that there is no guarantee how much each application of the element will cause the text to be indented. Further, it doesn't take into account that the default rendering of the tag might be overridden by a style sheet. However, despite these problems this approach is still used and will actually validate!
Another HTML-based approach to control text layout is the use of the <pre> tag. As discussed in Chapter 3, any text enclosed by <pre> preserves returns, tabs, and spaces. Using <pre> , it is possible to force text to lay out the way the page author requires, even forcing the browser to scroll to the right to read text. Generally speaking, the browser changes the typeface of any preformatted text to a fixed-width font such as Courier. This font change might not be desired.
Nonbreaking Spaces
Web browsers are supposed to minimize all forms of white space to a single white space character; this includes spaces, tabs, and returns. Page authors might be frustrated when attempting to put two spaces between words unless they resort to using the <pre> tag. However, using the character entity or   should insert a nonbreaking space that will not be collapsed by the browser. To enter three spaces between words, use or . This leads many people to force text layout like so:
Now we are ten spaces from the left!
Although use of this nonbreaking space is a convenient crutch, it won't work well in all situations, particularly if the user changes the default font in his or her browser. This should make sense to you, particularly if you have tried to align columns of text in a word processor using the spacebar. Things just never quite seem to line up this way. This problem occurs because of the proportional nature of fonts versus the size of the space character. Why would this work any differently on the Web?
Although not perfect for forcing layout, the entity can be considered the duct tape of the Web. Anyone who has performed a little home repair knows a little duct tape can go a long way; so can on the Web! Consider, for example, the fact that browsers often will minimize elements that do not appear to be needed or used because there is no content within them. A single character within the element would prevent this minimization, but do you want that character to appear on the screen? Probably not, so in comes the entity. Although useful with table tags and such, this approach unfortunately is often abused, particularly by WYSIWYG editors. Consider the markup
<p> </p>
that often is created by a WYSIWYG Web editor after a simple press of the Return key. This particular markup says we have an empty paragraph, but does that really make sense? In some sense it does, when you think of HTML/XHTML as a structural language. If you view HTML as a formatting language, two line breaks ( <br /><br /> ) makes more sense. However, you can use nonbreaking spaces to do more than space things out. For example, the entity is often seen within table cell tags ( <td> ) trying to prop them open when they are empty of content. So if you aren't using CSS, a little knowledge of how to apply the entity can go a long way toward fixing troublesome layout problems.
The <center> Tag
In the early days of the Web, it was difficult, if not impossible , to control screen layout. Netscape eventually introduced a few elements and attribute changes useful for positioning, including the <center> tag. This element can enclose any form of content, which then is centered in the browser window:
<center> I am centered! </center>
The <center> tag can be used around an arbitrary amount of content in many different forms, including images and text. Use of the <center> tag is very common on the Web, and it has been included in many of the HTML standards including HTML 4 transitional. However, today the element is considered shorthand for <div align="center"> with both syntax forms superseded by CSS properties.
Alignment Attributes
In addition to <center> , there are many tags under older HTML specifications and the transitional XHTML specification that support the align attribute. For example, the div element, which is used to create a division in a document, might have the align attribute set to left , center , right; or, even, justify . If the align attribute is not set, text generally is aligned to the left when language direction is set to ltr (left to right) and to the right when the language direction is set to rtl (right to left). Initially, the justify attribute did not work in most browsers; now it is supported by the latest versions of the two major browsers. The paragraph ( <p> ) tag; the <table> tag; and the headings <h1> , <h2> , <h3> , <h4> , <h5> , and <h6> also support the align attribute, with the same basic values and meaning. Note that, as discussed in Chapter 5, the align attribute on the img element serves a different purpose.
| Note | Under strict HTML 4 and XHTML, the use of alignment attributes and the center element is deprecated in favor of CSS. |
Word Hinting with <nobr> and <wbr>
Under many browsers, it is possible to control text layout beyond simple alignment. Because font size and browser widths might be different, word wrapping can occur in strange ways. Microsoft and Netscape, as well as many other browsers, support the <nobr> and <wbr> tags as a way to provide the browser with hints for text layout. While these tags are not standard, they are occasionally still used by Web designers.
The <nobr> ("no break") tag makes sure that an enclosed line of text does not wrap to the next line, regardless of browser width. This element is useful for words or phrases that must be kept together on one line. If the line of text is long, it might extend beyond the browser window, obliging the user to scroll in order to view the unbroken text. A simple example of using the nobr element is shown here:
<nobr> This is a very important long line of text, so it should not be allowed to break across two lines. </nobr>
In contrast to the nobr element, which is quite firm in its word wrapping, the wbr element allows the page designer to suggest a soft break within text enclosed by the nobr element. In essence, the <wbr> tag marks a spot where a line break can take place. The element is an advisory one, unlike <br /> and <nobr> , which force layout. Depending on the situation, the browser may choose to ignore the <wbr> element because there is no need for it. The <wbr> element is an empty element that does not require a closing tag. The XHTML self- closing syntax is pointless given the fact that like <nobr> , <wbr> is not part of a W3C HTML or XHTML specification. Here's a simple example showing how <wbr> works:
<nobr> This is a very important long line of text that should not break across two lines. If the line must be split, it should happen here <wbr> and nowhere else. </nobr>
A <wbr> tag should exist only within a nobr element, although it might work outside of it. The basic feature ¾ and a very useful one ¾ of this element is to suggest a line break point.
| Note | The <wbr> tag is purposefully not presented in XHTML style syntax with a self-identifying close tag as it is not part of any XHTML specification. However, if you use the <wbr> tag, you can add the close tag if you like ( <wbr /> ) although it will not validate either way. |
Text Alignment with Images
As discussed in Chapter 5, the img element has an align attribute, which helps align text with images or even allows text to flow around images. For example, when align is set to a value of top , bottom , or middle and the image is included within a block structure of text, the next line of text would be aligned to the top, middle, or bottom of the image, depending on the value of the attribute. If the attribute were not set, it would default to the bottom. When alignment of the image is set to left or right , the document text flows around the image on the opposite side. For example, when setting an image tag like <img src="logo.gif" align="left" /> , the image is aligned to the left and the text flows around to the right. Correspondingly, when using code such as <img src="logo.gif" align="right" /> , the image is aligned to the right and the text flows around to the left.
An easy way to think of this is to consider an image a rock in a river with the text flowing around it. Align the image to the left and the text flows around to the right. Align the image to the right and text flows to the left. Most browsers also support other values for align including textop , baseline , absmiddle , and absbottom . Avoid these attributes in most cases because they may not be supported identically across browsers. Furthermore, if you need to control text alignment in relation to images it would be more appropriate to use style sheets. For more information on image alignment, see Chapter 5 as well as the element reference (Appendix A).
Extensions to <br>
Because text might flow in undesirable ways around images, an extension to the br element was developed. Under transitional forms of markup, the br element takes a clear attribute, which can be set to left , right , all , or none . By default, the clear attribute is set to none , which makes the element produce a new line. When an image is aligned to the left , it might be useful to return past the image to start a new section of text. Placing another object using <br clear="left" /> causes the browser to go all the way down a column until the left side of the window is clear. The markup <br clear="right" /> does the same thing with right-aligned images. When trying to pass multiple images that might be aligned both on the left and right , use <br clear="all" /> . The idea of the clear attribute for <br> is illustrated here:
Layout with Invisible Images
You can also push text around a page with HTML/XHTML markup by using an invisible image. This approach is well-known to users of the desktop publishing program QuarkXPress. With this program, users can create invisible regions and run text around them to achieve specific layout effects. You can do this under HTML/XHTML transitional forms by using an invisible image in combination with the align , hspace , and vspace attributes. Given a transparent 1-pixel image or, if you like, "invisible pixel," the designer can perform a variety of interesting tricks. Usually, these images are named something like space.gif, spacer.gif, blank.gif, clear.gif, pixel.gif, or shim.gif. Regardless of how you have named your image, to see it in use, put it at the start of a paragraph and use the attribute width to set it to 50 pixels, as shown here:
<p><img src="pixel.gif" alt="" width="50" align="left" border="0" /> This is the start of the paragraph. </p>
Given this fragment, the first line of the paragraph is indented 50 pixels. The illustration here shows this basic trick with a border on the image turned off and on to show where the invisible pixel is.
| Note | While it certainly is very easy to make a transparent pixel, you can have one of your own free of charge from http://www.htmlref.com/examples/chapter6/pixel.gif. If you find it difficult to save, try http://www.htmlref.com/examples/chapter6/pixel.html, which provides explicit instructions on how to grab one of these useful images. |
Aside from indentation, you could format text in a variety of ways and with careful use of hspace and vspace attributes you could even space out lines without using style sheets. Of course, formatting using CSS is so much easier that this really should never be done.
Much larger regions also can be created with an invisible pixel by setting the height and width attributes of the img element and using align to flow text around the invisible region. For example, <img src="pixel.gif" height="100" width="50" align="left" /> could create a large invisible block to run text around.
The pixel trick can be a useful workaround. However, the trick has its failings. Consider what happens when the page is viewed with the images turned off, or the stop button is pressed before the pixel.gif image is loaded. The previous example might look something like this:
Despite their problems, image layout tricks are still too common on the Web. They are considered so useful that for a while Netscape introduced a special tag called <spacer> that mimics much of the functionality of invisible images. We briefly discuss proprietary elements such as spacer, primarily for historical reasons and to convince readers not to use proprietary tags.
| Note | Pixel GIFs are still useful without resorting to layout tricks such as the ones discussed in this section. Often, such GIFs are used within table cells to keep the cells from collapsing when used for layout. This use of an invisible pixel GIF, often dubbed a "shim," is discussed in the next chapter. |
Proprietary Layout Tags
The 3. x and 4. x generations of the two major browsers introduced numerous proprietary HTML elements. Some of these became standard but many did not. Most of the HTML elements left behind were related to layout. A few of these tags are briefly mentioned here for historical reasons and to demonstrate why they should not be used.
One relatively common proprietary layout tag is <spacer> , supported only by Netscape 3. x and 4. x browsers. The <spacer> tag enables users to create invisible regions to push text and other objects around the browser screen. In many ways, this element is a response to the invisible, single-pixel GIF trick discussed in the previous section. Just to get the flavor of the tag, the following is an example of using <spacer> to create an invisible runaround region 150 pixels high and 100 pixels across:
... text... <spacer type="block" height="150" width="100" align="left"> ... text...
| Tip | If you must provide the function of a <spacer> tag, the invisible GIF trick discussed in the previous section is a much better solution. |
| Tip | Interestingly, some older WYSIWYG editors seem to like to use <spacer> in conjunction with table-based layouts. Designers should avoid its use in all instances and cleanup any occurrences of the tag. |
Another layout tag, <multicol> , is also unique to Netscape 3. x and 4. x browsers. This element allows page designers to specify text in multiple columns, which are rendered with equal width. The basic syntax is summarized here:
<multicol cols=" number of columns " gutter=" gutter width in pixels or percentage " width=" column width in pixels or percentage "> Text to put in column form </multicol>
An example of two-column text using this syntax would be as follows :
<multicol cols="2" gutter="50" width="80%"> This only works in Netscape, so don't try this at home! The rain in Spain falls mainly on the plain. Now is the time for all good men to come to the aid of the country. more text here to create columns </multicol>
Finally, the much maligned <layer> tag can be used only in Netscape 4. x browsers to position content at arbitrary positions on the page. For example,
<layer name="layer1" bgcolor="#ff0000" left="100" top="100"> I am positioned! </layer>
would position the text 100 pixels from the top and left of the browser window or enclosing positioned layer. While this seems to provide a powerful facility for layout, the same can be accomplished in CSS in a more cross-platform manner.
All the elements presented here do not degrade gracefully and layouts will fail somewhat catastrophically in nonsupporting browsers. These tags are presented primarily as an example to explain why page designers should avoid the use of proprietary HTML elements when designing pages. Figure 6-2 shows how different a layout may look in a browser that does not support a proprietary tag compared to one that does.
Figure 6-2: The <multicol> tag under Internet Explorer and Netscape 4. x
Like other browser-specific tags such as <blink> , <marquee> , and < bgsound >, which are discussed in Chapter 9, these proprietary tags really should never be used. Most of what they provide can be accomplished with tables, as discussed in the next chapter, or style sheets, as discussed in Chapter 10. If, however, you are faced with such tags, you can find a complete reference to their syntax in Appendix A. For now, let's move away from the limited layout capabilities of HTML and turn our attention to fonts and then colors and backgrounds.
| < Day Day Up > |
EAN: 2147483647
Pages: 252