Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Advanced Text Formatting

In addition to creating bold and italicized text, you can also use HTML to control the appearance in more advanced ways. Included is the ability to display text in color, control the font, and set the text size.

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p><font size="3">This text is font size 3.</font></p>
</body>
</html>

Font presentation is controlled using the font tag, <font></font>. In the example on the right, font size is specified at 3. You can see what the it looks like by clicking here.

Font sizes are specified 1 through 7 with 1 as the smallest and 7 the largest. Size 3 is the default size. That is the size that is "normal" for most browsers under most circumstances.

 

 

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p><font size="6">This text is font size 6.</font></p>
</body>

To see what the page looks like using font size 6 click here. The example uses the code illustrated on the right.

You can experiment with the font sizes by changing the value using 1 through 7. The list below shows what these sizes look like.

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

 

According to the rules for HTML, these font sizes should override the settings that are set in a visitor's browser. In other words, if a visitor to your Web page has customized his or her font sizes in the browser, the use of the size attribute in the font tag will "take over" and the text should appear as you, the page builder, desire.

 

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p><font size="+2">This text is font size 6.</font></p>
</body>
</html>

It is also possible to specify font sizes relative to the settings in the browser. This is done using font size attributes that are placed with "+" or "-". An example is on the right where the size +2 is used. This means that the font should be displayed 2 sizes larger than the browser's default size. You and see what this will look like by clicking here.

So, what is a "+" or a "-" exactly? You can't tell! Because each browser could have any font size set for default, it is not possible to determine exactly what the text will look like because it can vary from machine to machine. The examples below will give you some idea, but to see how the appearance you may wish to visit this page later with another browser setting of another machine.

This is font size +1

This is font size +2

This is font size +3

This is font size +4

This is font size +5

This is font size +6

This is font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -6

It is possible that several of the above examples look identical. This is because some browsers will limit just how large or small font can be displayed. There is really no point in creating text that is unreadable, which can happen if it is too big or too tiny.

Another way to format text is by using color. Color can be specified by using names, such as red, blue, or ForestGreen. They can also be defined using their RGB (Red, Green, Blue) values. The most common way for colors to be specified on the Web is by their hexadecimal values. Examples of each method are below.

<font color="red">This is red specified as a color name.</font>

 

<font color="255,0,0">This is red specified as an RGB value.</font>

 

<font color="#ff0000">This is red specified in hexadecimal.</font>

 

Color and the Web

Color plays an important part of Web page design. It can be used for decorative purposes, such as to make something look stylish or flashy, or it can be used to indicate an action or function. For instance, the links on these pages are blue, and that makes them easier to identify.

Color can be applied to text, backgrounds, and certain kinds of borders. It is important to understand both the benefits and pitfalls that color can present. While a Web page with a black background and gray letters may look sophisticated, it will be difficult to read.

There are several excellent tools on the Web to help you obtain a better understanding of color. Some links are: