Text Basics

[ LiB ]

You can't get much more basic than text in a web page. But considering that probably 90% of what you're producing as a web designer is text, it's worth getting a really solid foundation in how HTML text works and how it can go wrong.

Text in the Browser

If you've worked at building web pages for any length of time, you know the drill. HTML is a structural markup language. Its primary job is to describe the logical structure of page elements, such as text, so that the logic of the page is clear to any person or device reading it. For text formatting, HTML uses block-level tags, applied to chunks of text to indicate their role in the page (see Table 4.1); and character-level tags, applied to a word or two within a block, to emphasize or identify those words (see Table 4.2).

Table 4.1. Common Block-Level Structural Markup Tags for Text

Tag	Description	Browser Styling	Sample
p	Paragraph of body text	Default size and font, usually 12-point Times unless changed in the user 's preferences	<p>Once upon a time, there was a frog...</p>
h1 to h6	Headings, levels 16 ( h1 is a main heading, h2 is a subhead, and so on)	Bold, larger than default size, with size varying from h1 (largest) to h6 (smallest)	<h1>Welcome to My Web Page</h1> <h2>All About Me</h2>
ul , li	Unordered list (ul) containing list items (li)	Indented, with bullets for each list item	<ul> <li>Apples</li> <li>Oranges</li> <li>Peaches</li> </ul>
ol , li	Ordered list ( ol ) containing list items ( li )	Indented, with numbers or letters for each list item	<ol> <li>Preheat oven</li> <li>Make cookie dough</li> <li>Put cookies in oven</li> </ol>
blockquote	Paragraph of quoted text	Indented on both sides	<p>As Lincoln said:</p> <blockquote>Four score and seven years ... </blockquote> </p>
dl , dt , dd	Definition list ( dl ) consisting of term to be defined ( dt ) and definition ( dd )	Indented definition under term being defined	<dl> <dt>lemon</dt> <dd>yellow citrus fruit</dd> <dt>lime</dt> <dd>green citrus fruit</dd> </dl>

Table 4.2. Common Character-Level Structural Markup Tags

Tag	Description	Browser Styling	Sample
em	Emphasize	Italic	<p>This is <em>very</em> important.</p>
strong	Strongly emphasize	Bold	<p>This is <em>extremely</em> important.</p>

Text in Dreamweaver

In Dreamweaver, you create text by typing it in or by copying and pasting it from other programs. Typing, editing, and selecting functions work just like they do in word-processing programs. The spelling checker (Text > Check Spelling) lets you check the spelling of a selection or an entire document against the main Dreamweaver dictionary as well as your personal dictionary.

You apply HTML structure to text using the Text Property Inspector, Text objects in the Insert bar, and the various commands in the Text menu. Figure 4.1 shows the Property Inspector and Text objects as they relate to each other and to the markup tags in Tables 4.1 and 4.2.

Figure 4.1. The Text Property Inspector and Text objects in Dreamweaver.

[ LiB ]