HTML Chapter 5                                                                              revised 10/20/06

Exercise 1

Changing the Font Size

In the previous chapter, you learned how to change the text using heading and style tags. In addition to using the <BIG> and <SMALL> tags, you can change the size of the font using the <FONT SIZE> tag.

 

With the <FONT SIZE> tag, the size of the text is either increased or decreased using the numbers 1 through 7.  Number 3 represents the size of normal text.  Number 1 is the smallest, and number 7 is the largest.  The different font sizes are illustrated below.


Notice in the figure above that the font size number 3 is the same size as normal text. Number 2 is just a little smaller than normal, while number 4 is slightly larger.

 

Unlike the heading tags used in the previous chapter, the font size does not include line or paragraph breaks.  This allows you to use different font sizes in the same sentence, as shown below.


To use the font size tag in your Web page, do the following steps:

  1. The easiest way to start a new Web page is to use a template file.  Ms. Jones will help you create a template file.

 

You will now change the font size for different words in a sentence.

  1. Position the insertion point between the body tags and key the following:

 

With the font size tag, the size of the text is either <FONT SIZE=5> increased </FONT>or <FONT SIZE=1> decreased </FONT>using the numbers 1 through 7.  Number 3 represents the size of normal text.  Number 1 is the smallest, and number 7 is the largest. <BR>

 

  1. From the File pull-down menu, choose Save As and save the document as chap 5 exer 1 lastnameinitial.html
  2. Open your browser and then open chap 5 exer 1 lastnameinitial.html

 

  1. Your web page should look like the one below. Your web page should have the same title as the one below.
  2. Remember to use the Address tag to put your name and class period at the bottom of your web page.


 

If your Web page does not look like the one above, go back to your text editor and make the necessary changes. Remember to save the document, then refresh the Web page in your browser.

 

Using the Paragraph Tag

In the previous chapter, you used the <BR> tag to insert a line break.  The <BR> tag is equal to pressing the Enter key once, while the paragraph tag <P> is equal to pressing the Enter key twice.

 

To use the paragraph tag, do the following steps:

7. In your text editor, replace the <BR> tag with the <P> tag, and then press Enter.

8. Key the following:

 

The break tag is equal to pressing the Enter key once, while the paragraph tag is equal to pressing the Enter key twice.<P>

 

9.                  Save the document using the same name.

10.              Refresh the document in your Web browser.

 


If your Web page does not look like the one above, go back to your text editor and make the necessary changes.  Remember to save the document, then refresh the Web page in your browser.  You may need to restore down your browser to get the text to wrap like the one above.

 

Using the Horizontal Rule Tag

The horizontal rule tag <HR> is similar to the <BR> and <P> tags.  The difference is that instead of creating a space between the lines, this tag draws a line between them.

To use the horizontal rule tag, do the following steps:

11.              In your text editor, replace the <P> tags with <HR> tags.

12.              Save the document with the same name.

13.             
Refresh the document in your Web browser.

 

If your Web page does not look like the one above, go back to your text editor and make the necessary changes. Remember to save the document, then refresh the Web page in your browser.

 

Exercise 2

Using the Indent Tag

The indent tag <DD> is used to move the first line of a paragraph over to the right. If you were typing in a word processor and wanted to indent the first line of a paragraph, you would press the Tab key.  To indent the first line of an HTML document, you need to use the <DD> tag.

 

To use the indent tag in your document, do the following steps:

  1. In your text editor, open chap 5 exer 1 lastnameinitial.html.
  2. Turn on Word Wrap, if needed.
  3. Remove all the <FONT SIZE> and </FONT> codes from the document. Leave the <HR> codes.

You are now going to indent the first line of the second quotation.

  1. Position the insertion point before the words                  The break         at the beginning of the second quotation.
  2. Key <DD>.
  3. Title your web page Chapter 5 Exercise 2
  4. Save the document using the name chap 5 exer 2 lastnameinitial.html
  5. In your browser, open chap 5 exer 2 lastnameinitial.html

 

 

 

 

 

  1. Your web page should look like this:

 


 

If it does not look like the Web page above, go back to your text editor and make the necessary changes. Remember to save the document, then refresh the Web page in your browser.

Using the Blockquote Tag

The blockquote tag <BLOCKQUOTE> is a container tag that is used to indent all lines from both sides. If you are using a long quotation, you could use the blockquote tag to separate the quote from the rest of the document.

 

To see how the blockquote tag affects your text, do the following steps:

  1. In your text editor, replace the <DD> tag with <BLOCKQUOTE>.

 

Since the block quote tag is a container tag, you will need to specify where the block quote should end.

  1. Position the insertion point between the period and the <HR> code at the end of the quotation.
  2. Key </BLOCKQUOTE>.
  3. Save the document and refresh your browser. Your Web page should look like this:
  4. Notice all the lines in the paragraph are indented from the left and right margins.



HTML Chapter 5

Exercise 3

In this exercise you will create a Web page using the tags your learned in this chapter.

 

Font size (1-7)

<FONT SIZE=#>…</FONT>

Paragraph Break

<P>

Horizontal Rule

<HR>

Indent

<DD>

Blockquote

<BLOCKQUOTE>…</BLOCKQUOTE>

 

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

  1. In your text editor, open your    HTML template file.
  2. Key the following using a large font size to format your name.

 

A brief autobiography by _________________________ (insert your name.)

 

  1. Insert a horizontal rule tag after your name, then press Enter.
  2. Key the following and use your own information to fill in the blanks. Use the indent tag at the beginning of the paragraph.

 

I was born in ________________. There are _________ people in my family. I live in the great state of __________.

 

  1. Insert the paragraph tag at the end of the paragraph, then press Enter.
  2. Key the following and use your own information to fill in the blanks

 

In addition to creating Web pages, I also enjoy ______________ and __________________. My favorite movie is __________________.  My favorite movie star is _______________. My favorite color is _____________.

 

  1. Use the blockquote tags before and after the paragraph you just created.
  2. Title this web page  Chapter 5 Exercise 3
  3. Save the document as chap 5 exer 3 lastnameinitial.html.
  4. View the document in your browser.
  5. Make any necessary changes and remember to save the document and refresh the Web page in your browser.

 

Exercise 4

Use the Internet to learn how to change the color of the font and the type of font.

 

Create a web page with the following:

            A heading with your name.

            7 different sentences all in different sizes, colors, and fonts.

            Separate each with a horizontal line.

            Indent the 2nd sentence.

            Use the blockquote tag on the longest sentence.

            Give it an appropriate title.

            Save it as chap 5 exer 4 lastnameinitial.

 

 

HTML Chapter 5

 

Notice the horizontal lines in the Web page shown below:

 


Use what you have learned about the <HR> and <FONT SIZE> tags and see if you can figure out the tag for changing the thickness of a horizontal rule.  Hint: You can use any number up to 100.

 

Save this file as chap 5 challenge lastnameinitial.