the procedure to change the background of a Web page.
In this Session, you will learn to:
Explain the Heading tag
Explain the different tags related to formatting
Explain monospaced font, preformatted text, and block quotation
Describe the different types of lists
Explain the procedure to change the background color and image
Concepts
Session
3
Formatting Text Using Tags3.1 Introduction
The text content of the Web page, form an important part of a Web site. This text content must not only be informative but also attractive. It must be easy to read and must have short and crisp sentences for easy understanding of the Web user. To attract the attention of the user, headings must be appropriately provided. Also, text formatting options such as bold, italics, subscript, superscript, and so on must be applied on the text. Bullets can be also used to list the text in a systematic manner. The background color and background image of a Web page can be specified using HTML.
3.2 Headings
The heading elements define headings for contents such as text and images. They specify a hierarchical structure of a Web page by grouping the contents into different headings. HTML defines six levels of heading that ranges from H1 to H6. The H1 element specifies the top-level heading, which is displayed with the largest size. The H6 element specifies the lowest-level heading, which is displayed with the smallest size.
Code Snippet 1 demonstrates how to specify the six levels of heading in an HTML page.
Code Snippet 1: <!DOCTYPE html> <html> <head> <title>Headings</title> </head> <body> <h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6> </body> </html>
The heading under the H1 tags will be displayed with the largest size. Each subsequent heading will be displayed in a size lower than its previous heading.
Concepts
Session
3
Formatting Text Using TagsThe heading under the H6 tags will be displayed with the lowest size. Figure 3.1 shows the different types of headings.
Figure 3.1: Different Types of Headings
3.2.1 HGROUP
The <hgroup> element is a new element defined in HTML5. It is used to group titles and their subtitles. The element is used to group a set of h1–h6 elements. These are used for headings that have multiple levels that can include subheadings, alternative titles, taglines, and so on. The main advantage of using the <hgroup> tag is to create a document outline. Code Snippet 2 shows the use of the <hgroup> tag.
Code Snippet 2:
<hgroup>
<h1>Title of Post One </h1> <h2>Subtitle of Post One </h2> </hgroup>
3.3 Formatting
The content format determines how the content will appear in the browser. For example, when you visit a Web site, some text appears in a specific format such as bold or underlined. This means that the formatted content makes an HTML page look readable and presentable. In HTML, formatting is applied to the text by using formatting elements, which are container elements.
Concepts
Session
3
Formatting Text Using TagsThe commonly used HTML formatting elements are as follows: B
The B element displays the text in bold. The text that needs to be displayed in bold is enclosed between <b> and </b> tags.
I
The I element displays the text in italic. The text that needs to be displayed in italic is enclosed between <i> and </i> tags.
SMALL
The SMALL element makes the text appear smaller in a browser. The text that needs to be displayed smaller is enclosed between <small> and </small> tags.
U
The U element applies an underline to the text. The text that needs to be underlined is enclosed between <u> and </u> tags.
Code Snippet 3 demonstrates the use of the basic formatting elements.
Code Snippet 3: <!DOCTYPE html> <html> <head> <title>Formats</title> </head> <body>
<h2>Using HTML Formatting Elements</h2><br> <b>This text is displayed in bold.</b><br> <i>This text is displayed in italic.</i><br> <u>This text is underlined.</u><br>
<small>This text is displayed smaller.</small> </body> </html>
Concepts
Session
3
Formatting Text Using TagsFigure 3.2 shows a Web site displaying basic text formats.
Figure 3.2: Basic Text Formats
You might want to display some text or characters above or below the baseline of its adjacent text. Further, you might want to strike through some text to indicate that it is deleted. Therefore, HTML provides you with some more formatting elements. These formatting elements are as follows:
DEL
The DEL element encloses text, which has been deleted from the document. The text to be deleted is placed in the <del> and </del> tags.
INS
The INS element encloses text, which has been inserted in the document. The text to be inserted is placed in the <ins> and </ins> tags. The INS element can be used with DEL element to inform the user about the deleted text, which is replaced by the new text.
STRONG
The STRONG element emphasizes the text as compared to its surrounding text. The text to be emphasized is placed in the <strong> and </strong> tags.
SUB
The SUB element displays the text as subscript. The text to be displayed as subscript is enclosed in <sub> and </sub> tags.
Concepts
Session
3
Formatting Text Using TagsSUP
The SUP element displays the text as superscript. The text to be displayed as superscript is enclosed in <sup> and </sup> tags.
Code Snippet 4 demonstrates the use of DEL, INS, STRONG, SUB, and SUP elements.
Code Snippet 4:
<!DOCTYPE html> <html>
<head>
<title>Updating and Shifting Text</title> </head>
<body>
<h3>Updating, Emphasizing, and Shifting Text</h3>
This is an example of <del>deleted</del> <ins>inserted </ins> text.<br/>
This is an example of <strong>Strong</strong> text.<br/> This is an example of <sub>subscript</sub>text.<br/> This is an example of <sup>superscript</sup> text.<br/> </body>
</html>
Figure 3.3 shows the other text formatting elements.
Figure 3.3: Other Text Formatting Elements
Concepts
Session
3
Formatting Text Using TagsNote -The <font> tag present in HTML 4 has been removed in HTML5. To change the font
size, style, color, and so on, the style attribute must be used in CSS3. This will be covered in later sessions.
3.4 Monospaced and Preformatted Text
By using monospaced font in HTML5 a Web developer can provide the same amount of horizontal space between the fonts, even if the font size, shape, and type are not the same. Monospaced fonts are used for programming code scripts, instruction texts, and ASCII characters.
The <pre> tag is used to apply preformatted text content to a Web page. The <pre> tag applies a fixed-font width to the text content. It also maintains a standard formatting for spaces and line breaks. The <pre> tag is usually used to when you want to copy paste content from a source but do not want to change the formatting of the same. The content would be copied while maintaining all the line breaks and spaces.
Table 3.1 lists some of the other predefined tags available for formatting of text in HTML.