Name: ROSALYN A.

SAB

Teaching Outline in TLE 9- COMPUTER

I. OBJECTIVES

A. General Objectives :
At the end of this 1-week activity, the Grade 9 students
should be able to:
 Discover the basic concepts involved in webpage design;
 Create a well-formed website according to W3C
standards;
 Evaluate other websites; and
 Analyze the importance of DOCTYPE declaration.

B. Specific Objectives :

COGNITIVE AFFECTIVE PSYCHOMOTOR

Give the Appreciate the Write the
definition of usefulness of basic
text editor the Internet. patterns for
and how it HTML tags.
differs from
WYSIWYG
editor
Define HTML, Manifest Create a
XHTML, and accuracy and different
W3C display kinds of
confidence in lists,
writing markup including
tags. nested lists.
Appreciate the
use of HTML
tags.
Explain the Reflect and Use tags to
main elements show interest format text
of an HTML in creating a size and
document website. positions in
the webpage.
Create a
school web
site.

II. SUBJECT MATTER

A. Topic : Untangling the Web

B. Subtopic(s) : HTML Tags

Web Tools

W3C Standards

Tags for Lists

1
 Planning Your Website

C. References Used : Book:

Web Design 6th Edition. (2018).
TechFactors, Inc.

D. Materials : Projector & Laptop for the PowerPoint

presentation
E. Enduring Understanding
How can I create my own Web page?
What would be a good website?
F. Content Standard
Outline the concepts in Web page design.
G. Performance Standard
Explain the concepts in Web page design.
III. METHODOLOGIES

APPROACH METHODS TECHNIQUES STRATEGIES

Experient Inquiry-Based Lecture Visualization
ial Learning Interactive
Learning Online PowerPoint
– I will Inquiry-based Discussion Presentation
use learning is via Google and/or Screen
experient more than Meet (Meet Sharing
ial asking a link
learning student what he https://meet. Cooperative
because or she wants to google.com/lo Learning
it is an know. It’s okup/efebdupi Encourage
approach about g) or ZOOM students of
to triggering Demonstration mixed abilities
education curiosity. And with to work
that activating a individual together by
focuses student’s and group promoting small
on curiosity is a activities group or whole
"learning far more Explanation: class
by important and In the activities.
doing," complex goal demonstration Applicable for
on the than mere and lecture Zoom Class with
participa information method the the “Breakout
nt's delivery. teacher will Room” feature
subjectiv discuss the
e Explanation: basic
experienc We will never concepts and • Discussion
e. be able to help will show how Strategies -
Explanation: students learn a process is Engaging
This if we tell them done while students in
approach is everything they the students discussion
very need to know. become deepens their
applicable Rather, we must observers. learning and
in this provide them In the motivation by
subject area with classroom propelling them
and topic. opportunities setting: The to develop

2
 The role of to explore, demonstrator, their own views
the educator inquire and usually and hear their
is to design discover new teachers or own voices. A
"direct learning. The representativ good
experiences" core of inquiry es from the environment for
that include is a groups, are interaction is
preparatory spontaneous and knowledgeable the first step
and a self-directed in preparing in encouraging
reflective exploration. the tools students to
exercises. In the needed talk.
classroom according to
In the setting: the steps to In the
classroom 1. Define the be followed. classroom
setting: The topic or The rest of setting: Both
students introduce the the class the teacher and
will open question. becomes students will
their 2. Guide focused on have an active
assigned students plan the activity participation
PCs, open where and how and in the
available to gather data concentration discussion. The
text editors and on the teacher will
and information. subject is give all the
incorporate 3. Students assured. students a fair
the tags present chance to talk
that they findings Flipped Classroom and share their
learned from through group Model- It insights.
the topic in sharing and involves encouragi
order to writing. ng students to
complete the prepare for the
given tasks. lesson before
class.

Explanation: The
class becomes a
dynamic
environment in
which students
elaborate on what
they have already
studied. This
allows students to
go beyond their
normal boundaries
and explore their
natural curiosity.
In the classroom
setting: The
teachers will show
sample website and
let the students
do an observation.
Later, they will
be asked to share
their observations
to the class.

Motivational Activity: Questioning

3
Ask the class what they do when they surf the Web. Ask their
favorite sites and write these on the board. Ask them what their
site would look like and what it would be about if ever they make
one. Write their answers on the board.

State that websites are easy to create and it has lately been a
creative way of expressing oneself. All you need to know are a
few rules and tags and your dream website could be on its way.

IV. TEACHING-LEARNING ACTIVITIES

(Must synchronize with the AMTS)
Experiential Learning (Hands-On Activity- Incorporating HTML
Tags)
Students will be given an individual hands-on activity in
preparation for a bigger task which is the school website. (see
Hands-On Activity in Mission 4)

COOPERATIVE LEARNING
Group Activity:
Brainstorming – Topic (Planning a website)
Students will have a sharing of their plans for a school
website. They will create a layout of their planned website
by applying the steps. Present their group’s findings in a
class.

INQUIRY BASED LEARNING

The teacher will show an excerpt from Wikipedia which had been
formatted using HTML tags. They will be asked of questions like:

What are your observations from the excerpt?

What tags were used to render such format?
By asking questions and seeking answers to their questions based
on the given excerpt, the students begin to synthesize bits of
information.
FLIPPED CLASSROOM MODEL
Assuming that the students are already aware of the patterns for
HTML tags. The students will construct a web page applying
formatting tags. The teacher will ask the students about the tags
they used based on their output.

4
VISUALIZATION
The teacher will show an example of a web page and let the
students observe. The teacher will also use PowerPoint
presentation during discussion.
DISCUSSION STRATEGIES
The teacher will discuss the concepts related to the topic and
let the students participate during discussion.
ASSESSMENT ACTIVITIES

A.1 WRITTEN ASSESSMENT

MISSION 1
SKILLS WARM-UP
Match the concepts with their correct
function/description. Write the letter of the correct
answer on the blank provided before each number.
1. splash page a. visitors in the website
2. usability b. the sequence of pages as
the user accesses the
website
3. c. a measure of efficiency
index.html/default.html and elegance of a website
4. site map d. browsers will
automatically bring you to
this page when users enter
only the domain name of the
site
5. guestbook e. welcome or entrance page
containing eye catching
graphics
6. about me/ contact me f. a process that saves the
website owner time, money
and effort
7. page flow g. a website section that
provides links to other
websites
8. audience h. an outline of a
website’s content
9. planning i. visitors’ online message
log
10. site link j. a website section that
provides information about
the website author

A.2 ONLINE ASSESSMENT

Clickable Links : Online Quiz
a. USING KAHOOT! App
https://create.kahoot.it/share/self-check-l7/12d325d4-c83c-4988-
b81b-27abef3ff700?fbclid=IwAR3Gu6xbMm1kfYTXOqdixnES-
eFRRZ27sSja8LAImyzIkpxB_cisI1PUgNM

b. Online Quiz using Google Form posted in Google Classroom

Class code
hqirti5

5
Link for the quiz:
https://docs.google.com/forms/d/1zxvouVkM1IXXlsLUNnAyMjezdKLzSyf5
u1EuJCUBe18/edit?usp=sharing

MISSION 2
Answer the following questions:
1. What are the steps in planning for a website?
2. What are the characteristics of a possible website
audience?
3. At a minimum, what page is required for a website?
4. What section do audiences log in to and leave their
remarks about the website?
5. What website section provides links to other websites?
6. What website section provides information about the
website author?
7. What website section provides information about ideas on
how the website is conceived?
8. What does usability mean?
9. What are some usability tips you have learned?
10. What page provides a striking entrance?
11. What are some usability tips you have learned?
12. What page provides a striking entrance?

MISSION 3
1. Create a group of five to do research on and discuss how the
Internet and the World Wide Web have changed the way people
communicate and conduct trade. What positive and negative impacts
have taken place since the dawn of the Internet?
2. With the same group, research a topic related to “Exercising
the Power of the World Wide Web” which is interesting to the
group and which is also socially important, and which most of the
class does not know much about. Search through the Internet about
the topic. What lessons can be learned from this?

6
3. Look for 2 websites and make a comparison of the similar type
of website. Find the elements of the page and evaluate if it
follows the proper component of the page.
B. HANDS- ON ACTIVITY
Mission 4
1. Create a Web page and write a discussion on a topic you want.
Choose a topic below:
a. Any current news/event in the country
b. Current event of the school
2. Save the HTML with the filename[surname]-discussion.html(don’t
include the brackets)
C. PERFORMANCE TASK (rubric must be provided)
MISSION 5

Applying the skills learned in the topic, create the

basic framework of the School’s Web site using HTML tags.
The following pages are to be included:
a. Homepage
b. About Us
c. News Updates
d. Calendar of Activities
e. Alumni Information
f. Homework Help
g. Contact Us
h. Department Pages
 JHS Department
 SHS Department
Once you have structured the Web site according to the pages
specified above, the following rules must be applied:
 Each page must have a link back to the Home Page
 The Home Page must have links to all other pages of the
Web site
 A “teaser” or one-paragraph information about all other
pages should be included in the Home Page, with the
rest of information to be found in the pages
themselves.
 Each page must have a representative image that is no
wider than 800 pixels
 All pages must have heading tags to indicate page
content titles
 Body text must be in either size-1 or size-2 non-Serif
font face.
Your output will be assessed using the rubric below:
Criteria Excellent Good (3) Satisfactory Needs
(4) (2) Improvement
(1)

Navigation Navigation Navigation Navigation is

is clear, is clear contains missing.
properly and links links that
Web Skill labeled, work. do not work.
and links
are
correct.

7
 The content The The content The content
is complete content is is somewhat has incomplete
and has clear and complete. information.
Content links to complete.
related
information
.

The output The output The output The output

is free contains has several contains many
Correctness
from minimal errors. errors.
errors. errors.

Appearance Appearance Layout is Layout is not

looks is inefficient organized.
Layout and professiona organized for readers.
Design l and
consistent
.

Images have Images are Some images No images or

a strong related to are related images are not
relation to the to the related.
Images the website website. website.
and most
are self-
produced.

Prepared By: Submitted To:

ROSALYN A. SAB BERNARDA VILLAROJO

Masterand Professor

REMARKS: (to be filled by the professor)

Strengths Opportunities or Points for
Improvement