Writing HTML | About | FAQ | Alumni | Tags | Index | 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 text style attributes. Just remember to be judicious and consistent in the use of styles; too many can make the text uncomfortable to read...

Here are the basic tags for stylized text:

<b>Make this text Bold...</b>
...And it looks like this

<i>Make this text Italic...</i>
...And it looks like this...

<tt>Make this text typewriter...</tt>
...And it looks like this

Here is an example of how to combine style tags:

<b><i>Make this text Bold and Italic....</i></b>
...And it looks like this

Note how the combined tags are correctly nested, the italic tags are both within the bold tags.

Furthermore, you can also add style to the text that appears in headings:

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

New and Improved!

Note how the different style tags are opened and closed around the words they style and how the heading tags surround the whole heading.

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.htm", 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 the style tags to properly terminate the tag(s) with 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

Coming Next....

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

GO TO.... | Lesson Index | back: "Paragraphs" | next: "Lists" |
Writing HTML Lesson 5: Doing it with Style
©1995 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

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