Scribd
Upload
8 views22 pages

Topic

The document outlines a Basic HTML and CSS Workshop scheduled for December 5-9, 2023, covering essential concepts of HTML and CSS, including their structure, elements, and styling techniques. Participants will learn to define HTML and CSS, understand their importance, and create a simple website. The workshop includes assessments and lesson planning strategies to enhance teaching effectiveness.

Uploaded by

Christopher Purcia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views22 pages

Topic

The document outlines a Basic HTML and CSS Workshop scheduled for December 5-9, 2023, covering essential concepts of HTML and CSS, including their structure, elements, and styling techniques. Participants will learn to define HTML and CSS, understand their importance, and create a simple website. The workshop includes assessments and lesson planning strategies to enhance teaching effectiveness.

Uploaded by

Christopher Purcia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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-

You might also like