Cool HTML Effects

When displaying Web page text, a Web browser uses the browser's default typeface and font size, unless you specify a size and typeface within the Web page HTML. Controlling the size and appearance of text is important, because the way text looks sets the mood for the page. The mood of the viewer can be changed using and adapting the cool HTML effects of the fonts. Understand that typography does not end with the words themselves; the presentation is equally important. For example, designers use typeface and size to indicate the importance of certain text passages, which is why headlines are larger and often in a different typeface than body text.

The typeface you choose conveys mood and creates the atmosphere in which the visitor reads the

message. Using the wrong typeface confuses the reader, because the content "feels" out of place. For example, several studies (one conducted by Yale) indicate that serif typefaces convey a more serious mood than sans (that is, without) serif typefaces. Therefore, you would use a typeface like Helvetica or Times New Roman for a formal document and a typeface like Comic Sans or Arial for a less serious or more casual message.

To set the cool HTML effects of a font, enclose the text between the start and end font tags in the form:

< face="typeface">

... Web page text displayed using the specified typeface ...

< /font >

The "face" attribute tells the Web browser which typeface to use when displaying Web page text onscreen. For example, the start font tag <> instructs the Web browser to display text following the tag using the Helvetica typeface until the browser encounters a < /font > tag:

< face="helvetica"> This text displays in Helvetica < /font >

When the browser reads a < /font > tag in the Web page HTML, it reverts to displaying Web page text in the browser's default typeface.

Thus, the face attribute instructs the Web browser to search the host computer for a specific typeface. The Web browser will use the typeface when displaying text placed between the start and end font tags (<>< /font >). However, if the visitor has not installed on his or her computer the typeface you specify in the <> tag, the Web browser will use the browser's default typeface instead.

Understand the site visitor can select the browser's default typeface by working with the Web browser's preferences. For example, to change the default typeface in Internet Explorer, select Tools | Internet Options. Then, click the Fonts button. Internet Explorer, in turn, will display the Fonts dialog box, on which you can select the browser's default Web page (and view source) font. (Internet Explorer refers to the typeface selection as the "font.") The default typeface tells the visitor's Web browser what character style to use when the Web document does not specify a typeface or when the visitor's computer does not have the typeface specified.

In addition to specifying a primary typeface, the face attribute lets you select a second, third, or even a fourth typeface. Say, for example, you want your document text displayed using the Helvetica typeface. However, if Helvetica is not available, Georgia is an acceptable substitute. The following code illustrates how you can specify an alternative typeface to use if the primary typeface is unavailable on the visitor's computer:

< face="helvetica, georgia">

The primary typeface is Helvetica. The browser will use the Georgia typeface if Helvetica is not available.

< /font >

The face attribute instructs the Web browser to display the text between the start and end font tags (<>< /font >) using the Helvetica typeface, and if Helvetica is not available, use the Georgia typeface instead. If neither the primary nor any of the alternative typefaces are available, the Web browser will use its default typeface.

When specifying fonts, use lowercase font names because then the system will look for the font name in both lowercase and uppercase. By contrast, if you use uppercase names, and the visitor's system has the font installed in lowercase, the Web browser will not find the desired font.

When you place unformatted text on a Web page, the width of the browser's application window controls the number of words the browser displays on each line onscreen. Unformatted text is simply text entered into an HTML document between the start and end body tags (<> < /body >), such as that shown in the following code:

<>

<>

<> Example of unformatted text < /title >

< /head >

<>

When you insert unformatted text into an HTML document. It does not matter how the text appears within the HTML document because the Web browser does not recognize the carriage return or enter key as a valid formatting tool.

< /body >

< /html >

Web browsers ignore the carriage return and line feed characters you insert into the Web page HTML by pressing ENTER to move down to the next line when typing. By default, Web browsers define the length of each line to be the width of the Web browser application window and not the number of characters on each line in the Web page HTML.

To group lines of text into paragraphs and to control the last word on each line, HTML provides the start and end paragraph tags (<>< /p >) and the <> tag. When it encounters a <> tag, the Web browser moves to the next line onscreen, inserts a blank line, and then displays the text that follows the <> tag on the next line below the blank line. Therefore, to group related sentences into "blocks" of paragraph text, place a <> tag before the first word in the paragraph and a < /p > tag after the last. For example, if the Web page HTML has three lines of text, each enclosed by start and end paragraph tags (<>< /p >), the Web browser will display the text as three paragraphs with a blank line between each line of text.

Unlike the <> tag, the <> tag has no end tag. After the Web browser encounters a <> tag in the Web page HTML, the browser moves down to the next line onscreen before displaying additional text. Thus, you can use either the <> tag or the <> tag to tell the Web browser to move to a new line before displaying more text. When you only want to move to the next line, use the <> tag; when you want to move to the next line and insert a blank line between the current line of text and the next, use the <> tag in the Web page HTML.

The following lines describe the cool HTML codes' effects of the <> tag and the <> tag:

<>

<>

<> Example of formatted text < /title >

< /head >

<>

<>When you insert formatted text into an HTML document.< /p >

<>The placement of the paragraph and line break tags within the HTML document<> determines the line breaks for the text.< /p >

<>The paragraph tags leave a blank line between lines of text< /p > and the line break tags break the text without inserting<>an additional blank line.

< /body >

< /html >