SlideShare a Scribd company logo
Keith B. Manatad August 28, 2014
Lesson Plan in Technology and Livelihood Education
HTML – Web Design
I. Objectives: At the end of the lesson the student should be able to:
• Identify the HTML Phrase Elements
• Apply HTML Phrase Elements in a web page
II. Subject - Matter/Content:
Topic: HTML Phrase Eements
References: < http://www.tutorialspoint.com/html/html_phrase_elements.htm>Accessed 2014
Materials: projector, laptop, power point presentation, notepad++ or notepad
III. Procedure:
A. Awareness
1. Prayer
2. Checking of attendance
3. Unlocking of difficulties
- basic knowledge about typical HTML Syntax.
4. Motivation:
- With the use of a video clip, let the students watch it and let them discuss the
importance of simple webpage design.
• Activity
The Student will spot the Errors of HTML tag and correct the HTML TAGs and
attributes.
A. DEBUG and rewrite
<!DOCTYPE HTML>
<LMHT>
<HEAD><title>Activity 3</title></HEAD>
<body colorbg="black">
<div align="center"> <gmi src="" width="250" height="250" ></div>
<div align="center">
<p><H1> Wrecking Ball</h1></p>
<p><font color="white" face="edwardian"size="5"><align="center">
We clawed,</b> we chained our hearts in vain
<br>We jumped never asking why
<br>We kissed, I fell under your spell.
<br>A love no one could deny</p>
<p>Don't you ever say I just walked away
<br>I will always want you
<br>I can't live a lie, running for my life
<rb>I will always want you</font></vid>
</p>
</body>
</html>
B. Construct an HTML TAG:
With Browser TITLE: Activity 3
With large text and centered in the screen: HELLO WORLD!
• Analysis
The Student will discuss HTML Tags.
B. Lesson Proper
• Presentation
The a group of Students will report and present to their classmates with actual Tags in
the laptop with projector. Using Notepad++ with the correct syntax of each html Phrase
elements facilitated by the teacher.
IV. Application
- The Student will be facilitated with computer laboratoiry.
V. Assessment
Identify HTML Phrase Tags
VI. Assignment:
1. What is HTML Meta Tags?
2. Give an Example as you can of HTML Meta Tags.

More Related Content

What's hot

HTML Intermediate
HTML IntermediateHTML Intermediate
HTML Intermediate
c525600
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
c525600
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
claytors
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
yucefmerhi
 
Web design in 7 days by waqar
Web design in 7 days by waqarWeb design in 7 days by waqar
Web design in 7 days by waqar
Waqar Chodhry
 
Html Power Point 1
Html Power Point 1Html Power Point 1
Html Power Point 1
JenniferHinz
 

What's hot (20)

HTML Intermediate
HTML IntermediateHTML Intermediate
HTML Intermediate
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advanced
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Leran html
Leran htmlLeran html
Leran html
 
Basic html
Basic htmlBasic html
Basic html
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
 
Html for beginners part I
Html for beginners part IHtml for beginners part I
Html for beginners part I
 
Web html1
Web   html1Web   html1
Web html1
 
HTML computing
HTML computingHTML computing
HTML computing
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basics
 
Let me design
Let me designLet me design
Let me design
 
Unit 2.2 Part 1
Unit 2.2 Part 1Unit 2.2 Part 1
Unit 2.2 Part 1
 
Basic of web design
Basic of web designBasic of web design
Basic of web design
 
Html
HtmlHtml
Html
 
Web design in 7 days by waqar
Web design in 7 days by waqarWeb design in 7 days by waqar
Web design in 7 days by waqar
 
Hypertext markup language (html)
Hypertext markup language (html)Hypertext markup language (html)
Hypertext markup language (html)
 
HTML Tutorial
HTML TutorialHTML Tutorial
HTML Tutorial
 
Html Power Point 1
Html Power Point 1Html Power Point 1
Html Power Point 1
 
Intro to html
Intro to htmlIntro to html
Intro to html
 

Viewers also liked

Lesson plan in TLE I (Grade 7)
Lesson plan in TLE I (Grade 7)Lesson plan in TLE I (Grade 7)
Lesson plan in TLE I (Grade 7)
QA Ilagan
 
Final demo tle
Final demo   tleFinal demo   tle
Final demo tle
floeaz02
 
Napkin folding(demonstration)
Napkin folding(demonstration)Napkin folding(demonstration)
Napkin folding(demonstration)
Roniño Cañete
 
Different types of table napkin
Different types of table napkinDifferent types of table napkin
Different types of table napkin
Wynne Li
 
Lesson plan in_technology_and_livelihood_education_1[1]
Lesson plan in_technology_and_livelihood_education_1[1]Lesson plan in_technology_and_livelihood_education_1[1]
Lesson plan in_technology_and_livelihood_education_1[1]
mishielannates
 
food and beverages curriculum guide senior high school
 food and beverages  curriculum guide senior high school food and beverages  curriculum guide senior high school
food and beverages curriculum guide senior high school
Rai Blanquera
 
Semi-detailed Lesson Plan [s] sound and [z] sound
Semi-detailed Lesson Plan [s] sound and [z] soundSemi-detailed Lesson Plan [s] sound and [z] sound
Semi-detailed Lesson Plan [s] sound and [z] sound
Monica Angeles
 

Viewers also liked (20)

Semi Detailed Lesson Plan in T.L.E, Cookery
Semi Detailed Lesson Plan in T.L.E, CookerySemi Detailed Lesson Plan in T.L.E, Cookery
Semi Detailed Lesson Plan in T.L.E, Cookery
 
Lesson plan in TLE I (Grade 7)
Lesson plan in TLE I (Grade 7)Lesson plan in TLE I (Grade 7)
Lesson plan in TLE I (Grade 7)
 
Lesson Plan in Technical Livelihood Education (TLE)
Lesson Plan in Technical Livelihood Education (TLE)Lesson Plan in Technical Livelihood Education (TLE)
Lesson Plan in Technical Livelihood Education (TLE)
 
Table Napkin Folding
Table Napkin FoldingTable Napkin Folding
Table Napkin Folding
 
Final demo tle
Final demo   tleFinal demo   tle
Final demo tle
 
Lesson Plans for Elementary School
Lesson Plans for Elementary SchoolLesson Plans for Elementary School
Lesson Plans for Elementary School
 
Sample of Semi Detailed Lesson Plan
Sample of Semi Detailed Lesson PlanSample of Semi Detailed Lesson Plan
Sample of Semi Detailed Lesson Plan
 
Napkin folding(demonstration)
Napkin folding(demonstration)Napkin folding(demonstration)
Napkin folding(demonstration)
 
TABLE NAPKIN FOLDING (BBTE)
TABLE NAPKIN FOLDING (BBTE)TABLE NAPKIN FOLDING (BBTE)
TABLE NAPKIN FOLDING (BBTE)
 
Different types of table napkin
Different types of table napkinDifferent types of table napkin
Different types of table napkin
 
Lesson planning
Lesson planningLesson planning
Lesson planning
 
Final Demo Semi Detailed Lesson Plan in TLE 2 (LAN Cabling)
Final Demo Semi Detailed Lesson Plan in TLE 2 (LAN Cabling)Final Demo Semi Detailed Lesson Plan in TLE 2 (LAN Cabling)
Final Demo Semi Detailed Lesson Plan in TLE 2 (LAN Cabling)
 
Lesson plan in_technology_and_livelihood_education_1[1]
Lesson plan in_technology_and_livelihood_education_1[1]Lesson plan in_technology_and_livelihood_education_1[1]
Lesson plan in_technology_and_livelihood_education_1[1]
 
Semi-detailed lesson plan
Semi-detailed lesson plan Semi-detailed lesson plan
Semi-detailed lesson plan
 
Malamasusing banghay
Malamasusing banghayMalamasusing banghay
Malamasusing banghay
 
k to 12 tle grade 9 Lesson plan, structure of the hair
k to 12 tle grade 9 Lesson plan, structure of the hair k to 12 tle grade 9 Lesson plan, structure of the hair
k to 12 tle grade 9 Lesson plan, structure of the hair
 
DIFFERENT TYPES OF NAPKIN FOLDING
DIFFERENT TYPES OF NAPKIN FOLDINGDIFFERENT TYPES OF NAPKIN FOLDING
DIFFERENT TYPES OF NAPKIN FOLDING
 
To be edit acknowledgement
To be edit acknowledgementTo be edit acknowledgement
To be edit acknowledgement
 
food and beverages curriculum guide senior high school
 food and beverages  curriculum guide senior high school food and beverages  curriculum guide senior high school
food and beverages curriculum guide senior high school
 
Semi-detailed Lesson Plan [s] sound and [z] sound
Semi-detailed Lesson Plan [s] sound and [z] soundSemi-detailed Lesson Plan [s] sound and [z] sound
Semi-detailed Lesson Plan [s] sound and [z] sound
 

Similar to Lesson plan 3

Integration of technology_into_the_curriculum
Integration of technology_into_the_curriculumIntegration of technology_into_the_curriculum
Integration of technology_into_the_curriculum
Yezenia C
 
Integration of technology_into_the_curriculum
Integration of technology_into_the_curriculumIntegration of technology_into_the_curriculum
Integration of technology_into_the_curriculum
Yezenia C
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.doc
butest
 
Integrating technology w_classroom
Integrating technology w_classroomIntegrating technology w_classroom
Integrating technology w_classroom
Dave Meister
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
Web Design Syllabus.doc
Web Design Syllabus.docWeb Design Syllabus.doc
Web Design Syllabus.doc
butest
 
Artifacts P P T
Artifacts P P TArtifacts P P T
Artifacts P P T
LucWrite
 

Similar to Lesson plan 3 (20)

Basic Web Page Creation.pptx
Basic Web Page Creation.pptxBasic Web Page Creation.pptx
Basic Web Page Creation.pptx
 
Multimedia Essentials Tutorial Website
Multimedia Essentials Tutorial WebsiteMultimedia Essentials Tutorial Website
Multimedia Essentials Tutorial Website
 
Html week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandourHtml week7 2019 2020 by eng.osama ghandour
Html week7 2019 2020 by eng.osama ghandour
 
Integration of technology_into_the_curriculum
Integration of technology_into_the_curriculumIntegration of technology_into_the_curriculum
Integration of technology_into_the_curriculum
 
Integration of technology_into_the_curriculum
Integration of technology_into_the_curriculumIntegration of technology_into_the_curriculum
Integration of technology_into_the_curriculum
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.doc
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 
Integrating technology w_classroom
Integrating technology w_classroomIntegrating technology w_classroom
Integrating technology w_classroom
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdf
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdf
 
The Technique of Solving Html Assignment Questions
The Technique of Solving Html Assignment QuestionsThe Technique of Solving Html Assignment Questions
The Technique of Solving Html Assignment Questions
 
The Art of the Possible in Brightspace
The Art of the Possible in BrightspaceThe Art of the Possible in Brightspace
The Art of the Possible in Brightspace
 
Website designers and software Engineers
Website designers and software EngineersWebsite designers and software Engineers
Website designers and software Engineers
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 
Workshop 3 may 18 2021
Workshop 3 may 18 2021Workshop 3 may 18 2021
Workshop 3 may 18 2021
 
Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandour
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
 
Web Design Syllabus.doc
Web Design Syllabus.docWeb Design Syllabus.doc
Web Design Syllabus.doc
 
Artifacts P P T
Artifacts P P TArtifacts P P T
Artifacts P P T
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 

More from Keith Borgonia Manatad

More from Keith Borgonia Manatad (19)

Evaluation form
Evaluation formEvaluation form
Evaluation form
 
Leasson plan in TLE manicure
Leasson plan in TLE manicureLeasson plan in TLE manicure
Leasson plan in TLE manicure
 
Nail care lesson plan asessssment
Nail care lesson plan asessssmentNail care lesson plan asessssment
Nail care lesson plan asessssment
 
Leson plan in tle nailcare plain manicure
Leson plan in tle   nailcare   plain manicureLeson plan in tle   nailcare   plain manicure
Leson plan in tle nailcare plain manicure
 
Nail care manicuredesign
Nail care manicuredesignNail care manicuredesign
Nail care manicuredesign
 
Waste management
Waste managementWaste management
Waste management
 
Tle tailoring 1
Tle tailoring 1Tle tailoring 1
Tle tailoring 1
 
Tle commercial cooking 2
Tle commercial cooking 2Tle commercial cooking 2
Tle commercial cooking 2
 
TLE commercial cooking 1
TLE commercial cooking 1TLE commercial cooking 1
TLE commercial cooking 1
 
Htm lrubric
Htm lrubricHtm lrubric
Htm lrubric
 
Edge cutting tools
Edge cutting toolsEdge cutting tools
Edge cutting tools
 
Lesson plan in carpentry tools
Lesson plan in carpentry toolsLesson plan in carpentry tools
Lesson plan in carpentry tools
 
Carpentry hand tools
Carpentry hand toolsCarpentry hand tools
Carpentry hand tools
 
Parts of high speed sewing machine
Parts of high speed  sewing machineParts of high speed  sewing machine
Parts of high speed sewing machine
 
Parts of sewing
Parts of sewingParts of sewing
Parts of sewing
 
TLE obtain measurement
TLE obtain measurementTLE obtain measurement
TLE obtain measurement
 
Sewing tools measuring devices
Sewing tools measuring devicesSewing tools measuring devices
Sewing tools measuring devices
 
para himo bado TLE
para himo bado TLEpara himo bado TLE
para himo bado TLE
 
Over view of html
Over view of htmlOver view of html
Over view of html
 

Lesson plan 3

  • 1. Keith B. Manatad August 28, 2014 Lesson Plan in Technology and Livelihood Education HTML – Web Design I. Objectives: At the end of the lesson the student should be able to: • Identify the HTML Phrase Elements • Apply HTML Phrase Elements in a web page II. Subject - Matter/Content: Topic: HTML Phrase Eements References: < http://www.tutorialspoint.com/html/html_phrase_elements.htm>Accessed 2014 Materials: projector, laptop, power point presentation, notepad++ or notepad III. Procedure: A. Awareness 1. Prayer 2. Checking of attendance 3. Unlocking of difficulties - basic knowledge about typical HTML Syntax. 4. Motivation: - With the use of a video clip, let the students watch it and let them discuss the importance of simple webpage design. • Activity The Student will spot the Errors of HTML tag and correct the HTML TAGs and attributes. A. DEBUG and rewrite <!DOCTYPE HTML> <LMHT> <HEAD><title>Activity 3</title></HEAD> <body colorbg="black"> <div align="center"> <gmi src="" width="250" height="250" ></div> <div align="center"> <p><H1> Wrecking Ball</h1></p>
  • 2. <p><font color="white" face="edwardian"size="5"><align="center"> We clawed,</b> we chained our hearts in vain <br>We jumped never asking why <br>We kissed, I fell under your spell. <br>A love no one could deny</p> <p>Don't you ever say I just walked away <br>I will always want you <br>I can't live a lie, running for my life <rb>I will always want you</font></vid> </p> </body> </html> B. Construct an HTML TAG: With Browser TITLE: Activity 3 With large text and centered in the screen: HELLO WORLD! • Analysis The Student will discuss HTML Tags. B. Lesson Proper • Presentation The a group of Students will report and present to their classmates with actual Tags in the laptop with projector. Using Notepad++ with the correct syntax of each html Phrase elements facilitated by the teacher. IV. Application - The Student will be facilitated with computer laboratoiry. V. Assessment
  • 3. Identify HTML Phrase Tags VI. Assignment: 1. What is HTML Meta Tags? 2. Give an Example as you can of HTML Meta Tags.