[warebiz] :: HTML Made Simple :: Character Formatting

You are here --> [Character Formatting - How to Spice Up Text] --> Jump To Article

HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.

TABLE OF CONTENTS
***************************************************************************************
 --> Getting Started with HTML - First Things First
 --> Ground Zero - Where Do I Begin?
 --> HTML Tags - It's All About Tags
 --> [Character Formatting - How to Spice Up Text]
 --> HTML Lists - Looking Sharp and Organized
 --> Hyperlinks - Getting Out and Around
 --> HTML Tables - Far From Picnic Tables
 --> Displaying Images - Adding Life to Your Pages
 --> HTML Forms - Forming What?
 --> Image Mapping and Editing - Importance of Being Unique
 --> Frames - Structuring Static Document Layout

***************************************************************************************

Character Formatting - How to Spice Up Text

The style of document text in web pages plays a huge role in the overall design of web sites. HTML provides many tags for formatting text and specifying text characteristics. Physical type styles are designed to describe text characteristics, and block-level text tags are used for formatting purposes.

The following is a listing of popular physical type styles:

 ---> Specifies Bold Text
 ---> Specifies Italic Text
 ---> Specifies Underlined Text
 <tt></tt> ---> Specifies Fixed Width Font
 ---> Specifies Subscript Format
 ---> Specifies Superscript Format

For an example, consider the following HTML code segment:

 Using bold characteristic tag. 
 Using italic characteristic tag. 
 Using underline characteristic tag. 
 <tt>Using fixed width font characteristic tag.</tt> 
 Using subscript format. 
 Using superscript format. 

The above HTML code would produce the following results in a web browser:

Using bold characteristic tag.
Using italic characteristic tag.
Using underline characteristic tag.
Using fixed width font characteristic tag.
_{Using subscript format.}
^{Using superscript format.}

The following is a listing of popular block-level text tags:

 <div> </div> --> content division tag allowing for align="left | center | right" attribute
 --> paragraph tag
 <h(1-6)> </h(1-6)> ---> text heading tags

For an example, consider the following HTML code segment:

 <h3>Welcome!</h3>
 Beginning of document content.
 <div align="center">Ending of document content.</div>

The above HTML code would produce the following results in a web browser:

Welcome!

Beginning of document content.

Ending of document content.

Explicitly changing font types can also be accomplished through the capabilities of the tag. In most web browsers, the default font type for an HTML document is Times New Roman. The tag can be used with face="", size="", and color="#hexValue" attributes to change the font style of characters to be displayed by a web browser. face must equal the name of the font to be used, such as font="arial". size must equal the size of the characters in points (pt), such as size="2pt", or relative values. color must equal the hexadecimal color value of the characters, such as color="#000000" (black hexadecimal value). For an example, consider the following:

 4PT font size rendered in Arial Type

The above HTML code would produce the following results in a web browser:

4PT font size rendered in Arial Type

The following HTML code segment illustrates the size of possible point values when using the font tag:

 1 point arial type text
 2 point arial type text
 3 point arial type text
 4 point arial type text
 5 point arial type text
 6 point arial type text
 7 point arial type text

The above HTML code would produce the following results in a web browser:

1 point arial type text
2 point arial type text
3 point arial type text
4 point arial type text
5 point arial type text
6 point arial type text
7 point arial type text

IMPORTANT NOTE: In order for a specified font to override the default font displayed by a web browser, the visitor to a web page must have the specified font to be used installed on his/ her computer. For example, if choosing to use the font type ocra as the font type for text on a web page, then visitors to the page must have the ocra font installed on their computer; otherwise, they will see the default font type used by the browser.

It is also possible and very common to combine physical type styles with block-level tags. Care must be taken to ensure that all HTML syntax rules are followed.

When designing web pages, web authors constantly experiment in order to find a perfect look for a web site. Character formatting and text characteristics are very important in giving a web site that "perfect" visual look, but most of these tags have been left in the dark due to the popularity of a much more powerful coding scheme: CSS (cascading style sheets). A great place to learn more about CSS is at W3Schools <http://www.w3schools.com>

Move on to next topic: HTML Lists - Looking Sharp and Organized

Back to Top