7

Technical Vocational
Livelihood
QUARTER

2 Computer Programming

Computer Programming (ICT) – Grade 11

TECHNICAL VOCATIONAL LIVELIHOOD
Quarter 2 – Module 5 CSS Pagination 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 Division of Pasig City

Development Team of the Module

Writer: Jenessy Joy T. Pinga
Editors: Ma.Lerma I. Cantanero
Reviewer: Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
Assistant Schools Division Superintendent
OIC-Schools Division Superintendent
Aurelio G. Alfonso, Ed. D.
OIC-Assistant Schools Division Superintendent
Victor M. Javena, Ed. D.
OIC – Chief Curriculum Implementation Division
Chef School Governance and Operation Division

Education Program Supervisor

Wilma Q. Del Rosario, LRMDS
Dr. Libranda L. Agon, Ed. D., EPP/TLE

Printed in the Philippines by ________________________

Department of Education – Division of Pasig City

Office Address: Caruncho Avenue, San Nicolas, Pasig City

Telefax: 641-88-85 / 682-2819
E-mail Address: [email protected]
 Computer
Programming

Quarter 2
Self Learning Module 5
CSS Pagination
Writer: Jenessy Joy T. Pinga
Editors: Ma. Lerma I. Cantanero
Validator/Reviewer: Rowena O. Dimagiba
Introductory Message

For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Pagination!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes 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. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the Learner:

Welcome to the Computer Programming for the ICT Module on CSS Pagination!

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 material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and

applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Post-test - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATION

At the end of the module the learner is expected to:

1. understand CSS Pagination.
2. perform and apply the use of CSS button.
3. cite the importance of CSS Pagination.

PRE–TEST

Instruction: Select the letter that corresponds to the correct answer.

1. Syntax for giving border in designing pagination.

A. border: 1px solid #ddd;
B. pagination-border: 1px solid #ddd;
C. border:” 1px solid #ddd”;
D. pagination-border:” 1px solid #ddd”;

2. To center the pagination, wrap a container element around it with what

property?
A. border-radius
B. list-style
C. transition
D. text-align

3. A property used to add borders to the pagination.

A. pagination-border
B. border-pagination
C. border-page
D. border

4. Syntax for changing size of pagination.

A. page-font-zise: 30px;
B. font-size-page: “30px”;
C. font-size: 30px;
D. font-size: “30px”;

5. Syntax for adding margin to a pagination.

A. margin: 0 4px;
B. margin:” 0 4px”;
C. p-margin: 0 4px;
D. margin-p: 0 4px;
 RECAP
Module 4 discussed CSS buttons. Based on what have you learned from
module 4, describe the use off the following:

• background-color
• font-size
• Padding
• border-radius
• Border
• transition-duration
• box-shadow
• cursor
• Width
• display: block
• float: left

LESSON

CSS Pagination
Pagination is the process of distributing a document into separate pages.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;}
.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;}
</style>
</head>
<body>
<div class="pagination">
<a href=”…”>&laquo;</a>
<a href=”…”>1</a>
<a href=”…”>2</a>
<a href=”…”>3</a>
<a href=”…”>&raquo;</a>
</div>
</body>
</html>
 &laquo this means a sign of << while &raquo means a sign of >>.

Output: (try it with your PC to see what happens)

Active and Hoverable Pagination

It highlight the current page with an .active class, and use the :hover
selector to change the color of each page link when pointing them.

Example:

.pagination a.active {
background-color: black;
color: white;}
.pagination a:hover:not(.active) {background-color: yellow;}

Output: (try it with your PC to see what happens)

In this example page 2 with black background is the current page while page
3 with yellow background is where the cursor or mouse is pointing.

Rounded Active and Hoverable Buttons

Use border-radius property if you a rounded "active" and "hover"

background.

Example:

.pagination a.active {
background-color: black;
color: white;
border-radius: 10px;}
.pagination a:hover:not(.active) {
background-color: yellow;
border-radius: 10px;}

Output: (try it with your PC to see what happens)

Bordered Pagination

Use the border property to add borders to the pagination.

Example:

.pagination a {
color: black;
float: left;
padding: 10px 20px;
text-decoration: none;
border: 1px solid black;}
.pagination a.active {
background-color: black;
color: white;
border: 1px solid yellow;}
.pagination a:hover:not(.active) {background-color: yellow;}

Output: (try it with your PC to see what happens)

Rounded Borders

Example:

.pagination a:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;}
.pagination a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;}

Output: (try it with your PC to see what happens)

Space Between Links

To add space between page link use margin property.

Example:

.pagination a {
color: black;
 float: left;
padding: 10px 20px;
text-decoration: none;
border: 1px solid black;
margin: 0 2px;}

Output: (try it with your PC to see what happens)

Pagination Size

Use font-size property to change the size of pagination.

Example:

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
font-size: 30px;}

Output: (try it with your PC to see what happens)

To center the pagination, wrap a container element like <div> around it with
text-align:center.

Example:

.center {
text-align: center;}
 ACTIVITIES

DIRECTIONS: Create a website about ICT that has the following

requirements;

1. 3 pages or more.

2. Each page has pagination.

3. Pagination should have the following property:

• background-color
• text-align
• Padding
• border-radius
• color
• float
• padding
• text-decoration
• border
• margin

4. Pagination should have .active class and :hover selector.

Rubrics:
Needs work Developing Meets Standard Score
Information is not Information is The content has
always clear or clear and correct. accurate and
correct. The The theme or useful information.
theme or main main idea of the The theme or main
idea of the Web Web page is more idea of the Web
Content page is more or or less clear and page is clear and
(Good content less clear but related to the related to the
should be relevant) does not relate to purpose or theme purpose or theme
the purpose or of the project of the project.
theme of the
project.
15 20 25
Background, text Background, text Background, text
format and color format and color format, and color
usage are usage are usage are carefully
randomly chosen somewhat chosen to produce
Visual Design with few consistent with a consistent screen
(Appearance) consistent little layout for all your
elements inappropriate pages
throughout. variation.
15 20 25
 Site is difficult to Site is sometimes Readers can get
Structure and
navigate. difficult to around your
Navigation
navigate. website with ease.
(Good navigation
gets you where you
want to go quickly)
15 20 25
Innovation Website has no Some of the page Website has a
(The idea is new, or unique style. has unique style. unique style.
merely iterating on
a previous idea) 15 20 25

Total /100

*Answer the Worksheet number 5 and submit a soft copy/hard copy of your
completed activity to your subject teacher on the following meeting.

WRAP–UP

DIRECTIONS: Based on how you understood the lesson, describe the use of
pagination.

___________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

VALUING

DIRECTIONS: Read and answer the following questions carefully in two to

three sentences each number.

1. What do think is the importance of using CSS pagination?

___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. How will you use the knowledge you acquired in this module?
 ___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POST TEST

DIRECTIONS: Select the letter that corresponds to the correct answer.

1. A property used to add spaces between page link.”.

A. margin
B. font-size
C. padding
D. border

2. A property that used to change size of pagination.

A. margin
B. font-size
C. padding
D. border

3. A property that used to align the pagination to center.

A. float
B. center
C. page-align
D. text-align

4. A property that can have a value of “left”.

A. float
B. center
C. margin
D. padding

5. To add background color for current page add background-color property

inside this element.
A. .active
B. :hover
C. .pagination
D. :page
 KEY TO CORRECTION
A 5. A 5.
C 4. A 4.
D 3. D 3.
D 2. B 2.
A 1. A 1.

Pre-test: Post-test:

REFERENCES
• Accessed September 18, 2020 11:00Am https://www.w3schools.com
• Accessed September 18, 2020 1:30pm https://www.tutorialrepublic.com
• Accessed September 18, 2020 2:00pm Whatis.techtarget.com