KacMac - HTML Guide: Chapter 9 - Extra Page Extensions

The face part is the type of font you want to show the text with.
The size part is a number that pinpoints how big you want the text to appear, where 3 is the size of standard-issue text. You can use any number between 1 (tiny) and 7 (gargantuan).
The color part is the color of the text.

Example:

<HTML>

<HEAD>

<TITLE>Text Extensions</TITLE>

</HEAD>

<BODY>

<H1>Using Tag</H1>

<HR>

This text uses a font size of 7. 

This text uses a font size of 6. 

This text uses a font size of 5. 

This text uses a font size of 4. 

This text uses a font size of 3 (normal). 

This text uses a font size of 2. 

This text uses a font size of 1. 

<HR>

You can mix and match sizes:

 

Here at Shyster & Son Brokerage, you'll see your investments

shri

nk while our commissions

grow!

</BODY>

</HTML>

The <BASEFONT> Tag

As mentioned above that the standard font size in a document is 3. This is called the base font, and it's not set in stone. To change it (and to chage the type of font used), use the <BASEFONT> tag:

Once again, size is a number between 1 and 7 that specifies the base font size you want. For example, if you enter <BASEFONT=7> at the top of your document (the top of the body section, that is), then all the text will appear with font size 7.

You may be wondering what the heck's the big deal with <BASEFONT>. After all, couldn't you just insert a tag at the top of the document? Good point. (Gee, you are paying attention, aren't you?) The beauty (if beauty is the right term) of base fonts is that they enable you to set up relative font sizes. A relative font size is one that's so many sizes larger or smaller than the base font. Here's an example:

<BASEFONT=6>

This text is displayed in the base font size. However

these three words were displayed in

a font size that was two sizes smaller than the base font.

The tag tells your browser to display the text in a font size that's two sizes smaller than the base font (to get larger fonts, you'd use a plus sign (+), instead). Since we specified a base font of 6, the text up to the tag appears with a font size of 4.

Why not simply use , instead? Well, suppose you plaster your document with dozens of font changes and then, when you display it in your browser, the fonts look too small. If you're using explicit font sizes, you have to painstakingly adjust each tag. However, if you're using relative font sizes, you only have to change the <BASEFONT> tag.

Changing the Color of Your Page Text

Browsers display your text in basic black, which is readable but not all that exciting. To put some color in your text's cheeks, the <BODY> tag helps you:

The xxxxxx part is a number that specifies the color you want to use. (Note, however, that colored text looks best on a background other than the normal, boring gray. We'll show you how to change the background color later in this chapter.) The following table lists the appropriate values for some common colors: (Appendix IV contains full table lists.)

If you use this value	You get this color
#000000	Black
#FFFFFF	White
#FF0000	Red
#00FF00	Green
#0000FF	Blue
#FF00FF	Magenta
#00FFFF	Cyan
#FFFF00	Yellow

Changing Link Colors

There are also extensions that enable you to specify colors for the links you include in your page. Here's how it works:

<BODY LINK="#xxxxxx" VLINK="#xxxxxx" ALINK="#xxxxxx">
Use LINK to specify the color of new links (links the reader has never clicked on before); use VLINK to set up a color for visited links; use ALINK to set up a color for active links. (An active link is a link you've clicked on and are waiting for the page to display.)

List Extensions

If you're planning to use a lot of numbered lists or bulleted lists, There're a couple of simple enhancements that can give your pages some variety. To wit, you can specify an alternative numbering scheme in a numbered list, and you can specify a different type of bullet in a bulleted list.

Using a Different Numbering Scheme in Numbered Lists

As you learned back in Chapter 6 you enclose a numbered list with the <OL> and </OL> tags, and use <LI> at the beginning of each item. For each <LI> tag, the browser includes a number to the left of the item, where the first item is 1, the second is 2, and so on.

There is an extension to the <OL> tag that enables you to define a different numbering scheme. Here's how it works:

Here, type is one of the following characters:

Type	Numbering scheme	Example
1	Standard numbers	1, 2, 3
a	Lowercase letters	a, b, c
A	Uppercase letters	A, B, C
i	Small Roman numerals	i, ii, iii
I	Large Roman numerals	I, II, III

Here's an example:

<HTML>

<HEAD>

<TITLE>Numbered List Extensions</TITLE>

</HEAD>

<BODY>

<H3>Using <OL TYPE=type> Tag</H3>

<OL TYPE=a>

<LI>Win.

<LI>Place.

<LI>Show.

</OL>

<HR>

<OL TYPE=A>

<LI>Gold.

<LI>Silver.

<LI>Bronze.

</OL>

<HR>

<OL TYPE=i>

<LI>Miss America.

<LI>First runner-up.

<LI>Second runner-up.

</OL>

<HR>

<OL TYPE=I>

<LI>Picard.

<LI>Riker.

<LI>Data.

</OL>

<HR>

</BODY>

</HTML>

Changing the Bullet Type in Bulleted Lists

Your browser's basic bulleted-list bullet is a small circle. The best way to get a better bullet is to use an <IMG> tag that references some cool bullet-like image. (how to do this in Chapter 8.) If you prefer to leave graphics out of it, <UL> tag for bulleted lists has an extra TYPE attribute:

In this case, type can be either disc (the standard bullet), circle, or square. Here's a for-instance:

<HTML>

<HEAD>

<TITLE>Bulleted List Extensions</TITLE>

</HEAD>

<BODY>

<H3>Using <UL TYPE=type> Tag</H3>

<HR>

<UL TYPE=disc>

<LI>Compact disc.

<LI>Disc jockey.

<LI>Disc brake.

</UL>

<HR>

<UL TYPE=circle>

<LI>This "circle" type looks suspiciously like a square.

<LI>What's the problem, do you think?.

<LI>I guess somebody at Netscape failed geometry.

</UL>

<HR>

<UL TYPE=square>

<LI>Square root.

<LI>Three square meals.

<LI>Times square.

</UL>

</BODY>

</HTML>

Graphics Extensions

You saw back in Chapter 8 how a few well-chosen graphics can do wonders for your pages. There're some extra graphics goodies that can help your images display faster and can enhance the overall look of your page. The next two sections tell all.

Specifying Image Height and Width

When surfing Web sites that contain graphics, have you ever wondered why it sometimes takes quite a while before anything appears on the screen? Well, one of the biggest delays is that most browsers won't display the entire page until they've calculated the height and width of all the images. "What if there was some way to tell the browser the size of each image in advance? The browser wouldn't have to worry about it and things would show up on-screen much faster."

For that there is <IMG> tag: the HEIGHT and WIDTH attributes:

Here, filename is the name of the graphics file, x is the width of the graphic, and y is its height. Both dimensions are measured in pixels (which is short for picture elements), which are the tiny dots that make up the picture on your screen.

Alternatively, you can express the width and height as percentages of the screen. For example, the following line displays the image bluebar.gif so its width always takes up 90 percent of the screen:

The advantage here is that, no matter what size screen someone is using, the graphic will always take up the same amount of room across the screen. (Note, that since we didn't specify the HEIGHT, your browser adjusts the height in proportion to the increase or decrease of the width.).

Setting the Background

When it appears in a browser, your Web page text and graphics float in a sea of dull, drab gray. It's about as exciting as a yawning festival. One of the most welcome extensions is the ability to change the background color your page appears on to whatever suits your style. The guts of your page appears within the body, so it makes sense that this extension is part of the <BODY> tag:

Yes, the xxxxxx part is the same as what you saw earlier in this chapter.

Important!

Be sure NOT to use the same color for Text and background. Why? for example using a black background. Black text would, of course, be impossible to read on this background, so the author rightly chose to use white text.

Instead of a color, you may also specify an image to use as the background (similar to the way Windows lets you cover the desktop with wallpaper). This doesn't have to be (nor should it be) a large image. Your browser takes smaller graphics and tiles them so they fill up the entire screen. The secret to background images is the <BODY> tag's BACKGROUND attribute:

Here, filename is the name of the graphics file you want to use.

In general, we recommend sticking with just a different background color. Tiled background images take longer to load, and they can make text devilishly difficult to read.

Extra Extensions

Centering Paragraphs

Centering text and graphics is a time-honored way to give reports and brochures a professional look and feel. To provide the same advantage to your Web pages, <CENTER> tag gives you centering capabilities for your page headings, paragraphs, lists, and even graphics. Here's how <CENTER> works:

<CENTER>

[Headings, text, and graphics that you

want centered go here.]

</CENTER>

The previous figure shows an example of the <CENTER> tag at work.

How the Web World Centers Stuff

The folks who created HTML 3.0 preferred to complicate things. Their solution was to create a new ALIGN attribute for the tag and the heading tags. For example, to center the next paragraph, you use the following variation on the tag theme:

Similarly, you can center, say, an <H1> heading like so:

<H1 ALIGN=CENTER>
The only advantage to this approach is that you can also use either LEFT or RIGHT with the ALIGN attribute.

A Better Horizontal Rule

<HR>, you'll recall, displays a horizontal rule across the page. <HR> extensions allow you to change the line's size, width, alignment, and more. Here's a rundown:

<HR> Extension	What It Does
<HR WIDTH=x>	Sets the width of the line to x pixels.
<HR WIDTH=x%>	Sets the width of the line to x percent of the screen.
<HR SIZE=x>	Sets the thickness of the line to x units (where the default thickness is 1 unit).
<HR ALIGN=LEFT>	Aligns the line with the left margin.
<HR ALIGN=CENTER>	Centers the line.
<HR ALIGN=RIGHT>	Aligns the line with the right margin.
<HR NOSHADE>	Displays the line as a solid line (instead of appearing etched into the screen).

The Least You Need to Know

This chapter took you on a tour of the various extensions to HTML. Here are a few of the tourist attractions you saw during the trip:

Use to specify a font type, size and color. To set the type and size for all your text, use <BASEFONT FACE=face SIZE=size>.
To get a different text color, use <BODY TEXT="#xxxxxx">. The <BODY> tag also supports the BGCOLOR attribute, which specifies the color of the background.
You can use a different numbering scheme in your numbered lists by using <OL TYPE=type>. To get different bullets in a bulleted list, use <UL TYPE=type>.
Your page graphics will load quicker if you specify a HEIGHT and WIDTH in the <IMG> tag.
To center text, paragraphs, headings, and graphics, use the <CENTER> tag.

Make KacMac your home page
Add URL - Information Center - Contact us - Terms of Service - Privacy Policy - Advertising

CONTENTS

Text Extensions

The <FONT>Tag