TLE Grade910 Web Page Design Q2 Weeks1to4 Binded Ver1.0

Technology and Livelihood

Education (TLE)
Web Page Design
Quarter 2 – Weeks 1 – 4
9/10
Technology and
Livelihood
Education (TLE)
Web Page Design
Quarter 2 – Module 1
Develop Basic HTML Document
Using HTML5 and CSS3 Syntax
Technology and Livelihood Education (TLE) – Grade 9/10
Web Page Design
Alternative Delivery Mode
Quarter 2 – Module 1: Develop Basic HTML Document Using HTML5 and CSS3 Syntax
First Edition, 2020
Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.
Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been
exerted to locate and seek permission to use these materials from their respective copyright
owners. The publisher and authors do not represent nor claim ownership over them.
Published by the Department of Education-Schools Division of Makati City

OIC-Schools Division Superintendent: Carleen S. Sedilla CESE
OIC-Assistant Schools Division Superintendent and OIC-Chief, CID: Jay F. Macasieb DEM
Development Team of the Module
Writer: Sharon Gaye C. Laput
Editor: Democrito L. Flores Jr.
Reviewer: Celedonia T. Teneza EdD
Layout Artist: Carlo J. Navarro, Hannah Maye T. Gamilla
Management Team: Neil Vincent C. Sandoval

Education Program Supervisor, LRMS
Celedonia T. Teneza EdD

Education Program Supervisor, EPP/TLE/TVL/TVE and ABM
Printed in the Philippines by the Schools Division Office of Makati City through the
support of the City Government of Makati (Local School Board)
Department of Education – Schools Division Office of Makati City
Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

City of Makati, Metropolitan Manila, Philippines 1212
Telefax: (632) 8882-5861 / 8882-5862
E-mail Address: makati.city@deped.gov.ph
Introductory Message
For the facilitator:
Welcome to the TLE-ICT Programming .Net Technology (Web Page Design) 10

Alternative Delivery Mode (ADM) Module on Week 1 – Perform Programming in HTML5
with JavaScript and CSS3 (PPHJ)!
This module was collaboratively designed, developed and reviewed by educators both
from public and private institutions to assist you, the teacher or facilitator in helping
the learners meet the standards set by the K to 12 Curriculum while overcoming their
personal, social, and economic constraints in schooling.
This learning resource hopes to engage the learners into guided and independent
learning activities at their own pace and time. Furthermore, this also aims to help
learners acquire the needed 21st century skills while taking into consideration their
needs and circumstances.
For the learner:
Welcome to the TLE-ICT Programming .Net Technology (Web Page Design) 10

Alternative Delivery Mode (ADM) Module on Week 1 – Perform Programming in HTML5
with JavaScript (PPHJ)!
The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner is
capable and empowered to successfully achieve the relevant competencies and skills at
your own pace and time. Your academic success lies in your own hands!
This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning resource while being an active learner.
About this Module

Welcome to Module 1 of Web Page Design! This module is a specialization course
that will help students recognize different learning competencies that fall under
“Perform Programming in HTML5 with JavaScript (PPHJ)”. Also, this module is suitable
for students who are aiming for a programming .net technology course in Grade 11 up
to Grade 12 and pursue the national certification level III offered by TESDA.
The whole module consists of one core competency: Perform Programming in

HTML5 with JavaScript and CSS3 (PPHJ), covering 8 weeks of learning discussion and
activities that a Grade 10 Technology Livelihood student must accomplish.
Each module contains different sets of challenges to check your level of

understanding. Challenges in different modules include performance standards found
in each learning outcome.
1
What I Need to Know
WEEK 1
The main objective of this module is to help you gain knowledge and core
competencyy in Programming .Net Technology (Web Page Design) specifically “Perform
Programming in HTML5 with JavaScript (PPHJ)”. To further explore this area of
expertise students must learn its foundation. This foundation can be observed in the
following learning outcomes listed below.
Learning Outcome: Develop Basic HTML Document Using HTML5 and CSS3 Syntax.
2.1 Design HTML5 Document using Cascading Style Sheet 3 (CSS3)
Content Standards: The learners demonstrate an understanding of the principles and

concepts in performing programming in HTML5 with JavaScript
and CSS3.
Performance Standards: The learner independently demonstrates the programming in

HTML5 with JavaScript and CSS3.
What I Know
MULTIPLE CHOICE.
Direction: Read the questions following and answer it. Write the letter on the blank
provided before the number.
___ 1. What line of code tells our browser that we want to link a style sheet in the same
folder as our HTML page, and it is named “style.css”?
A. <div id=”box-one”> C. <meta charset=”utf-8”>
B. <link rel=”stylesheet” href=”style.css”> D.#box-one{background-color:gray;}
___ 2. Which of the following most essential parts of CSS refers to some of the creative
things you can do such as adding gradients, background images, and rounded
corners?
A. Backgrounds and Borders C. Styling Tables
B. Cascade and Inheritance D. Text Directions
___ 3. What does the CSS stand for?

A. Cascade Sheets Style C. Cascading Sheets Style
B. Cascade Style Sheets D. Cascading Style Sheets
___ 4. CSS is created and maintained through a group of people within the W3C. What
is it called?
A. CSS Working Group C. Data Analyst
B. Computer Programmers D. Project Engineers
___ 5. What is a type of attribute of HTML tag converted into CSS properties which
could be color, border etc.?
A. Class B. Property C. Selector D. Value
2
Develop Basic HTML
Lesson
Document Using HTML5
1
and CSS3 Syntax
What’s In
SCRABBLE WORD:
Direction: Arrange the given words related to the most essential parts of CSS.
Write your answer on the space provided.
1. OXB DLEOM
2. RTESLSOCE
3. GUGBIDGEN
4. AIGZONRNGI
5. IGINSNZ EMSTI
6. CDACESA ADN NETRCNIEAHI
7. VEFWGONIROL TNTOCNE
8. LESAVU DNA TUSIN
9. EXTT CORNSEIDIT
10. LYNGSTI TLESBA
What’s New
COMPLETION TYPE.
Direction: Complete the codes. Write the letter of the correct answer. Choose your
answer in the box.
a. { b. </style> c. center d. color e. h1
<style>
1. ___ 2. __
3. ________ blue;
text-align: 4._________
}
5. _________
What Is It
HTML5 is a relatively young specification, and as a result, browser support is quite

limited (at the time of writing). The code presented in this module is built to be as cross-
browser compatible as possible, but some features will not work in all browsers. Any
features that are currently browser-specific will be clearly identified in the module. To
ensure that you can experience all of these new features, it is recommended that you
install the latest versions of the following Web browsers on your system when developing
HTML5 and CSS3 applications:
• Mozilla Firefox (version 3.5+)
• Apple Safari (version 4.0+)
• Opera (version 10.0+)
• Google Chrome (version 3.0+)
You do not need any specific software to write HTML and CSS code; any basic text editor
will do (such as Notepad, vi, emacs, and so on.) In this module, it is assumed that
the source code is stored in a directory on your local computer—you do not need to use
a Web server or upload the files to a Web hosting service.
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language

intended to simplify the process of making web pages presentable. CSS allows you to
3
apply styles to web pages. More importantly, CSS enables you to do this independent of
the HTML that makes up each web page.CSS is easy to learn and understood but it
provides powerful control over the presentation of an HTML document.
WHY CSS?
• CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML
pages.
• Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered as a clean coding technique, which means search
engines won’t have to struggle to “read” its content.
• Superior styles to HTML: CSS have a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
• Offline Browsing: CSS can store web applications locally with the help of offline
cache. Using of this, we can view offline websites.
WHO CREATES AND MAINTAINS CSS?

CSS is created and maintained through a group of people within the W3C called the
CSS Working Group. The CSS Working Group creates documents called specifications.
When a specification has been discussed and officially ratified by the W3C members, it
becomes a recommendation.
These ratified specifications are called recommendations because the W3C has no
control over the actual implementation of the language. Independent companies and
organizations create that software.
NOTE: The World Wide Web Consortium, or W3C is a group that makes
recommendations about how the Internet works and how it should evolve.
MOST ESSENTIAL PARTS OF THE CSS LANGUAGE

Cascade and Inheritance - It develops your understanding of some of the most
fundamental concepts of CSS — the cascade, specificity, and inheritance — which
control how CSS is applied to HTML and how conflicts are resolved.
CSS Selectors - There are a wide variety of CSS selectors available, allowing for fine-
grained precision when selecting elements to style as follows:
• Type, class, and ID selectors
• Attribute selectors
• Pseudo-classes and pseudo-elements
• Combinators
The Box Model - Everything in CSS has a box around it, and understanding these boxes
is key to being able to create layouts with CSS, or to align items with other items. Take
a proper look at the CSS Box Model to move onto more complex layout tasks with an
understanding of how it works and the terminology that relates to it.
Backgrounds and Borders - It is some of the creative things you can do: from adding
gradients, background images, and rounded corners, backgrounds and borders are the
answer to a lot of styling questions in CSS.
Handling Different Text Directions - In recent years, CSS has evolved in order to
better support different directionality of content, including right-to-left but also top-to-
bottom content (such as Japanese) — these different directionalities are called writing
modes. As you progress in your study and begin to work with layout, an understanding
of writing modes will be very helpful to you.
Overflowing Content - Overflow is what happens when there is too much content to be
contained comfortably inside a box. You will learn what it is and how to manage it.
4
CSS Values and Units - Every property used in CSS has a value or set of values that
are allowed for that property. You will take a look at some of the most common values
and units in use.
Sizing Items in CSS - Understanding how big the different features in your design will
be is important. It summarizes the various ways elements get a size via CSS and define
a few terms around sizing that will help you in the future.
Images, Media, and Form Elements - In this part, we will take a look at how certain
special elements are treated in CSS. Images, other media, and form elements behave a
little differently in terms of your ability to style them with CSS than regular boxes.
Understanding what is and isn't possible can save some frustration, and this will
highlight some of the main things that you need to know.
Styling Tables - Styling an HTML table isn't the most glamorous job in the world, but
sometimes we all have to do it. This will provide a guide on how to make HTML tables
looks good, with some specific table styling techniques highlighted.
Debugging CSS - Sometimes when writing CSS, you will encounter an issue where your
CSS doesn't seem to be doing what you expect. This part will give you guidance on how
to go about debugging a CSS problem, and show you how the DevTools included in all
modern browsers can help you find out what is going on.
Organizing your CSS - As you start to work on larger stylesheets and big projects you
will discover that maintaining a huge CSS file can be challenging. It will take a brief look
at some best practices for writing your CSS to make it easily maintainable, and some of
the solutions you will find in use by others to help improve maintainability.
CSS SYNTAX
A CSS comprises style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts –
1. Selector − A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
2. Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
3. Value − Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
HOW IT WORKS?
Cascading Style Sheets are simple text files saved in a “.css” extension which contain
style Rules. For example, we had a <h1> heading element on a page, and we wanted to
make it blue, and center aligned. Here is the code we would add to our .css file:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Good morning Students!</h1>
<h1>This is styled with CSS.</h1>
</body>
</html>
5
EDITOR AND SAVING THE CSS FILE
Use notepad as an editor for CSS. Then, create a new folder on your desktop (or another
location you prefer) and name it CSS-Test. Now, back in your text editing program save
your document as “style.css”.
LINKING CSS FILE TO AN HTML PAGE
Our new CSS file is worthless if we do not apply it to a web page. Let’s create an HTML
page. Create a new blank file in Notepad (or TextEdit) and add the following code:
<!DOCTYPE html>
<html> OUTPUT
<head>
<meta charset=”utf-8”>
<title>CSS-Test</title>
</head>
<body>
<h1>CSS-Test</h1>
<div id=”box-one”>
<p>This is box one.</p>
</div>
<p>This is box two.</p>
</div>
</body>
</html>
Now, save this document in our “CSS-Test”

folder and name it “index.htm”.
6
LINKING THE TWO FILES TOGETHER
We still need to tell the web browser to load our “style.css” file when the “index.htm”
page is viewed. Add the following code to “index.htm” directly above our </head> closing
tag:
<link rel=”stylesheet” href=”style.css”>
This line of code tells our browser that

we want to link a Style Sheet, that it’s
located in the same folder as our
HTML page, and that it’s named
“style.css”.
Now, when you view “index.htm” page
in a web browser you should see a
centered, orange heading:
Let’s Style Those Two Boxes

If you look at the code of our HTML page, you’ll see two <div> elements. We added an
HTML attribute of “id” for these two elements and assigned them values of “box-one”
and “box-two.” We can use an element’s “id” to select and style it with CSS. For example,
let’s make the first box gray, and the second box yellow. Add the following code to your
CSS file, directly below our original <h1> rule:
#box-one {
background-color:gray;
}
#box-one {
background-color:yellow;
padding: 10px;
}
When an element has an “id” we

can access it with a CSS selector
by placing a pound sign (#) in front of its id value. So, to select the first <div> element
we simply type “#box-one” and then begin our CSS Rule.
When you save your CSS file and refresh your HTML page in a web browser to see the
latest output.
What’s More
True or False
Direction: Write T if the statement is True and F if it is false. Write your answer
on the space provided before the number.
___ 1. Our new CSS file is worthless if we apply it to a web page.
___ 2. When you save your CSS file, refresh your HTML page in a web browser to see
the latest output.
___ 3. Use notepad as an editor for CSS.
___ 4. When an element has an “id”, we can access it with a CSS selector by placing a
pound sign (#) in front of its id value.
___ 5. There are a wide variety of CSS selectors available, allowing for fine-grained
precision when selecting elements to style.
___ 6. Selector is assigned to properties.
___ 7. Styling an HTML table is the most glamorous job in the world
___ 8. All elements in all the webpages will be updated automatically.
___ 9. CSS is easy to learn and understood but it provides powerful control over
the presentation of an HTML document.
___ 10. Different directionalities are called writing directional.
7
What I Have Learned?
Fill in the blanks
Direction: Fill in the correct word/s to process what you learned from the Week 1 lesson.
1. _____________ allows you to apply styles to web pages.
2. CSS is created and maintained through a group of people within the W3C called the
__________________.
3. It is some of the creative things you can do with CSS __________________ and borders.
4. ________________ is what happens when there is too much content to be contained
comfortably inside a box.
5.____________________ are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
6. Include ________ after typing the file name.
7. – 8. We still need to tell the web browser to load our “___________” file when the
“_____________” page is viewed.
9. A ______________ is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
10. CSS can store web applications locally with the help of _________________.
What I Can Do?
Direction: Create a heading element on a page “My First CSS Activity”. Add background
color, make it blue, and center aligned. Display at least one paragraph, written as
Verdana with 20px. Save your file as CSS Activity1.htm. Write your answers on a
separate sheet.
Assessment
POST TEST
MULTIPLE CHOICE.
Direction: Read the following and answer it. Write the letter on the blank provided
before the number.
___ 1. Which of the following line of codes link CSS FILE to an HTML page?
A. <div id=”box-one”> C. <meta charset=”utf-8”>
B. <link rel=”stylesheet” href=”style.css”> D.#box-one{background-color:gray;}
___ 2. What does the W3C stand for?

A. Word Wide Wave Consortium C. Word Wide Web Consolidation
B. World Wide Web Consortium D. World Wide Web Consolidation
___ 3. Which does not belong to the group?

A. Easy maintenance. C. Search engines.
B. Offline browsing. D. Write and use different sheets.
___ 4. Which of the following terms allows you to apply styles to web pages?
A. CSS B HTML C. JAVA D. W3C
___ 5. Which is an example of property?

A. <h1>
B. Background-color
C. Red
D. Table
8
9/10
Technology and
Livelihood
Education (TLE)
Web Page Design
Create HTML5 Document Using
Advanced Techniques with
JavaScript and CSS3
Web Page Design
Quarter 2 – Module 2: Create HTML5 Document Using Advanced Techniques with
JavaScript and CSS3
First Edition, 2020


Layout Artist: Carlo J. Navarro , Hannah Maye T. Gamilla


Telefax: (632) 8882-5861 / 8882-5862
About this Module
specifically for “Perform Programming in HTML5 with JavaScript (PPHJ)”. Also, this
module is suitable for students who are aiming for a Programming .Net Technology
course in Grade 11 up to Grade 12 and pursue the national certification level III offered
by TESDA.
What I Need to Know?

competencyy in Programming .Net Technology (Web Page Design) specifically
“Perform Programming in HTML5 with JavaScript (PPHJ)”. To further explore this
area of expertise students must learn its foundation. This foundation can be observed
in the following learning outcomes listed below.
Learning Outcome: Create HTML5 Document Using Advanced Techniques with

JavaScript and CSS3.
3.1 Create static pages using new features available in HTML5

concepts in performing programming in HTML5 with JavaScript and CSS3.

What I Know
MULTIPLE CHOICE.
Direction: Read the following questions and answer it. Write the letter on the blank
provided before the number.
___ 1. Which of the following style sheets use this line of code below?
<h1 style=”color:blue”>This is a blue heading </h1>
A. External B. Inline C. Internal D. Multiple
___ 2. Which of the following style sheets was most identified in CSS implementation
policy as linked in the head section?
___ 3. Which of the following statements describe internal style sheets?
A. It adds the style attribute to the relevant element.
B. It is defined inside <style> element, inside head section.
C. It is ideal when the style is applied to many pages.
D. It is used to apply a unique style for a single element.
___ 4. What is the line of code can be use in inline style sheets?
A. <h1 style=”color:blue”>
B. <style type=”text/css”>
C. Font-size:12px;
D. Type=”text/css”
___ 5. What way of style sheet used when you have this line of code in your program?
href=”sample”
1
Create HTML5 Document
Lesson
Using Advanced
2 Techniques with
JavaScript and CSS3
What’s In
ENUMERATION:
Direction: Give at least five (5) most essential parts of the CSS Language
and explain each. Write your answer on a separate sheet of paper.
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
______________
What’s New
IDENTIFICATION.
Direction: Read the following statements about ways of inserting CSS. Write Inline if it
is Inline Style Sheet, Internal if it is Internal Style Sheet, and External, if it is about
External Style Sheet.
Description Ways of Inserting CSS
1. It is used if one single HTML page has a unique style.
2. It is used to apply a unique style for a single element.

3. It can change the look of an entire website by changing
just one file
4. It is defined within the <link> element, inside the <head>
section of an HTML page
5. It adds the style attribute to the relevant element.
6. It is defined inside <style> element, inside head section.
7. Each page must link to style sheet using the <link> tag.
2
8. It loses many of the advantages of a style sheet (by mixing
content with presentation).
9. It is ideal when the style is applied to many pages.
10. The .css file should not contain any HTML tags.
What Is It
When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.
THREE WAYS OF INSERTING CSS
1. Inline Style Sheet

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.
@sample.html
<h1>This is a blue heading</h1>
@sample.css
<h1 style=”color:blue”>This is a blue heading </h1>
Inline styles are defined within the "style" attribute of the relevant element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is my heading</h1>

<p style="color:red;">This is my paragraph.</p>
</body>
</html>
OUTPUT
3
Note: An inline style loses many of the advantages of a style sheet (by mixing content
with presentation). Use this method sparingly.
2. Internal Style Sheet

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
<head>
<style type=”text/css”>
h1
{
color:blue;
font-size:12px;
</style>
</head>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my paragraph.</p>
</body>
</html>
OUTPUT
4
3. External Style Sheet
With an external style sheet, you can change the look of an entire website by changing
just one file. Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
@sample.html
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css”>
</head>
@sample.css
h1
{
color:red;
font-size:12px;
}
p
{
color:blue;
}
Note: It is ideal when the style is applied to many pages. You can change the look of an
entire Website by changing one CSS file. Each page must link to the style sheet using
the <link> tag.
Example:
External styles are defined within the <link> element, inside the <head> section of an
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”
</head>
<body>
<h1>This is my heading</h1>
<p>This is my paragraph.</p>
</body>
</html>
OUTPUT
5
An external style sheet can be written in any text editor, and must be saved with a .css
extension. The external .css file should not contain any HTML tags. Here is how the
"mystyle.css" file looks like:
“mystyle.css”
body {
background-color: lightblue;
h1{
color:navy;
margin-left:20px;
Note: Do not add a space between the property value and the unit (such as margin-
left:20px;). The correct way is:margin-left:20px;
Why Use an External Style Sheet?

Keeping the styles separate from your HTML content:
• Helps avoid duplication
• Makes maintenance easier
• Allows you to make a site-wide change in one place
CSS Implementation Priority:

1. Inline style (inside an HTML element)
2. Internal style sheet (in the head section)
3. External style sheet (linked in the head section)
4. Browser default
What’s More
Direction: Using your output in Quarter 1 Module 4 entitled “Myself”, choose at
least one out of three ways in inserting CSS. Save your work as Activity 2_Surname.css.
Write your answer on a separate sheet of paper.
Code:
6
Rubrics:
Criteria Points Score
Content 20
Creativity 15
Time 15
Management
Total Points 50
What I Have Learned

Direction: Read the following instructions. Edit the given HTML code to answer.
Write your answer on the separate sheet of paper. (50 points)
1. Add an external style sheet with the URL: “mystyle_surname.css”.
2. Set “background-color:lightblue” for the page, using an internal style sheet.
3. Set “background-color:linen” for the page, using an inline style.
4. Remove all styles, except the external style sheet “mystyle_surname.css”.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Myself</h1>
<p>Good day everyone!</p>
<p>I am happy to display this page.</p>
</body>
</html>
What I Can Do
Direction: Create a Family Tree and save it as “My Family Tree.css”. Add an external
style sheet with the URL:”myfamilytree_surname.css”. Set background-color according
to your preference color for the page using internal style. Write your answers on a
separate sheet of paper.
Code:
7
Assessment
POST TEST
MULTIPLE CHOICE.
before the number.
___ 1. Martin wants to use inline styles. What must he do?

A. Add the style attribute to the relevant element.
B. Change one CSS file.
C. Define inside <style> element, and inside head section.
D. Use a single HTML page.
___ 2. What is the missing property to complete the code of Mary? ______:12px;
A. Background-color
B. Color
C. Font-size
D. Text-align
___ 3. Which of the following is the correct line of code in style sheets?
A. color =red
B. href:sample.css
C. font-sze:40px;
D. text-align=left;
___ 4. Which of the following property best suited to apply color?

A. CSS
B. B. HTML
C. C. JAVA
D. D. ORACLE
___ 5. Which is an example of internal style?

A. h1
B. B. body style
C. C. link
D. D. style
References
Webliography
W3Schools (1999-2020), How To Add CSS, from
https://www.w3schools.com/css/css_howto.asp
8
9/10
Technology and
Livelihood
Education (TLE)
Web Page Design
JavaScript and CSS3
Web Page Design
Quarter 2 – Module 3: Create HTML5 Document Using Advanced Techniques with
JavaScript and CSS3
First Edition, 2020


Editors: Democrito L. Flores Jr.
Layout Artist: Carlo J. Navarro


Telefax: (632) 8882-5861 / 8882-5862
ii
About this Module
course in Grade 11 up to Grade 12 and pursue the National Certification Level III which
is offered by TESDA.
What I Need to Know

JavaScript and CSS3
3.2 Use CSS3 applying basic styling to the elements in an HTML5 page.
3.2.1 Selectors

and CSS3.

What I Know
MULTIPLE CHOICE.
before the number.
___ 1. CSS selectors are divided into several categories. Which of the following DOES
NOT belong to the group?
A. Attribute B. Combinator C. Contributor D. Simple
B.
___ 2. Which is an example of value?
A. Border B. Color C. Red D. Text-align
B.
___ 3. Which of the following statements describe simple selectors?
A. It selects and style a part of an element .
B. It selects elements based on a certain state.
C. It selects elements based on name, id, class.
D. It selects elements based on a specific relationship between them.
___ 4. What is the format in writing a line of code for class selector?
A. A hash (#) character, followed by the id of the element.
B. A period (.) character, followed by the class name.
C. An asterisk (*) selects all HTML elements on the page.
D. An equal sign (=) character, followed by the group element.
___ 5. Which of the following CSS Selectors that selects all the HTML elements with
the same style definitions?
A. Class B. Group C. ID D. Universal
1
Lesson Using Advanced
3 Techniques with
JavaScript and CSS3
What’s In
COMPLETE THE TABLE:

Direction: Read and analyze the different lines of codes below. Write their
corresponding style sheets on its opposite side.
Lines of codes Different Style Sheets

1. </head><body style="background-color: linen">
2. <head><style>body { background-color: linen; } </style>

</head>
3. <head><link rel="stylesheet" href="mystyle.css"><style>p
{ color: red;}</style></head>
<body style="background-color: lightcyan">
What’s New
IDENTIFICATION:
Direction: Write S if it is Selector, P if it is Property, and V if it is Value.
__ 1. table __ 6. left
__ 2. 200px __ 7. border
__ 3. text-align __ 8. normal
__ 4. h1 __ 9. p
__ 5. black __ 10. font-weight
What Is It
ANATOMY OF A CSS RULE

<style> Our CSS Rule begins with “h1” which is our CSS
h1 { value selector. The selector tells the web browser which
color: blue; HTML element we wish to style.
property Next, the word “color” is a property and “blue” is
its value. A property and value pair together and
selector
create a declaration. We create complex style rules
text-align: center; by stringing together multiple declarations, which
are separated by semicolons. This entire piece of
code, including the selector and declarations, is
known as a CSS Rule.
declaration
(property: value) Finally, directly preceding, and directly following the
declarations we enclose our Rule in curly brackets.
}
</style
2
CSS SELECTORS
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between
them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
The CSS Basic Selector
The element selector selects HTML elements based on the element name.
Example 1: Here, all <p> elements on the page will be left-aligned, with a blue text
color:
p{
text-align: left;
color: blue;
}
Example 2: Here, all <h1> elements on the page will be at the center, with a red text
Color and 12px:
h1{
color:red;
font-size: 12px;
}
The CSS ID Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one
unique element! To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
Example 1: The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: orange;
}
Note: An id name cannot start with a number!
Example 2:
@sample.html
<p id=”headline”>This is paragraph 1</p>
<p>This is paragraph 2 </p>
@sample.css
#headline
{
color:cyan;
font-size:20px;
}
3
The CSS Class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
class name.
Example 1: All HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
Example 2: Only <p> elements with class="center" will be center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.

Example 3 : The <p> element will be styled according to class="center" and to
class="large":
<p class="center large">This paragraph refers to two classes.</p>
Note: A class name cannot start with a number!
Example 4:
@sample.html
<p class=”headlines”>This is paragraph 1</p>
@sample.css
.headlines
{
color:cyan;
font-size:20px;
}
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
Example: The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
4
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Example 1: The following CSS code (h1, h2, and p elements have the same style
definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code. To group selectors,
separate each selector with a comma.
Example 2: We have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}
Example 3:
h1, h2, h3, h4, p{
color: cyan;
margin: 5px;
}
All CSS Simple Selectors
Selector Example Example Description

.class .intro Select all elements with class=”intro”
#id #firstname Select the element with id=”firstname”
* * Selects all elements
element p Selects all <p> elements
element,element,…. div, p Selects all <div> elements and all <p> elements
5
Some CSS Properties
Text
Text Color Color:#FF0000;

Text Alignment text-align: center;
Values: center, left, right, justify
Text Decoration text-decoration: none;
Values: none, overline, line-through,
underline
Text Transformation text-transform: capitalize;
Values: Uppercase, lowercase and
capitalize
Text Indentation text-indent: 50px;
CSS Background
Background-color background-color: “color”;

Background-image background-image: url(‘sample.jpg’);
Background-image repeat background-image: url(‘sample.jpg’);
Values: repeat-x, repeat-y and background-repeat: repeat-x;
no-repeat
Fonts
Font family font-family: “Arial”;

Font Style font-style: italic;
Font Size font-size: 10px;
Font Weight font-weight: bold;
What’s More
Matching Type
Direction: Match the following examples of selectors in Column A with their
corresponding categories in Column B. Write the letter of the correct answer before each
number.
Column A Column B
___ 1. #para1 A. class elector
___ 2. h1,h2,p B. id selector
___ 3. h1 C. grouping selector
___ 4. * D. selector
___ 5. p.center E. universal selector
6
What I Have Learned
Fill in the blanks

Direction: Fill in the correct word/s to process what you learned from the Week 3 lesson.
1. _______________________ select elements based on a certain state.
2. _______________________ selects HTML elements with a specific class attribute.
3. _______________________ select and style a part of an element.
4. _______________________ (*) selects all HTML elements on the page.
5. _______________________ select elements based on an attribute or attribute value
6. _______________________ selects all the HTML elements with the same style definitions.
7. _______________________ will affect every HTML element on the page:
8. _______________________ is a paired of property and value.
9. _______________________ select elements based on a specific relationship between
them.
10. _______________________ select elements based on name, id, class, etc.
What I Can Do
Direction: Create your own examples of different selectors and describe it. Write your
answer on the table below.
No. Selector Example Example Description

1. .class
2. #id
3. *
4. element
5. element,element,….
7
Assessment
POST TEST
MULTIPLE CHOICE.
before the number.
___ 1. William needs to complete his code by assigning values to properties. But he
missed one part of CSS Syntax. Which of the following parts should William need?
A. Property
B. Selector
C. Value
D. No answer
E.
___ 2. What does the W3C stand for?
A. Word Wide Wave Consortium
B. World Wide Web Consortium
C. Word Wide Web Consolidation
D. World Wide Web Consolidation
___ 3. Which of the following does not belong in the anatomy of a CSS rule?
A. Property
B. Selector
C. Value
D. No answer
___ 4. Which of the following terms is a paired of property in a declaration?

A. Property
B. Selector
C. Value
D. No answer
___ 5. Which is an example of property?

A. <h1>
B. Border
C. Red
D. Table
References
Webliography
Refsnes Data (1999-2020), CSS Selectors, from
https://www.w3schools.com/css/css_selectors.asp
8
9/10
Technology and
Livelihood
Education (TLE)
Web Page Design
JavaScript and CSS3
Web Page Design
Quarter 2 – Module 4: Create HMTL5 Document Using Advanced Techniques with
JavaScript and CSS3
First Edition, 2020


Layout Artist: Carlo J. Navarro , Hannah Maye T. Gamilla


Telefax: (632) 8882-5861 / 8882-5862
About this Module
course in Grade 11 up to Grade 12 and pursue the National Certification Level III which
is offered by TESDA.
What I Need to Know

JavaScript and CSS3
3.2 Use CSS3 applying basic styling to the elements in an HTML5 page.
3.2.2 Comments
3.2.3 Colors
3.2.4 Backgrounds

and CSS3.

What I Know
IDENTIFICATION:
Direction: Read and identify each statement carefully. Choose the correct answer from
the box given below and write the letter only.
A. Background-image C. Border color E. Colors
B. Background-repeat D. CSS Comments
___ 1. By default, it repeats an image both horizontally and vertically.
___ 2. It is specified using predefined color names, or RB, HEX, HSL, RGBA, HSLA
values.
___ 3. It specifies an image to use as the background of an element.
___ 4. It is placed inside the <style> element and starts with /* and ends with */.
___ 5. It set the color of borders.
1
Lesson Using Advanced
4 Techniques with
JavaScript and CSS3
What’s In
IDENTIFICATION:
Direction: Write S if it is Selector, P if it is Property, and V if it is Value.
__ 1. table __ 6. left
__ 2. 200px __ 7. border
__ 3. text-align __ 8. normal
__ 4. h1 __ 9. p
__ 5. black __ 10. font-weight
What’s New
IDENTIFICATION:
Direction: Write C if it is Comment, Co if it is Color, and B if it is Background.
__ 1. style="opacity:0.3;" __ 6. /* This is a single-line comment */
__ 2. border: 10px solid DodgerBlue __ 7. rgba(0, 128, 0, 0.6)
__ 3. /* Set text color to blue */ __ 8. color:#ff6347
__ 4. style="opacity:0.1 __ 9. rgb(0, 128, 0);
__ 5. color:hsl(9, 100%, 64%) __ 10. style="color:Tomato
What Is It
CSS COMMENTS
Comments are used to explain the code, and may help when you edit the source code
at a later date. Comments are ignored by browsers. A CSS comment is placed inside
the <style> element, and starts with /* and ends with */:
Example 1:
/* This is a single-line comment */
p{
color: blue;
}
You can add comments wherever you want in the code:
Example 2:
p{
color: blue; /* Set text color to blue */
}
Comments can also span multiple lines:

Example 3:
/* This is
a multi-line
comment */
p{
color: blue;
}
2
HTML and CSS Comments
From the HTML tutorial, you learned that you can add comments to your HTML
source by using the  syntax. In the following example, we use a combination
of HTML and CSS comments:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
@sample.html @sample.css
.headlines
{
color:cyan;
font-size:20px;
}
CSS COLORS
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
CSS Color Names – In CSS, a color can be specified by using a color name: orange,
dodger blue, medium sea green, gray, slate blue, violet, light gray, etc. CSS/HTML
support 140 standard color names. To see the HTML Color Names, kindly click this link:
https://www.w3schools.com/colors/colors_names.asp.
CSS Background Color – You can set the background color for HTML elements:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Welcome to my Website</h1>
<p style="background-color:Tomato;">This website is created for educational purposes
only. </p>
</body>
</html>
OUTPUT:
CSS Text Color – You can set the color of text:
3
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Example:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Welcome to my Website</h3>
<p style="color:DodgerBlue;">This website is created for educational purposes only.
This website is created for educational purposes only. </p>
<p style="color:MediumSeaGreen;">Thank you for visiting my website. Thank you for
visiting my website. Thank you for visiting my website. </p>
</body>
</html>
OUTPUT:
CSS Border Color – You can set the color of borders:

<!DOCTYPE html>
<html>
<body>
<h1 style="border: 5px solid Tomato;">
Welcome to my Website</h1>
<h1 style="border: 10px solid DodgerBlue;">
Welcome to my Website</h1>
<h1 style="border: 20px solid Violet;">Welcome to my Website</h1>
</body>
</html>
CSS Color Values – In CSS, colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values:
<!DOCTYPE html>
<html>
<body>
<p>This is 100% solid color</p>
<h1 style="background-color:rgb(255, 99, 71);">Welcome to my Website</h1>
<h1 style="background-color:#ff6347;">Welcome to my Website</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">Welcome to my Website</h1>
<p>This part shows 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">Welcome to my Website</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">Welcome to my Website</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX,
HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
OUTPUT:
4
CSS BACKGROUNDS
Transparency Using RGBA - If you do not want to apply opacity to child elements, like
in our example above, use RGBA color values. The following example sets the opacity
for the background color and not the text:
In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) -
which specifies the opacity for a color. An RGBA color value is specified with: rgba(red,
green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (fully opaque).
Example:
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
<!DOCTYPE html> OUTPUT:

<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}
div.first {
background: rgba(0, 128, 0, 0.1);
}
div.second {
}
div.third {
}
</style>
</head>
<body>
<h1>Transparent Box</h1> OUTPUT:
<p>With opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
</div>
</div>
<div>
<h1>opacity 1</h1>
</div>
5
<p>With RGBA color values:</p> OUTPUT:
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div>
<h1>default</h1>
</div>
<p>Notice how the text gets transparent as well as the background color when using
the opacity property.</p>
</body>
</html>
CSS Background-Image - The background-image property specifies an image to use

as the background of an element.
By default, the image is repeated so it covers the entire element.
Example:
The background image for a page can be set like this:
<style>
body {
background-image: url("paper.gif");
}
</style>
CSS Background-Repeat - By default, the background-image property repeats an
image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange,
like this:
Example:
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
If the image above is repeated only horizontally (background-repeat: repeat-x;), the

background will look better:
Example:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS Background-repeat: no-repeat - Showing the background image only once is also
specified by the background-repeat property:
Example:
Show the background image only once:
6
body {
background-image: url("img_tree.png");
background-repeat: no-repeat; }
In the example above, the background image is placed in the same place as the text. We
want to change the position of the image, so that it does not disturb the text too much.
CSS Background-position - The background-position property is used to specify the

position of the background image.
Example: Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
What’s More
Matching Type
Direction: Match the following examples of selectors in Column A with their
corresponding categories in Column B. Write the letter of the correct answer before each
number.
Column A Column B
___ 1. <h1 style="color:Tomato;"> A. CSS Background
___ 2. /* This is a single-line comment */ B. CSS Border Color
___ 3. <h1 style="background-color:#ff6347;"> C. CSS Color Values
___ 4. background: rgb(0, 128, 0) D. CSS Comments
___ 5. <h1 style="border: 20px solid Violet;"> E. CSS Text Color
What I Have Learned

Direction: Read the following instructions. Edit the given HTML code to answer.
Write your answer on the separate sheet of paper. (50 points)
1. Set the background color for the page to "linen" and the background color for
<h1> to "lightblue".
2. Set "paper.gif" as the background image of the page.
3. Set "gradient_bg_vertical.png" as the background image of the page, and repeat
it vertically only.
4. Use the shorthand background property to set background image
to "img_tree.png", show it once, in the top right corner.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Myself</h1>
<p>Good day everyone!</p>
<p>I am happy to display this page.</p>
</body>
</html>
What I Can Do
Direction: Using your Myself Activity in Quarter 1, edit the HTML and add CSS code
showing the following instructions below. Write your answers on a separate sheet of
paper.
1. Set the background color for the page
2. Set the background color for <h1>.
7
3. Set gif image as the background image of your page.
4. Set gradient_bg_vertical .png image as the background image of the page, and
repeat it vertically only.
5. Use the shorthand background property to set background image to png image,
show it once, in the top right corner.
Assessment
POST TEST
IDENTIFICATION:
Direction: Read and identify each code carefully. Choose the correct answer from the
box given below and write the letter only.
A. CSS Background Color C. CSS Color Names E.CSS Text Color
B. CSS Border Color D. CSS Comments
___ 1. <p style="background-color:Tomato;">

___ 2. /* Set text color to red */
___ 3. <p style="color:MediumSeaGreen;">
___ 4. Slate blue
___ 5. <h1 style="border: 20px solid Violet;">
References
A. Webliography
W3Schools (1999-2020), CSS Comments,
from https://www.w3schools.com/css/css_comments.asp
W3Schools (1999-2020), CSS Colors, from
https://www.w3schools.com/css/css_colors.asp
W3Schools (1999-2020), HTML Color Names from
W3Schools (1999-2020), CSS Background Repeat from
https://www.w3schools.com/css/css_background_repeat.asp
B. Images
W3Schools (1999-2020), CSS Colors, from
https://www.w3schools.com/css/css_colors.asp
W3Schools (1999-2020), HTML Color Names from
W3Schools (1999-2020), CSS Background Repeat from
https://www.w3schools.com/css/css_background_repeat.asp

TLE Grade910 Web Page Design Q2 Weeks1to4 Binded Ver1.0

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TLE Grade910 Web Page Design Q2 Weeks1to4 Binded Ver1.0

Uploaded by

Copyright:

Available Formats



Technology and Livelihood

Published by the Department of Education-Schools Division of Makati City

Development Team of the Module

Writer: Sharon Gaye C. Laput

Editor: Democrito L. Flores Jr.

Reviewer: Celedonia T. Teneza EdD

Layout Artist: Carlo J. Navarro, Hannah Maye T. Gamilla

Management Team: Neil Vincent C. Sandoval

Celedonia T. Teneza EdD

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

Welcome to the TLE-ICT Programming .Net Technology (Web Page Design) 10

For the learner:

Welcome to the TLE-ICT Programming .Net Technology (Web Page Design) 10

About this Module

The whole module consists of one core competency: Perform Programming in

Each module contains different sets of challenges to check your level of

Content Standards: The learners demonstrate an understanding of the principles and

Performance Standards: The learner independently demonstrates the programming in

___ 3. What does the CSS stand for?

HTML5 is a relatively young specification, and as a result, browser support is quite

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language

WHO CREATES AND MAINTAINS CSS?

MOST ESSENTIAL PARTS OF THE CSS LANGUAGE

LINKING CSS FILE TO AN HTML PAGE

Now, save this document in our “CSS-Test”

This line of code tells our browser that

Let’s Style Those Two Boxes

When an element has an “id” we

What I Can Do?

___ 2. What does the W3C stand for?

___ 3. Which does not belong to the group?

___ 5. Which is an example of property?

Published by the Department of Education-Schools Division of Makati City

Development Team of the Module

Writer: Sharon Gaye C. Laput

Celedonia T. Teneza EdD

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

What I Need to Know?

Learning Outcome: Create HTML5 Document Using Advanced Techniques with

Content Standards: The learners demonstrate an understanding of the principles and

Performance Standards: The learner independently demonstrates the programming in

Description Ways of Inserting CSS

1. It is used if one single HTML page has a unique style.

2. It is used to apply a unique style for a single element.

9. It is ideal when the style is applied to many pages.

THREE WAYS OF INSERTING CSS

1. Inline Style Sheet

<h1>This is a blue heading</h1>

<h1 style=”color:blue”>This is a blue heading </h1>

<h1 style="color:blue;text-align:center;">This is my heading</h1>

2. Internal Style Sheet

Why Use an External Style Sheet?

CSS Implementation Priority:

What I Have Learned

___ 1. Martin wants to use inline styles. What must he do?

___ 4. Which of the following property best suited to apply color?

___ 5. Which is an example of internal style?

Published by the Department of Education-Schools Division of Makati City

Development Team of the Module

Writer: Sharon Gaye C. Laput