Republic of the Philippines
Department of Education
REGION IV-A CALABARZON
SCHOOLS DIVISION OF BACOOR CITY
SHS IN SAN NICHOLAS III, BACOOR CITY
SAN NICOLAS III, CITY OF BACOOR, CAVITE
WEEKLY HOME LEARNING PLAN
Grade 11
Computer Programming 1
Week 6-Quarter 1
Day and Learning Learning Mode of
Learning Tasks
Time Area Competency Delivery
Introduction
m
● What I need to know? Blended
e r as
Monday In this lesson you are expected to be able to Learning
co
Basic of Web • Understand the term Cascading Style
eH w
Development Sheets (CSS), their use and benefits. Learners are
8:00-10:00am • encouraged to
o.
Understand the structure of a CSS rule:
submit your
Computer
rs e selector and declaration (property, value)
outputs to our
ou urc
• Create, save a new CSS file Bacoor City
Programming 1
Learning
Management
o
• What is new? System
aC s
Discussion
v i y re
Modular
Learning
CREATING A WEB PAGE USING
1. STYLES
ed d
TUESDAY Learners are
8:00-10:00 • Understand the term Cascading Style encouraged to
ar stu
Sheets (CSS), their use and benefits. submit your
• Understand the structure of a CSS outputs to our
rule: selector and declaration Bacoor City
sh is
Learning
(property, value)
Management
Th
Wednesday System
8:00am to
10:00am Learners if the
internet is
2. Using CSS unavailable,
• Create, save a new CSS file you can write
• Create, modify CSS rules: color, your answers
background, font. on a sheet of
• Attach an external CCS to a web paper and
page make sure the
Thursday properly
8:00am- indicated the
10:00am important
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 683 0607
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
details, Name,
Development section,
•What I know? learning area
and week
Identify the errors in the HTML Codes and provide the number.
right code. Learners and
guardian
To apply styles listed in a CSS file observe the
health
to an HTML document it is protocols by
necessary to link them, and we do wearing face
this by including a CSS file in the mask, face
<head > section of an HTML shield and
bringing your
document. own pen and
Thursday <body> sanitizers.
8:00am to <itle> Web design </title>
10:00am
<ink rel="style/sheet" type="tixt/css"
href="myStyle.css"/>
</head>
m
e r as
Rewrite the code below
co
eH w
_______________________________________
_______________________________________
o.
rs e _______________________________________
ou urc
_______________________________________
_______________________________________
_______________________________________
o
aC s
v i y re
Engagement
CREATING A WEB PAGE
ed d
ar stu
What is more?
Performance Task 3:
Write your HTML Document with the following
sh is
guidelines.
Th
1. Use HTML Tags appropriately and
according to its purpose.
2. Make sure of the codes used and be
organized.
3. In this activity, you are expected to use:
• CSS
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
4. If you are finished in writing your codes
including debugging save it with the file
name “Q6Comprog-Performance Task
m
1.htm or html.
e r as
co
5. The file is needed to be uploaded in our
eH w
Bacoor City Brightspace LMS or kindly
o.
rs e submit the physical output to your
computer programming 1 teacher.
ou urc
Rubric:
Ability to apply the right code- 5
Ability to run and debug- 5
o
Ability to Present- 5
aC s
v i y re
Total points = 15
Assimilation
ed d
What I have learned?
ar stu
Write a HTML Document that will provide proper
design for the text below.
sh is
SYNOPSIS: At 3:00 PM today, the center of Severe
Th
Tropical Storm "MARING" was estimated based on
all available data at 475 km West of Calayan,
Cagayan (18.7°N, 117.0°E) (Outside of P.A.R.) with
maximum sustained winds of 100 km/h near the
center and gustiness of up to 125 km/h. It is moving
Westward at 30 km/h. Southwest Monsoon affecting
Southern Luzon and the western sections of Visayas
and Mindanao.
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
V. REFLECTION
• The learners, in their respective notebook, journal, or portfolio to write their
personal insights about the lesson learned by completing the phrases.
I understand that __________________________
I realized that _____________________________.
m
e r as
co
eH w
o.
rs e
ou urc
o
aC s
v i y re
ed d
ar stu
sh is
Th
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
Republic of the Philippines
Department of Education
REGION IV-A CALABARZON
SCHOOLS DIVISION OF BACOOR CITY
SHS IN SAN NICHOLAS III, BACOOR CITY
SAN NICOLAS III, CITY OF BACOOR, CAVITE
COMPUTER PROGRAMMING 1
LECTURETTE
QUARTER 1 WEEK 6
STYLES
CSS Concepts
m
e r as
Understand the term Cascading Style Sheets (CSS), their use and benefits.
co
We use CSS to edit the HTML document's style. It is possible to define
eH w
elements layout through HTML itself, but the recommendation is to separate
o.
the elements definition fromthe layout definition.
rs e
ou urc
The main advantage of CSS is that it can define the style for all elements
in one spot, for example, it is possible to define in one spot the
background color for all website pages, while with HTML we need to
o
define it for each site separately. Other advantages of using CSS are
aC s
faster uploading, easier editing, faster development and greater control
v i y re
over the layout.
Recognize the main approaches to applying styles: inline, internal,
ed d
external.
ar stu
External approach: in this approach CSS definitions are located outside the
HTML document. This approach makes it possible to separate completely
the page content from the layout itself. CSS files are files that contain only
sh is
CSS definitions and have the extension " CSS ", for example mySite.css.
Th
To apply styles listed in a CSS file to an HTML document it is necessary to link
them, and we do this by including a CSS file in the <head > section of an HTML
document.
<head>
<title> Web design </title>
<link rel="stylesheet" type="text/css" href="myStyle.css"/>
</head>
It is necessary to repeat the procedure for each page within a web page.
Internal approach: in this case the CSS definitions are not within another file,
but are within the HTML file. This way, we only define the specific page style
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
with added CSS definition. We may use this for example when we only want
to specify a particular style for only one page. So, all other websites would
include external CSS file, in a given page CSS would be defined within.
To define an internal style , style rules must be added in <head> section
within the <style> tag .
The above example will define, that for the web page to which body this
definition isadded, it will have a red background color.
Inline: in this approach we define the style attribute within the element tags
to which wewant t to apply a specific style.
<p style = "color: red ; " > This is a paragraph . < / p >
In this case, only the color of this paragraph would be red.
We do not recommended this approach since it looses the above-mentioned benefits.
Understand the structure of a CSS rule: selector and declaration
(property,value).
m
e r as
➢ Selector: this is the HTML element that we need to apply to a style
co
eH w
➢ Declaration: is the style that we want to apply to a
o.
certain element. Each declaration consists of 2 parts:
rs e
➢ Property: we use this attribute to add value (e.g., , background color)
ou urc
➢ Value: the value that we assign to an attribute.
o
Any declaration must be located within curly brackets and must end with „;“.
aC s
Therefore, the rule that defines that the background color of an HTML
v i y re
document bodyshould be green would look like this:
body {background - color: green ; }
ed d
ar stu
Using CSS
Create, save a new CSS file.
sh is
Click on the CSS icon on the toolbar
Th
It will open a dialog box where we then need to do the following steps
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
➢ Click on " internal stylesheet " in Sheets and Rules section
➢ Then click on palette in upper left corner and select Linked stylesheet
m
➢ Click on Create stylesheet
e r as
co
eH w
o.
rs e
ou urc
o
aC s
v i y re
ed d
ar stu
sh is
Th
➢ Click again on "internal stylesheet" in Sheets and rules section
➢ Click on Export stylesheet and switch to exported version.
➢ Give the file a name and select .css extension
➢ Click on Save.
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
Create, modify CSS rules: color, background, font.
Click on CSS icon in the toolbar and then select a file. To demonstrate
functionality weselected the body element
m
e r as
co
eH w
o.
rs e
To define settings click on Create Style Rule.
ou urc
To select the background color click on Background and then on the box next to Color,
which will open a color menu.
o
aC s
v i y re
ed d
ar stu
sh is
Th
To define the font click on Text window where you can then select desired settings.
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
m
e r as
co
eH w
Once you have defined all settings, click on OK.
o.
rs e
ou urc
o
References:
aC s
v i y re
www.w3schools.com HTML
Open Society for Idea Exchange (Otvoreno društvo za razmjenu ideja - ODRAZI), Zagreb
ed d
ar stu
Prepared by:
RYAN E. ROY
sh is
Teacher II
Th
Checked by:
Dr. Alma A. Corpuz
Master Teacher II
Noted by:
Adorando R. Darvin
Principal II
_____________________________________________________________________________________________
School: SHS in San Nicholas III, Bacoor City
Address:
This study source Garnet by
was downloaded St.100000831507812
Green Valley, San
fromNicolas III, City on
CourseHero.com of10-29-2021
Bacoor, Cavite
02:55:17 GMT -05:00
Telephone No: (046) 236 5729
Email: 342600@deped.gov.ph
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
Powered by TCPDF (www.tcpdf.org)
