12
Computer
Programming
(.Net Technology)
Quarter 2– Module 2:
Create HTML5 document using
advanced techniques with JavaScript
and CSS3
Computer Programming (.NetTechnology)
Alternative Delivery Mode
Quarter 2 – Module 2: Create HTML5 document using
advanced techniques with JavaScript and CSS3
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
royalty.
Borrowed materials (i.e., songs, stories, poems, pictures, photos,
brand names, trademarks, etc.) included in this book 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 SDO San Carlos City
Schools Division Superintendent: Lourdes D. Servito, CESO VI
Assistant Schools Division Superintendent: Diosdado Cayabyab, CESO VI
Development Team of the Module
Writer: ALFIE V. BUGAYONG
Proofreader, In House Content and Language
Editors: Management Team
Chairperson:
Co-Chairpersons:
Members
Printed in the Philippines by ________________________
Department of Education – San Carlos City Division
Office Address: Roxas Blvd., San Carlos City, Pangasinan
Telefax: (075) 632-3293 (OSDS) Trunkline Nos. (075) 633-5691 to 93
Email Address: sdosancarloscity@gmail.com ; or sancarlos.city1@deped.gov.ph
Computer
Programming (.Net
Technology)
Quarter 2 – Module 2:
Create HTML5 document using advanced
techniques with JavaScript and CSS3
Introductory Message
Welcome to the PROGRAMMING .NET TECHNOLOGY Alternative Delivery Mode (ADM) In
this course you will gain basic HTML5/CSS3/JavaScript programming skills, and is an entry
point into both the Web application and Windows Store apps training paths. The course
focuses on using HTML5/CSS3/JavaScript to implement programming logic, define and use
variables, perform looping and branching, develop user interfaces, capture and validate user
input, store data, and create well-structured application. Further, this unit covers the skills,
knowledge, and attitude required in developing HTML5 Websites. Students will also learn to
develop advanced ASP.NET MVC applications using .NET Framework 4.5 tools and
technologies. The focus will be on coding activities that enhance the performance and
scalability of the Web site application. ASP.NET MVC will be introduced and compared with
Web Forms so that students know when each should/could be used.
This module consists of one (1) learning outcome. This learning outcome contains learning
activities supported by instruction sheets. Read the information sheets before you perform
the instruction, answer the self-check and perform the activities provided. To ascertain your
competence, your teacher will assess/ check if you have acquired the knowledge necessary
to perform the skill portion of the particular learning outcome.
In addition to the material in the main text, you will also see this box in the body of
the module:
ICON
Note to the Teacher
This contains helpful tips or strategies that
will help you in guiding the learners.
As a facilitator you are expected to orient the learners on how to use this module. You
also need to keep track of the learners' progress while allowing them to manage their own
learning. Furthermore, you are expected to encourage and assist the learners as they do the
tasks included in the module.
For the learner:
Welcome to the Grade 12 Alternative Delivery Mode (ADM) Title)
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.
This module has the following parts and corresponding icons:
This will give you an idea of the skills or
What I Need to
Know competencies you are expected to learn in the
module.
This part includes an activity that aims to
What I Know check what you already know about the
lesson to take. If you get all the answers
correct (100%), you may decide to skip this
module.
This is a brief drill or review to help you link
What’s In the current lesson with the previous one.
In this portion, the new lesson will be
What’s New introduced to you in various ways such as a
story, a song, a poem, a problem opener, an
activity or a situation.
This section provides a brief discussion of the
What is It lesson. This aims to help you discover and
understand new concepts and skills.
This comprises activities for independent
What’s More practice to solidify your understanding and
skills of the topic. You may check the
answers to the exercises using the Answer
Key at the end of the module.
This includes questions or blank
What I Have
Learned sentence/paragraph to be filled in to process
what you learned from the lesson.
This section provides an activity which will
What I Can Do help you transfer your new knowledge or skill
into real life situations or concerns.
This is a task which aims to evaluate your
Assessment level of mastery in achieving the learning
competency.
In this portion, another activity will be given
Additional
Activities to you to enrich your knowledge or skill of the
lesson learned. This also tends retention of
learned concepts.
This contains answers to all activities in the
Answer Key module.
At the end of this module you will also find:
References This is a list of all sources used in developing
this module.
What I Need to Know
Objectives
• Create HTML5 document using advanced techniques with JavaScript and CSS3 (TLE_ICTP.NET
11-12PPHJC-IIj-IIIa-d-30)
At the end of this module, learners will be able to:
• Set the width and height of an element using CSS.
• Configure margins with CSS.
• Configure paddings with CSS.
What I Know
Pre test
A. Multiple Choices. Directions: Choose the best answer and write only the letter on the space
provided. If none of the choices is correct, write the answer on the space provided. (1 point each)
_________ 1. A single-line text input but it masks the character as soon as a user enters it. They are
also created using HTMl <input> tag.
A. Password input controls C. Single-line text input controls
B. Multi-line text input controls D. Checkbox Control
_________ 2. This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
A. Password input controls C. Single-line text input controls
B. Multi-line text input controls D. Checkbox Control
_________ 3. This control is used for items that require only one line of user input, such as search
boxes or names. They are created using HTML <input> tag.
A. Password input controls C. Single-line text input controls
B. Multi-line text input controls D. Checkbox Control
_________ 4. It used when out of many options, just one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to radio.
A. Radio Button Control C. Clickable Buttons
B. Select Box Controls D. File Select boxes
_________ 5. It also called drop down box which provides option to list down various options in the
form of drop down list, from where a user can select one or more options.
7
A. Radio Button Control C. Clickable Buttons
B. Select Box Controls D. File Select boxes
Creating forms that use the
new HTML5 input types
What’s In
The he ight Property
The height CSS property specifies the height of an element. By default, the property defines the
height of the content area. If box-sizing is set to border-box, however, it instead determines the height
of the border area.
CSS Demo: height
he ight: 150px;
he ight: 6em;
he ight: 75%;
he ight: a uto;
8
Syntax
/* Ke yword va lue */
he ight: a uto;
/* <le ngth> va lue s */
he ight: 120px;
he ight: 10e m;
/* <pe rce nta ge > va lue */
he ight: 75%;
/* Globa l va lue s */
he ight: inherit;
he ight: initia l;
he ight: unse t;
What’s New
The width Property
The width CSS property sets an element's width. By default, it sets the width of the content area,
but if box-sizing is set to border-box, it sets the width of the border area.
CSS Demo: width
width: 150px;
width: 20e m;
9
width: 75%;
width: a uto;
The pa dding Property
Padding properties were introduced to you in Module 4. In this module, we will be
focusing on using the padding CSS shorthand property. The padding CSS shorthand
property sets the padding area on all four sides of an element at once.
An element's padding area is the space between its content and its border.
Padding creates extra space within an element.
The padding property may be specified using one, two, three, or four values. Each
value is a length (px or em) or a percentage. Negative values are invalid.
/* Apply to a ll four s ide s */
pa dding: 1e m;
/* ve rtica l | horizonta l */
pa dding: 5% 10%;
/* top | horizonta l | bottom */
pa dding: 1e m 2em 2em;
• When one value is specified, it applies the same padding to all four sides.
• When two values are specified, the first padding applies to the top and bottom, the second to
the left and right.
• When three values are specified, the first padding applies to the top, the second to the right and
left, the third to the bottom.
• When four values are specified, the paddings apply to the top, right, bottom, and left in that
order (clockwise).
10
What is It
The ma rgin Property
The margin CSS property sets the margin area on all four sides of an element. It
is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Take a look at
the yellow box to see how the margins are rendered.
CSS Demo: margin
ma rgin: 1e m;
ma rgin: 5% 0;
ma rgin: 10px 50px 20px;
ma rgin: 10px 50px 20px 0;
ma rgin: 0;
The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>.
Syntax
11
/* Apply to a ll four s ide s */
ma rgin: 1e m;
ma rgin: -3px;
/* ve rtica l | horizonta l */
ma rgin: 5% a uto;
/* top | horizonta l | bottom */
ma rgin: 1e m auto 2em;
The margin property may be specified using one, two, three, or four values. Each
value is a <length>, a <percentage>, or the keyword auto. Negative values draw the
element closer to its neighbors than it would be by default.
• When one value is specified, it applies the same margin to all four sides.
• When two values are specified, the first margin applies to the top and bottom, the second to
the left and right.
• When three values are specified, the first margin applies to the top, the second to the right and
left, the third to the bottom.
• When four values are specified, the margins apply to the top, right, bottom, and left in that
order (clockwise).
What’s More
I. Examples
The he ight Property - Setting height using pixels and percentages
12
HTML
<div id="ta lle r">I'm 50 pixe ls ta ll.</div>
<div id="s horter">I'm 25 pixe ls ta ll.</div>
<div id="pa re nt">
<div id="child">
I'm ha lf the he ight of my pa re nt.
</div>
</div>
CSS
div {
width: 250px;
ma rgin-bottom: 5px;
b d 2 lid bl
Output
The width Property
Default width
HTML
<p cla s s ="goldie ">The Mozilla community produce s a lot of grea t s oftware .</p>
CSS
ldi {
Output
Pixels and ems
13
HTML
<div cla s s ="px_le ngth">Width me a s ure d in px</div>
<div cla s s ="e m_le ngth">Width mea s ure d in em</div>
CSS
.px_le ngth {
width: 200px;
ba ckground-color: re d;
color: white ;
border: 1px solid bla ck;
Output
Percentage
HTML
<div cla s s ="pe rce nt">Width in perce ntage </div>
CSS
.pe rce nt {
Output
HTML
<p cla s s ="ma xgre e n">The Mozilla community produce s a lot of gre at s oftware .</p>
CSS
p.ma xgre e n {
ba ckground: lightgre en;
width: intrins ic; /* S a fa ri/We bKit us e s a non-s tanda rd na me */
Output
14
Using min-content
HTML
<p cla s s ="minblue ">The Mozilla community produce s a lot of gre a t s oftwa re .</p>
CSS
p.minblue {
ba ckground: lightblue ;
Output
The pa dding Property
HTML
<h4>This e le ment ha s modera te pa dding.</h4>
<h3>The padding is huge in this e le me nt!</h3>
CSS
h4 {
ba ckground-color: lime;
pa dding: 20px 50px;
Output
15
Setting padding with percentage, one value.
pa dding: 5%; /* All s ide s : 5% pa dding */
Setting padding with pixels, one value.
pa dding: 10px; /* All s ide s : 10px padding */
Setting padding with pixels, two values.
pa dding: 10px 20px; /* top a nd bottom: 10px pa dding */
Setting padding with pixels and percentage using three values.
pa dding: 10px 3% 20px; /* top: 10px pa dding */
/* le ft and right: 3% pa dding */
Setting padding with em and pixels using four values.
pa dding: 1e m 3px 30px 5px; /* top: 1em padding */
/* right: 3px pa dding */
Note: The unit em is an example of a relative length unit. Relative length units are relative to
something else, perhaps the size of the parent element's font, or the size of the viewport.
The benefit of using relative units is that with some careful planning you can make it so
the size of text or other element scales relative to everything else on the page.
16
The ma rgin Property
HTML
<div cla s s ="ce nte r">This e le me nt is ce nte red.</div>
<div cla s s ="outs ide ">This e le ment is pos itione d outs ide of its conta ine r.</div>
CSS
.ce nte r {
ma rgin: a uto;
ba ckground: lime;
width: 66%;
Output
More Examples
ma rgin: 5%; /* All s ide s : 5% margin */
ma rgin: 10px; /* All s ide s : 10px ma rgin */
ma rgin: 1.6e m 20px; /* top a nd bottom: 1.6e m margin */
/* le ft and right: 20px ma rgin */
ma rgin: 10px 3% -1e m; /* top: 10px ma rgin */
/* le ft and right: 3% margin */
/* bottom: -1e m ma rgin */
17
What I Have Learned
TRUE OR FALSE. On your answer sheet, write TRUE if the statement is correct. Otherwise,
write FALSE.
1. Height and width property values can be a set to auto, percentages, and length values such
as px or em.
2. A margin’s background is always transparent.
3. The height property defines the height of the content area by default.
4. When using the shorthand padding property, you can use a maximum of five values.
5. Paddings and margins can be assigned negative values.
A. MATCHING. All the following boxes are paragraphs configured with CSS. Determine the CSS
code on the left column that corresponds to each output on the right column. Write the letter of
your choice on your answer sheet. (15 points)
18
Assessment
CODING CHALLENGES. Write the CSS to configure the <h1> and/or <p> element(s). (25
points)
1. Set width of <h1> to 50% and its height to 150 px. Set also the height of <p> to 55 px.
2. Set all paddings for <p> to 75 pixels on all four sides using the padding property. Set also its
width to 100%.
3. Set the top padding to 20 pixels, bottom padding to 25 pixels, and the right and left padding
to 30 pixels of <p>. Use only the shorthand property.
4. Use the margin property to set the top and bottom margins for <p> to 15px, and left and right
margins to 70px. Set also the height to 25% and the width to 25px.
5. Set the width of <p> to 25%. Change the top-margin to 10px, bottom-margin to 50%, left and
right margins to 2em. Change also the right and left paddings to 10px. Use only shorthand
properties.
19
II. Reference
Mozilla. n.d. MDN web docs. Accessed October 31, 2020 https://developer.mozilla.org/en-
US/docs/Web/CSS
20
