Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

The Font Tag

Technically a font is a shape like a serif or stroke that is used to construct a typeface like Courier or Times New Roman. But today when we refer to a font, we usually mean the typeface. Up until HTML version 3 the font was set using the <font> tag. Today, most webpage text design is accomplished through the use of style definitions rather than html tags.

Starting with HTML version 4, the font tag was "deprecated". Deprecated means that at some point in the future it may no longer be supported by some browsers. However, I believe because the Web contains millions of old webpages that use the font tag, and because thousands of new webpages are being created each day using the font tag, it will be supported long into the future.

I want to get you started in web design with the proper psychology and good design habits, so you need to understand that everything on a webpage is a box. Earlier when we just typed some text in a file and it displayed in the browser, it didn't appear to be in a visible container. Actually, it was in an invisible container referred to as an "anonymous box".

Text on a webpage should always be placed inside a container. The container may be a table cell or a span or div element, but the most commonly used container for text is a paragraph, which is designated by the <p> and </p> tags. You don't want to just type text without a container because the browser will put it in an anonymous box, and it will follow the browser's rules rather than your design. So to start you out with good design habits, all these font tag examples will place the text within a paragraph element.

Font Face

Most html tags have "attributes". An attribute is a named property that you can set to a specific value. Shown below we set the font tag's <i>face</i> attribute to "Arial".

<p><font face="Arial">This is your text.</font></p>

To test the examples given in this eBook, open your favorite basic ASCII text editor, type in the example code, save the file with any name with the .htm file extension as explained earlier. Then double-click on the file name and it will display in your default web browser. The example code will just provide the html for the body of the webpage, but you should provide the tags for the entire webpage structure as shown below.

<html>
<head>
<title>Your Title</title>
</head>
<body>

<p><font face="Arial">This is your text.</font></p>

</body>
</html>

In choosing a font face, keep in mind that it will be displayed only if the user has that particular font installed on their computer. If the particular font that you specified is not installed on the user's computer, the browser will make a substitute, and you don't know what you're going to get. Nowadays users have a tremendous number of fonts installed on their computers, but only a handful are known to be common to both Windows PCs and Macs. Those fonts are referred to as the "browser safe fonts". Below is a list of some browser safe fonts.

Browser Safe Fonts

Arial
Comic Sans MS
Courier New
Georgia
Verdana

If you want a font that is not on the safe list, you can set the <i>face</i> attribute to a list of fonts as shown below. If the browser can't find the first font on the users computer, it will use the second font in the list, and so on.

<p><font face="Andalus, Helvetica, Arial">This is your text.</font></p>

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268