Computer Science Illuminated, Third Edition: Goin

Computer Science Illuminated, Third Edition

Lab #3

Formatting Text

3.1 Bold, Italics, and Underline

To enhance the appearance of text in an HTML document, we introduce three formatting tags: the bold <b>, italics <i>, and underline <u> tags. All three utilize both opening and closing tags which enclose the text that it formats. For example, to make some text bold:

<b>This text is bold.</b>

It is very common to nest these tags to apply more than one formatting style to text. For example, if we wished to apply bold and italics formatting to a block of text, we would nest them as follows:

<b><i>This text is both bold and italics at the same time!</i></b>

Note that we unnested the tags in the opposite order that we applied them. This is a good practice to adopt as not every browser will render the text correctly if the nesting is incorrect. It is also possible to nest two or more tags, that are not adjoining. This trait holds true for HTML in general, not just the formatting tags. For example, we could have a block of HTML that looks like the following:

<u>All of this sentence is underlined, <b>while this is bold text</b>,

and <i>this is italicized</i> text!</u>

This would result in the following being rendered by browser as:

All of this sentence is underlined, while this is bold text, and this is italicized text!

In our Pete's Pet Store example, we would like to apply bold formatting to our information labels. This formatting will help the different sections of product information be more visible. Additionally, we will use underlining to enhance a key point in the product description, and italics to emphasize the copyright information at the bottom of the page.

After adding the tags in the appropriate places, the body of the source of our web page now looks like:

<html>

<head>

<title>Pete's Pet Store</title>

</head>

<body>

<b>Item:</b> 23445-555<br><br>

<b>Name:</b> Cat Window Lounger &reg;<hr>

<p><b>Description:</b> Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the <u>perfect present</u> for your

special friend.</p>



<p>The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.</p>



<p>Image of cat using lounger goes here.</p>



<hr width="30%" align="left">

<b>Price:</b> $22.95

<hr>

Pete's Pet Store

<i>&copy; 2002</i>

</body>

</html>

This changes the appearance of the web page to what is shown in Figure 1.

The web page with formatting applied.

Figure 1: The web page with formatting applied.

Lab Activity #1:

Apply bold, italics, and underlining formatting to separate part of your web page.

Use at least two formatting tags to apply nested formatting to two other locations in your document.

3.2 Headers

Another way to change the formatting of a web page's text, is to use the header tags in HTML. Header tags modify the size of the text that they surround. They are generally used for the creation of sections (or sub-sections) within a web page. For example, the text "3.2 Headers" and "3.3 Centering" have a header tag applied to them.

Unlike the other HTML tags that we have introduced up to this point, the header tags are a collection of tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Each corresponds to a level, where <h1> is the highest (largest sized font), and <h6> is the lowest (smaller sized font). Headers are usually rendered so that they add an amount of vertical white space following them. For example, in this web page that you are reading, we used the following HTML to create the section 3.2 heading and the text that follows it.

<h2>3.2 Headers</h2>

Another method of changing the formatting...

Note that although we didn't add a paragraph tag following the end of the heading tag, some extra space exists between the heading and the text which follows it. It should also be noted that the header tags don't add any type of numbering at all to the web page. For the section number (3.2) to appear in the header, we were forced to add it ourselves.

Applying headers to text can be very handy, especially when you want to help draw attention to a piece of text. We'll use the <h3> header tag to modify the name of the product on our web page. In fact, the header tag will enhance the name of the product so much, that we'll drop the label "Name:" from that portion of the page.

<h3>Cat Window Lounger &reg;</h3><hr>

These changes result in the following visual change to our web page (see Figure 2).

Figure 2: Applying a header tag to the product name.

Lab Activity #2:

Apply two header tags to your web page. Be sure to apply them in two separate areas.

Attempt to nest the underlining tag in one of your header tags. What happens?

3.3 Centering

Up until this point, we have not talked about the alignment of text. Ther are however, occasions in which it is desirable to center text on a web page. To achieve this, we use the center tag (<center>).

To center a block of text on a page, enclose the desired text with the center opening and closing tags. Keep in mind that you can nest other formatting tags within the enclosed text. We have centered and bolded the name of our product, in the example below which shows the appearance of the web site.

<center><h3>Cat Window Lounger &reg;</h3></center><hr>
Figure 3: The web page with the product name modified.

Lab Activity #3:

Choose at least two lines or paragraphs of text from your web page and center it.

3.4 Blockquotes

Another formatting tag that comes in quite handy is the blockquote tag (<blockquote>). This tag is generally used to indent and italicize a large amount of text (a paragraph or more), similar to how you would quote a section of text in a term paper.

To use the blockquote tag on a section of text, simply surround the desired text with opening and closing blockquote tags. For example, we will rewrite our product description for the Cat Window Lounger to utilize the blockquote tag. The HTML for this section of the web page is now:

<p><b>Description:</b> <blockquote>Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the <u>perfect present</u> for your

special friend.</p>

<p>The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.</p></blockquote>

<p>Image of cat using lounger goes here.</p>

Using the blockquote tag in the product description.

Figure 4: Using the blockquote tag in the product description.

Lab Activity #4:

Add the blockquote tag to your web page. Be sure to use the tag on at least one paragraph of text, and not just a single sentence.

About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN: 0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis