Topic Basic HTML and CSS Workshop
Schedule December 5 – 9, 2023; 40 hours
Overview HTML (Hypertext Markup Language) - is the backbone of a web
page. It is a markup language used to structure content and
define the elements on a web page.
HTML documents are made up of HTML tags, which are enclosed in
angle brackets. These tags define the structure and content of a web
page. Here are some essential HTML concepts:
1. HTML Elements - Are building blocks of a web page. They
consist of an opening tag, content, and a closing tag.
2. HTML Tags - Define the type and purpose of an
3. Attributes - Can have attributes that provide additional
information about an element.
4. HTML Document Structure - Every HTML document
should have a structure that includes a <html> element,
<head> for meta-information, and <body> for the visible
content.
CSS ( Cascading Style Sheets) - Used to control the presentation
and layout of HTML elements.
It separates the content from its visual styling, making it easier to
manage and update the look and feel of a website. Key concepts in
CSS include:
1. SELECTORS - Are used to target HTML elements
that you want to style. You can select elements by
tag name, class, ID, or other attributes.
2. PROPERTIES - Define the visual attributes of
elements, such as color, size, font, and spacing.
3. STYLESHEETS - Can be included in an HTML
document using inline styles, internal stylesheets, or
external stylesheets.
- External stylesheets are often
preferred for better organization
and easier maintenance.
4. CASCADING - Styles can be inherited from parent
elements, overridden by more specific rules, and
influenced by the order of declaration
By combining HTML and CSS, you can create visually
appealing and well-structured web pages.
JavaScript is often used alongside HTML and CSS to add
interactivity and dynamic behavior to websites.
Learning At the end of this lesson, participants should be able to:
Outcome 1. Define HTML and CSS
2. Value the importance of HTML and CSS
3. Create a simple website using HTML and CSS.
Pre - Face-to-Face Activity Resources/
Assessme Materials
nt (1) Group Activity
https://
The class will be divided into two (Team A and Team B), www.deped.go
they will be discussing “Problems occur during the class v.ph/wp-
lesson and how they make a solution to it”, They only have content/
20 minutes to discuss it with their members and write their uploads/
strategies on manila paper and discuss it in front of the 2019/08/
class. DO_s2019_021
.pdf
(2) Instruction: Encode/Write in the space provided.
(Individual)
Now, think that you are a teacher and observe a student’s
behavior in this situation below:
While you are teaching, some of your students started to
laugh, some are sleepy, and most are writing while you are
talking. When you evaluate a quiz most of them got a low
score. That’s why your department head approach you about
what happened.
(1) List down at least three(3) reasons why students got a
low score.
_________________.
(2) Identify at least three(3) strategies that you can do so
that students will become more attentive and actively
participate in the class discussion.
__________________________________.
LESSON #1
https://
HTML
www.simplilear
HTML or HyperText Markup Language is used for creating web n.com/
applications and websites. Below, we break the expansion down for tutorials/html-
better understanding: tutorial/html-
vs-
HyperText: css#:~:text=H
TML%20is
%20a
HyperText or “text wrapped within a text.” is very similar to a %20markup
hyperlink, but contains an underlying text which, when clicked, %20language,
initiates a redirection to a new webpage. written%20in
%20a
Markup language: %20markup
%20language.
A markup language needn’t be a programming language, but helps
in applying formatting and layout to a text document.
It helps create a more dynamic and interactive text content.
Features of HTML
Considering it is one of the simplest languages to design and code a
website, the language is not case-sensitive.
Example: <html> and <HTML> are both acceptable
For purposes of keeping the language usable on any platform, and
HTML is not specific to any one operating system like Android OS
or the iOS; instead HTML can run on nearly all the OS.
A Tree-structure is the basic aspect of HTML. This allows a root
HTML tag to continue as an element, while child elements which
are added at any point of the structure as head and the body tags.
HTML tags shall carry display information that can be used in
Firefox, Chrome or any type of browsers
Very useful for adding images, and hyper images, videos as well as
other web pages so as to render them user friendly.
CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making
web pages presentable.
CSS is designed to enable the separation of document content
from document presentation, including elements such as font,
layout, and colors.
The style definitions are usually saved in external .css files.
Features of CSS
CSS is critical for website design as it helps in separating the design
from the content.
This helps in better readability, flexibility in programming and
accessibility.
CSS files are integrated in HTML documents thus:
1. Internal CSS – is used as a style tag within the head tag. The
advantage of this is the ability to style three or four elements
2. External CSS - is used to add external CSS file by using the
<link>tag and will be positioned in the head tag of the HTML file
3. Inline CSS – can be counted as a better method to use as it will
define properties for a single tag like style attribute within any tag
One can use multiple selectors to access every element/group
Example: ID Selector(#), universal selector (*)
Styling is defined as key value pairs, and is used to define the font-
size for H1 in 24px, or default 32px.
https://
stuyhsdesign.w
ordpress.com/
basic-html/
structure-html-
document/
Basic structure of an HTML document
The basic structure of an HTML document consists of 5
elements:
1. <!DOCTYPE>
2. <html>
3. <head>x`
4. <title>
5. <body>
The DOCTYPE
A DOCTYPE declaration must be specified on the first line of
each web document:
The DOCTYPE tells the web browser which version of HTML
the page is written in. In this class, we will be using ‘XHTML
Transitional’, which allows us a little flexibility.
The <html> Element
Immediately following the DOCTYPE declaration is the
<html> element:
The <html> element tells the browser that the page will be
formatted in HTML and, optionally, which world language the
page content is in.
The <head> and <body> Elements
The <head> element surrounds all the special “behind the
scenes” elements of a web document. Most of these
elements do not get displayed directly on the web page.
The <body> element surrounds all the actual content (text,
images, videos, links, etc.) that will be displayed on our web
page.
The <meta> Element
Immediately after the <head> line, we place this <meta>
element:
The <title> Element
The <title> element defines what text will show in the web
browser’s title bar:
Every web document must include one and only one
instance of DOCTYPE, <html>, <head>, <body>, and
<title>.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading:
Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.yehey11.com">This is a link</a>
View HTML Source Code:
Right-click in an HTML page and select > View Page Source
(in Chrome) or “View Source”(in Edge), or similar in other
browsers. This will open a window containing the HTML
source code of the page.
STEPS IN CREATING HTML
Step 1: Open Notepad (PC)
Step 2 (Write HTML Basic Structures)
Step 3: (Save the HTML Page)
Step 4: (View the HTML Page in Your Browser)
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose
“Inspect” or “Inspect Element” to see what elements
are made up of (you will see both the HTML and the
CSS). You can also edit the HTML or CSS on-the-fly in
the Elements or Styles panel that opens.
HTML BASIC STRUCTURE VIDEO..
FORMATIVE ASSESSMENT 1:
https://
www.buffalo.ed
u/catt/
develop/
design/
equitable-
inclusive.html
#:~:text=The
%20goal%20of
%20equitable
%20teaching,h
ave%20the
%20opportunit
y%20to
%20succeed.
https://
www.youtube.c
om/watch?
v=1lg3MytDC-
Y
https://
www.sarvaloka
a.org/post/
importance-of-
culture-based-
education
https://
www.sarvaloka
a.org/post/
importance-of-
culture-based-
education
FORMATIVE ASSESSMENT 1:
Instruction: https://
Inside the word box are the identified quality, equitable, www.pallikkuta
culture-based, and complete basic education in teaching. m.com/edu-
Write each indicator to its correct quadrant. news/top-10-
principles-of-
effective-
Notebook teaching
Teaching based on their beliefs
Learning Materials
Teaching Strategies
Guidance Counseling
Special Classroom
Catechesis
Mass Every First day of the Month
Motivational Videos
Ballpen/Pencil
Quality Teaching Equitable Teaching
Culture-Based Teaching Basic Education
Congratulations! You have encountered few of the many possible
characteristics of being a successful teacher. But wait, there’s more
LESSON #2
LESSON PLANNING
WHAT IS LESSON PLANNING???
It is the activity that the teacher performs before the actual lesson takes
place. A lesson plan is a detailed description of the instructional strategies
and learning activities to be performed during the teaching/learning
process.
IS LESSON PLANNING IMPORTANT?
Effective lesson planning contributes to successful learning
outcomes for students in several ways. A well-designed lesson plan:
1. Helps students and teachers understand the goals of an
instructional module
2. Allows the teacher to translate the curriculum into learning
activities
3. Aligns the instructional materials with the assessment
4. Aligns the assessment with the learning goal
5. Helps assure that the needed instructional materials are
available
6. Enables the teacher to thoughtfully address individual
learning needs among students
Click the link below for more information about Lesson Planning.
https://counseling.education.wm.edu/blog/the-importance-of-lesson-
planning-for-student-success#:~:text=Effective%20lesson%20planning
%20contributes%20to,
the%20curriculum%20into%20learning%20activities
Kinds of Lesson Plan
I. Brief lesson plan
II. Semi–detailed lesson plan
III. Detailed lesson plan https://
www.quora.com/What-
are-the-similarities-of-a-
What is brief lesson plan? brief-lesson-plan-and-a-
A brief lesson plan and detailed lesson plan each have objectives detailed-lesson-plan
to be reached along with the procedure to teach the new skill or
concept,
a brief lesson plan is for the short term and the detailed plan will
show how this skill will be carried on to build more advanced skills
in higher grades.
How do you write a brief lesson plan?
Identify the learning objectives
Plan the specific learning activities
Plan to assess student understanding
Plan to sequence the lesson in an engaging and meaningful
manner
Create a realistic timeline
Plan for lesson closure
Sample of Brief lesson plan
What is Semi-detailed Lesson Plan?
Semi-detailed plans are less intricate than detailed ones, but they
still focus on what you want to cover for that subject on that
day.
Sample of Semi-detailed lesson plan
What is Detailed lesson plan?
A detailed lesson plan (DLP) is exactly that, a detailed description
of the exact steps to teach a specific topic.
The most effective lesson plans have six key parts:
Lesson Objectives.
Related Requirements.
Lesson Materials.
Lesson Procedure.
Assessment Method.
Lesson Reflection.
Sample of Detailed Lesson Plan
https://
8 Elements of Lesson Plan www.indeed.com/career-
advice/career-
1. Grade level and Subject development/lesson-
2. Types of Lesson plan-example
3. Duration
4. Topic
5. Objectives
6. Materials
7. Directions
8. Assessment
Grade Level and Subject
- One of the first sections of a lesson is the grade level and subject
of the lesson you’re going to teach.
- If you share your plans with anyone, they should know who the
intended audience of your lesson is and what the subject is.
Including this line in a lesson plan can also be helpful if your
administration wants to see what you’re teaching.
Example: Grade 7: ICT
Types of Lesson
- This is a brief section that explains the type of lesson you’re going
to be teaching.
[Explain the type of lesson you’re teaching, such as a daily or
weekly lesson]
Duration
- The duration of a lesson plan explains how long your lesson is
going to take to complete.
- If it's a daily lesson plan, it may take the entire length of a typical
class period. A weekly lesson plan may take the total amount of
time you see your students in one week. If you're teaching a unit,
it might be 20 50-minute sessions.
Example: 30mins
Topic
- is the subject you’re focusing on for the duration of the lesson.
- is typically a short section of the lesson plan, as you’re simply
listing the subject of the lesson's focus.
Example:
Topic: Basic Photoshop Editting
Objective
- is a crucial part of the lesson plan because it states the goal that
students should accomplish at the end of the lesson.
- In one to two sentences, explain the overall goal of your lesson.
This includes what students should be able to do or understand by
the end of the lesson.
Example: At the end of the lesson, 80% of students should be able to:
List 5 parts of the Computer
Appreciate the importance of ICT in our daily living.
Demonstrate proper installation of Comp
Materials
- any materials the students and teacher need to complete the
lesson successfully. Typical materials include specific pages from a
textbook, printouts, a writing utensil, and paper.
Example:
Laptop
Projector
Textbook
Directions
- takes the most time to complete because it contains minute-by-
minute directions for the lesson.
- include what you intend to do at the beginning, middle and end of
the lesson.
Example:
[Number of minutes]: [Include one to three sentences of
explanation regarding what teachers and students should do
during this portion of the lesson.]
Assessment
The end of each lesson usually has an assessment that evaluates the
students' overall understanding of the lesson's topic.
Example:
What is the importance of Photoshop? Write your answer on your
notebook.
Formative Assessment II
Duration: 30 minute (Individually)
Instruction: Think of a topic and make an objective of your own topic.
(Individually)
Explain what kind of topic you want to present.
Think of an objective related to your topic.
Key Teaching Principles
Concepts - Effective teaching involves acquiring relevant knowledge about
/ Focus students and using that knowledge to inform our course design
Points and classroom teaching.
Lesson Planning
- It is the activity that the teacher performs before the actual
lesson takes place. A lesson plan is a detailed description of the
instructional strategies and learning activities to be performed
during the teaching/learning process.
Post- Now that you learned the importance of teaching and already know how
assessm to make a detailed lesson plan. Think of a topic that you prefer and Design
ent and your own strategies by using available materials or equipments. You only
Feedback have 30 minutes to demonstrate your topic in front of your classmates.
Your performance shall be graded based on the scoring rubrics attached
below.
Good luck and God bless!
Assignme A. Provide strategies that can make your lesson more
nt/ understandable and meaningful.
Homewor B. Bring teaching materials that can help you in
k demonstrating your topic.
Example: Laptop, Pentelpen, Visual Aids, Projector, Etc.
Referenc https://www.deped.gov.ph/wp-content/uploads/2019/08/
es: DO_s2019_021.pdf
https://www.buffalo.edu/catt/develop/design/equitable-
inclusive.html#:~:text=The%20goal%20of%20equitable%2
0teaching,have%20the%20opportunity%20to%20succeed.
https://lens.monash.edu/2018/08/14/1357398/the-nature-
of-quality-in-teaching-and-learning#:~:text=Quality%20in
%20teaching%20and%20learning%20can%20
be%20seen%20in%20the,learning%20and
%20learning%20influences%20teaching.
https://www.pallikkutam.com/edu-news/top-10-principles-
of-effective-teaching
https://www.sarvalokaa.org/post/importance-of-culture-
based-education
https://www.indeed.com/career-advice/career-
development/lesson-plan-example
RUBRICS for Demo-Teaching
-END OF TOPIC-
