Text Formatting

Introduction

As a professional who deals with web files (either as a webmaster or a Help programmer), you will consider an HTML file on two fronts: what the browser "sees" and what the viewers see (that's what the browser displays). This means, from your standpoint, this kind of file is set in two versions. What the browser "sees" or reads is made of special instructions you give to the browser. The browser interprets your instructions and displays the result to the best of its interpretation.

Although the HTML language is regulated and monitored by an independent organization (www.w3c.org), not all browsers read everything the same way. We will cover as many instructions as necessary for our HTML Help lessons and as read by Microsoft Internet Explorer.

An instruction you give to the browser is called a tag. This means, an HTML file is made of tags, and there are a lot of them. Since we have already mentioned that an HTML file is considered as two versions of the same files (what the browser sees and what the file viewers see), and both versions can be written in the same language (in this case English), you need to let the browser know what and where is a tag, and what and where is not a tag. Therefore you enclose a tag between a < sign and a > sign. For example, a tag could be written <house>; when the browser sees <house>, it treats it as a tag and it will not display it. It will look into its own dictionary and find out what the <house> tag mean. If it can interpret it, then it displays it accordingly, if it can't, then it follows other instructions; for example, it could skip it, or display it "as is". As a result, some browsers cannot read some tags while others can…

You have two choices with regard to the text you want to display on the file: you can type it "as is" or enclose it between specific tags. For example, if you want to display the words Microsoft Internet Explorer, you can just type them like that and they will be displayed fine. But if you want to display them in a particular way, for example as Microsoft Internet Explorer (notice that Microsoft is underlined and Internet is in bold characters), you need to give special instructions to the browser. In this case, all three words share a certain common instruction, the first has its own instructions, and so does the second. To make the browser display a word or group of words in a certain way, you need to tell the browser where the word is or where the group of words are, and to give a (or some) particular instruction(s), you surround the word or group of words with appropriate tags. To specify where the instruction, which means tag starts, you type it as we have already learned, for example <house>. To specify where the instruction, which means tag, ends, you include the same tag but to show that this is the end of the instruction, you add a forward slash "/" between the < and the tag name. In this case that would be </house>. Everything between <house> and </house> will be treated according to the browser's interpretation of the <house> tag.

Almost all tags should have a beginning and closing in your file(s): don't forget it. We will eventually find out how to open and close a tag, and which tags don't need to be closed.

The tags you include in your files are not case sensitive. This means <HTML>, <HTml>, and <html> are interpreted in the same way. Unless stated otherwise, I like to keep my tags in lowercase, as in <html>

Whenever the browser finds text in your file, it tries to know how you want your text to display. You are allowed to change a font's style, its color, or its name.

 

Practical Learning: Text Formatting

  1. Open your text editor as we learned in the previous lesson and type the following:
     

    <html>
    <head>
    <title>Grier Summer Camp</title>
    </head>
    <body>

    </body>
    </html>

  2. Save the file as exo2.htm and preview it in the browser then return to your text editor

  3. Everything you want to display on a web page is typed between the <body> and the </body> tags.
    For example, in the empty line between <body> and </body>, without pressing Enter, type: 
    Located in the heart of Rockville, Maryland, the Grier Summer Camp is an attractive tourist setting aimed at entertaining and supporting youth activities during their summer vacation. Our youth programs and activities are as intense and stimulating as E=mc2 yet as lively as H2O.

  4. Press Enter

  5. You can make a character, a word or a group of words display following a certain style, for example italic, bold, or underline.
    To display a character, a word, or a group of words in italic, include it or them between the <i> and the </i> tags.
    To see an example, surround the word Rockville as follows: <i>Rockville</i>

  6. Save the file and preview it in the browser.
    If you are using Internet Explorer, on its main menu, click View -> Refresh. Notice how Rockville displays now
     

  7. Return to your text editor

  8. To use the underline style, you can include the desired character, word or group of words between the <u> and the </u> tags.

    To see an example, change the Maryland word to look as follows:

    <u>Maryland</u>

  9. Save the file and preview it.

  10. To use the bold style, you include the desired character, words or group of words between the <b> and the </b> tags. The <strong> and the </strong> tags can also be used for the bold style. The <big> and </big> tags can be used to display text in big font. On the other hand, the <small> and </small> tags are used to display small characters.
    To see an example, on the long paragraph, change the following words to look as follows: <b>Grier Summer Camp</b>

  11. Save the file and preview it.

    Notice that the company name now displays in bold characters.

  12. You can also combine styles to assign them to a character, a word, or a group of words. Simply type each desired tag at the intended beginning. There is no rule on the order of the tag, but although you can combine as many opening tags as you desire, you need to close them in reverse order. This means that, if you start with <u> and follow with <i> then type the word or group of words you want, in this case you would first close with </i> followed by <u>.
    To see an example, surround summer vacation as follows:
     

    <b><i>summer vacation</i></b>

  13. Save the file. Preview it in the browser. Return to your text editor.

  14. You can also strike through a text. To do that, use the <strike> and </strike> tags or the <s> and </s> tags.
    To see an example, make the following change:
     
    1st change: 

    <strike>heart</strike>

    2nd change: 

    <s>is an</s>

  15. Save the file. Preview it in the browser. Return to your text editor.

  16. Some science or other documents include characters that need to elevate or lower themselves in order to display some formula. The <sub> and </sub> tags are used to display characters as subscript text. On the other hand, the <sup> and </sup> tags are used to display characters in superscript text.
    To see an example, make the changes in the following section: as 
     

    E=mc<sup>2</sup> yet as lively as H<sub>2</sub>O.

  17. Save the file. Preview it in the browser:
     

  18. Return to your text editor that you can close at this time.


    Here are the styles we have learned so far:

Style Tag Example Result
Bold <b></b> <b>Project</b> Project
Italic  <i></i> <i>Painting</i>   Painting
Underline  <u></u>  <u>Planet</u>  Planet
Strikeout  <strike></strike>  <strike>Peach></strike> Peach
Superscript  <sup></sup> 3x<sup>2</sup> -x<sup>2n+1</sup> 3x2 -x2n+1
Subscript <sub></sub> K<sub>2</sub> = a<sub>2</sub>x<sub>n-1</sub> K2 = a2xn-1

 
Here are a few combinations you can use for various styles

 
Example  Result
<i><b>Web Design</b></i> Web Design
<u><b>Internet Explorer</b></u> Internet Explorer
<b><u><i>Best Seller</i></u></b> Best Seller
I = I<sub>0</sub>e<sup>-kd</sup> I = I0e-kb
 

Previous Copyright © 2000-2007 FunctionX, Inc. Next