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



Browser Styling



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> 


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



Browser Styling





 <p>This is  <em>very</em>  important.</p> 


Strongly emphasize


 <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 ]

Macromedia Dreamweaver MX 2004 Demystified
Macromedia Dreamweaver MX 2004 Demystified
ISBN: 0735713847
EAN: 2147483647
Year: 2002
Pages: 188
Authors: Laura Gutman

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net