Practical 3 : Formatting Text

 Practical 3 

 Formatting Text in HTML

Objective:

To learn how to format text using various HTML elements to make web content more readable and visually appealing.

Outcome:

By the end of this lecture, students will:

• Understand the various text formatting tags in HTML.
• Be able to apply these tags to structure and style text effectively.
• Learn how to combine different formatting tags to create visually appealing content.

Introduction

Text formatting in HTML is used to enhance the appearance of text on a web page. It helps in structuring content, emphasizing important information, and improving readability. HTML provides various tags for formatting text, such as bold, italic, underline, highlighting, and more.

1. Importance of Text Formatting in Web Development

• Enhances readability and user experience.
• Helps in emphasizing important content.
• Improves visual presentation.
• Used for structuring and styling text content effectively.

---

2. Basic Text Formatting Tags in HTML

HTML provides several tags for formatting text. Below are the commonly used ones:

1. Bold Text (<strong> and <b>)

• <strong>: This tag is used to indicate important text, and by default, it makes the text bold.
• <b>: This tag also makes the text bold but does not indicate importance (used only for styling).

Example:

<p>This is <strong>important text</strong>.</p>

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

Output: This is important text.

This is bold text.

---

2. Italicized Text (<em> and <i>)

• <em>: Used to emphasize text (usually displayed in italics).
• <i>: Simply makes the text italicized without adding emphasis.

Example:

<p>This is <em>emphasized text</em>.</p>

<p>This is <i>italicized text</i>.</p>

Output: This is emphasized text.

This is italicized text.

---

3. Underlined Text (<u>)

• The <u> tag is used to underline text. However, in modern web design, underlining is mainly used for hyperlinks.

Example:

<p>This is <u>underlined text</u>.</p>

Output: This is <u>underlined text</u>.

---

4. Highlighted Text (<mark>)

• The <mark> tag highlights text with a background color.

Example:

<p>This is <mark>highlighted text</mark>.</p>

Output: This is <mark>highlighted text</mark>.

---

5. Smaller Text (<small>)

• The <small> tag displays text in a smaller font size.

Example:

<p>This is <small>smaller text</small>.</p>

Output: This is <small>smaller text</small>.

---

6. Strikethrough Text (<del>)

• The <del> tag is used to represent deleted text, which is usually shown with a strikethrough.

Example:

<p>This is <del>deleted text</del>.</p>

Output: This is <del>deleted text</del>.

---

7. Inserted Text (<ins>)

• The <ins> tag is used to represent inserted text, which is usually shown with an underline.

Example:

<p>This is <ins>inserted text</ins>.</p>

Output: This is <ins>inserted text</ins>.

---

8. Subscript Text (<sub>)

• The <sub> tag is used to display subscript text, which appears below the normal text line.
• Commonly used in chemical formulas.

Example:

<p>H<sub>2</sub>O (Water molecule)</p>

Output: H₂O (Water molecule)

---

9. Superscript Text (<sup>)

• The <sup> tag is used to display superscript text, which appears above the normal text line.
• Commonly used in mathematical exponents.

Example:

<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

Output: x² + y² = z²

---

10. Monospace Text (<code> and <pre>)

• <code>: Used to display code snippets in a monospace font.
• <pre>: Maintains the original formatting, including spaces and line breaks.

Example:

<p>This is a code snippet: <code>print("Hello, World!")</code></p>

<pre>

def hello():

    print("Hello, World!")

</pre>

Output: This is a code snippet: print("Hello, World!")

def hello():

    print("Hello, World!")

---

11. Quotation Text (<blockquote>, <q>, and <cite>)

• <blockquote>: Used for long block quotations.
• <q>: Used for short inline quotations.
• <cite>: Used for citing a reference.

Example:

<blockquote>

    "The only way to do great work is to love what you do." – Steve Jobs

</blockquote> 

<p>Steve Jobs once said, <q>The only way to do great work is to love what you do.</q></p>

 <p>Quote from <cite>Steve Jobs</cite>.</p>

Output:

"The only way to do great work is to love what you do." – Steve Jobs

Steve Jobs once said, "The only way to do great work is to love what you do."

Quote from Steve Jobs.

---

3. Combining Multiple Formatting Tags

You can combine multiple formatting tags to achieve different effects.

Example:

<p><strong><em>This is bold and italicized text.</em></strong></p>

<p><mark><u>This is highlighted and underlined text.</u></mark></p>

<p><del><ins>This is deleted and inserted text.</ins></del></p>

Output:

• This is bold and italicized text.
• <mark><u>This is highlighted and underlined text.</u></mark>
• This is deleted and inserted text.

---

4. Summary Table of HTML Text Formatting Tags

Tag	Description	Example
<strong>	Bold text (important)	<strong>Text</strong> → Text
<b>	Bold text (styling)	<b>Text</b> → Text
<em>	Italicized (emphasis)	<em>Text</em> → Text
<i>	Italicized (styling)	<i>Text</i> → Text
<u>	Underlined text	<u>Text</u> → <u>Text</u>
<mark>	Highlighted text	<mark>Text</mark> → <mark>Text</mark>
<small>	Smaller text	<small>Text</small> → <small>Text</small>
<del>	Deleted text	<del>Text</del> → Text
<ins>	Inserted text	<ins>Text</ins> → <ins>Text</ins>
<sub>	Subscript	H<sub>2</sub>O → H₂O
<sup>	Superscript	x<sup>2</sup> → x²
<code>	Monospace text	<code>print()</code> → print()
<blockquote>	Blockquote	<blockquote>Quote</blockquote>

---

Conclusion

Text formatting is an essential aspect of web design that improves readability and user experience. Using HTML formatting tags, you can emphasize important text, structure content effectively, and make your web pages visually appealing.

---