HTML Chapter 4                                                                 revised 2/1/08

 

Exercise 1

Using Heading Tags

Heading tags are predefined formatting tags. These are the

six heading tags.

<H1>, <H2>, <H3>,

<H4>, <H5>, <H6>

 

 

Heading tags, as well as other HTML tags, describe what the

text is, not how it will be displayed.  For example, you can

specify text as a heading or an address, but you cannot format

the text as being in 18-point Arial font.  You tell the browser

what the text is, and the browser decides how that text will be

displayed.

It’s important to remember that not all browsers display the                              Figure 1

same way, so you should keep your formatting simple.

 

There are a few guidelines to remember when using heading tags.  Headings are designed to help make your Web page easy to read. You should use the heading tags in order. For instance, it is not recommended that you use a level 3 heading tag after a level 1 heading tag. Instead, you should use the level 2 heading tag after the level 1 heading tag.

 

To use heading tags in your Web page, do the following steps:

  1. Open your text editor.
  2. Open chap 3 exer 2 lastnameinitial.html
  3. If you are using Notepad, turn on Word Wrap.
  4. Delete the text between the body tags.  You should have just a blank line separating the tags.
  5. Key the following:

 

<H1>Welcome to my web page.</H1>This page is currently under construction.

 

  1. Save the document as chap 4 exer 1 lastnameinitial.html.
  2. Open chap 4 exer 1 lastnameinitial.html in your browser.

 

Your web page should look like this:


 

Notice the text is on two separate lines, even though the text is on the same line in your text editor. The heading tag includes a line break tag (<BR>) at the beginning and end, but the <BR> tag does not display. A line break is the same thing as pressing the Enter key in a word processor.  When you use heading tags, a line break is inserted automatically before and after text.

 

If you wanted to make the document easier to read in your text editor, you could insert hard returns.

  1. In your text editor, position the insertion point between </H1> and “This.”
  2. Press Enter five times there should now be a lot of blank space between the two sentences.
  3. Save the document.
  4. Refresh the document in your browser.

 

Notice that your Web page still displays the same even though there are blank lines in your text editor. Blank lines in your text editor do not affect the way the Web page is displayed in the browser because you didn’t insert the HTML code for a blank line, <BR>. You can use as many blank lines in your text editor as necessary to make your document easier to read.

 

Practice using all the heading tags by doing the following steps:

  1. In your text editor, change the heading tags to <H2> and </H2>.
  2. Save the document.
  3. Refresh the Web page in your browser.
  4. Repeat the above steps for each of the remaining heading tags and notice the effect each new heading tag has on the Web page.
  5. Save the document after each change.  Do not change the file name.

 

Even though the heading tags made the text smaller, a line break is still inserted before and after the heading. As we continue, you will see that there are ways of emphasizing text without using the heading tags.

      17. Change the title of your web page to Chapter 4 Exercise 1.  View the final copy in your browser.

 

Exercise 2

Using Style Tags

 

Style tags change the way your text looks. Style tags are similar to heading tags. The table describes some of the style tags you will use in this exercise.

 

Boldface

<B> … </B>

Italic

<I> … </I>

Emphasis

<EM> … </EM>

Blink

<BLINK> … </BLINK>

Big

<BIG> … </BIG>

Small

<SMALL> … </SMALL>

Address

<ADDRESS> … </ADDRESS>

 

To see how style tags change your text, do the following steps:

  1. In your text editor, open chap 4 exer 1 lastnameinitial.html if it is not open already.
  2. Delete the heading line <H6>Welcome to my web page.</H6>.

 

 

 

 

 

Your insertion point should be under the <BODY> tag.

  1. Key the following:

This is <B>bold.</B><BR>

This is <I>italic.</I><BR>

  1. Change the title of your web page to Chapter  4 Exercise 2
  2. Save the document as chap 4 exer 2 lastnameinitial.html
  3. Open chap 4 exer 2 lastnameinitial.html in your browser.

 

Your web page should look like this:

If your Web page does not look like the figure, check the source code in your text editor. Source code is the name for all the text in an HTML document. Your can view the source code in text editor or in your browser. However, you can only make changes to the source code in your text editor.

 

The source code for your Web page should look like this:

 


<HTML>

<HEAD>

<TITLE>Chapter 4 Exercise 2</TITLE>

</HEAD>

<BODY>

This is <B>bold.</B><BR>

This is <I>italic.</I><BR>

 

 

This page is currently under construction.

</BODY>

</HTML>

 

If your Web page is not correct, compare your source code to the above code.  Save the changes and refresh the file in your browser.

 

To use additional style tags in your Web page, do the following steps:

 

  1. In your text editor, add the following:

 

<EM>Emphasis</EM> is similar to italics.<BR>

Some people think <BLINK>blinking</BLINK>

text is annoying.<BR>

This is <BIG>big</BIG> and this is

<SMALL>small.</SMALL><BR>

 

  1. Save the document.

 

Your source code should look like this:

 


<HTML>

<HEAD>

<TITLE>Chapter 4 Exercise 2</TITLE>

</HEAD>

<BODY>

This is <B>bold.</B><BR>

This is <I>italic.</I><BR>

<EM>Emphasis</EM> is similar to italics.<BR>

Some people think <BLINK>blinking</BLINK>

text is annoying.<BR>

This is <BIG>big</BIG> and this is

<SMALL>small.</SMALL><BR>

 

This page is currently under construction.

</BODY>

</HTML>

 

 

  1. Refresh the Web page in your browser.

 

Your Web page should now look like this:

 

  1. If your Web page does not look like the one above, compare your source code to the source code above.

 

The <ADDRESS> tag is similar to italics. To see how the address tag works, do the following steps:

  1. Using your own address, key the following below the last sentence in the body:

My address is:<BR>

<ADDRESS>__________________________</ADDRESS>

  1. Save the document and refresh the Web page in your browser.
  2. Insert 10 line breaks after the word construction.
  3. Save the document and refresh the Web page in your browser.

 

Exercise 3

The same principles apply to underlining by using <U> and </U>.  You can use several tags in combination.  In order to do this, you will need to use nested tags.

 

To avoid confusing the browser, tags should be nested not overlapping.  Study the following examples.

 

<I><U>cool</I></U>             Overlapping tags ….. bad!

<I><U>cool</U></I>             Nested tags  …..    good!

 

Create a web page in HTML using the following guidelines.

Make the title be           Chapter 4 Exercise 3

In the body, write your name and underline it.

Now duplicate Figure 1 from page 1 of this packet.

Then

1.   Make 1 big word and a separate italic word between the <H1> tags.

  1. Make 1 small phrase that is underlined between the <H2> tags.
  2. Make the whole sentence bold between the <H3> tags.
  3. Underline every other word between the <H4> tags.
  4. Make the verb in the sentence bold, underlined, and italic between the <H5> tags.
  5. Nest the Emphasis, Blink, and Italic tags between the <H6> tags.
  6. Save it as           chap 4 exer 3 lastnameinitial.html.

 

Exercise 4

In this exercise you will use what you have learned to create another Web page.

 

The table below shows the tags you learned in this chapter.

Headings (1-6)

<H1>…</H1>

Boldface

<B> … </B>

Italic

<I> … </I>

Underline

<U> … </U>

Emphasis

<EM> … </EM>

Blink

<BLINK> … </BLINK>

Big

<BIG> … </BIG>

Small

<SMALL> … </SMALL>

Address

<ADDRESS> … </ADDRESS>

Line Break

<BR>

 

Using the tags in the above table, do the following:

  1. In your text editor, open chap 3 exer 4 lastnameinitial.html.
  2. Change the title to Chapter 4 Exercise 4
  3. Add a heading at the top of the paragraph. (Use level 1 heading tags.)
  4. Add the bold, italic, underline, big, and small tags to your existing text.  Use some tags that are nested and some tags that do not need to be nested.
  5. Key 2 more sentences at the bottom and separate them with the line break tag.
  6. Use the Emphasis tag in one of the sentences and the Blink tag in the other sentence.
  7. Use the address label to add your name and class period.  This information should display near the bottom of your web page.
  8. Save the changes as chap 4 exer 4 lastnameinitial.html.        Refresh your browser.