HTML Tutorial Part 2
Text Elements and Formatting
Slide 1: Title Slide
HTML Tutorial Part 2
Text Elements and Formatting
Computer Programming (.NET Technology)
Prepared by: _____
Slide 2: Learning Objectives
At the end of the lesson, learners should be able to:
✓ Use HTML comments correctly
✓ Create headings and paragraphs
✓ Apply line breaks
✓ Format text using HTML tags
✓ Develop a webpage containing formatted text
Slide 3: Review Activity
Answer the following:
1. What does HTML stand for?
2. What is the purpose of the HEAD element?
3. What is the purpose of the BODY element?
1
4. What file extension is used for HTML files?
Slide 4: Lesson Overview
Topics:
1. HTML Comments
2. Headings
3. Paragraphs
4. Break Element
5. Text Formatting Elements
6. Creating a Formatted Webpage
Slide 5: What are HTML Comments?
Comments are notes written inside HTML code.
They help programmers:
✓ Explain code
✓ Organize projects
✓ Remember important information
Comments are NOT displayed in the browser.
Slide 6: Syntax of HTML Comments
<!-- This is a comment -->
2
Structure:
• Opening: <!--
• Comment Text
• Closing: -->
Slide 7: Example of HTML Comments
<!-- Website Header -->
<h1>My Website</h1>
Browser Output:
My Website
Notice: The comment is not displayed.
Slide 8: Activity – Identify the Comment
Which is a valid HTML comment?
A.
<Comment>
B.
<!-- Comment -->
C.
## Comment ##
Answer: B
3
Slide 9: HTML Text Elements
Text elements are used to display textual content on webpages.
Examples:
✓ Headings
✓ Paragraphs
✓ Formatted Text
Slide 10: HTML Headings
HTML provides six heading levels:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Slide 11: Importance of Headings
Headings help:
✓ Organize content
✓ Improve readability
✓ Create webpage titles
✓ Improve SEO
4
Slide 12: Heading Hierarchy
Largest → Smallest
H1
H2
H3
H4
H5
H6
Use H1 for main titles.
Slide 13: Paragraph Element
Paragraphs are created using:
<p></p>
Example:
<p>Hello World!</p>
Slide 14: Paragraph Example
<h1>My Profile</h1>
<p>I am learning HTML.</p>
Output:
5
My Profile
I am learning HTML.
Slide 15: Break Element
The break element creates a new line.
Tag:
<br>
Slide 16: Characteristics of BR Tag
Unlike most HTML tags:
✓ No closing tag
✓ Self-closing
✓ Creates a line break
Example:
Hello<br>World
Slide 17: Output Example
Code:
Hello<br>World
Output:
Hello
6
World
Slide 18: Text Formatting Elements
HTML allows text formatting.
Common Formatting Tags:
Tag Meaning
b Bold
strong Important Text
i Italic
em Emphasized
mark Highlighted
small Smaller Text
del Deleted Text
ins Inserted Text
sub Subscript
sup Superscript
Slide 19: Bold and Strong
<b>Bold Text</b>
<strong>Important Text</strong>
Purpose:
✓ Emphasize important information
7
Slide 20: Italic and Emphasis
<i>Italic Text</i>
<em>Emphasized Text</em>
Used for:
✓ Titles
✓ Foreign words
✓ Emphasis
Slide 21: Mark, Small, Del, and Ins
Examples:
<mark>Highlighted</mark>
<small>Small Text</small>
<del>Deleted</del>
<ins>Inserted</ins>
Slide 22: Subscript and Superscript
Subscript:
H<sub>2</sub>O
Output:
H₂O
Superscript:
8
X<sup>2</sup>
Output:
X²
Slide 23: Complete Example
<h1>My First Website</h1>
<p>Hello! My name is Juan.</p>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
X<sup>2</sup><br>
H<sub>2</sub>O
Slide 24: Hands-On Activity
Create a webpage containing:
✓ One heading
✓ One paragraph
✓ One line break
✓ Bold text
✓ Italic text
✓ Superscript
Save as:
[Link]
9
Slide 25: Assessment
Directions: Answer the following.
1. What is the purpose of HTML comments?
2. Which heading tag is the largest?
3. What tag creates a line break?
4. What tag makes text bold?
5. What is the difference between subscript and superscript?
Slide 26: Reflection
Complete the statement:
Today I learned that ______.
The formatting tag I found most useful is ______.
Slide 27: Summary
✓ HTML comments help document code.
✓ Headings organize webpage content.
✓ Paragraphs display text.
✓ BR creates line breaks.
✓ Formatting tags improve text presentation.
✓ Subscript and superscript display scientific and mathematical expressions.
10
Slide 28: Next Lesson
HTML Lists
✓ Ordered Lists
✓ Unordered Lists
✓ Description Lists
Slide 29: Challenge Activity
Create a personal webpage containing:
✓ Name
✓ Course/Strand
✓ Hobbies
✓ Favorite Quote
Use at least five formatting tags.
Slide 30: Thank You
Questions?
Happy Coding!
11