5. Doing it with Style.

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

HTML Style Tags

HTML offers numerous tags for adding styles to your text. Now remember to be judicious and consistent in the use of styles; too much can make the text awkward to read...

Style tags
HTML	Result
<b>This is Bold...</b> <i>This is Italic...</i> <tt>This is Typewriter...</tt>	This is Bold... This is Italic... This is Typewriter...

HTML	Result
<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
Note how you can combine the style tags together as long as they are correctly nested, the italic tags are both within the bold tags. Note also, that the order does not matter in which they are used.
HTML	Result
blah blah blah <h2><i>New</i> and <tt>Improved!</tt></h2> blah blah blah	blah blah blah New and Improved! blah blah blah
Furthermore, you can also add style to the text that appears in heading <hN> 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.

Entering Styled Text in Your HTML Document

1. Re-open your workspace (if not already opened).
2. Go to the text editor window.
3. Find the words "Eazy Space Tours" in the first sentence of the Introduction we created. We are going to make these words bold to highlight them.
4. Insert the tags to make this word appear as bold text:

      <b>Eazy Space Tours<b>

5. Now we want to 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 long been a part of Venus's history
      long before humans ever landed. Compare the history 
      of human beings, a few million years in the making, 
      to that of the planet Venus, over four 
      <i><b>billion</b></i> years 
      in the making.
     </p>

6. Finally, we are going to use the typewriter, tag to indicate a special word. Under the Venus heading, enter the following:

     <p>
      The study of volcanoes, or <tt>Vulcanology</tt>,
      has been a major part of the tours and the start 
      of colonization of the planet Venus for the past 10
      years.
     </p>

7. Save in the text editor and Reload it in your web browser.

CHECK YOUR WORK
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the Doing it with Style section of this lesson. After viewing the sample, you can close the window that opened.

More Information
Here is two more styles that you can use to dress up your text and may work in your web browser.

NESTING
I must stress this one important fact in HTML (one of those rules); nesting your tags correctly is important to practice. So what is nesting you ask? Well look here at these examples:

Correct...
			
<b><i>Your Text in here </i></b>
<h2><i>Your Heading here</i></h2>

In correct...

<b><i>Your Text in here </b></i>
<h2><i>Your Heading here</h2></i>		
			

Notice that the correct way of nesting your tags is that the last tag you opened is the first tag to be closed. This is important as standards move more towards XHTML standards. Even if you have 6 tags in a row to get the effect you like you must still close the last tag opened first and the last tag to close is the first tag you opened. And it also makes your code easier to read.

Practice
Use the <b> .... </b>, the <i> .... </i>, and the <tt> .... </tt> tags to create styles to your paragraphs and heading inside of your own document.

Top of page | Previous Lesson| Lessons Index | Next Lesson