Formatting Text In HTML

Text Although the modern-day Web is a haven of multimedia, text is still vitally important. Only through text can some messages be succinctly communicated. Even then, diversity in text can help further clarify a message. For example, emphasizing one word with bold or italic font can change the tone and meaning of a sentence. This chapter discusses how to format elements inside of block elements (words or sentences inside of paragraphs). Web Design Course Dubai Methods of Text Control There are various means to control the look and formatting of text in your documents. It should come as no surprise that the more direct methods—<font> tags and the like—have been deprecated in favor of CSS controls in HTML 4.01 and XHTML. The following sections cover the various means possible for historical and completeness purposes. Tip Although it is sometimes easier to drop a direct format- ting tag into text, resist the urge and use styles instead. Your documents will be more flexible and more stan- dards compliant. The <font> tag The <font> tag enables you to directly affect the size and color of text. Intuitively, the size attribute is used to change the size of text, and the color attribute is used to change the color. The size of the text is specified by a number, from 1-7, or by signed number (also 1-7). In the latter case, the size change is relative to the size set by the <basefont> tag. The <basefont> tag has one attribute, size, which can be set to a number, 1-7. Note Default font type and size is left up to the user agent. No standard correlation exists between the size used in a <font> tag and the actual font size used by the user agent. As such, the default size of the font (1-7) varies between user agents.

C 8H8A P T E R ✦✦✦✦ In This Chapter Methods of Text Control Bold and Italic Text Monospace (Typewriter) Fonts Superscripts and Subscripts Abbreviations Marking Editorial Insertions and Deletions Grouping Inline Elements with the <span> Tag ✦✦✦✦

128 Part II ✦ HTML/XHTML Authoring Fundamentals

For example, if you wanted larger text in a red color, you could use a tag similar to the following: <font size=“+3” color=“red”>this is larger, red text</font> Note that using “+3” for the size increases the text within the tag by a factor of 3 from the base font size. Emphasis and other text tags You can use a handful of tags to emphasize portions of text. Although these tags have not been deprecated in HTML 4.01, it is strongly recommended that you make use of CSS instead. Table 8-1 lists the emphasis tags and their use. A sample of their use is shown in Figure 8-1. Tag Use <cite> Citation <code> Code text <dfn> Definition term <em> Emphasized text <kbd> Keyboard text <samp> Sample text <strong> Strongly emphasized text <var> Variable(s) The creation and adoption of these tags seems somewhat haphazard. As such, the support for the tags is not standard across user agents—you may not be able to tell the difference between text coded with <cite> or <em>, for example. CSS text control CSS provides several different properties to control text. Table 8-2 lists some of the more popular properties. As you can see, CSS offers a bit more control over your text, allowing you to specify actual fonts and actual font sizes. However, the advantage to using CSS properties over hardcoded tags is not found in the list of available properties, but in the flexibility in formatting and effecting later changes. For example, suppose you were Table 8-1 Emphasis Tags

Chapter 8 ✦ Text 129

Figure 8-1: An example of text using emphasis tags. Property color font font-family font-size Values Color font-style font-variant font-weight font-size family-name font-size Use Change the color of text Shortcut property for setting font style, variant, weight, and size Set the font family (face) Set the font size Table 8-2 CSS Text Properties font-stretch normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded Expand or compress the letter spacing Continued

130 Part II ✦ HTML/XHTML Authoring Fundamentals

Property font-style font-variant font-weight text-decoration Table 8-2 (continued) Normal | italic | oblique Normal | small-caps Normal | bold | bolder | lighter none | underline | overline | line-through | blink Use Set font to italic Set small-caps Set font to bold Set under/overlining Values text-transform none | capitalize | uppercase | Transform font capitalization lowercase creating documentation for a programming language and wanted to format all reserved words a particular way—perhaps in a slightly larger, red, bold font. Using tags, the code would resemble the following: <p>The <font size=“+1” color=“red”><b>date</b></font> function can be used to... Later, you might decide that the red color is too much emphasis, and larger, bold text is enough. You must then change every <font> tag used around reserved words. Suppose, instead, that you used CSS, as shown in the following code: <head> <style type=“text/css”> .reservedword { font: 14pt bold; color: red } </style> </head> <body> <p>The <span class=“reservedword”>date</span> function can be used to... If you later decided to change the formatting of reserved words, you would only have to make one change to the style definition at the top of the document. (If you used an external style sheet, that one change could change an unlimited number of documents that used the sheet.) Bold and Italic Text Two surviving text emphasis tags are bold and italic. Their effect on text is, as expected, to make it bold or italic, as shown in the following code example and in Figure 8-2: <p>This is normal text.</p> <p><b>This is bold text.</b></p> <p><i>This is italic text.</i></p>

Chapter 8 ✦ Text 131

Note Figure 8-2: Bold and italic tags at work. Not every font has a bold and/or italic variant. When possible, the user agent will substitute a similar font when bold or italic is asked for but not available. However, not all user agents are font-savvy. In short, your mileage with these tags may vary depending on the user agent being used. For the same reasons mentioned elsewhere, it is advisable to use CSS instead of hardcoded bold and italic tags. Monospace (Typewriter) Fonts Another text tag that has survived deprecation is the teletype (<tt>), or monospaced, tag. This tag tells the user agent that certain text should be rendered in a monospaced font. Such uses include reserved words in documentation, code listings, and so on. The following code shows an example of the teletype tag in use: <p>Consider using the <tt>date</tt> function instead.</p> This tag is named for the teletype terminals used with the first computers, which were only capable of printing in a monspaced font.

132 Part II ✦ HTML/XHTML Authoring Fundamentals

Tip Again, the use of styles is preferred over individual inline tags. If you need text rendered in a monospace font, consider directly specifying the font parameters using styles instead of relying upon the <tt> tag. Superscripts and Subscripts There are two tags, <sup> and <sub>, for formatting text in superscript and subscript. The following code shows an example of each tag, the output of which is shown in Figure 8-3. <p>This is normal text.</p> <p>This is the 16<sup>th</sup> day of the month.</p> <p>Water tanks are clearly marked as H<sub>2</sub>O.</p> Figure 8-3: Examples of superscript and subscript. Abbreviations You can use the abbreviation tag (<abbr>) to mark abbreviations and, optionally, give readers the expansion of the acronym used. For example, you could use this tag with acronyms such as HTML: <abbr title=“Hypertext Markup Language”>HTML</abbr>

Chapter 8 ✦ Text 133

Note that the expansion of the abbreviation is placed in the <abbr> tag’s title attribute. Some user agents will display the value of the title attribute when the mouse/pointer is over the abbreviation. Marking Editorial Insertions and Deletions To further strengthen the bond between HTML documents and printed material, the insert and delete tags have been added to HTML. Both tags are used for redlining documents—that is, a visually marked-up document showing suggested changes. For example, the following paragraph has been marked up with text to be inserted (underlined) and deleted (strikethrough). The output of this code is shown in Figure 8-4. <p>Peter <del>are</del><ins>is</ins> correct, the proposal from Acme is lacking a few <del>minor </del>details.</p> Figure 8-4: The <ins> and <del> tags can provide for suitable redlined documents. Note that the underline tag (<u>) has been deprecated in favor of the <ins> tag.

134 Part II ✦ HTML/XHTML Authoring Fundamentals

Grouping Inline Elements with the <span> Tag When using CSS for text formatting, you need a method to code text with the appropriate styles. If you are coding block elements, you can use the <div> tag to delimit the block, but with smaller chunks (inline elements) you should use <span>. The <span> tag is used like any other inline tag (<b>, <i>, <tt>, and so on), surrounding the text/elements that it should affect. You use the style or class attribute to define what style should be applied. For example, both of the following paragraph samples would render the word red in red text: <head> <style type=“text/css”> .redtext { color: red; } </style> </head> <body> <!-- Paragraph 1, using direct style coding --> <p>We should paint the document <span style=“color: red”> red</span>.</p> <!-- Paragraph 2, using a style class --> <p>We should paint the document <span class=“redtext”> red</span>.</p> </body> Of the two methods, the use of the class attribute is preferred over using the style attribute because class avoids directly (and individually) coding the text. Instead, it references a separate style definition that can be repurposed with other text. Summary This chapter covered the formatting of inline elements. You learned two distinct methods (direct tags and styles) and the various tags to supplement textual formatting. Keep in mind that you should use <div> or other block tags to format larger sections of a document. ✦✦✦