Mastering HTML Text Formatting
Here I provide you an overview of all the tags I consider integral to text processing with the HTML standard. Since you've read a lot about XHTML at this point, do take the following with a grain of sand and realize the tags have been around for over ten years and in some cases need to be updated. Still, you can use all these tags in this class with me whenever you want. They represent the very basic tags that a poor classroom in Senegal could use to format some ideas the students wanted to share with us big fat cats in the industrialized world. I am sure those kids have some fascinating thoughts to share with us and the Web continues to bring down the cost of doing so. We don't want to keep them silent by requiring some expensive or computationally intense software, eh? I've been watching a few documentaries on kids in Africa in the orphanages. They seem so happy to greet each new day. They dance and sing (or at least for the camera). Keep that happy thought in your mind if the following gets a little tedious.
Logical HTML styles indicate the way text is used. For example is it used for emphasis, citation, or definition?
The following HTML tags are examples of logical style formatting (each requires a closing tag to properly end the logical element):
HTML examples of each of the logical text styling above are provided in a bulleted list format:
In comparison, physical style tags indicate exactly how text is to formatted. For example boldfacing or underline.
The following HTML tags are examples (all require end tags to turn off the formatting effect):
Examples of these tag in use:
Fractions can be made up with Sub/Superscripts. For example:
You can mix and match formatting text tags by nesting them inside of each other. Nesting means that the closing tags should appear in the reverse order of the opening tags. For example:
This text is <u><b><i>italicized boldfaced and underlined</i></b></u>!
This text is italicized boldfaced and underlined!
Certain characters should be referred to in a special way so as not to confuse the Web browser that expects their use for other purposes. Use appropriate character entities to implement these special characters. For example:
There are two simple tags that can be used to control the layout of your page.
Neither has a closing tag nor requires any body text. Their use is fairly straightforward.
Putting the above together we can create so simple effects. For Example:
The HTML code to achieve this is relatively straightforward:
<HR WIDTH=40% ALIGN=CENTER> <HR WIDTH=30% ALIGN=CENTER> <HR WIDTH=20% ALIGN=CENTER> <HR WIDTH=10% ALIGN=CENTER>
Fonts and font sizes are now more typically done with style attributes as shown in this weeks video. But, I still use the font tag when I encounter a long page that is already using them. No reason to have a page with mixed approaches that has both local style attributes and HTML tags.
Example uses of font tag:
<P><font face="Futura,Helvetica">Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters. </font></P>
looks like this:
Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters.
<P>Normal font size. <font size=5>Larger font size.</font></P>
looks like this:
Normal font size. Larger font size.
<font size=1>font size 1</font><br> <font size=2>font size 2</font><br> <font size=3>font size 3</font><br> <font size=4>font size 4</font><br> <font size=5>font size 5</font><br> <font size=6>font size 6</font><br> <font size=7>font size 7</font><br>
looks like this:
font size 1