• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Text Basics

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
TagDescriptionBrowser StylingSample
pParagraph of body textDefault 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 h6Headings, levels 1–6 (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, liUnordered list (ul) containing list items (li)Indented, with bullets for each list item

ol, liOrdered list (ol) containing list items (li)Indented, with numbers or letters for each list item
   <li>Preheat oven</li>
   <li>Make cookie dough</li>
   <li>Put cookies in oven</li>

blockquoteParagraph of quoted textIndented on both sides
<p>As Lincoln said:</p>
<blockquote>Four score and seven years ...</blockquote>

dl, dt, ddDefinition list (dl) consisting of term to be defined (dt) and definition (dd)Indented definition under term being defined
  <dd>yellow citrus fruit</dd>
  <dd>green citrus fruit</dd>

Table 4.2. Common Character-Level Structural Markup Tags
TagDescriptionBrowser StylingSample
<p>This is <em>very</em> important.</p>

strongStrongly emphasizeBold
<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.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint