2. Style Tags

HTML uses a syntax composed of letters or words inside "less than" and "greater than" symbols (<. . .>) called "tags." For example <B> is the tag which tells the computer to make all text that comes after this symbol BOLD.

That's nice, but if you don't want to have everything after the <B> bold, you have to have a way to stop it. HTML provides a "stop sign" by using the "/" inside the <> and before the symbol. That is, by using the symbol </B> you are telling HTML that the "bold" sytle should stop right here.

Suppose the following sentence with the BOLD tags is put into an HTML file.

When it is viewed with a browser it will look like this.

Since you are viewing this in a browser, you can probably guess that all I did was copy the sentence with the BOLD tags into the file you are reading, and the browser interpreted them making University of Redlands and Feast of Lights bold. If you guessed that, then you were right, but there is another mystery. Think about what you see in the <B> code example agove, and later in this lesson, I will reveal the secret.

The most common of the Style tags are those for BOLD, ITALIC, UNDERLINE, BLINK, SUBSCRIPT, and SUPERSCRIPT. There are others, and I will give you a list of those later.

You have seen how the syntax for BOLD works. The entire list of syntaxes for the tags for the styles above are:

Combining them all into a single sentence would look something like this:

As interpreted by the bowser it looks this way.

Of course you can make something bold, underlined, blinking by just compounding the style tags as below.

It all depends of the kind of emphasis you wish to give a particular piece of text.

It doesn't really matter what order you put the style tags in, since they only work on the text, not each other. Good form, however, demands that the closing tags be in reverse order of the opening ones. That is called "nesting" the tags and makes them easier to find for editing.

Also, you have probably noticed that the tags have all been in upper case letters. HTML doesn't care about the case of the letters in a tag. At least it isn't supposed to. In later lessons you will see a couple of apparent exceptions. However, if you always do them in upper case, they are easier to spot in the code when you are doing editing.

By now you are probably pretty sick of seeing those things blinking. It is good to use BLINKING very judiciously. Sometimes when you have added something new to a page, and you wish to make sure people notice, you use it. Other than that, it is just an irritant.

I promised you some other style tags, so here they are with what they do.

Earlier I spoke of a question you should be asking yourself about what you saw in the examples of code. That question is, "How did I get the <B> . . . </B> in the example to be not "interpreted" when the HTML file was displayed in the browser?

Clearly there are a number of symbols reserved for the syntax of HTML or are not on the standard computer keyboard. Since there are times they must be used, there is a set of special symbols for them that is recognized by HTML. Thes are not the letter or symbol themselves. They are "Special Characters" and are of the form "&xxx;"(the CHARACTER notation) or "&#xxx;" (the DECIMAL notation) where the xxx in the CHARACTER notation is some abbreviation of the symbol and in the DECIMAL notation, the xxx is the ascii number of the symbol. In order to put > in an html page you type &gt; (CHARACTER notation) or &#60; (DECIMAL notation) and for < you type &lt; or &#;62;. You have probably surmised that "gt" stands for "greater than" and "lt" stands for "less than for these two symbols."

A complete list of the characters and their ascii numbers may be found at:

You can't go directly to the page with the "special character" codes on it. There is a "dropdown" menu at the top of the page which has =====Tags===== on it. Down near the bottom of that menu is the choice "Character set." Select that, and the page you need will appear. Unfortunately, the CHARACTER notations are not complete, so you will have to rely on the ascii number (DECIMAL notation) for some symbols.

Exercises 2

1. The quick, brown fox jumped over a lazy dog's back has the adjectives in the sentence in bold and the articles in italic.

2. Ernest Hemingway wrote many books, among which are The Sun Also Rises and Farewell to Arms. He also published many short stories in the New Yorker and Life.

3. Mother was very agitated. She asked, "Why would you do such a thing? Don't you know that Turkeys can't ^fly?"

4. Niña in Spanish, eté in French and Fahrvergnügen in German mean "young girl," "summer," and "driving enjoyment" respectively. Each contains a letter with an accent common in those languages.

(You will need to look up and use the HTML code for "special characters" in order to use the special or accented letters.)