HTML 4_01 Weekend Crash Course - G. Perry
.pdf
62 |
Saturday Morning |
The most commonly used font for the Mac is Helvetica. The most commonly used font for PC-based systems is Arial. Both fonts are sans serif fonts (sans means without in Latin); that is, they contain straight lines and circles without any extra bubbles, lines, or curves to the characters.
Sans serif fonts require less resolution than serif-based fonts and, as a result, are more readable on Web screens. The extra resolution necessary to display serif fonts generally is not available to ordinary text on the Web browser’s screen because the resolution for each character is too narrow. Figure 5-3 demonstrates this. The more readable letter a (on the left side of the figure) is in a sans serif font; the letter a on the right is a serif-based font, Times New Roman (which is the same as the Mac’s Times font).
Figure 5-3
Sans serif fonts, like the one on the left, are more readable on Web screens.
In addition, you will not be able to determine which fonts are available on your Web page’s user’s computer. For example, although you may have the latest version of a font called HumorousGothic, chances are that users viewing your Web pages won’t have HumorousGothic. Generally, you’ll need to keep your fonts simple and attempt to use fonts available to all Web page users.
Specifying a font
If you want to specify a font, use the <font> and </font> command tag pair. The attribute face= determines the font (technically, the typeface) that you request for your Web page’s text. The format is as follows:
<font face=One or more fonts go here>
You can control the font used for individual characters, words, sentences, paragraphs, or complete Web pages depending on what falls between the
Session 5—Text on Your HTML Page |
63 |
start and ending <font> tags. (A few methods for controlling the font with the <font> tags are discussed in the following sections.) Again, you must remember that your users work on different systems and that special, unusual fonts are risky. If the target browser does not support the font you specify in the <font face=> tag, the browser will substitute a different font and the resulting font will not always be close to what you requested.
Alternating Between Fonts
Alternating fonts in your code can help you determine which fonts are easier to read by the browser. The following HTML code alternates between Arial and Times New Roman fonts on each line displayed:
<p><font face=Arial>Italy ice cream,</font></p> <p><font face=Times New Roman>called gelato,</font></p>
<p><font face=Arial>is the richest, creamiest ice cream in the world.</font></p>
<p><font face=Times New Roman>Buon Apitito!</font></p>
Figure 5-4 shows these code lines inside the browser. The Times New Roman font, a serif font, is smaller and more difficult to read on computer screens than the Arial font.
Morning Saturday—II Part
5 Session
Figure 5-4
Alternating fonts demonstrate which styles are easier to read on the monitor.
64 |
Saturday Morning |
Specifying Multiple Font Names
Notice that the <font face=> tag accepts one or more font names. If you specify multiple fonts, separated by commas, enclose the list between quotation marks. The target browser begins at the leftmost font in the list and attempts to display the subsequent text in that font. If the font is unavailable, the browser picks the next font in the list and goes down the line until the browser can match a font or has to use one of the default fonts. The following tag requests that the subsequent text appear in the Century font if available, then in the Schoolbook font if Century doesn’t exist on the browser’s computer, and finally, Antique. If none of the three is available, the user’s browser selects the default font.
<font face=”Century, Schoolbook, Antique”>
Never enclose each font in the list inside its own pair of quotes. Always include the entire font list inside a single pair of quotation marks, as shown in the previous example.
Never
Specifying Sans Serif and Serif Fonts
To ensure that you get a sans serif font on all systems, PCs, and Macs, you could use the following <font face=> tag for sans serif fonts:
<font face=”Arial, Helvetica”>
The following <font face=> tag works for serif fonts on both PCs and Macs:
<font face=”Times New Roman, Times”>
|
Instead of specifying an exact font name, and risking the target |
|
computer substituting a different font, you can specify serif, sans |
Tip |
serif, or monospace for the font name. The target browser will |
then use the default font that fits that description. Monospaced |
|
|
fonts display each character, from the narrowest to the widest, |
|
using the same column width so that all the screen’s characters |
|
line up together. The <tt> and </tt> typewriter command tag |
|
pair also displays text in monospaced format. |
The next session describes some ways you can make new fonts available to every system that views your Web page.
Session 5—Text on Your HTML Page |
65 |
Graphic fonts
One of the best ways around the lack of fonts on target browsers is to use whatever font you prefer, no matter how rare or new that font is, and save the text as a graphics image in a program such as PhotoShop. The image will appear on your Web page exactly as you intend. Such textual images are great for banners and headlines whose font styles help to portray a certain image, such as flying serifs for an airline’s name. In addition, you can accurately control spacing between characters (called kerning) or between lines (called leading), which you cannot do in HTML.
The drawback to using a graphic image over using text is that the image will take much longer to load than the text equivalent takes. In addition, your users won’t be able to highlight the text on the screen and cut and paste the text as they can regular text. (The user can, however, save the Web page image to disk as a graphic image.) The rules for creating graphics in general apply also to font image files.
Sessions 6 and 7 cover the use of images in your pages.
Cross-Ref
Formatting Your Text with Command Tags
Given the limitations of available fonts, you should concentrate more on making the standard available fonts look good. You can effectively use text in your Web pages by controlling the size and style of your text. You can do this with the common text-formatting command tags.
Presentable headlines
A headline often appears before a body of text and is larger than the body to make it stand out. Users can glance through the headlines, as shown in Figure 5-1, and select the articles that they want to view in more detail.
HTML supports a standard headline command formatting tag that virtually every Web page uses. The format for the headline tag is as follows:
Morning Saturday—II Part
5 Session
<hn>
66 |
Saturday Morning |
In this example, n ranges from 1 to 6, with 1 being the largest and 6 being the smallest font. A corresponding </hn> end tag terminates the headline size.
Figure 5-5 shows the result of the following code that demonstrates the six decrementally smaller headline tags:
<h1>This is headline 1’s size</h1> <h2>This is headline 2’s size</h2> <h3>This is headline 3’s size</h3> <h4>This is headline 4’s size</h4> <h5>This is headline 5’s size</h5> <h6>This is headline 6’s size</h6>
Figure 5-5
The headline tag gives you six decrementally smaller headline sizes.
The headline tags enable you to organize your headlines in an outline format so that your top headline can be the largest, and then as you use subheadlines, you can adjust the size down. Of course, HTML programmers rarely nest headlines more than three deep and virtually never use <h4>, <h5>, or <h6>. Notice that the headline tags automatically issue a line break at the end of the headline, so you do not have to use <br> or <p> tags. By default, browsers left-align and boldface headlines. In the next session, you will learn how to align headlines and other text in the center or in the Web page’s right margin.
Session 5—Text on Your HTML Page |
67 |
|
|
PCs display headlines slightly larger than the same sized |
|
|
headlines on Macs because of the different resolution used |
|
Note |
on the two systems. Generally, the difference does not destroy |
|
the effects on your Web page, but to be sure, you may want to |
|
|
|
test your pages on both systems if the size of your headlines |
|
|
will negatively affect your Web page layout. |
|
|
Never use a headline tag just because you want to boldface |
|
|
and enlarge body text. Although headline text is boldfaced by |
|
Never |
default, you’ll learn later in this session how to apply boldfacing |
|
to specific text. |
|
|
Font size
You can format normal text in a variety of sizes like your headlines. The <font>’s size= attribute controls the size of text. The format is as follows:
<font size=n>
In this example, n ranges from 1 to 7. Unlike the headline tag, however, the lower the number the smaller the font size. This discrepancy is one of those issues that has been with HTML since the first version, and will remain until the last. As with many attributes, the number may or may not appear inside quotation marks; the quotes are optional.
Figure 5-6 shows the result of the following code that demonstrates the seven incrementally larger font size tags:
<font size=1>This is font size 1</font> <br> <font size=2>This is font size 2</font> <br> <font size=3>This is font size 3</font> <br> <font size=4>This is font size 4</font> <br> <font size=5>This is font size 5</font> <br> <font size=6>This is font size 6</font> <br> <font size=7>This is font size 7</font> <br>
The <basefont> tag with the size=n attribute specifies the size of all text in your document that is not specified by a <font> tag. In addition to size, the <basefont> tag can specify color and several other attributes.
Morning Saturday—II Part
5 Session
68 |
Saturday Morning |
Figure 5-6
The font size tag gives you seven incrementally larger font sizes.
Note
Session 20 teaches you how to write CSS, cascading style sheets, which make many of the individual text-formatting tags discussed here obsolete. Familiarize yourself with these text-formatting tags because tons of Web pages still use them. Often, the individual tags are used to format specific areas of a page and a CSS is not defined. In addition, CSS is easier once you understand the individual formatting tags.
Character formatting
All the standard formatting styles are available to you when writing HTML code. You can italicize, boldface, underline text, and more.
Note
HTML programmers cringe when they see underlined text on a Web page. Generally, hypertext links appear on the screen as underlined text, and when underlining is used on nonhyperlinked text, users waste browsing time attempting to click the hyperlink that does not exist. Good design dictates that you use italics and typefaces to emphasize text.
Use the <b> and </b> tag pair to indicate boldfaced text. The following HTML statement produces a boldfaced word in the middle of a sentence:
This sentence contains one <b>boldfaced</b> word.
Session 5—Text on Your HTML Page |
69 |
Notice that you must include a space around the tags, just as you would do if the <b> and </b> tags did not exist. The formatting tags add no spacing to your text.
Use the <i> and </i> tag pair to indicate italicized text. The following HTML statement produces an italicized word in the middle of a sentence:
This sentence contains one <i>italicized</i> word.
If you must underline text, use the <u> and </u> command tag pair, as done here:
This sentence contains one <u>underlined</u> word.
Use the <strike> and </strike> tag pair to create text with a strikethrough effect; for example, you might use strikethrough to cross out items no longer offered for sale. The following line strikes through two words:
This sentence contains <strike>two words</strike> that use the strikethrough effect.
Mathematical equations often require subscript text (text that falls below the normal text baseline) and superscript text (text that appears above the normal text baseline). Use the <sub> </sub> and <sup> </sup> tag pairs to add subscript and superscript text to your site, as shown in the following formula:
The value is equal to this equation: a<sub>1</sub> + b<sup>2</sup>
Figure 5-7 shows the result of putting all of this section’s sample lines together to display formatted HTML-based text.
Morning Saturday—II Part
5 Session
Figure 5-7
Examples of formatted characters in HTML-based text.
70 |
Saturday Morning |
REVIEW
You can create articles in a word processor to help ensure grammar and spelling accuracy.
The articles that you create in a word processor can be saved as a text file with the html (or htm) filename extension.
You can create a template that works as a starting point for subsequent HTML Web pages.
Specify multiple fonts so your font requests are followed when possible.
The text-formatting command tag pairs <b> and </b>; <i> and </i>; and <strike> and </strike> indicate boldfaced, italicized, and strikethrough text, respectively.
QUIZ YOURSELF
1.Why keep your home page text to a minimum? (See “Text is the Foundation.”)
2.What does a template help you do? (See “Your Web Page General Layout Template.”)
3.Why does some Web text appear differently on different computers? (See “Dealing with Specific Font Limitations.”)
4.What is the difference between serif, sans serif, and monospaced fonts? (See “Dealing with Specific Font Limitations.”)
5.Which font tag determines the font size used for your entire Web page unless overridden for specific text? (See “Font Size.”)
S E S S I O N
6 
Improving the Look of
Your Web Page’s Text
Session Checklist
Align text, add line breaks, and use proper spacing
Add horizontal rules to separate headlines and articles
Increase and decrease the font size of your text
Understand font selection considerations
Use lists in your text to display detailed information
In this session, you learn how to spruce up the appearance of your Web site’s text. As with printed documents, you can control the alignment, spacing, and size of your text. You can also add horizontal lines to separate bodies of text
from headlines and to produce sections on your Web page. In addition, HTML supports several kinds of list formats that you can add to your text to help organize the presented data.
Text Alignment and Spacing
As with word-processed text, you can control the alignment and spacing of the text on your Web page. For example, for detailed technical material that you make