This Study Resource Was: Department of Education

Download as pdf or txt
Download as pdf or txt
You are on page 1of 9

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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
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: [email protected]
https://www.coursehero.com/file/112097043/Quarter-1-Week-6-WHLP-Computer-Programming-1-1pdf/
Powered by TCPDF (www.tcpdf.org)

You might also like