HTML 4_01 Weekend Crash Course - G. Perry
.pdf
72 |
Saturday Morning |
available on your site, you may want few separating blank lines. For lighter material, the more whitespace you provide, the better the appearance.
Better paragraph spacing
As you learned in Session 5, the <p> tag defines a new paragraph by inserting a double carriage return at the point of the <p> so that subsequent text appears as a new paragraph from the previous text. The <p> tag displays somewhat strangely in some browsers by adding too much or not enough spacing between paragraphs. To overcome this potential problem, some HTML programmers prefer to use two <br> tags in place of the <p> to ensure that exactly two carriage returns appear between paragraphs. Two carriage returns between two paragraphs, in effect, produce one blank line between them.
Many of the newer browsers, such as Internet Explorer 5, have an HTML interpreter that properly decodes a single <p> tag as two <br> tags, and other browsers are quickly becoming more consistent. In the meantime, you may want to retain the de facto standard of using two <br> tags when you want exactly one blank line to appear between paragraphs.
Session 9 describes how you can use a 1-bit pixel graphic image, an extremely small image, to space text and graphics precisely.
Tip
Paragraph alignment
The <p> tag with the align= attribute determines the left, right, or centered alignment of the paragraphs in your Web page. The format of the <p align=> tag follows:
<p align=right|left|center>
No end tag appears because <p align> works in place of the <p> and begins a new paragraph by skipping one blank line (in modern browsers) and beginning a new paragraph. In fact, <p align> is the <p> tag with the optional align attribute. Without the align attribute, the paragraph will always align to the left margin.
Session 6—Improving the Look of Your Web Page’s Text |
73 |
The <center> and </center> command tag pair also centers paragraphs to the middle of the screen’s margins, and <center>
offers the additional benefit of centering graphic images.
Tip
Never attempt to fully justify paragraphs. Beginning in HTML 4, a <p align=”justify”> tag attribute exists, but many browsers offer little or no support for this relatively new tag that
Never attempts to make both the left and right edges of a paragraph straight, as would appear in most newspaper columns.
Figure 6-1 shows the resulting three paragraph alignments produced by the following code:
<font size=3>
<p align=left>This paragraph will appear left-justified on the screen. The left edge of the paragraph will be straight while the right edge will be ragged. By the way, the ending paragraph tag is optional but good HTML programming style dictates that you include a closing paragraph tag with each start tag you put on your site. </p>
<br><br>
<p align=center>This paragraph will appear centered in the middle of the screen. Both the left and right edges of each line will fit perfectly in the center of the screen. Notice that the HTML tags do not force the browser to align both the left and right edges. Both edges remain ragged when you center a paragraph.</p>
<br><br>
<p align=right>This paragraph will appear right-justified on the screen. The right edge of the paragraph will be straight while the left edge will be ragged. Sometimes, a graphic image on the left side of the text makes the right-alignment a good option.</p>
Morning Saturday—II Part
6 Session
You can apply the alignment tag to headlines as well as to body text.
74 |
Saturday Morning |
Figure 6-1
The <p align> tag controls the alignment of your paragraphs.
Line breaks and spacing
When your Web page users look at your pages, they might have their browsers set to full-screen mode or the browser windows might be smaller than the maximized window allows. Fortunately, the browser wraps your HTML text to whatever window size the user displays.
The automatic wrapping feature is the primary reason why browsers do not automatically add line breaks when your HTML code includes text returns on multiple lines. Consider the following HTML:
<p>This is line one. This is line two. This is line three.
In the browser window, this code produces one continuous line that reads:
This is line one.This is line two.This is line three.
Session 6—Improving the Look of Your Web Page’s Text |
75 |
If the browser added line breaks at the end of every line of text and, in addition, the browser wrapped lines automatically when the user resized the browser window, your text could end up looking very strange indeed. That’s why you decide when you want the line breaks.
Not only do browsers ignore returns in your text, but also they do not recognize the tab character or multiple spaces that you might embed in text while working in your text editor. Tabs, multiple spaces, and returns all collapse into a single space when viewed in the browser window. To add indentions at the beginning of your Web page paragraphs, several options are available, few of which are extremely elegant. For example, a <spacer> tag exists that enables you to provide exact horizontal and vertical adjustment of text, but not all browsers support <spacer>. Perhaps that’s why few paragraphs of text ever appear on Web pages with the first line indented.
You can also pre-format your HTML text; that is, you can request that the browser respect the same text spacing that you used when you entered the text. One way is to use the <pre> and </pre> tags. Any text that you enclose between <pre> and </pre> retains the spacing you used, such as an indent in the first line of your paragraph.
The following HTML code ensures that the paragraph’s first line is indented and that each line spans a separate line in the browser’s window:
<pre>
HTML is the abbreviation for HyperText Markup Language. HTML simplifies Web page formatting. In addition to text formatting, HTML formats the placement of graphic images on your page.</pre>
Quoting long passages
The <blockquote> and </blockquote> tags are useful for quoting long passages of text. These tags format the text that they enclose by indenting the left and right margins of the text — shrinking and setting apart the text from the surrounding paragraphs. No additional <p> or <br> tags are required.
Figure 6-2 shows the result of the following HTML code, which formats a long quote:
<h1 align=center><font size=6 face=”Arial”>Philosophical Thought</font></h1>
Morning Saturday—II Part
6 Session
76 |
Saturday Morning |
<p><font face=”Arial” size=4>The line from Plato to St. Augustine to John Calvin links the thoughts of each. Calvin’s theology is rooted deeply in Greek philosophy and today’s Calvinists thank Plato for their beliefs. As Dr. Hill states,</font></p>
<blockquote><font face=”Arial” size=4>”First we must see the origin. Immutability means unchanging. This is the basis for many of the tenets of Calvinistic doctrine. But, where did the idea of immutability come from? The answer is Plato. “
</blockquote>
Figure 6-2
Long quotes look good when formatted with the <blockquote> tag.
Separating Text with Horizontal Rules
One of the best ways to separate blocks of text, even headlines from the body text within articles, is to add a horizontal, separating line between the blocks. In HTML terminology, such a line is called a horizontal rule.
Session 6—Improving the Look of Your Web Page’s Text |
77 |
Horizontal rules enable you to underline complete lines of text or headlines without resorting to a true underline that is more easily confused with a hyperlink. In addition, a horizontal rule
Tip does not preclude the possibility of making your headline a hyperlink; in other words, a headline can be a hyperlink as well as sit atop a horizontal rule.
The <hr> tag produces a horizontal rule. The rule is gray and has a 3-D effect. The following code repeats a headline and the beginning of the article twice,
once with a single rule and once with two horizontal rules. By adding multiple horizontal rules, you can add an artistic effect to your articles.
<h1 align=”center”><font size=”6” face=”Arial”>Philosophical Thought</font></h1>
<hr>
<p><font face=”Arial” size=”4”>The line from Plato to St. Augustine to John Calvin links the thoughts of each. Calvin’s theology is rooted deeply in Greek philosophy and today’s Calvinists thank Plato for their beliefs. As Dr. Hill states...</font></p>
<br><br>
<h1 align=”center”><font size=”6” face=”Arial”>Philosophical Thought</font></h1>
<hr><hr>
<p><font face=”Arial” size=”4”>The line from Plato to St. Augustine to John Calvin links the thoughts of each. Calvin’s theology is rooted deeply in Greek philosophy and today’s Calvinists thank Plato for their beliefs. As Dr. Hill states...</font></p>
Figure 6-3 shows the resulting Web page that contains the three horizontal rules.
The gray rule is somewhat boring, but effective. You can use graphic images to create more colorful rules if you prefer, as Session 9 shows.
Morning Saturday—II Part
6 Session
Note
78 |
Saturday Morning |
Figure 6-3
Horizontal rules help separate headlines from articles.
The <hr> tag supports several attributes with which you can change the way the rule appears on your Web page. You can add a size= attribute to control the number of pixels used in the line. The following tags display horizontal rules at different widths:
<hr size=5> <hr size=10> <hr size=20>
In addition to specifying the width in pixels, you can align the rule to the left, center, or right edge of the browser window with the align attribute, like this:
<hr align=center>
Of course, alignment seems to make no sense, because the rules you’ve seen so far all span the entire browser window width. But you can specify an optional width attribute that controls the width of the rule. Specify the width attribute as
Session 6—Improving the Look of Your Web Page’s Text |
79 |
a percentage of the browser window. The following tag displays a 3-bit pixel horizontal rule that spans 25 percent of the browser window and is aligned against the right edge of the window. (The start of the rule begins 75 percent to the right of the window.)
<hr size=3 align=right width=25>
Bigger and Smaller Font Sizes
Although usually frowned upon by HTML programmers, you’ll see the tags <big>, </big>, <small>, and </small> throughout the Web pages that you visit, and you might even find yourself resorting to them in a pinch. These tags increase and decrease the font size on your Web page. CSS, as you’ll learn in Session 20, is reducing and, in many instances, eliminating the need for many text-formatting tags such as these.
The <big> and <small> tags base themselves on the size of the document’s font, set by a <basefont> tag earlier in the document. Every time the browser comes upon a <big> tag, the browser increases the text size for subsequent text until a corresponding </big> tag appears. For example, if you place two <big> tags before a </big> end tag, the browser displays the enclosed text two sizes larger than the <basefont> size, and so on. The <small> and </small> tags work in the opposite manner, by making the text smaller than the current <basefont> size with each occurrence of <small>.
The words in the following example become larger and smaller according to the command tags:
<basefont size=1>
These <big>words <big>grow <big>larger <big>and <big>larger.</big></big></big></big></big>.
<basefont size=7>
These <small>words <small>get <small>smaller <small>and <small>smaller.</small></small></small></small></small>
Morning Saturday—II Part
6 Session
Figure 6-4 shows the result of this code in a Web page.
80 |
Saturday Morning |
Figure 6-4
The <big> and <small> tags increase and decrease font size.
Additional Font Selection Considerations
Most computer screens display 72 pixels per inch, so a 12-point character appears on the screen in a one-sixth inch of height. A 12-point character offers little room for the serifs that come on many fonts, especially the more elegant fonts such as Gothic and slanted script fonts.
Note
Technically, different font names specify different typefaces. A typeface such as Schoolbook differs from the typeface of Times New Roman. Often, programmers use the more general term font to refer to the different font names, and that loose usage will continue here.
Don’t give in to the need to make gigantic headlines. Check out the popular sites on the Web, such as Microsoft (http://www.microsoft.com/) and Yahoo! (http://www.yahoo.com/), and you’ll see that they do not make use of overly large headlines. Instead, they are able to fit more information on the page that would otherwise be wasted on ugly, large type.
Never mix too many fonts on a page. If you find yourself using four or more fonts on the same Web page, you are probably using too many and your page will seem more like a ransom note than
Never a calm, readable, and uniform page. Try to keep similar fonts on similar elements; that is, use the same font for all headlines, the same font for all titles, and the same font for all hyperlinks that appear on the same page.
Session 6—Improving the Look of Your Web Page’s Text |
81 |
Today’s browsers do a fairly good job at font substitution. For example, if you specify a sans serif font that is unavailable on the user’s system, the browser can often recognize that the font is a sans serif font and substitute another. If, however, you use less common fonts that you buy from third-party font dealers, the chances are less likely that the browser will be aware of that font’s name. No matter how good your special fonts make a Web page appear, sticking with the simple ones will make your pages more uniform on more systems. If you truly need to utilize a special font, create the text in a graphics program such as Illustrator and save the file as an image. The same image, therefore, will appear in every Web browser.
Keep your eyes on new browser technologies that appear in the future. A move is under way to provide the downloading of fonts from a Web server to the user’s system. Once downloading of fonts is available, you can use any font available on your own computer for Web design, and that font will be sent to the user’s computer if the user doesn’t have that font (assuming the user okays the font download, presumably). No font downloading standards have been universally approved, although Microsoft has designed the OpenType font-downloading system and Netscape has its Dynamic Fonts system in place. Keep checking the W3 Web consortium (http://www.w3.org/) for news on which downloading standard becomes the accepted norm. Although the downloading of fonts will add time to the site’s arrival on the user’s system, Internet speeds are always increasing. In addition, once the fonts proliferate, downloading will become less frequent as users accept more and more fonts arriving with their associated Web pages.
Putting Lists in Your Text
Given that the Web is used to disseminate information, often that information presents well in a list format. HTML makes presenting your data in list form easy by supporting several list tags. With HTML, you can add the following kinds of lists to your Web pages:
Ordered lists that present information in an order, such as the steps needed to bake a recipe
Unordered lists that present information that does not fall in a given order, such as a list of products that you sell on your Web site
Definition lists that present terms and definitions where the definitions are indented and appear below the terms
Morning Saturday—II Part
6 Session