ST. JAMES SCHOOL OF SUBIC, INC.

Asinan Poblacion, Subic, Zambales Tel.

Fax (047) 232-3073
SY 2020-2021

COMPUTER 8

Quarter 2 - Module No. 1 Inclusive Dates:

Name of Student
Grade & Section
Name of Teacher

ABOUT THIS MODULE

This module has been carefully crafted to ensure the delivery, understanding, and transfer to
real life applications the Most Essential Learning Competencies (MELCs) in
Computer 8 as required by the Department of Education. The activities and
assessments are aligned with the competencies to ensure that learner achievement
is optimally reached. The parent or guardian is provided space to get involved in the
module (feedback, suggestions, and observation). The learner is given self-
improvement opportunities through reflections, personal prayer and journals. Values
integration is given a very important part in the module.

In this unit, the standards are:

CONTENT STANDARD
The learner will understand on how to create a simple webpage offline, with the
background color, images and link to other pages.

PERFORMANCE STANDARD

The learners will familiarize and analyze all the tags/elements that need to
create a simple web page design and how to use all the tags/elements

FORMATION STANDARD
The learners will become critical and creative thinkers who are able to value
equality and sharing.

For Lesson 1, we will have the following learning targets. At the end of
the lesson, check the column that best describes your assessment of your
learning relative to the given learning targets.

Page 1
COMPUTER 8 QUARTER 2 MODULE 1
 I can define the
webpage design
I can enumerate
HTML Lay out
Elements and
HTML color

To make our learning more meaningful, here are some expectations from you and your
parents/guardian as we journey together on this module.

You are expected to…

1. Read everything carefully and thoroughly. Your parents/guardians
2. Always follow the instructions. are encouraged to…
3. Finish each activity before proceeding to the 1. Provide a conducive
next. learning environment for
4. Take down notes using note-taking strategy used your child.
in the module. Process questions will always be asked 2. Provide the materials
to check your understanding. needed for the activity.
5. Use a dictionary to look up the meaning of 3. Assist your child in
unfamiliar words. performing learning tasks.
6. Maximize your learning resources to help you 4. Monitor the progress
work more efficiently and to enhance your learning. of your child in answering
7. Consult your teacher if you need to clarify or and performing learning
verify something about an activity. tasks.
8. Follow the schedule of the activities, remind 5. Give feedback/
yourself of deadlines. Read in advance when response on your child’s
necessary. progress in answering and
9. Find time to relax and take a break. performing learning tasks.
10. Have fun learning.

To keep us all healthy and always ready to learn, here are some of the “home mode reminders”, we
can practice.

Page 2
COMPUTER 8 QUARTER 2 MODULE 1
 MY PERSONAL PRAYER
Before you formally begin with this module, please write a personal prayer in the prayer box below.

__
__
__
__
__
__
__

Let’s start the weekly module by gathering your ideas how the basic concepts
applied by transforming statement into mathematical equation. As we go through this
weekly module, keep on thinking about these questions:
1. What is Webpage?
2. What is HTML?
3. What are the HTML Layout Elements and HTML Colors?

LET’S GET STARTED!

HTML stands for Hyper Text Markup Language.

This is the language saved to create and link Web pages together. An HTML document
consists of only text
Tags – the main text of the document special instructions.
Basic coding units in the HTML system
They are keywords or phrases that are enclosed by angle brackets < > .
Describe how graphics and text are to be displayed.
they are a so used to create links between documents.
A webpage is designed by using tags.
HTML is run by a Web browser like Internet Explorer abd Netscape Navigator.

Page 3
COMPUTER 8 QUARTER 2 MODULE 1
 WEB
PAGE

HTML
CODE

WEB PAGE DESIGNING

A web page is a document that is suitable to act as a web resource on the WWW.
HTML – it is based on much larger document processing system called SGML

ELEMENTS
Title OF ADisplays
WEBthePAGE browser’s title bar. Its is the name assigned to the
page if you add it to the browser’s list of favorites.
Heading A larger font size text, usually bold or italic in style, showing
the different sections of a page.
Horizontal rules Inline images that display lines across the page to separate
different sections
Image Graphics, icons, bullets, line photos, or pictures that are not part
of the HTML file
Image map A type of inline image that defines hotspots. These are areas
that activate functions when selected.
The text that makes up thee main content of the Web page. It
Normal text has many formats. It can be in paragraph form or bulleted list.

The wallpaper of the Web page. It can be a solid color, a

Background picture or a graphic, or a default standard with white or gray
background.
Body Contains the information of the browser window

Page 4
COMPUTER 8 QUARTER 2 MODULE 1
 Animated images Inline images that include motion and animation. These images
are more attractive to the user.
Text, phrase, or graphics that help the user to navigate more on
Links the Web page. By clicking the links, the browser goes to a
location in a file or request a file from the
server.

HTML LAYOUT ELEMENTS

Websites often display content in multiple

columns (like a magazine or newspaper).
HTML offers new semantic elements that define
the different parts of a web page

<header> - Defines a header for a document or a

section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained
article
<aside> - Defines contentaside from the content
(like a sidebar)
<footer> - Defines a footer for a document or a
section
<details> - Defines additional details
<summary> - Defines a heading for the <details>
element

Compare and Contrast

Directions: Write the difference and similarities of Web page and HTML code.

WEB PAGE SIMILARITIES

HTML CODE

Page 5
COMPUTER 8 QUARTER 2 MODULE 1
PROCESS QUESTIONS TEACHER’S
_
NOTE
_
1. What did you observe about the Web page and HTML? _
_
_
_
_
_
_
_
_
_
_ _
_
_
_
_
_
_
_
_
_
2. If you are going to create a Web page that will help our school,
_
what is it? Why? _
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_

Date Accomplished:
Time:
Teacher’s Signature over
printed name

HTML COLORS

COLOR NAME In HTML, a color can be specified by using a

color name:

Red <!DOCTYPE html>

<html>
Orange <head>
<title>SAMPLE TITLE</title>
</head>
Yellow <body style="background-color:red">
</body>
Cyan </html>

Blue

Page 6
COMPUTER 8 QUARTER 2 MODULE 1
 RGB VALUE

In HTML, a color can also be specified as an RGB value, using this formula: rgb (red,
green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.
For example, rgb (255,0,0) is displayed as red, because red is set to its highest value (255)
and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this: rgb (0,0,0).
To display the color white, all color parameters must be set to 255, like this: rgb
(255,255,255).

Shades of gray are often defined using equal values for all the 3 light sources:

Page 7
COMPUTER 8 QUARTER 2 MODULE 1
 HEX VALUE

• In HTML, a color can also be specified using a hexadecimal value in the

form: #RRGGBB, where RR (red), GG (green) and BB (blue) are
hexadecimal values between 00 and FF (same as decimal 0-255).

• For example, #FF0000 is displayed as red, because red is set to its highest
value (FF) and the others are set to the lowest value (00).

• Shades of gray are often defined using equal values for all the 3 light sources:

What’s the Difference?

Directions: Differentiate the RGB Value and HEX Value using fishbone.

Page 8
COMPUTER 8 QUARTER 2 MODULE 1
Date Accomplished:
Time:
Teacher’s Signature over
printed name

Congratulations, you have just finished your module! After studying our lesson,
kindly write the things you liked about the topic
as your learning summary. But before that, have you already accomplished the table
on the first page of this module? If not, accomplished it first to proceed to your
learning summary.

MY LEARNING
SUMMARY

Based on our lesson, what are your new learning and realizations as a child of God? In
the box below, write your lesson’s reflection through a prayer. A related Bible verse is also
provided below to help and guide you more on the prayer you will formulate. Together, let
us do things toward His Holiness because we are precious in His eyes.

But all things become visible when they are

exposed by the light, for everything that becomes
visible is light.

Ephesians 5:13

MY REFLECTION
P
OMPUTER 8 QUARTER 2 MODULE 1
___
___
 ___
___
___
___
___
___
____ age 9
C ___
 We would like to hear from you and your parent/guardian comments and observations
of this lesson’s module. If you have suggestions, please feel free to write it on the box
provided. Remember, we are partners in this learning. Your feedback will be highly
appreciated.

MY FEEDBACK

Comments:

Suggestions:

This part is for the parent or the attending adult:

Kindly write some of your observations on your child’s learning/study habits this week.
Include also your suggestions or if you have questions, feel free to write them here also.

MY PARENTS/GUARDIAN FEEDBACK

Observation:

Question (if there’s any):

Suggestion/s:

Cellphone No.

REFERENCES

Amoto, T., Butaran, R., Cosico, R., Nicdao, R., & Penasbo, F. (2004). HTML. Quezon City: Book
Craft Publishing Co., Inc.

Page 10
COMPUTER 8 QUARTER 2 MODULE 1