HTML-Lesson 03
HTML: Paragraph,
Heading, and Text
Formatting Tags
Learning Objectives:
• To apply paragraph and heading tags in HTML to create a well-structured
webpage, apply formatting, and understand the hierarchy of headings.
Starter: What Do You Already Know?
• What is <p></p> element used for?
• Why do we need to close the tags in HTML?
• How can we create a largest heading in webpage?
• How can we change the text to bold?
• How can we underline the text?
HTML Headings and formatting?
• Explanation: HTML headings range from <h1> (most important) to <h6>
(least important).
Learnt Want to learn
<h1>This is an H1 Heading</h1> <h1 style="color: blue;">Main Heading</h1>
•.
<h2>This is an H2 Heading</h2> <h2 style="text-align: center;">Subheading</h2>
HTML Paragraph with formatting attributes?
• Explanation: HTML paragraphs are created using the <p> tag to define
blocks of text.
Learnt Want to learn
<p>This is first paragraph</p> <p style="color: blue;">This is first paragraph</p>
<p>This is second paragraph</p> <p style="text-align: center;">This is second paragraph</p>\
<p>This text is highlighted in yellow.</p> <p style="background-color: yellow;">This text is highlighted
in yellow.</p>
Basic Text Formatting Tags in HTML
• Bold Text: <b> or <strong> Underlined Text: <u>
Example:
• Example:
<u>This text is underlined.</u>
• <b>This text is bold.</b>
Line Break: <br>
• Italic Text: <i> or <em> Example:
This is text<br>on a new line.
• Example:
• <i>This text is italic.</i>
Must Task: Create Your HTML Document
• Task: Create a simple HTML document
Example:
<html >
<body>
• <h1>My First HTML Page</h1>
• <h2>Introduction</h2>
• <p>This is a <b>bold</b> and <i>italic</i> paragraph.</p>
• <p style="color: blue;">This is blue text paragraph</p>
• <p style="text-align: center;">This is center aligned paragraph</p>
• <p style="background-color: yellow;">This text is highlighted in yellow.</p>
• </body>
• </html>
Mini Plenary: Recap Questions
• How would you highlight a specific part of your text?
• What is the difference between using <h1> and <p> tags?
Critical Thinking
• How did formatting the text help make your webpage more effective or
engaging?
• If you were to complete this task again, what would you do differently?
Why?
Activity: Challenge Yourself and continue with the MUST Task to
complete your group task.
1. Task 1: create a webpage titled "My First Webpage.
2. "Write <h1> heading: "About Me.“ Extended Task: Build a structured
webpage titled "About Me:
3. Add two <p> paragraphs:
A Deeper Dive.“
4. Write about your favorite hobby in the first paragraph. Make
1. Write an <h1> heading: "About Me.“
this paragraph blue. 2. Add an <h2> subheading: "My
5. Write a short description of your favorite food in the second Journey.“
paragraph. Make this paragraph red. 3. Write two paragraphs with different
formatting:
6. Task 2: Create a webpage from scratch titled "My Interests. 4. A bold paragraph explaining a
7. "Write an <h1> heading: "My Interests.“ challenge you overcame.
8. Add an <h2> subheading: "Hobbies and Passions.“ 5. An italicized paragraph describing a
skill you're proud of.
9. Write three <p> paragraphs:
10. A 16px-sized paragraph about your favorite book. Research and Add an unordered list at
11. A green paragraph describing a memorable vacation. the bottom of the page titled "My Top 3
12. A paragraph with yellow background highlighting, Favorite Movies," with three list items.
explaining what career you would like to pursue and why
Plenary: Quiz and Reflection
Assessment Rubric
• - Level 1 (Beginning): Limited understanding and use of tags, incomplete code.
• - Level 2 (Developing): Basic use of tags with some errors, simple structure.
• - Level 3 (Proficient): Correct and effective use of tags, well-structured code.
• - Level 4 (Advanced): Creative use of tags, excellent structure, and peer
engagement.
