home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Book HomeWeb Design in a NutshellSearch this book

10.7. Text Layout Techniques with HTML

First, let it be stated that "layout techniques with HTML" is an oxymoron. HTML was specifically designed to pass off all layout functions to the end user's browsing tool. The controls over presentation listed here are the result of either extensions to the original HTML standard or a "creative use" (or misuse, depending who you ask) of an existing tag.

Several tags, such as <blockquote> or certain list tags, let you add text indents, while the <pre> tag gives you limited formatting control using "preformatted" text, and we'll look at these simple mechanisms here. HTML tables offer more precise control over positioning, which is covered in Chapter 13, "Tables".

Ideally, of course, presentation should be controlled using style sheets.

10.7.3. Centering Text Elements

There are two methods for centering text elements horizontally on a page: the align attribute and the <center> tag. Bear in mind that the <center> tag and align attribute have been deprecated by the HTML 4.01 specification in favor of style sheet controls (although browsers will continue to support the following tags for a while).

10.7.3.2. The <center> tag

An extension to HTML, the <center> tag is extremely straightforward to use (and for that reason, it is used commonly) -- just place the <center> and </center> tags around sections of the page you would like to be centered, as shown in the following code. This works the same as <div align=center>, but it is better supported. The <center> tag has been deprecated in the HTML 4.01 specification.

You can place your whole page within <center> tags or apply it just to certain paragraphs. The <center> tag can only be applied to block-level elements since it is illogical to center text within the flow of left-aligned text.

<CENTER>
<H2>Choosing the Best Foods</H2>
<P>Good food gives more than immediate pleasure. It's a key to your 
family's health and vitality, affecting the way young people grow, the 
way you feel right now, and good health in later years.</P>
<P>There are simple guides to help you plan meals that are interesting 
and varied.</P>
</CENTER>

10.7.5. Creating Indents with HTML

Unfortunately , there is no specific function for creating indented text in HTML, so it has become common for web designers to make do with existing tags that have the side effect of producing an indent. This section looks at the more popular "cheats" for indenting text using only text-formatting tags.

Be aware, however, that it is poor HTML form to arbitrarily label elements just for their display features (like indenting). The recommended method is to use style sheets to specify margin indents (it's a much more precise method as well). You can also achieve indents using tables (see Chapter 13, "Tables"). Some designers place transparent graphics in the text to create white space, but this is strongly discouraged.

The following techniques are presented in the spirit of providing a thorough overview of current HTML solutions, and because you may also see them generated by WYSIWYG authoring tools. Their inclusion by no means represents an endorsement of the "old ways."



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.