Doing it with Style

Just like a word processor, HTML can instruct a WWW browser to display certain portions of text in Italic or Bold or a combination.

Objectives

After this lesson, you will be able to:

Identify the HTML tags for the text styles: bold, italic, and typewriter (mono-spaced).
Enter text in your HTML document in these different text styles and view the changes within your WWW browser.

Lesson

HTML Style Tags

HTML offers several tags for text style attributes. Just remember to be judicous and consistent in the use of styles; too many can make the text uncomfortable to read...

Here are the basic tags for stylized text:

Make this text Bold...: ...And it looks like this
Make this text Italic...: ...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:

Make this text Bold and Italic....: ...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>New 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.

Re-open your workspace (if not already opened).
Return to your HTML document, "Volc.html", in the text editor.
Find the word "volcano" in the first sentence of the Introduction. We are going to make this bold to highlight an important word.
Insert the tags to make this word appear as bold text:
```
 volcano
```

Now we will modify the second paragraph with the underline tag to emphasize a word. Enter b and i tags around the word billion so this 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.

Finally, we will use the typewriter tag. Under the Volcano Terminology heading, enter the following:


          The study of volcanoes, or <tt>Volcanology</tt>,
          includes many odd terms.

Save in the text editor and Reload in your WWW browser.

Check Your Work

Look at an sample that shows these changes. Its is important with the style tags to properly terminate the tag with proper </> tag. Otherwise, all succeeding text will inherit this text style.

Review Topics

What are HTML style tags?
What are the different tags used for different styles of text?
What steps did you use in entering styled text into your HTML document?
Extra Credit*- How can these styles be useful in creating a WWW document or lesson?

Independent Practice

Try using the style tags for bold, italic, and typewriter to the text of your own WWW document. See if you can successfully combine styles

Coming Next....

Presenting information in lists.

| Lesson Index | previous lesson "Paragraphs" | next lesson "Lists" |

Writing HTML Lesson 5: Doing it with Style

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