Document Actions
Web Page Creation: Part 2, Formatting Text
Learn about structuring text using HTML tags and attributes. This is the second of seven technical documents about how to create a Web page.
Changing the Way Text Looks
Most text formatting is performed using the <FONT></FONT> tag. The font tag attributes are as follows:
Face
Any font face can be specified to appear on your Web page, given that the font is installed on your computer. This font must also be installed on the computer of anyone who will be viewing your Web page. Otherwise, the font will not be displayed when they view your page. Some commonly used fonts are Times New Roman, Arial, and Helvetica.
Size
Font size can be specified in absolute terms or relative terms.
- To specify font sizes in absolute terms, the possible values are 1 (smallest size) to 7 (largest size).
- To specify font sizes in relative terms, the possible values are -3 (smallest size), -2, -1, +-0, +1, +2, and +3 (largest size).
- Note that a size 1 in absolute terms equals -3 in relative terms, 2 in absolute equals -2 in relative, 3 in absolute is -1 in relative, 4 in absolute is +-0 in relative, and so on.
Color
Colors are most easily referred to by name (such as <font color="yellow">).
Other Tags
In addition to changing font faces, sizes, and colors, you can center, italicize, bold, and underline text using three additional tags. None of these tags have attributes.
| Tag | Description |
|---|---|
| <CENTER></CENTER> | Centers text on a page |
| <B></B> | Produces bold text |
| <I></I> | Produces italicized text |
| <U></U> | Produces underlined text |
Example
You want to have a heading for your Web page that says “Welcome to my Web page,” in red Arial font. You want your heading to have centered, bold text. You also want it to be larger than the rest of the text on your page. Figure 1 shows an example of the HTML code you could use to make this happen:
Figure 1. Source code #1
Note that if a tag is nested within a tag, the inner tag is closed before the outer tag (e.g., </B> comes before </FONT>, and </FONT> comes before </CENTER>). Figure 2 shows what the document looks like when viewed with a Web browser:
Figure 2. Source code #1 displayed on a Web browser
The heading is centered in the page in red, bold text, and is larger than the other text on the page.
Positioning Text
As mentioned above, one of the possible ways to position text in HTML is by using the <CENTER></CENTER> tag. You can also use the <P> and <BR> tags to position text on a page.
<P>
This tag represents a paragraph. The attribute that is used most with this tag is the ALIGN attribute.
| Attribute | Description |
|---|---|
| ALIGN="RIGHT" | Aligns the paragraph along the right side. |
| ALIGN="LEFT" | Aligns the paragraph along the left side. |
| ALIGN="CENTER" | Centers the paragraph in the browser window. |
| ALIGN="JUSTIFY" | Aligns the paragraph evenly on the right and left sides. |
Closing the <P> tag results in a single space being displayed when your HTML code is interpreted by a Web browser.
<BR>
This tag is represents a line break. It is used to bring text down to the next available line. Unlike the other tags you have seen, this one does not need to be closed. Figure 3 shows an example of these two tags in action.
Figure 4 shows how the HTML code appears when viewed in a Web browser:
Figure 4. Source code #2 displayed on a Web browser
The odd text alignment is a product of the illustrative use of the ALIGN attribute in the source code. Text automatically wraps at the end of a line in your browser window.
If you would like to learn more about HTML, look at the other handouts in this series:
- Part 1, HTML Basics
- Part 2, Formatting Text
- Part 3, HTML and Images
- Part 4, Using HTML to Create Lists
- Part 5, Creating Links Using HTML
- Part 6, HTML and Tables
- Part 7, Web Directories and FTP Procedures
For More Help
If you need more assistance, please feel free to ask the CIS Support Staff in any Open Access Lab, or call Help Desk Central at (979) 845-8300.