Lecture Notes Of Class 3
Text Formatting in HTML
Objective:
Explore various text
formatting tags and how to apply them.
Outcome:
Students will be able
to use HTML tags to format text, including bold, italics, underline, and
quotes, enhancing textual presentation.
1.
Introduction to Text Formatting
Text formatting in
HTML allows you to change the appearance of text on a webpage. This can include
making text bold, italicized, underlined, or displayed as a quotation. These
formatting options help in enhancing the readability and emphasis of content on
your web pages.
2.
Basic Text Formatting Tags
Here are some of the
most commonly used HTML tags for text formatting:
a.
Bold Text
- Tag: <strong> or <b>
- Usage: To make text bold. The <strong>
tag not only makes the text bold but also indicates that the text is of
strong importance.
Example:
<p>This
is <strong>important</strong> text.</p>
<p>This
is <b>bold</b> text.</p>
Output:
This is important text.
This is bold text.
b.
Italicized Text
- Tag: <em> or <i>
- Usage: To italicize text. The <em> tag
emphasizes the text, which is usually displayed in italics.
Example:
<p>This
is <em>emphasized</em> text.</p>
<p>This
is <i>italicized</i> text.</p>
Output:
This is emphasized text.
This is italicized text.
c.
Underlined Text
- Tag: <u>
- Usage: To underline text.
Example:
<p>This
is <u>underlined</u> text.</p>
Output:
This is underlined text.
d.
Strikethrough Text
- Tag: <s> or <strike>
- Usage: To display text with a line through it,
indicating that it is no longer relevant or has been removed.
Example:
<p>This
is <s>strikethrough</s> text.</p>
Output: This is strikethrough text.
e. Superscript and
Subscript Text
- Tags: <sup> and <sub>
- Usage: <sup> is used for superscript text
(e.g., exponents), while <sub> is used for subscript text (e.g.,
chemical formulas).
Example:
<p>This
is H<sub>2</sub>O and E=mc<sup>2</sup>.</p>
Output: This is Hâ‚‚O and
E=mc².
f.
Quotation and Citation
- Tags: <blockquote>, <q>,
<cite>
- Usage:
- <blockquote> is used for long quotations, often displayed as
indented blocks.
- <q> is used for shorter quotations that are typically
inline.
- <cite> is used to reference the source of a quotation or
title.
Example:
<blockquote>
<p>"The
only limit to our realization of tomorrow is our doubts of
today."</p>
<footer>—
Franklin D. Roosevelt</footer>
</blockquote>
<p>As
stated in the book <cite>To Kill a Mockingbird</cite>,...</p>
<p>He
said, <q>This is an inline quotation.</q></p>
Output:
"The only limit
to our realization of tomorrow is our doubts of today."
— Franklin D. Roosevelt
As stated in the
book To Kill a Mockingbird,...
He said, This
is an inline quotation.
3.
Combining Formatting Tags
You can also combine
these tags to achieve multiple formatting effects:
<p>This is
<strong><em>bold and italicized</em></strong>
text.</p>
<p>This is
<u><b>underlined and bold</b></u> text.</p>
<p>This is a
<q>short quote</q> and a <blockquote>long
quote</blockquote>.</p>
4.
Practical Examples
Example 1: Highlight Important Information
<p><strong>Attention:</strong>
Please <em>read</em> the instructions carefully.</p>
Example 2: Displaying a Quote
<blockquote>
<p>"To
be yourself in a world that is constantly trying to make you something else is
the greatest accomplishment."</p>
<footer>—
Ralph Waldo Emerson</footer>
</blockquote>
5. Summary
Understanding and
using HTML text formatting tags allows you to present your content effectively
and make important information stand out. By combining different tags, you can
enhance the readability and impact of your web pages.