Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

5. Doing it with Style

Just like a word processor, HTML can tell a web browser to display certain portions of text in Italic or Bold Style or even a combination.

Objectives

After this lesson, you will be able to:

Lesson

HTML Style Tags

HTML offers several tags for adding style to your text. Just remember to be judicious and consistent in the use of styles; too much can make the text uncomfortable to read...

Style tags
HTML Result 

<b>This is Bold...</b>  

<i>This is Italic...</i>
 
<tt>This is Typewriter...</tt>
sample web page
This is Bold

This is Italic

This is Typewriter

Note how you can combine the style tags as long as they are correctly nested, the italic tags are both within the bold tags. Note also, that the order does not matter.
HTML Result 

<i><b>This is Bold AND
Italic</b></i>

<b><i>And So is This</i></b>
sample web page
This is Bold AND Italic

And So is This

Furthermore, you can also add style to the text that appears in heading tags. Note how the different style tags are opened and closed around the words they style and how the heading tags surround the whole text for the heading.
HTML Result 
blah blah blah

<h2><i>New</i> and 
<tt>Improved!</tt></h2>

blah blah blah
sample web page
blah blah blah

New and Improved!

blah blah blah

Entering Styled Text in Your HTML Document

Note: If you do not have the working document from the previous lesson, download a copy now.

Follow these steps to apply style tags to your HTML document.

  1. Re-open your workspace (if not already opened).
  2. Return to your HTML document, volc.html, in the text editor.
  3. Find the word "volcano" in the first sentence of the Introduction. We are going to make this bold to highlight an important word.
  4. Insert the tags to make this word appear as bold text: 
             <b>volcano</b>
  5. Now we will modify the second paragraph with the bold and italic tags to emphasize a word. Enter <b>...</b> and <i>...</i> tags around the word billion so this section looks like: 
              <p>
          Volcanoes have been a part of earth's history long 
          before humans. Compare the history of human beings, 
          a few million years in the making, to that of the Earth, 
          over four <b><i>billion</i></b> years in the making.
  6. Finally, we will use the typewriter, tag to indicate a special word. Under the Volcano Terminology heading, enter the following: 
              The study of volcanoes, or <tt>Volcanology</tt>,
          includes many odd terms.
  7. Save in the text editor and Reload in your web browser.

Check Your Work

Look at an example that shows these changes. It is important when using style tags to properly terminate the tag(s) with the proper </> tag. Otherwise, all succeeding text will inherit this text style. It can look bizarre.

Review Topics

  1. What are HTML style tags?
  2. What are the different tags used for different styles of text?
  3. What steps did you use in entering styled text into your HTML document?
  4. *Extra Credit: How can these styles be useful in creating a web page or lesson?

Independent Practice

Try using the style tags for bold, italic, and typewriter to the text of your own web page. See if you can successfully combine styles... that are pleasing to read.

Coming Next....

How to put together lists of items, in both numbered and bulleted fashion.

GO TO.... | Lesson Index | previous: "Paragraphs" | next: "Lists" |

Writing HTML: Lesson 5: Doing it with Style
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut5.html