Computer Programming (.
Net) – Grade 12
Learning Activity Sheets
Quarter 1 Week 4
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 activity sheet 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 Tacloban City
Schools Division Superintendent: Mariza S. Magan
Assistant Schools Division Superintendent: Edgar Y. Tenasas
Development Team of the Activity Sheet
Writer: Rosario Ali A. Uyvico
Evaluator: Almer H. Bugal
Management Team:
CID Chief: Mark Chester Anthony G. Tamayo
Division EPS of LRMS: Gretel Laura M. Cadiong
Division Learning Area EPS: Evelyn P. Malubay
Department of Education - Region No. VIII – Schools Division Office of Tacloban City
Office Address: Real St., Tacloban City
1 | Q1 W4
COMPUTER PROGRAMMING (.NET) GRADE 12
LEARNING ACTIVITY SHEET
Quarter 1 Week 4
Name: ______________________________ Year & Section: __________
Learning Activity Sheet No. 1 Date Answered: ___________
Objectives: ( TLE_ICTP.NET11-12PPHJC-IIf-i-29 )
• Develop basic HTML document using HTML5 and CSS3 syntax:
✓ Create and configure an HTML document according to user’s specification.
Materials:
• Computer, Cellphone, Tablet
Let’s kick it off!
Instructions:
- Based on the diagram below. What does the CSS style code do? Do you think
you can design a better CSS style?
Figure 1. CSS Class selector
https://www.w3schools.com/html/
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
_________________________________________________________________________________.
Are you taking it?
• How do you feel about styling the content of your page?
• Do you know the two display values of an HTML element?
• What are the CSS style selectors?
• How can you style a particular or group of HTML elements?
2 | Q1 W4
Here’s how it is!
Every HTML element has a default display value, depending on what type of element it is.
There are two display values:
• Block
• Inline
Block-level Elements
A block-level element always starts on a new line. A block-level element always takes
up the full width available (stretches out to the left and right as far as it can). A block level
element has a top and a bottom margin, whereas an inline element does not.
Example:
The <div> element is a block-level element.
<div style="border: 1px solid black">The <div> element is a block-level
element.</div>
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red; border:1px solid red">
<h4>This first group is contained under <div> tag and styled with border.</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This second group is contained under <div> tag with no border.</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
3 | Q1 W4
Figure 2. Sample output <DIV> element.
Here are the block-level elements in HTML:
Figure 3. List of Block-level elements in HTML.
https://www.slideshare.net/NosheenQamar/web-engineering-introduction-to-css
Inline Elements
An inline element does not start on a new line. An inline element only takes up as much
width as necessary. This is a <span> element inside a paragraph.
Example:
<span>inline element</span>
inline element
Sample Code:
<!DOCTYPE html>
<html>
Figure 4. Sample output with <span> tag.
<body>
<p>This first paragraph is an inline span <span style="border: 1px solid black">"inline
element"</span> element with CSS border style.</p>
<p>This second paragraph is an inline span <span>"inline element"</span> element with
no CSS border style.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only
takes up as much width as necessary.</p>
</body>
</html>
4 | Q1 W4
Here are the inline elements in HTML:
Figure 5. List of inline elements in HTML.
https://www.w3schools.com/html/
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common. When used
together with CSS, the <div> element can be used to style blocks of content:
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red; border:1px solid red">
<h4>This first group is contained under <div> tag and styled with border.</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<br>
<!-- Second group of tags -->
<div style = "color:green" background-color:powderblue;padding:20px;">
<h4>This second group is contained under <div> tag with no border.</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
5 | Q1 W4
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
Types of CSS selectors:
• element Selector
• id Selector
• class Selector
• Universal Selector
• Grouping Selector
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example:
Here, all <p> elements on the page will be center-aligned, with a red text color:
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center; Figure 7. Sample output CSS element selector
color: red;
font-family: monotype corsiva;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me too! too!</p>
</body>
</html>
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
6 | Q1 W4
element. To select an element with a specific id, write a hash (#) character, followed by the
id of the element or id name.
Example:
The CSS rule below will be applied to the HTML element with id="id_name":
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
#id_name {
text-align: center;
color: red; Figure 8. Sample output CSS id selector
font-size: 200%;
}
</style>
</head>
<body>
<p id="id_name">I am different</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
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.
Note: A class name cannot start with a number.
Example:
In this example all HTML elements with class="center" will be blue, center-aligned and
160% in font-size.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
.transform {
text-align: center;
color: blue; Figure 9. CSS class selector output
font-size: 180%;
}
</style>
</head>
<body>
<h1 class="transform">HTML</h1>
<p class="transform">CSS</p>
</body>
</html>
7 | Q1 W4
You can also specify that only specific HTML elements should be affected by a class.
Example:
In this example only <p> elements with class="center" will be red and center-aligned:
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
font-family: chiller; Figure 10. Sample output
font-size: 200%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
HTML elements can also refer to more than one class.
Example:
In this example the <p> element will be styled according to class="center" and to
class="large".
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%; Figure 11. Sample output with more than one class.
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>
</body>
</html>
8 | Q1 W4
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.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center; Figure 12. Universal selector output
color: red;
font-size: 120%;
}
</style>
</head>
<body>
<h1>This heading will not be affected</h1>
<p>This paragraph will be red and center-aligned.</p>
<p>This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
} Figure 13. CSS Grouping selector output
</style>
</head>
<body>
<h1>HTML</h1>
<h2>CSS</h2>
<p>JavaScript</p>
</body>
</html>
9 | Q1 W4
Now Do It! Q1 W4
ACTIVITY 1
Name: __________________________________________ Date: _______________
Grade and Section: _______________________________ Score: ______________
Directions: Supply the missing HTML code. Write your answers on the space provided.
1. Change the color of all <p> elements to "red".
<html>
<head>
<style> ____________________________
____________________________
____________________________
</style> </head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph 1. </p>
<p>This is another paragraph 2. </p>
</body>
</html>
2. Change the color of the element with id="para1", to "red".
<!DOCTYPE html>
<html>
<head> <style> __________________________
__________________________
__________________________
</style> </head>
<body>
<h1>This is Hello World</h1>
<p __________________>This is a paragraph 1.</p>
<p>This is another paragraph 2.</p>
</body>
</html>
3. Change the color of all elements with the class "coloredtext", to "red".
<!DOCTYPE html>
<html>
<head>
<style> ______________________
______________________
_____________________
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p ______________________>This is another paragraph.</p>
10 | Q1 W4
<p ______________________>This is also a paragraph.</p>
</body>
</html>
4. Change the color of all <p> and <h1> elements, to "red". Group the selectors to minimize
code.
<!DOCTYPE html>
<html>
<head>
<style> ________________________
________________________
________________________
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
11 | Q1 W4
Ace It!
ASSESSMENT
Name: __________________________________________ Date: _______________
Grade and Section: _______________________________ Score: ______________
PROGRAMMING
Instruction:
Create an html page with the following criteria:
a. Block and inline element.
b. Applies 4 types of CSS selectors (element, id, class, groupings).
c. Applies padding, and spacing.
d. Insert image link and text links.
e. Has external CSS.
Note:
1. Separate (or label) your html code file from your external CSS style sheet code.
2. No output should be the same, even in content (make your own webpage).
Rubrics:
Category Excellent (5) Fair (3) Poor (1)
Correctness of No syntax errors There were 1 to 2 There were more
Syntax found on the code. syntax errors found than 2 syntax errors
in the code. found in the code.
Excellent (10) Fair (8) Poor (6)
Completeness of The code included all There was 1 missing There were 2 or
Content required components. component in the more missing
code. components in the
code.
12 | Q1 W4
Name: ____________________________________ Grade & Section: ________________
WRITE YOUR PROGRAM HERE
1 _____________________________________________________________________
2 _____________________________________________________________________
3 _____________________________________________________________________
4 _____________________________________________________________________
5 _____________________________________________________________________
6 _____________________________________________________________________
7 _____________________________________________________________________
8 _____________________________________________________________________
9 _____________________________________________________________________
10 _____________________________________________________________________
11 _____________________________________________________________________
12 _____________________________________________________________________
13 _____________________________________________________________________
14 _____________________________________________________________________
15 _____________________________________________________________________
16 _____________________________________________________________________
17 _____________________________________________________________________
18 _____________________________________________________________________
19 _____________________________________________________________________
20 _____________________________________________________________________
21 _____________________________________________________________________
22 _____________________________________________________________________
23 _____________________________________________________________________
24 _____________________________________________________________________
25 _____________________________________________________________________
26 _____________________________________________________________________
27 _____________________________________________________________________
28 _____________________________________________________________________
29 _____________________________________________________________________
30 _____________________________________________________________________
31 _____________________________________________________________________
32 _____________________________________________________________________
33 _____________________________________________________________________
34 _____________________________________________________________________
13 | Q1 W4
Congratulations! You made it! You just finished Module 4.
References:
• https://www.tutorialrepublic.com/html-tutorial/
• https://www.javatpoint.com/html-tutorial
• https://www.w3schools.com/html/
• https://www.tutorialspoint.com/html/index.htm
• https://www.slideshare.net/NosheenQamar/web-engineering-introduction-to-css-53957593
14 | Q1 W4
