Unit 5.2. Common HTML Tags
 | This unit is, by no means, intended to be an exhaustive introduction to the HTML language. For more information on any of the HTML tags introduced in this chapter or subsequent chapters, please consult a text solely devoted to the discussion of HTML. |
Creating and Viewing HTML Files
Since HTML files are simple ASCII text files, you don’t need anything special to create them. Any ordinary text editor will do. When starting out, you can use something as simple as Windows Notepad. In contrast, using a word processing program to write HTML can be problematic. You cannot keep the same file open in both your word processor and your Web browser, which means you won’t be able to dynamically debug your HTML files, and you will have to save the document as a plain text file instead of the word processor’s own default format. Use either Notepad or an HTML editor similar to Notepad.
The preferred browser to be used when completing this book’s exercises is Microsoft Internet Explorer (IE), version 5.5 and higher.
Browsers can display HTML documents stored locally on a computer, as well as documents stored remotely and accessed via the Internet. You can edit and preview local HTML files by performing the following steps:
1. |
Start Microsoft Internet Explorer. |
2. |
If your dialer begins to dial your ISP’s access phone number, click the Cancel button. |
3. |
If you receive the message “Unable to retrieve Web page in offline mode,” click the OK button. |
4. |
To open and display a local HTML file (Web page) from your hard drive (please don’t ever load files from your floppy drive; it is far more time-consuming than loading from your hard drive, not to mention the fact that your hard drive contains much more available space), select File, Open, Browse. Navigate to the folder where the local HTML file you want to view is stored, and then double-click it to open it. Click the OK button to finally load the page into your browser. |
Begin to Code Html: The Document Tags
All HTML files should include at least the following tags:
<HTML></HTML>
<HEAD></HEAD>
<TITLE></TITLE>
<BODY></BODY>
The HTML tag defines the topmost element in an HTML document. It has both a start tag and an end tag. All other text and tags are nested within it. For example:
<HTML> All HTML text and other element tags should be placed here. </HTML>
 | Remember that the HTML start tag, <HTML>, must always be the very first HTML tag in your file, while the HTML end tag, </HTML>, must always be the very last HTML tag in your file. |
The HEAD tag contains information about your HTML file, such as its title. It can also contain other tags that provide identification and supplementary information about the document. Browsers do not display this information. Regardless of how the HEAD tag is used, it should always be included in an HTML file for purposes of style and legibility. Adding to the example already begun in this chapter, the latest version of this HTML Web page looks like the following:
<HTML> <HEAD> </HEAD> Other HTML text and other element tags should be placed here. </HTML>
The only element required in the head of a document is the <TITLE> tag element. It identifies your page to the rest of the world. Other browsers and indexing robots use the text included in the TITLE tag as a link to the page, and as the document title while the Web page is being viewed. The text within this tag appears on your browser’s title bar, but it doesn’t display as part of the page. The title should be descriptive, but short. Someone else should be able to determine what your page is about merely by reading the title. Including the TITLE tag in this chapter’s example results in the following:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> Other HTML text and other element tags should be placed here. </HTML>
The <BODY> tag is the complement of the <HEAD> tag. It contains all the tags, text, and other elements that a browser actually displays as the body of an HTML document. Both the HEAD tag and the BODY tag, as well as all other tags, are nested inside the HTML tag. It is important to note, however, that the BODY tag comes after the HEAD tag. They each denote distinct, separate parts of an HTML document. In other words, the <BODY> tag (the beginning tag for the BODY container element) is placed only after the </HEAD> tag (the ending tag for the HEAD container element) appears, not before. This code is acceptable:
<HEAD></HEAD><BODY></BODY>.
This code is not:
<HEAD><BODY></HEAD></BODY>.
Nor is this code acceptable:
<HEAD><BODY></BODY></HEAD>.
 | The HEAD and BODY tags are the only tags that are nested directly inside the HTML tag. All other text and tags are contained within the <HEAD> or <BODY> tags.The </BODY> and </HTML> ending tags should always be the last two tags in your HTML file. |
Include the BODY tag inside the HTML tag, but after the HEAD tag, by typing the following:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> Other text, elements and tags to be included in your HTML Web page should be placed here. </BODY> </HTML>
You’ve probably noticed that Web pages you view on the Web can have either an .HTM or an .HTML extension. The .HTML extension is the most conventional extension for HTML files on a UNIX Web server. However, some operating systems only recognize a three-letter file extension. You’ll be safe with most, if not all, operating systems if you simply stick to using .HTM extensions for any HTML files you create.
 | With some operating systems (like Windows NT, for instance), you may notice that, when using Notepad as your HTML editor, you occasionally run into the problem where your action of saving your file results in Notepad’s default .TXT extension being appended to your HTML filename. For example, you mean to save your file as Test.htm, however, it is actually saved as Test.htm.txt, even though you specify Test.htm as the file name and set the File Type to All Files (*.*). To get around this problem, enclose your filename with double quotes when assigning a filename to your HTML file. In other words, when saving your HTML file in Notepad, you can simply type “Test.htm” (be sure to include the double quotes) in the File Name text box of the Save As dialog pop-up. |
Save your file as C:GuestTest.htm and view it through your browser using the instructions listed at the beginning of this unit. Your file should resemble the example file shown in Figure 5.1.
Figure 5.1. Your first Web page.
 | In Internet Explorer, you can press the Refresh button each time you want to view the latest version of your HTML files. Therefore, each time you make a change to your HTML file, after saving it, you should immediately check your work by hopping over to your browser, then loading the page (if you haven’t already done so) or reloading it to get the latest version by pressing Refresh.Alternatively, you can refresh your page by typing Ctrl+R. |
Heading Levels
Headings are used to organize your Web page into levels of hierarchy. The top-level heading (the H1 tag) should be the title that you’d like displayed at the top of your Web page. (Don’t confuse this with the title that appears in the browser’s title bar, which you create with the TITLE tag.) Since the H1 tag is used to create the title of your Web page, you should only have one H1 tag per Web page. This is the typical stylistic convention for most Web pages on the Web.
A second-level heading (created with the H2 tag) should be used to define a major division within your page, and a third-level heading (H3 tag) delineates a subdivision within a major division. Most browsers support up to six different heading levels.
Within the BODY element of your Test.htm file, type the following:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <H2>This H2 heading level denotes a major division within this document.</H2> <H3>This H3 heading level denotes a sub-division within a major division.</H3> Other text, elements and tags to be included in your HTML Web page should be placed here. </BODY> </HTML>
Each time you add something to your Test.htm file, make sure you save your changes, then reload the file into your browser to check the result of your work. Your file should resemble the example file shown in Figure 5.2.
Figure 5.2. Your Web page with the inclusion of headings.
As you can see, when displayed in a browser, different level headings appear as different size fonts, from largest (the H1 tag) to smallest (the H6 tag). However, each browser decides which fonts and font sizes to use.
Creating Paragraphs
The <P> tag (Paragraph) allows you to insert paragraphs and lines of text onto your page. Though it is clear that you can, depending on your browser, occasionally get away with simply writing plain, untagged text in the body of an HTML document, it is always best to include it in some other HTML element such as a heading, list, or paragraph. The most common way to tag plain text is to include it in the Paragraph element.
The <P> tag is a container element with an implied ending, so technically you don’t have to include the </P> tag. To be on the safe side, however, you should always add a </P> tag at the end of a paragraph. For example, some versions of XML (Extensible Markup Language) require this tag.
 | A Web browser automatically wraps text in an HTML file to fit inside its window. Therefore, it is not necessary for you to insert returns at the ends of your lines of code to get them to display neatly inside a browser window. The effort would be futile in any event because Web browsers ignore hard returns that aren’t specified with <BR> or typed within the <PRE> tag. |
Paragraphs are placed inside the BODY tag. Any paragraph text that you type after the <P> tag should show up in a browser with at least one blank line after it. A <P> tag that contains no text has no effect. Therefore, the <P> tag cannot be relied upon as a tag to be used simply for inserting blank lines into a document. If you’d like to insert a line break in your HTML document, you should use the <BR> (Line Break) tag.
Inserting Line Breaks
The <BR> tag is a standalone tag (meaning there is no need to code a corresponding </BR> tag) that merely inserts a line break into your document.
Change your Test.htm file to reflect the following lines of code:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <P>Here is a paragraph with multiple lines of text. The point in displaying this paragraph is to demonstrate that when this paragraph ends and another begins, a line break should occur after the first paragraph, and a blank line should separate the first paragraph from the second para graph. No Line Break tag is used here.</P> <P>Here is the second paragraph. This one is slightly dif ferent from the first paragraph, for it uses BR (Line Break) tags, here <BR> and here <BR> and here, again,<BR> inside the second paragraph.</P> </BODY> </HTML>
Reload this file into your browser to check the result of your work. Your file should resemble the example file shown in Figure 5.3.
Figure 5.3. Your Web page with the inclusion of paragraphs and line breaks.
 | You can use the <BR> tag almost anywhere you have text. For instance, it can be placed inside an <H1> or <H2> tag to force a heading to show up on two or more lines. |
In terms of not just inserting line breaks but inserting blank lines, it is important to note that, though most browsers will let you get away with using the <BR> tag to insert blank lines into your document, doing so does not constitute standard HTML. To quote from the draft specification for HTML 4.0, “a sequence of contiguous whitespace characters, such as spaces, horizontal tabs, form feeds, and line breaks, should be replaced by a single word space.”
 | The tag you should use for inserting blank lines into an HTML document is the <PRE> (Preformatted Text) tag. Using this tag works for all browsers. You can simply type regular hard returns inside the <PRE> tag like this: |
<P>The PRE tag is used here to add extra space between paragraphs. All one has to do is type hard returns within the PRE tag.</P> <PRE> </PRE> <P>There should be three blank lines separating the first paragraph from this paragraph.</P>
A Few Words About Spacing
In HTML, only the tags are used for all of your page’s formatting. Therefore, unless they’re inside a <PRE> tag, a browser ignores more than one space inserted into the text. Whether you’ve typed two, six, or twelve spaces, when the HTML document is displayed, only one space will appear. This same circumstance holds true for all tabs and hard returns as well. Therefore, the only reason to insert extra space (again, without the use of HTML tags or HTML special characters) into your HTML files is to make your raw HTML files (your source code) more readable as you work.
Special Characters
Since HTML documents are plain text ASCII files, they cannot easily display a graphical copyright symbol such as © and they may misinterpret characters that have a function within HTML such as < and >. To use characters or symbols such as these in an HTML document, make use of special characters. This name is given to codes that generate a character to the screen. Special characters always begin with an ampersand, &, and end with a semicolon, ;. Between the ampersand and semicolon go either a standard set of characters or a number. Table 5.2 lists some of the most commonly used special characters.
| HTML Code | Special Character | Description |
|---|---|---|
| | non-breaking space | |
| © | © | copyright symbol |
| < | < | less-than symbol |
| > | > | greater-than symbol |
| & | & | ampersand |
The last of these is interesting: there needs to be a special character to render the ampersand because the ampersand has a special use in HTML, indicating the start of a special character.
 | If you want three consecutive horizontal spaces in your document, similar to what a paragraph tab needs, you can type the following, and it will work in almost all Web browsers: |
Creating Comments
You should annotate your HTML documents with comments. Any text placed inside an HTML comment will not be displayed in a Web browser. The comment tag has no name, per se, included in the tag. It begins with this tag, <!--, and ends with this tag, -->.
Any text inserted between these tags is completely ignored by a browser. For example:
<!-- Your comment should be placed here. -->
You can place a comment virtually anywhere in your HTML document as long as it is typed inside an HTML comment tag. For instance, you can place a comment between two lines of text by typing something similar to the following:
<P>Type your text first, then type your comment.</P> <!-- This comment will not be displayed by the browser. --> <P> This line is preceded by an HTML comment.</P>
These two paragraphs appear in a Web browser as if they were originally typed as one paragraph line of text after another, with no additional vertical space between them.
The comment tags can also be used to “comment out” HTML tags. This is useful if you want to take out some HTML code, but might want to put it back later. Simply add and remove the comment marks to comment out or restore the text.
Italicizing and Boldfacing Your Text
There are two ways to include italic or bold text in your HTML document. The first way is to use literal tags: I (italic) and B (bold) tags. The second way involves using logical tags: EM (emphasis) and STRONG (strong emphasis) tags. Most browsers should display the <I> and <EM> tags identically. They should also display the <B> and <STRONG> tags identically.
The philosophy behind the difference between these tags is that the browser should be left to interpret the logical elements of a page and display them as it chooses. Therefore, to be true to this philosophy one should always use logical tags and avoid using literal tags. However, the <B> and <I> tags are obviously quicker to code. So if you want to be true to the basic philosophy of how a browser should interpret such highlighted text, use the <EM> and <STRONG> tags to italicize or boldface your text. On the other hand, if you’d like to save some keystrokes, substitute the literal <I> tag for the <EM> tag and the literal <B> tag for the <STRONG> tag. The literal tags also give a Web developer more control over how the page is displayed.
To see an example of using these tags, change your Test.htm file to reflect the following lines of code:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <P><B>This is literally boldfaced text.</B></P> <P><STRONG>This text is logically boldfaced using the STRONG tag.</STRONG></P> <P><I>This is literally italicized text.</I></P> <P><EM>And this text is logically italicized using the EM tag.</EM></P> </BODY> </HTML>
Reload this file into your browser to check the result of your work. Your file should resemble the example file shown in Figure 5.4.
Figure 5.4. Your Web page with the inclusion of bold and italicized text using mixed tags.
You can also nest these tags inside one another to get both italicized and boldfaced text. Just remember that you should not overlap them.
Creating Hypertext Links
One of the primary reasons to create a Web document is to create links to other pages. The word hypertext refers to any text that is linked to somewhere else, usually another page. To create a link, you can use the A (Anchor) tag. Hypertext links can be used to perform tasks such as the following:
Jump to and view another Web page
Jump to a specific place in either the same or another Web page
Read a PDF (Portable Document File)
Display an image
Download a program
Send an email message
Play an audio or video clip
Run a script
Access a database
Telnet to a server
Hypertext links can be used to have a user of your Web site jump to anything that has an address on the Internet (not just on the Web), as long as a password is not necessary.
A hypertext link contains the following three parts:
Start and end tags that enclose the link
The link target
The link text
Here is an example of a hypertext link using the <A> tag:
<A HREF="Test_two.htm"> This link, when clicked, should direct a user to an HTML page called Test_two.htm</A>
The Anchor tag’s HREF (Hypertext Reference) attribute is used to specify the URL of the object of the link. In most cases, this is simply another Web page. Note that, in the example above, the full URL (absolute path) is not provided, only the file name. This link makes use of a relative path, as explained in Chapter 3, “Remote Server Access.” For this link to work, Test_two.htm must be located in the same directory as the Web page from which the link is being made. When you want to create a link with a Web page somewhere else on the Web, you must include the full URL, for instance, http://www.another_server.com/test_two.htm.
 | You should always nest the Anchor tag inside a document element, such as the Paragraph tag, not just within the BODY tag. |
Creating Inline Images
The IMG (Image) tag allows you to display inline images on your Web page. Inline refers to the fact that an image is inserted at a particular location within a Web page. The most commonly used file types for inline images are JPG (Joint Photographic Experts Group, or JPEG) and GIF (Graphic Interchange Format). Most, if not all, Web browsers can display JPG and GIF files as inline images.
These two types of graphic files tend to serve different purposes. GIF images are limited to 256 colors, but they can have a color set to transparent. GIF images also have the added advantage of being interlaced. This means that a GIF image can be progressively displayed while its file is being downloaded to the browser. GIF images can also be animated. JPG images can choose from up to 16.7 million colors, but they cannot be animated or transparent. It is best to include JPG files when you want to include a photographic image. If your image will be nonphotographic, such as a logo, then you should use a GIF, because it is less likely to require more than 256 colors to display properly. It can also display more sharply than a JPG file because of the compression method used for JPG files.
The Image tag uses the following format:
<IMG SRC="imagefile">
The SRC (Source) attribute is required. It specifies the address of the image to be displayed. This address can, like the HREF attribute of the Anchor tag, be either a full or partial URL, or just its file name.
To link to an image file that is neither in the same directory as the Web document it is being inserted into, or even on the same server as the current Web document, you could type something similar to the following:
<P>The image that is to be displayed will be inserted directly into this line of text because it is an <I>inline</I> image. <IMG SRC="http://www.another_server.com/imagefile.gif"> If you want the image to be displayed on its own line of text, you would need to precede the IMG tag with another P tag.</P>
However, linking to someone else’s graphic on the Web is not considered good Web authorship. You should always ask permission to use someone else’s graphic file before you include it in your own Web page. As an alternative, plenty of repositories of public domain graphics exist on the Web. To be on the safe side, so you don’t have to worry about violating someone’s copyright, you can start out by using graphics downloaded from any of these public repositories.
Using the ALT Attribute
You can include the ALT attribute in an IMG tag to help textually identify the image. In many browsers, if you pass the mouse cursor over an image, the text of an included ALT attribute will be displayed. For Web users that use text-based browsers (which don’t display images) or those Web users that may be using a graphical browser with the display of images turned off (a practice that sometimes speeds up the process of Web surfing), using the ALT attribute provides a text description of what an image contains.
An example of using the ALT attribute with an IMG tag is:
<IMG SRC="imagefile.gif" ALT="A sample image file">
In a text-based browser, the message “A sample image file” would be displayed to the user, rather than the alternative message “[Image]” (which is displayed if an ALT attribute is not included). In a graphical Web browser with the display of images turned off, the message “A sample image file” appears alongside a dummy graphic file icon, as shown in Figure 5.5.
Figure 5.5. A Web page with the display of images turned off.
 | A browser will also display the dummy graphic file icon if the SRC of your IMG tag has not specified the location of your image file properly in relation to the Web document the image is being inserted into. In other words, if the browser cannot properly locate the image file, it will simply display the dummy graphic file icon. |
Relative URLs versus Absolute URLs
As mentioned in Chapter 3, “Remote Server Access,” you don’t always have to specify a full, or absolute, URL when creating a hypertext link or inserting an inline image. If a Web page or other file to which you are linking, or a graphic file you are inserting into your Web document, is either in the same folder, directory, or even the same server (domain), you can exclude those parts of the URL that are common to both. A URL created in this manner is referred to as a partial URL.
Apart from being a shorter name, an advantage to using this type of URL is that you can move a Web page and its locally linked files from one directory to another, or from one server to another, without having to recreate the links accordingly. The link hierarchy remains essentially intact. You want to create and test your Web pages in your development environment (which may be your own computer), then FTP them up to your Web site on your production server without having to redo any of the links.
Creating Horizontal Rules
The HR (Horizontal Rule) tag is a standalone element that allows you to add horizontal rules to your Web pages.
To see an example of how the <HR> tag may be used, change your Test.htm file to reflect the following lines of code:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <P><B>This is literally boldfaced text.</B></P> <HR> <P><STRONG>This text is logically boldfaced using the STRONG tag.<STRONG></P> <HR> <P><I>This is literally italicized text.</I></P> <HR> <P><EM>And this text is logically italicized using the EM tag.</EM></P> <HR> </BODY> </HTML>
This updated bit of code demonstrates two interesting points. First, it shows that portions of HTML code can be separated by white space, yet that white space is not interpreted by the browser as such. Second, it illustrates how horizontal rules are often used in Web pages as separators. They can separate distinct, logical parts of a Web document. Reload this file into your browser to check the result of your work. Your file should resemble the example file shown in Figure 5.6.
Figure 5.6. Your Web page with the inclusion of horizontal rules.
Remember that the blank lines of text you see displayed between each horizontal rule and its subsequent paragraph in Figure 5.6 have to do with the fact that each time a paragraph ends and another begins, a blank line is inserted between the two. The blank lines displayed by the browser have nothing to do with the blank lines inserted into the source code you just typed. To test this theory, feel free to take out the blank lines you just inserted into your source code, save your changes, and refresh your file in your browser. The result should be the same as that displayed in Figure 5.6.
Using Fonts
The font tag is used to change font faces, sizes, and colors.
 | The FONT tag has been “deprecated” in HTML 4.0. The reason for this is to encourage the use of style sheets in place of the FONT tag. Usually, a deprecated HTML tag is one that may be obsolete in future versions of HTML. However, it is a much easier tag for a novice HTML user to learn and code with (than style sheets). Furthermore, many pages have already been created using this tag, so for backward-compatibility purposes, future versions of HTML will continue to support it. |
Working with Font Sizes
The FONT tag uses its SIZE attribute to change the size of a font. You can set font sizes using either absolute or relative size values.
You can set seven absolute (fixed) sizes. These fixed sizes are numbered from 1 to 7. The default is 3, which is the same as regular paragraph text. 1 is the smallest and 7 is the largest. Therefore, you can set two absolute font sizes that are smaller than normal paragraph text, and four sizes that are larger. Each Web browser determines the sizes of these fonts as it sees fit.
To see an example of what these different font sizes look like in your Web browser, change your Test.htm file to reflect the following lines of code. Your file should resemble the example file shown in Figure 5.7.
Figure 5.7. Your Web page with the inclusion of different absolute font sizes.
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <P><FONT SIZE="1">This line of text uses Font Size 1.</FONT><BR> <FONT SIZE="2">This line of text uses Font Size 2.</FONT><BR> <FONT SIZE="3">This line of text uses Font Size 3.</FONT><BR> <FONT SIZE="4">This line of text uses Font Size 4.</FONT><BR> <FONT SIZE="5">This line of text uses Font Size 5.</FONT><BR> <FONT SIZE="6">This line of text uses Font Size 6.</FONT><BR> <FONT SIZE="7">This line of text uses Font Size 7.</FONT> </P> </BODY> </HTML>
You can set relative font sizes by indicating either a plus (+) or minus (−) sign preceding the font size number. For example, FONT SIZE=“+2” indicates a font size that is two sizes larger than the base font size. The default base font size is identical to the Size 3 absolute font. Therefore, a SIZE=“+2” relative font size is equivalent to a Size 5 absolute font (3 + 2 = 5).
For an example of using relative font size changes to indicate the seven possible font sizes, change your Test.htm file to reflect the following lines of code:
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <P><FONT SIZE="-2">This line of text uses Font Size -2.</FONT><BR> <FONT SIZE=-"1">This line of text uses Font Size -1.</FONT><BR> This line of text uses the Default Font Size.<BR> <FONT SIZE="+1">This line of text uses Font Size +1.</FONT><BR> <FONT SIZE="+2">This line of text uses Font Size +2.</FONT><BR> <FONT SIZE="+3">This line of text uses Font Size +3.</FONT><BR> <FONT SIZE="+4">This line of text uses Font Size +4.</FONT> </P> </BODY> </HTML>
Reload this file into your browser to check the result of your work. Your file should resemble the example file shown in Figure 5.8.
Figure 5.8. Your Web page with the inclusion of different relative font sizes.
You should notice by looking at Figure 5.8 that relative −2 is the same as absolute 1, relative −1 is the same as absolute 2, relative +1 is the same as absolute 4, and so on. Absolute 3, which is the default font size, requires no font size change.
Using the BASEFONT Tag
The BASEFONT tag allows you to change the size of the base font—the default font or the font used in paragraph text. You can set it using any of the absolute font sizes, 1 through 7 (again, 3 is the default). The BASEFONT tag is a standalone tag that is set the same way you set an absolute font size.
 | It is important to note that the BASEFONT tag is another deprecated tag; however, it is still just as much in use as the FONT tag. |
The BASEFONT tag may only be used to increase the size of the base font. For example, you can increase the base font size by one to an absolute font size of 4:
<BASEFONT SIZE="4">
When you change the base font size using the BASEFONT tag, all following relative font sizes will change relative to the new base font. For example, if you change the base font size to 4, then a following relative font size of +1 has the same effect as setting an absolute font size of 5 (4 + 1 = 5).
You can insert the BASEFONT tag anywhere within a Web page. It stays in effect until another BASEFONT tag changes the base font size. It affects all text sized with relative font sizes. However, any headings or text set with absolute font sizes are not affected.
Working with Font Colors
The FONT tag uses its COLOR attribute to change the color of a font. To specify a font color, you can either use one of 16 color names that match the Windows 16-color palette, or you can use RGB (Red Green Blue, indicative of the color spectrum) hexadecimal codes. Using the RGB hex codes is more difficult, but gives you greater access to a much wider range of colors.
The 16 Windows color names are black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow.
For an example of specifying font colors using color names, change your Test.htm file to reflect the following lines of code (this bit of code excludes the font colors black and white):
<HTML> <HEAD> <TITLE>This is your title: with a short description</TITLE> </HEAD> <BODY> <H1>The title of your web page should be placed here.</H1> <P><FONT SIZE="6"> <FONT COLOR="maroon">Maroon </FONT> <FONT COLOR="teal">Teal </FONT> <FONT COLOR="green">Green </FONT> <FONT COLOR="red">Red </FONT> <FONT COLOR="fuchsia">Fuchsia </FONT> <FONT COLOR="olive">Olive </FONT> <FONT COLOR="aqua">Aqua </FONT> <FONT COLOR="lime">Lime </FONT> <FONT COLOR="purple">Purple </FONT> <FONT COLOR="yellow">Yellow </FONT> <FONT COLOR="gray">Gray </FONT> <FONT COLOR="navy">Navy </FONT> <FONT COLOR="silver">Silver </FONT> <FONT COLOR="blue">Blue </FONT> </P> </BODY> </HTML>
Reload this file into your browser to gain an idea of how your browser displays these colors.
Using RGB hex codes to set your font colors is much more difficult than setting font colors using color names, but it gives you access to a much broader range of colors. It allows you to specify values from 0 to 255 (00 to FF, in hexadecimal), for the red, green, and blue components of a color, providing you with up to 16.7 million different colors to choose from.
You can set the RGB hex code for a color in the FONT tag by using the following general form:
<FONT COLOR="#RRGGBB">This text is the color of whatever RGB hexadecimal color value belongs to the surrounding FONT tag's COLOR attribute.</FONT>
In the example above, RR stands for red, GG stands for green, and BB stands for blue. FF is the highest hexadecimal number, equaling 255, whereas 00 is the lowest, equaling 0. Therefore, to specify red, green, and blue, you would type the RGB hexadecimal codes, FF0000, 00FF00, and 0000FF, respectively.
To practice assigning font colors using RGB hex codes, feel free to change the red, green, and blue font color values in your Test.htm file to the corresponding RGB hex codes. Don’t forget to include the # sign in front of the hex code:
<FONT COLOR="#FF0000">.
Then reload the file into your browser to check out how it looks.
 | Historically, instead of the 16.7 million possible colors mathematically available with hexadecimal notation, developers have been limited to a palette of 216 colors deemed Web-safe, or compatible with machines that can only support 8-bit, 256-color resolution. For Web-safe colors, each RGB color value can only be set to values like 00, 33, 66, 99, CC, or FF, for a maximum of 216 color possibilities. Since the majority of computers can support a higher color depth, there is not the necessity there once was to support 8-bit users. If you find that you need to utilize Web-safe colors for your audience, browse the Web for a listing of Web-safe colors and their corresponding hexadecimal codes. |
One of the quickest ways to get started using RGB hex color codes in your HTML document is to use some kind of color chart or wheel that allows you to choose the color you want and obtain the corresponding hex code. There are many charts and utilities available on the Web for obtaining the hex codes for colors. Additionally, many HTML editors, like EditPlus and TextPad, have built-in color charts that allow you to select a color, then insert the corresponding hex code into your Web page.
Working with Font Faces
The FACE attribute of the FONT tag allows you to specify a font, or list of fonts, in which you would like your text to be displayed. A browser that supports this attribute will search the local computer to see if any of the fonts specified are present. If so, it will display the text in the first available font from the font list. If none of the fonts are found, it will display the text in the local computer’s default font.
Your goal in using this attribute should be to specify a list of fonts that will be present on as many computers as possible. A good method is to specify a list of fonts that fit into the same family, or category, such as serif, sans serif, or monospaced fonts. For instance, if you’d like a line of text to be displayed in a sans serif font, your best bet would be to provide a list in order to maximize your chances. Consider the following example:
<P><FONT SIZE="4" COLOR="teal" FACE="Arial, Helvetica, Verdana">You have maximized your chances for displaying this text in a sans serif font, since you have listed a family of fonts after your FACE attribute, rather than specifying just one font face value. Which font face is ultimately selected depends on which fonts are installed on a local system.</FONT></P>
 | You should not use the FONT tag as a substitute for any of the heading level tags (H1, H2, and so forth). The reason for this is that text-based browsers and Braille browsers, for instance, need the heading level tags in order to determine the structure and order of precedence within a document. You can, however, combine the two by either nesting a FONT tag inside a heading level tag or vice versa. |
Creating Background Colors and Images
You can set your background, text, and links colors for your entire Web page by specifying values for the following attributes in the BODY tag, as outlined in Table 5.3.
Go to the top of your Test.htm file and add the following code to the BODY tag for an example of setting these attributes:
<BODY BGCOLOR="#99CCFF" TEXT="yellow" LINK="#99CCCC" VLINK="salmon" ALINK="#FF0000">
This sets the background color to pale blue, the text to yellow, the links to light teal, the visited links to salmon pink, and the activated links to bright red.
Be sure to reload the file into your browser to then see how your changes affect your HTML document.
 | Be careful when specifying colors. Avoid color combinations that render any part of your page less readable.You should develop and organize your content first, then hone the appearance of your Web page. |
The BACKGROUND attribute of the BODY tag allows you to specify a background image. The general format for specifying a value for this attribute is:
<BODY BACKGROUND="imagefile.gif">
Alternatively, keeping in line with the circumstance that an image file may not be in the same folder, directory, or server, the following syntax may also be used:
<BODY BACKGROUND="http://www.another_server/imagefile.gif">
Please see the sections titled “Creating Inline Images” and “Relative URLs versus Absolute URLs” earlier in this unit for a discussion on specifying file locations for images. When using background images, avoid busy or high-contrast images. When using dark background images, set the color of your text and links to light colors.
| <BODY> Attribute | Description |
|---|---|
| BGCOLOR | Sets the background color |
| TEXT | Sets the text (or foreground) color |
| LINK | Sets the color of unvisited links |
| VLINK | Sets the color of visited links |
| ALINK | Sets the color of activated links (the link your mouse button is currently selecting, or clicking on) |
 | If you specify a dark background image (using the BACKGROUND attribute) with light text and link colors, your text and links may not be readable in a browser that has the display of images turned off. To ensure that your page will be readable against the default white background of such browsers, specify a value for the BGCOLOR attribute to set a background color against which the text will still be readable. |