SlideShare une entreprise Scribd logo
1  sur  3
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.

Contenu connexe

Tendances

HTML Intermediate
HTML IntermediateHTML Intermediate
HTML Intermediatec525600
 
HTML Advanced
HTML AdvancedHTML Advanced
HTML Advancedc525600
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1claytors
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPyucefmerhi
 
Html for beginners part I
Html for beginners part IHtml for beginners part I
Html for beginners part IUnaib Aslam
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basicsAliMUSSA3
 
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 waqarWaqar Chodhry
 
Hypertext markup language (html)
Hypertext markup language (html)Hypertext markup language (html)
Hypertext markup language (html)Aksa Sahi
 
Html Power Point 1
Html Power Point 1Html Power Point 1
Html Power Point 1JenniferHinz
 

Tendances (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
 

En vedette

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, CookeryQA Ilagan
 
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
 
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)Cristina Protacio, LPT
 
Final demo tle
Final demo   tleFinal demo   tle
Final demo tlefloeaz02
 
Lesson Plans for Elementary School
Lesson Plans for Elementary SchoolLesson Plans for Elementary School
Lesson Plans for Elementary SchoolSilvia
 
Napkin folding(demonstration)
Napkin folding(demonstration)Napkin folding(demonstration)
Napkin folding(demonstration)Roniño Cañete
 
TABLE NAPKIN FOLDING (BBTE)
TABLE NAPKIN FOLDING (BBTE)TABLE NAPKIN FOLDING (BBTE)
TABLE NAPKIN FOLDING (BBTE)jhovy_barias
 
Different types of table napkin
Different types of table napkinDifferent types of table napkin
Different types of table napkinWynne Li
 
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)Manila Central University
 
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
 
Semi-detailed lesson plan
Semi-detailed lesson plan Semi-detailed lesson plan
Semi-detailed lesson plan Yuna Lesca
 
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 teacheraki
 
DIFFERENT TYPES OF NAPKIN FOLDING
DIFFERENT TYPES OF NAPKIN FOLDINGDIFFERENT TYPES OF NAPKIN FOLDING
DIFFERENT TYPES OF NAPKIN FOLDINGindian chefrecipe
 
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 schoolRai 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] soundMonica Angeles
 

En vedette (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
 

Similaire à Lesson plan 3

Basic Web Page Creation.pptx
Basic Web Page Creation.pptxBasic Web Page Creation.pptx
Basic Web Page Creation.pptxKarenGregorio6
 
Multimedia Essentials Tutorial Website
Multimedia Essentials Tutorial WebsiteMultimedia Essentials Tutorial Website
Multimedia Essentials Tutorial Websitejamville82
 
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 ghandourOsama Ghandour Geris
 
Integration of technology_into_the_curriculum
Integration of technology_into_the_curriculumIntegration of technology_into_the_curriculum
Integration of technology_into_the_curriculumYezenia C
 
Integration of technology_into_the_curriculum
Integration of technology_into_the_curriculumIntegration of technology_into_the_curriculum
Integration of technology_into_the_curriculumYezenia C
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.docbutest
 
Integrating technology w_classroom
Integrating technology w_classroomIntegrating technology w_classroom
Integrating technology w_classroomDave Meister
 
Module 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfModule 1 - Introduction to HTML.pdf
Module 1 - Introduction to HTML.pdfHumphrey Humphrey
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfDark179280
 
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 QuestionsLesa Cote
 
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 BrightspaceD2L Barry
 
Website designers and software Engineers
Website designers and software EngineersWebsite designers and software Engineers
Website designers and software EngineersRajesh Grover
 
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 ghandourOsama Ghandour Geris
 
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 applicationsLaurence Svekis ✔
 
Web Design Syllabus.doc
Web Design Syllabus.docWeb Design Syllabus.doc
Web Design Syllabus.docbutest
 
Artifacts P P T
Artifacts P P TArtifacts P P T
Artifacts P P TLucWrite
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLOlivia Moran
 

Similaire à 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
 

Plus de 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.