Tutorial #2: Text Formatting
The funny thing about web browsers is that they will only do what someone has told them to do. If you tell it nothing, it will only display the text, one word after another, without any special effects. But if you give it specific instructions, it will render the text in ways that will make the text easier to read.
In fact, with just a little bit of text formatting, you can make your text look a lot like that which you would prepare in an ordinary word processor. It just takes a little bit of coding in HTML.
As you recall, the basic HTML skeleton is required for all HTML documents. Thus, you should begin your work with that template.
The three easiest text formatting tricks are to make your text bold, italicized, or underlined. The finished product looks like this:
This text is bold.
The coding is actually quite simple for any given text to which you would like to apply these effects:
<b>This text is bold.</b>
Of course, it is possible to apply complex effects to text, such as:
This text is bold and italicized, while this text is bold and underlined and this text has all three effects.
However, in order for this to work correctly, you must "nest" your tags correctly. HTML practices the "LIFO" technique that you learned in Accounting class, which means "last in, first out." In other words, you can use as many tags as you want to achieve a desired effect, but you must close the tags in the opposite order that they were opened. Furthermore, great care must be used when structuring the text and formatting so that no tags overlap another, or else strange things can happen.
The compound effects illustrated above would be coded as follows:
<b><i>This text is bold and italicized</i></b>, while <b><u>this text is bold and underlined</u></b> and <b><i><u>this text has all three effects</u></i></b>.
As it turns out, there are a couple of redundant tags in HTML. The <em> tag does the same thing as the <i> tag, while the <strong> tag does the same thing as the <b> tag. In both regards, a closing tag must be used, and proper nesting must be observed. You cannot, however, apply them in doubles or triples with the hope of achieving extra boldness, italics, etc.
Headers
Headers are used to help break up text. They can be used as the header for a document, or for sub-headers within a document. They default to bold face, and automatically have one blank line before and after them for the added effect of white space. There are six different header sizes, as shown below:
Their coding is as follows:
<h1>This is header size #1</h1>
Header tags can also have an alignment attributes:
Sizing
The next tutorial will introduce the concept of font formatting. But before we get to that, there are a couple of easy text formatting tricks that can be used to increased or reduce font size. Notice the differences below:
This is smaller text. This is normal text. This is bigger text. This is even bigger text.
The <small> tag (and its corresponding closing tag) will make text one size smaller tha the adjacent text. The <big> tag (and its corresponding closing tag) will make text one size larger than the adjacent text. Finally, if you use two sets of big or small tags, you can increase or reduce sizing to the magnitude of two.
These tags are seldom used, though, out of deference for font tags and the sizing options available in them.
Horizontal Rules
There are occasions in which you may wish to have a horizontal divider to help break up text on your page. While it is easy to over-use such devices (and hence look like a rank amateur), the careful use of these can be effective.
A basic horzontal rule looks like this:
By default, it spreads across the entire page, is 2 pixels high, and has a shadowing effect (to make it look 3-D). (Another default is that it centers on the page, but this is not visible if the rule spans the entire page.) The basic code for this is pretty simple:
<hr>
But suppose you would like a rule that is only a fixed pixel length, or a certain percentage of the page, is five pixels high, and appears in red and has no shadow? This is how it would look:
The coding is as follows. Note that it makes no difference the order in which these attributes are specified within the <hr> tag:
<hr align=left size=5 width=50% noshadow color=red>
Special Characters
Without going into the complexities of the many special characters that are commonly used in commerce and mathematics, or in other languages, here are a few characters you will find useful:
22---an exponent (superscript), coded as 2<sup>2</sup>
|