text formatting and font control. boldface, italics, and special formatting way back in the age of...

Text Formatting and Font Control

Boldface, Italics, and Special FormattingWay back in the age of the

typewriter, we were content with plain text and an occasional underline for emphasis. Today, boldface and italicized text have become necessary in all paper communication. Naturally, you can add bold and italic text to your Web pages too.

Boldface, Italics, and Special FormattingFor boldface text, put the tag

at the beginning of the text and at the end. Similarly, you can make any text italic by enclosing it between and .

You can nest one type of formatting inside another. For instance, if you want some text to be both bold and italic, put in front of it and after it.

Boldface, Italics, and Special FormattingTo avoid confusing some Web

browsers, be careful to close tags in the opposite order you opened them in. For example, don’t do this:◦Bold, bold and elegant,

 or just plain elegant.Instead, do it this way:

◦Bold, bold and elegant, or just plain elegant.

Boldface, Italics, and Special FormattingYou can also use italics within

headings, but boldface usually won’t show in headings because they are already bold.

There are actually two ways to make text display as boldface; the tag and the tag do the same thing in most Web browsers. Likewise, all popular browsers today interpret both and as italics.

HTML Tags That Add Special Formatting to text

Tag Function

 Small text

<big> Big Small text

 Superscript

 Subscript Small

<strike> Strikethrough Small (draws a line through text)

 Underline Small

 or Emphasized (italic) text

 or 

Strong (boldface) text

<tt> Monospaced Small typewriter font

<pre> Monospaced Smallfont, preserving spaces and line breaks

Font Size and Color There may be times when you’d

just like a bit more control over the size and appearance of your text while maintaining as much compatibility with older Web browsers as possible. For those times, you can use the officially discouraged but widely used tag.

Font Size and Color For example, the following HTML

will change the size and color of some text on a page:◦ this

text will be big and purple. The size attribute can take any

value from 1(tiny) to 7 (fairly big), with 3 being the default size.

Font Size and Color The color attribute can take any

of the following standard color names:◦Black, White, Red, Green, Blue,

Yellow, Aqua, Fuchsia, Gray, Lime, Maroon, Purple, Navy, Olive, Silver, or Teal

Choosing a TypefaceThe attribute allows

you to specify the actual typeface that should be used to display text.

Times New Roman is the default typeface.

Special CharactersMost fonts now include special

characters for European languages, such as the accented é in Café. There are also few mathematical symbols and special punctuation marks such as the circular • bullet.

For example, the word Café would look like this:◦Café

Important English-Language Special Characters

Character

Numeric Code

Code Name

Description

“ " " Quotation mark

& & & Ampersand

< < < Less than

> > > Greater than

¢ ¢ ¢ Cent sign

£ £ £ Pound sterling

¦ ¨ ¦ or brkbar;

Broken vertical bar

§ § § Section sign

© © © Copyright


Character

Numeric Code

Code Name

Description

® ® ® Registered mark

° ° ° Degree sign

± ± ± Plus or minus

² ² ² Superscript two

³ ³ ³ Superscript three

· · · Middle dot

¹ ¹ ¹ Superscript one

¼ ¼ ¼ Fraction one-fourth

½ ½ ½ Fraction one-half

¾ &#190 ¾ Fraction three-fourths


Character

Numeric Code

Code Name

Description

Æ Æ Æ Capital AE ligature

æ æ æ Small ae ligature

É É É Accented capital E

é é é Accented small e

× × Multiplication sign

÷ ÷ Division sign

HTML Tags and Attributes CoveredTag Attribute Function

… Emphasis (usually italic)

…

Stronger emphasis (usually bold)

… Boldface text

… Italic text

<tt>…</tt> Typewriter (monospaced) font

<pre>…</pre> Preformatted text (exact line endings and spacing will be preserved – usually rendered in a monospaced font)

<big>…</big> Text is slightly larger than normal

… Text is slightly smaller than normal

… Subscript

HTML Tags and Attributes CoveredTag Attribute Function

… Superscript

<strike>…</strike>

Puts a strikethrough intext

… Controls the appearance of the enclosed text

size=“…” The size of the font, from 1 to 7. Default is 3. Can also be specified as a value relative to the current size; for example, +2 or -1

color=“…” Changes the color of the text

face=“…” Name of font use if it can be found on the user’s system. Commas can separate multiple four names, and the first font on the list that can be found will be used.

WorkshopWrite the HTML to produce the

following:◦Come for cheap H2O on May 7th at

9:00PM

How would you say, “We’re having our annual Impeachment Day SALE today,” in normal-sized blue text, but with the word “SALE” in the largest possible size in bright red?

How do you say “© 1996, Webwonks Inc.” on a Web page?

text formatting and font control. boldface, italics, and special formatting way back in the age of...

Documents