And Finally HTML Formatting…

HTML Formatting

In this lesson of the HTML tutorial, you will learn… 

  1. To use HTML formatting tags.
  2. The purpose of the <font> tag.
  3. To apply colors to a page.
  4. To align text.

Please note that in HTML 4.0 almost all of the tags and attributes covered in this lesson have been deprecated, meaning that, although browsers should continue to support them, developers should stop using them in favor of CSS.  The World Wide Web Consortium (W3C), along with many others, recommend using HTML to structure your web pages and to use Cascading Style Sheets (CSS) to apply formatting. For the most part, we agree with that recommendation, especially as time goes on and browser support for CSS is becoming more ubiquitous.

We strongly recommend that you avoid using the concepts shown in this lesson in favor of CSS. We include it here only to show how HTML used to be written as you are likely to come across many of these formatting techniques in legacy pages.

However, there are several reasons to understand how to apply formatting the traditional way (i.e, with HTML tags and attributes).

  1. There are many many legacy pages that need to be maintained that use HTML for formatting purposes.
  2. Many HTML conversion tools and WYSIWIG HTML editors make use of HTML’s formatting tags and attributes.
  3. Older browsers do not support or poorly support Cascading Style Sheets.

Simple Formatting Tags

Tag Description
<b><b> Bold
<i></i> Italics
<u></u> Underline
<s></s> Strikethrough

The tags in the table above are relatively straight forward. The picture below shows how they affect text.

The <font> Tag

The <font> tag is used for controlling the size, color, and family (face) of text. The table below shows the main attributes of the <font> tag.

Attribute Values
size number, +number, -number
color hexadecimal value or color value
face font name or list of font names

Here is a simple example:

<font size="2" color="red" face="Impact">Warning!</font>

size

Font sizes range from 1 to 7. The default font size in most browsers is 3.

<font size="2">Hello, world!</font>
<font size="+1">How are you, world!</font>
<font size="-2">Goodbye, world!</font>

See HTMLFormatting/Demos/FontSize.html for a more examples.

color

In HTML pages, color can be defined using color names or hexadecimal codes. Different browsers support different sets of color names.

Hexadecimal codes specify the amount of red, green and blue used to make up the color. The values range from 00 (none) to ff (all). The hexadecimal code format is #rrggbb. For example, #ff00ff translates to all of red, none of green, and all of blue, resulting in purple.

<font color="red">Warning!</font>
<font color="#ff0000">Warning!</font>

See HTMLFormatting/Demos/FontColor.html for a list of color names matched with their hexadecimal equivalents.

face

Unlike most attributes, the face attribute can take a list of values. These values are the names of the fonts that should be used to display the content contained by the <font> tag. If the first font listed in the value list is available on the user’s machine, then that font is used; otherwise, if the next font listed is available, that one is used; and so on.

Syntax
<font face="value1,value2,value3">text</font>
<font face="Arial, Helvetica, sans-serif">Hello!</font>
<font face="Times New Roman, Times, serif">Hi!</font>
<font face="Courier New, Courier, mono">Hey there!</font>

See HTMLFormatting/Demos/FontFace.html to see how some fonts are displayed in a Web page.

<basefont>

The <basefont> tag is used to set a default font size, color and face for the page. The tag usually appears within the <head>, though this is not required by all browsers. The syntax is as follows:

<basefont size="5" color="darkblue" face="Comic Sans MS">

Exercise: Adding Formatting to the Page

Duration: 15 to 25 minutes.

In this exercise, you will add formatting to index.html. The end result should appear like this:

  1. Open HTMLFormatting/Exercises/index.html for editing.
  2. Write code to make the page look like the one in the screenshot above.
    • The default font size should be 2.
    • The default font face should be Arial.
    • The text on the very first line should be blue.
  3. Save your work and open your new page in a browser to test it.

Applying Colors to the Page

Users can set default colors using browser preferences. The following table shows the colors that are initially set for Internet Explorer 6 and Mozilla (e.g., Netscape 6+ and Firefox).

Color Internet Explorer Mozilla
Background System Color white
Text System Color black
Link blue blue
Visited Link purple purple
Active Link unchanged red

These properties can be overridden with attributes in the <body> tag. The table below shows the attributes that correspond to the properties above.

Property Attribute
Background bgcolor
Text text
Link link
Visited Link vlink
Active Link alink
<body bgcolor="black" text="white" link="red"
  vlink="green" alink="orange">

See HTMLFormatting/Demos/BodyAttributes.html to see these attributes at work.

Aligning Text

The <center> Tag

The <center> tag is used to center lines of text, paragraphs, tables, images, forms, etc.

<center>
<p>This text is centered.</p>
<p>So is this text.</p>
</center>
<p>This text is not.</p>

The align Attribute

The align attribute is used to align the content of an element. It can be applied to many tags, including heading tags (e.g, <h1>) and <p>, <div>, <table>, <tr>, <td>, <td>, and <hr> tags. It has been deprecated for all uses except with the child elements of the <table> tag.

Possible values for the align attribute are left, right, center, and justify.

<p align="right">This text is aligned right.</p>

See HTMLFormatting/Demos/Alignment.html for more examples of alignment.

Exercise: Applying Color and Aligning Text

Duration: 15 to 25 minutes.

In this exercise, you will further modify index.html.

  1. Open HTMLFormatting/Exercises/index.html for editing.
  2. Center the navigation bar at the top.
  3. Change the width of the bottom horizontal rule to 50%.
    <hr width="50%">
  4. Align the bottom horizontal rule and the Copyright footer to the right.
  5. Modify the body tags so that…
    • The background color is #ffffcc.
    • The text color is #000066.
    • The link color is #003333.
    • The visited link color is #009999.
    • The active link color is #cc6600.
  6. Save your work and open your new page in a browser to test it.

HTML Formatting Conclusion

In this lesson of the HTML tutorial you have learned to apply formatting to HTML pages using HTML tags and attributes. Because there are so many existing pages that use HTML formatting in this way, it is useful to understand how these tags and attributes work. However, most of them have been deprecated in favor of CSS.

Unless you have a need to support browsers that do not support CSS, we recommend using CSS for formatting all future pages and web sites that you develop. However, there may not be a need to redo all of your existing pages, as the major browsers still support HTML formatting tags and attributes and probably will for quite some time.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s