Advertisement

Add Pizazz to Web Text With Colors and Fonts

Share
clfrey@aol.com

By default, HTML code creates lines of black text on a white background--not very exciting page design. This week, we look at ways to jazz up a page with some simple attribute tags. If you missed last week’s installment on tags, check it out on the Web archive at https://www.latimes.com/webbuild.

To change text, boldfaces, italicizes, underlines and

places text in the center of the browser screen. Each of these tags is turned off with its respective end tag. For example, turning off boldface requires the

tag.

You also can create various font sizes with headline tags

through

, one being the largest, six the smallest. (Regular text usually is the same size as that created with the

tag.)

Attributes are added to tags to modify their appearance. They follow the tag name in the same less-than (<) and greater-than (>) brackets and are separated by a space. Most attributes have values, such as size or color. To add a value to an attribute, include an equals sign (=) between the attribute and its value.

Advertisement

Blue text, for example, is created with the tag .

When the value is more than one word or number, it must be contained within quotation marks. If you are uncertain whether a value needs quotations marks, include them. Adding them won’t affect your HTML code, but leaving them out can.

More than one attribute can modify a tag, offering a combination of design options. The attributes, which should be separated by a single space, can be listed in any order so that is the same as . Both call for regular-size blue type in the Arial face.

To end an attribute--or a combination of attributes--include only the correlating end tag. You don’t need to include the attribute. For instance, you can change the blue font back to the default black with the tag .

In choosing font faces and colors, use those that are common to most Web browsers. If a browser does not recognize your selection, it might replace your choice with a font or color it does recognize, altering your desired outcome. In some cases, it might not display the content at all. Check out https://www.hwg.org for a list of common colors and fonts as well as other tips on smart design.

It is best to add your desired tags after you compose the site’s content. As your HTML code becomes more complex, you will begin to create nested tags, or tags that are included within other active tags. Here’s an example:

Learning HTML is fun!

Don’t you agree?

In this case, the center, font and italics tags are nested tags of the body tag. The font and italics tags also are nested tags of the center tag, and the italics tag is a nested tag of the font tag. Nested tags must end in the reverse order of their appearance--with the last start tag ending first. Although some browsers allow you to violate this rule, others will catch the error and your content will not display correctly.

Advertisement

*

Christine Frey is a freelance writer.

(BEGIN TEXT OF INFOBOX / INFOGRAPHIC)

Building Your Own Web Page

1. Picking the right provider

2. Understanding HTML

Today: More HTML

4. Adding links, photos and graphics

5. Creating forms

6. Using tables

7. Navigating with frames

8. Getting yourself found

9. Making money on a personal site

10. Working with browser compatibility

Read installments online at https://www.latimes.com/webbuild

Advertisement