3.1 Bold, Italics, and UnderlineTo 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:
This would result in the following being rendered by browser as:<u>All of this sentence is underlined, <b>while this is bold text</b>, and <i>this is italicized</i> text!</u>
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.All of this sentence is underlined, while this is bold text, and this is italicized text!
After adding the tags in the appropriate places, the body of the source of our web page now looks like:
This changes the appearance of the web page to what is shown in Figure 1.<html> <head> <title>Pete's Pet Store</title> </head> <body> <b>Item:</b> 23445-555<br><br><b>Name:</b> Cat Window Lounger ®<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>© 2002</i> </body> </html>
3.2 HeadersAnother 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.
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.<h2>3.2 Headers</h2> Another method of changing the formatting...
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.
These changes result in the following visual change to our web page (see Figure 2).<h3>Cat Window Lounger ®</h3><hr>
3.3 CenteringUp 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 ®</h3></center><hr>
3.4 BlockquotesAnother 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>
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis