Scribd
Upload
11 views

HTML and CSS Workshop

The document outlines a Basic HTML and CSS Workshop scheduled for December 5-9, 2023, focusing on the fundamentals of HTML and CSS, including their structure, elements, and styling techniques. It emphasizes the importance of quality teaching, equitable and culture-based education, and effective lesson planning to enhance student engagement and learning outcomes. Participants will learn to define HTML and CSS, appreciate their significance, and create a simple website by the end of the workshop.

Uploaded by

Christopher Purcia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

HTML and CSS Workshop

The document outlines a Basic HTML and CSS Workshop scheduled for December 5-9, 2023, focusing on the fundamentals of HTML and CSS, including their structure, elements, and styling techniques. It emphasizes the importance of quality teaching, equitable and culture-based education, and effective lesson planning to enhance student engagement and learning outcomes. Participants will learn to define HTML and CSS, appreciate their significance, and create a simple website by the end of the workshop.

Uploaded by

Christopher Purcia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

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.gov.
they will be discussing “Problems occur during the class ph/wp-content/
lesson and how they make a solution to it”, They only uploads/
have 20 minutes to discuss it with their members and 2019/08/
write their strategies on manila paper and discuss it in DO_s2019_021.p
front of the class. df

(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://
www.simplilearn.
HTML
com/tutorials/
HTML or HyperText Markup Language is used for creating web html-tutorial/
applications and websites. Below, we break the expansion down html-vs-
for better understanding: css#:~:text=HT
ML%20is%20a
 HyperText: %20markup
%20language,wr
itten%20in%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.

 Markup language:

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.
Quality Teaching

Quality in teaching and learning can be seen in the


way the knowledge, skills, and ability of the teacher
are employed to develop meaningful pedagogic
experiences for students. Such experiences are
evident when teaching impacts learning and learning
influences teaching.

Above and beyond in teaching

To go beyond ‘telling as teaching’ and ‘listening as


learning’, consider what it takes to be knowledgeable of,
and capable of doing.

(3) Create a need-to-know in students so they


genuinely engage in learning

Knowing how to create an invitation to students to learn


so they develop curiosity and interest in a subject is
crucial. Moving students from being passive absorbers of
information to active, thoughtful learners who question
content and build their knowledge of an area is crucial to
independence in learning.

(4) Develop ways to engage a diversity of


learners at the same time

This, despite the inevitable variety of entries, points to


engagement in a subject, range of levels of interest,
motivation, and attitudes to the content, and perceived
ability and style of learning. This is demanding work.
Think, for example, about when a doctor diagnoses a
patient – it’s through a one-on-one consultation. However,
when a teacher seeks to diagnose students’ learning
needs, it’s through a one-to-many (class size matters) –
and it happens multiple times every day.

(5) Draw out and use students’ prior knowledge

Students don’t enter the classroom as blank slates. They


come with pre-existing ideas, views, opinions,
experiences, and ‘alternate facts!’ that a teacher must be
able to draw out and work with in order to build
meaningful learning. Building integrated, well-connected,
relevant, and useable knowledge of a subject is central to
ensuring that such knowledge can (and will) be applied in
the world that exists beyond the classroom walls. That
means information must be processed, not just
remembered.

e.g., from the abstract to the concrete.

Example: The teacher explains the difference between a


silent student and a noisy student, and at the same time,
the teacher picks two(2) students to act, one student acts
as a silent student, and the other one acts as a noisy
student. That acting makes the student understand the
difference between the two easily.

(6) Conceptual understanding of content

A strong indication of a deep knowledge of a subject is


evident in a person’s conceptual understanding, and that
goes well beyond simply ‘knowing the facts.

Example: The teacher identify the parts of a tree, so for


the students to conceptualize what are the parts of a tree,
you must bring an actual model of a tree for them to
easily understand what you are identifying.

(7) Building trusting relationships and safe


learning environments

To be able to support students to publicly share their


ideas, speak up about uncertainty and work through their
doubts and confusion requires a teacher to possess
interpersonal skills that foster trust and confidence.
Again, this offers insights into the sophisticated nature of
their knowledge, skills, and ability.

Build a teacher-to-student relationship, and also a


student-to-student relationship for them to easily engage
in the lesson.

Click on the video for your supplemental learning


activity.
https://
www.buffalo.edu
/catt/develop/
design/
equitable-
inclusive.html#:
~:text=The
%20goal%20of
%20equitable
%20teaching,ha
Equitable Teaching ve%20the
%20opportunity
-to provide needs-based support to ensure %20to
equitable learning opportunities. While the goal of %20succeed.
equal support in a classroom is better than providing no
support, it does not necessarily provide the support
needed for all students to have the opportunity to
succeed.

Equitable teaching refers to all students “receiving what


they need to develop to their full academic and social
potential”

For example: Equality teaching is when a student have a


pen and the teacher give all the student a pen for them to
be equal. While, Equitable Teaching is when a student
need a learning tool and support, the teacher provides https://
what the student’s need to easily absorb learning. www.youtube.co
m/watch?
Click the video below. v=1lg3MytDC-Y
https://
www.sarvalokaa.
org/post/
importance-of-
culture-based-
education
Culture-Based Teaching

is an approach in which teaching and learning happen


based on the values, norms, beliefs, and practices that
are the foundation of any culture.

Teachers are the most important aspects of culture-based


learning as they should work towards motivating students
to achieve not only academically, but also socially, https://
culturally, psychologically, and spiritually. www.sarvalokaa.
org/post/
How is culture important for the child? importance-of-
 Culture teaches values, beliefs, and traditions. culture-based-
 It influences the social interaction with education
parents, siblings, peers, and teachers.
 It influences their language and
communication.

Click the video below. Motivational Video

Basic Education

Basic education teachers are either classroom teachers or subject


teachers. Special needs teaching and guidance counseling are provided
by special needs teachers, special needs classroom teachers, and
guidance counselors. Basic education schools may also have preschool
groups.

Top 10 Principles of Effective Teaching https://


www.pallikkutam
Effective teaching is not about jargon, buzzwords or .com/edu-news/
particular philosophies of teaching. It is about helping top-10-
principles-of-
your students to achieve the best results they can effective-
at school. teaching

Principles of teaching help the teacher to an extent to


know about the effectiveness of their own teaching
method. Here are the ten principles of effective teaching.

1. Care about helping your kids to do the best


that they can
 Effective teachers are passionate about
helping their students to learn.
 This leads to a situation where the teacher
and the students are working together
towards to a common goal – helping every
child to learn as much as they can.

2. Understand but don’t excuse your students


 Effective teachers seek to understand their
students, but so do most teachers.
 Effective teachers use their understanding to
adjust their approach to teaching, BUT they
did not use it to excuse misbehavior, poor
effort, or, lack of real academic progress.
3. Be clear about what you want your students
to learn
 Effective teachers are clear about what they
want their students to learn and they share
this with their students.
 Effective teachers also know where students
are currently in this area. They then work
towards developing the understanding and
skills their students need to demonstrate
that they have mastered the material.
4. Disseminate surface knowledge and promote
deep learning
 Effective teachers want their students to be
able to think critically and to develop a deep
understanding of the material being taught
in class.
 Armed with this foundation, teachers can
help students to develop an understanding
of the topic at hand.
5. Gradually release responsibility for learning
 Effective teachers do not ask their students
to perform task they have not shown their
students how to do. RATHER, they start by
modelling what students need to do.
 They then ask their students to have a go
themselves, while being available to help as
needed. (always guide our students).
6. Give your students Feedback
 Effective teachers give students dollops of
feedback. This feedback tells the students
how they are going and gives them
information about how they could improve.
 Feedback allows students to adjust their
understanding and efforts before it is too
late.

Take Note: Without feedback, students are likely to


continue holding misconceptions and making errors.
7. Involve students in learning from each other
 Effective teachers supplement teacher-led,
individual learning, with activities that
involve students in learning from each other.
 These activities must be carefully structured
and used in conjunction with more traditional
teaching.
8. Manage your students behavior
 Effective teachers know that the student’s
behavior can help or hinder how much
students learn in the classroom.
 They are consciously aware of what is going
on in the classroom, and they nip problems
in the bud before quickly returning the focus
to the lesson at hand.
9. Evaluate the impact you are having on your
students
 Effective teachers regularly assess students’
progress by evaluating them after the lesson
ends.

Example: Quizzes, Assignments, Exam, Etc.


10. Continue Learning ways that you can be
of even more students
 Effective teachers love learning and are
always seeking to improve their own
practices. (Always think out of the box).
Example: Discovering new ideas by reading
different kinds of textbooks, Travelling for
learning purposes, etc.
FORMATIVE ASSESSMENT 1:

Instruction:
Inside the word box are the identified quality, equitable,
culture-based, and complete basic education in teaching.
Write each indicator to its correct quadrant.

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-

You might also like