Writing HTML | About | FAQ | Alumni | 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:

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 web browser.

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>	This is Bold
<i>This is Italic...</i>	This is Italic
<tt>This is Typewriter...</tt>	`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.
<i><b>This is Bold AND Italic</b></i> <b><i>And So is This</i></b>	This is Bold AND Italic *And So is This*
Furthermore, you can also add style to the text that appears in headings. Note how the different style tags are opened and closed around the words they style and how the heading tags surround the whole heading.
blah blah blah <h2><i>New</i> and <tt>Improved!</tt></h2> blah blah blah	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.

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 bold and italic tags to emphasize a word. Enter ... and ... 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.

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.
```
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

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 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 | back: "Paragraphs" | next: "Lists" |

Writing HTML Lesson 5: Doing it with Style

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

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