Module 3: Text Formatting in HTML
This module focuses on text formatting using HTML tags. Below is a detailed breakdown with explanations,
practical methods, exercises, and examples.
1. Bold, Italic, and Underline
These tags allow you to emphasize text.
Tags:
<b>: Makes text bold.
<i>: Makes text italicized.
<u>: Underlines the text.
Example:
<p>This is <b>bold</b> text.</p>
<p>This is <i>italicized</i> text.</p>
<p>This is <u>underlined</u> text.</p>
Rendered Output:
This is bold text.
This is italicized text.
This is underlined text.
Practical Exercise:
Create a paragraph describing yourself. Use <b> for your name, <i> for hobbies, and <u> for your favorite quote.
2. Superscript and Subscript
Used for mathematical expressions, footnotes, or chemical formulas.
Tags:
<sup>: Superscript text (e.g., exponents).
<sub>: Subscript text (e.g., chemical formulas).
Example:
<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O is water.</p>
Rendered Output:
E = mc²
H₂O is water.
Practical Exercise:
Write a formula using superscript and subscript, such as "a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>" or "CO<sub>2</sub>".
3. Blockquote and Preformatted Text
Used for quotations and preserving text formatting.
Tags:
<blockquote>: For long quotes, usually indented.
<pre>: Preformatted text that preserves whitespace and line breaks.
Example:
<blockquote>
The only limit to our realization of tomorrow is our doubts of today. - Franklin D. Roosevelt
</blockquote>
<pre>
function sayHello() {
console.log("Hello, World!");
}
</pre>
Rendered Output:
Blockquote:
The only limit to our realization of tomorrow is our doubts of today. - Franklin D. Roosevelt
Preformatted Text:
function sayHello() {
console.log("Hello, World!");
}
Practical Exercise:
Create a blockquote for your favorite saying.
Write a piece of code and display it using the <pre> tag.
Teaching Methods
Live Coding:
Show the HTML examples in a code editor and display their output in a browser.
Pair Programming:
Have students work together to format a paragraph using different tags.
Interactive Quiz:
Ask students to identify the correct tag for given scenarios.
1. Bold, Italic, and Underline
These tags allow you to emphasize text.
Tags:
<b>: Makes text bold.
<i>: Makes text italicized.
<u>: Underlines the text.
Example:
<p>This is <b>bold</b> text.</p>
<p>This is <i>italicized</i> text.</p>
<p>This is <u>underlined</u> text.</p>
Rendered Output:
This is bold text.
This is italicized text.
This is underlined text.
Practical Exercise:
Create a paragraph describing yourself. Use <b> for your name, <i> for hobbies, and <u> for your favorite quote.
2. Superscript and Subscript
Used for mathematical expressions, footnotes, or chemical formulas.
Tags:
<sup>: Superscript text (e.g., exponents).
<sub>: Subscript text (e.g., chemical formulas).
Example:
<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O is water.</p>
Rendered Output:
E = mc²
H₂O is water.
Practical Exercise:
Write a formula using superscript and subscript, such as "a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>" or "CO<sub>2</sub>".
3. Blockquote and Preformatted Text
Used for quotations and preserving text formatting.
Tags:
<blockquote>: For long quotes, usually indented.
<pre>: Preformatted text that preserves whitespace and line breaks.
Example:
<blockquote>
The only limit to our realization of tomorrow is our doubts of today. - Franklin D. Roosevelt
</blockquote>
<pre>
function sayHello() {
console.log("Hello, World!");
}
</pre>
Rendered Output:
Blockquote:
The only limit to our realization of tomorrow is our doubts of today. - Franklin D. Roosevelt
Preformatted Text:
function sayHello() {
console.log("Hello, World!");
}
Practical Exercise:
Create a blockquote for your favorite saying.
Write a piece of code and display it using the <pre> tag.
Teaching Methods
Live Coding:
Show the HTML examples in a code editor and display their output in a browser.
Pair Programming:
Have students work together to format a paragraph using different tags.
Interactive Quiz:
Ask students to identify the correct tag for given scenarios.
Create an HTML page titled "Text Formatting".
Include a paragraph with bold, italic, and underlined text.
Write a mathematical formula using superscript and subscript.
Add a blockquote with a famous quote.
Include a code snippet using the <pre> tag.
Visual Reference
Use this visual aid to better understand how the tags are structured in code and rendered in a browser.
No comments:
Post a Comment