Scribd
Upload
3 views

HTML_Lesson 03

This document outlines a lesson on HTML focusing on paragraph, heading, and text formatting tags. It includes learning objectives, starter questions, explanations of HTML headings and paragraphs, basic text formatting tags, and tasks for students to create their own HTML documents. Additionally, it provides a rubric for assessing students' understanding and application of HTML tags.

Uploaded by

Rayan Rizwan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

HTML_Lesson 03

This document outlines a lesson on HTML focusing on paragraph, heading, and text formatting tags. It includes learning objectives, starter questions, explanations of HTML headings and paragraphs, basic text formatting tags, and tasks for students to create their own HTML documents. Additionally, it provides a rubric for assessing students' understanding and application of HTML tags.

Uploaded by

Rayan Rizwan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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.

You might also like