A Complete Guide to Web Design

128 Chapter 7 – Formatting Text

Layout Techniques with HTML

Web Design in a Nutshell, eMatter Edition

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

provide automatic indenting.

This section looks at the more popular “cheats” for indenting text using only text-

formatting tags. More refined (and less “kludgey”) indenting effects can be

achieved using tables (see Chapter 10) and style sheets (Chapter 23). Some

designers use transparent graphics to hold white space within the text flow.

<blockquote>

The blockquote element has been a long-time favorite for adding white space

along the left and right margins of a block of text. Browsers generally add approx-

imately 40 pixels of space between the browser margin (notits window border)

and the left and right edges of a blockquote element, as shown in Figure 7-19.

There are a few points you should know when using blockquotes. Some browsers

display blockquote material in italic, making it nearly impossible to read on the

screen. Also, if you plan on placing aligned images in a blockquote, keep in mind

that browsers are inconsistent in the way they display images within blockquotes.

Some align the graphic with the indented blockquote margin; others align the

image with the normal margin of paragraph text. It is a good idea to test on a

variety of browsers.

Creating indents with list elements

Some web authors (and WYSIWYG authoring tools) take advantage of the auto-

matic indentation that takes place when you specify text as a list. The two

following methods are both syntactically incorrect and ought to be avoided,

however, they can be used in a pinch to create an indent from the left margin of

Figure 7-18: Left and right alignment

<H2 ALIGN="right">Choosing the Best Foods</H2>

<P ALIGN="left">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 ALIGN="right">There are simple guides to help you plan meals

<BR>that are interesting and varied.</P>