LEARNING RESOURCE

SPA - MEDIA ARTS

THE WORLD WIDE WEB 2

QUARTER 4 - MODULE 1
LEARNING RESOURCE for MEDIA ARTS
WORLD WIDE WEB 2

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 Learning Resource are owned by their respective
copyright holders. Reasonable efforts have 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 National Commission for Culture and the Arts

Development Team of the Learning Resource

Writers: Katrina Juane

Editor: Jag Garcia
Graphic Designer: Erika Garalde
Researchers: Jec Catacutan, Tim Rone Villanueva
Management Team: Marichu Tellano and Henrietta Kangleon (NCCA),
Tanya P. Lopez (PerfLab)

For inquiries or feedback, please write or call:

NATIONAL COMMISSION FOR CULTURE AND THE ARTS

633 General Luna Street, Intramuros, Manila
E-mail: [email protected]
Trunkline: (02) 85272192 • 8527-2202 • 8527-2210 • 8527-2195 to 97
8527-2217 to 18
 INTRODUCTION & OBJECTIVES

Welcome to Quarter 4! We are on our final stretch for the school year! This quarter,
you will learn more about the web page, the importance of having a web development
process, and how applying proper project management will contribute to the success
of your project. At the end of this module, you will learn more about the Cascading
Style Sheet and how to apply it in your HTML website.

To be able to acquire the necessary hands-on experience, a basic computer with a

free Text Editor software is recommended so you can try the codes yourself as you go
through the module.

At the end of this quarter you will be able to:

1. Develop an understanding of the principles of web design and development

and combine with visualization.

2. Identify the different parts of a web page to be able to develop a compelling

website project.

3. Create websites using basic HTML codes and CSS styles that can cater to
an intended target user.

4. Define the different types of graphics that you can use to be able to create
a functional website.

5. Explain the different web development processes to be able to effectively

plan and manage a website project.

This Learning Resource may be used for, and is applicable to, the following DepEd
Codes:

● SPA_MA-OP8-IVa-1

● SPA_MA-OP8-IVb-c-2

● SPA_MA-OP8-IVd-g-3

● SPA_MA-OP8-IVh-j-4

So, if you are ready, let’s begin!

2
 TOPIC 1: GRAPHICS FOR THE WEB

Providing a rich and meaningful experience for your users when they visit your website
would mean using media such as photographic images and vector illustrations to
enhance the content. However, you must remember that the technical requirements
for images to be used on a website are different from a printed output like posters and
flyers.

Image Optimization

Converting your image files into smaller file sizes will help the website load these
images faster and improve the loading speed of your webpage. This process is called
image optimization. You can use different graphic design software and apps to optimize
your images.

Difference Between .png, .jpeg, .gif

Ever wondered what file type should be used for the images of your websites?

JPEG

Best for photographs,

or static images with a
lot of colors, shadings,
and gradients.

3
 GIF

When a photo that has

a lot of details is saved
as a .gif file, the texture
will become grainy.
That is why GIFs are
best used for vector
illustrations with web
animations and flat
design.

PNG

Can be used for logos,

vector illustrations,
or images that
require a transparent
background. PNGs can
also be used for photos.
However, the quality
of PNGs for photos
are not as good as
compared to JPEG.

(Image from freepik.com)

4
Notice also that there are color differences between a .jpeg, .gif, and a .png file most
especially on vector illustrations.

JPEG GIF PNG

(Image from freepik.com)

Technical Requirements

When working with web graphics, it

is always best to work with pixels
(px) since you are working on screen.
Centimeters (cm), or inches (in) are
best used when you are working with
a printed output.

The standard resolution for web

images is 72 ppi or pixels per inch.
Anything greater than this may cause
your website to load slowly.

Other graphic design apps such as

Canva can automatically convert
your images and optimize it for the
web. Adobe Photoshop has preset
templates as well that are fit for
websites.

5
 TOPIC 2: ANATOMY OF A WEB PAGE

A web page is just like a document, only this time, it is viewable in a browser with an
internet connection. Just like a newspaper or a magazine layout, a web page has an
ideal layout and set of elements that most web designers follow to create an effective
website.

Logo

The logo allows your users to know who or what the website is about. This is usually
placed on the upper left corner of the web page, or in the center, and it can be seen in
all of the pages. Ensuring that the logo is placed in all of the web pages will make the
website look cohesive.

Header

The header is one of the things that your visitors will see when they visit your website.
The header must be compelling enough to catch their attention and actually convince
them to stay on your website and browse through the pages.

6
Main Navigation

The main navigation contains the links to the main pages of your website. Usually,
a main navigation consists of the following pages: Home, About, Services, Portfolio,
Contact.

This website from www.conservateur.fr shows the three basic elements of a webpage:
the logo which is located on the top left area, the main navigation is located beside
the logo (which is also a great practice), and the header consists of compelling design
elements and content.

Body Content

Content is king! Content is king! Content is king! Your content should be compelling
and interesting. Content can be text, images, photos, or any media that communicates
a message. If your text content is too long, you can break the paragraphs by adding
supporting photos, illustrations, or videos as supplementary materials.

7
Snappy.com has a blog page that allows users to engage and interact with one another.
Providing more content, by sharing stories just like Snappy, allows your users to get to
know you and your website better on a different level.

Can you imagine the Beacon Social webpage with just pure text and no illustrations or
supporting elements? Boring right? Adding images (which are also content), can help
you enhance your page and strengthen the message that you want to communicate to
your audience.

8
This website www.artus.com.hk has supersized video headers that look like a
walkthrough of the different facilities of the hotel. Beautiful music will also greet you
when you enter the website, which makes you feel as if you are actually in the hotel.

Call to Action Buttons

Call to Action (CTA) are buttons that tell your users what they need to do when they
visit the website. For example, if you want your users to check out your portfolio page,
your CTA can be on the header of the main page of the website, and it can say “Check
out my portfolio!” So when your users click on that button, it goes to the portfolio page.

In the website planetoflana.com, there are two Call to Action buttons: the “Play Trailer”
button, and the “Wishlist on Steam”.
9
Footer

The footer signals the end of your webpage. Make sure not to skip this section! More
and more designers have used the footer section to place more content in. A short
contact form, maps, social media links, and navigation links can also be placed on
the footer section. You can design the footer section of your website just like how you
design the body content. Gone are the days when the footer would just be a plain bar
at the bottom of the page that contains copyright information.

The footer section of the Easol website was designed so seamlessly that you wouldn’t
think it even had a footer section!

The footer section from naturaldiamonds.com contains a short information about the
company. This is a great alternative especially if the company overview text of your
website is short.
10
ACTIVITY 1: BASIC WEB PAGE FORMAT

Using a piece of paper and your writing materials (pencil or pen), draw your
ideal web page layout. Don’t think about whether you can do the layout or not.
Imagine you are a seasoned web designer and that you are conceptualizing
your brand new portfolio website. You can use different coloring materials to
enhance your design. Make sure to apply the different elements of the website:

1. Logo

2. Header

3. Main Navigation

4. Body Content

5. Call to Action button/s

6. Footer

See Appendix 1 for sample layout. But keep in mind that this is just an example!
Be creative when you make your layouts, at the same time be mindful of the
basic elements.

11
 TOPIC 3: WEB DEVELOPMENT PROCESS

Have you ever thought of accepting commissioned web development projects? Doing
so will not only help you widen your network and put you on the local map (yes, even
just within your own city counts), it will also help you widen your skills because of the
different situations you may encounter and have to troubleshoot while developing a
website. Before offering your web development services, learn the process of web
development, the importance of creating a proposal, and proper project management.

The Process

Knowing the basic web development process will help you ensure a smooth transaction
and better relationships with your future clients. Remember that this is not a cookie-
cutter process. You will learn how to create your own process as you widen your
experience in web development and project management.

1. Services and pricing - Identify your services, and how much you will charge for
these services. This can be your baseline reference whenever someone asks for
your rates.

2. Looking for clients - There are many ways on how to look for clients. You can
start with your relatives and friends. Social media is a great way to advertise your
services as well!

3. Exploratory meetings - An exploratory meeting with a potential client is a great

start. This allows you and your client to discuss more about the details of the
project.

4. Submission of proposals - A proposal is an important document which details the

information of the project. This contains the scope of your work and some expected
deliverables based on your exploratory meeting with them.

5. Submission of billing invoices - A billing invoice is a document that you can

create yourself. This details the deliverables and the corresponding rates and the
overall total project cost. You can use this document as your basis to track your
client’s payables including the dates of payments.

12
6. Production phase - This is usually the most tedious part of the process as this is
the time when you already need to produce your project.

7. Presentation - When you are done with certain deliverables of your project, you
may be asked to present your design studies, some mock-ups, or even the status
of your production.

8. Final approval - Receiving a final approval from your client could signal the end
of the project. Don’t forget to send your final billing to your client for any other
balances that need to be settled!

Project Management

Now that you have booked a client, proper project management is important to ensure
a smooth delivery. Having an effective system will help you finish your project and
submit before the deadline.

1. Collect your content - Content means text, images, videos, and other media that
you would like to include in your website.

2. Organize your files - After collecting your content, organize your files. If you have
a computer, create designated folders for your files so that you won’t have a hard
time locating it once you start with the production of your project.

3. Plan your tasks and schedules - Create your own calendar and plot your tasks
and schedules. Proper time management is important to ensure that your projects
are submitted on time.

4. Communicate with your team - Working with other people can be challenging
without proper communication. Make sure to communicate properly with your team
members. Set up a group chat or create a Padlet account so that everyone is in
the loop.

5. Stick to the plan - Stick to the plan but be open to some changes, too! Sometimes,
plans change in the middle of the project. But it’s okay. Just make sure that these
changes are properly communicated!

13
ACTIVITY 2: REFLECTION PAPER ON WEB DEVELOPMENT PROCESS

After learning about the web development process, share your thoughts:

1. What do you think is the importance of having a web development process?

2. As a designer, what are the pros and cons of applying a process in your
projects?

3. Why is it important to have proper project management skills whenever you

have a project?

4. Recall a past experience wherein you weren’t able to practice proper project
management? What happened? How did you resolve it? Past experiences
can be from group projects, too!

14
 TOPIC 4: CSS INTRODUCTION

Cascading Style Sheet (CSS) is a document that contains formatting information, and
tells how elements are supposed to be displayed in a webpage. CSS can be applied
in an HTML document, or attached as an external file using the .css file extension (ex:
style.css).

Style sheets can be used in three different ways:

First: Inside an HTML tag

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1 style="color: red; background:black;">This is a red
heading with a black background</h1>
</body>
</html>

This may work for a simple HTML webpage, but this is not a good method to use for
bigger websites because it will bloat your HTML and make website maintenance a real
headache.

15
ACTIVITY 3: TRY IT YOURSELF! CREATE YOUR FIRST CSS STYLE INSIDE AN
HTML TAG

Step 1:

Create a new folder in your computer and name it as “css-exercise”.

Step 2:

Create a new HTML file by opening any available Text Editor software you have
on your computer. One of the most common Text Editors is the Notepad for
Windows, or TextEdit for Mac. Click FILE > NEW to create a new document,
save the file as index.html and place it in the css-exercise folder.

Step 3:

In your index.html file, type these codes and save.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>

</body>
</html>

Step 4:

Copy the HTML and CSS in the <body></body> section

<h1 style="color: red; background:black;">Insert your text here</

h1>

Save your files. Open the HTML file in a browser. Take a screenshot and show
it to your teacher!

16
Second: Embedded in the <head></head> section of the HTML page, using the
<style></style> tag.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<style media="screen" type="text/css">
h1 {
color: red;
background-color: black;
</style>
</head>
<body>
<h1>This is a red heading with a black background</h1>
</body>
</html>

If you have a complex and a website that has several pages, the styles must be
downloaded every time someone visits a page, and can cause a slightly slower
browsing experience for your users.

17
ACTIVITY 4: CREATE A CSS STYLE INSIDE THE <HEAD></HEAD> SECTION

Step 1:

Create a new HTML file. Copy and paste these codes:

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a red heading with a black background</h1>
<p>this is the main paragraph</p>
</body>
</html>

Step 2:

Add this code in the <head></head> section

<style media="screen" type="text/css">

h1 {

color: red;

background-color: black;

</style>

Save your files. Open the HTML file in a browser. Take a screenshot and show
it to your teacher!

18
Third: As an external document, saved as a .css file (ex: style.css)

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<link rel="stylesheet" type="text/css" href="style.css"
media=”screen"/>
</head>
<body>
<h1> This is a red heading with a black background</h1>
</body>
</html>

This is the most common method of applying CSS styles to an HTML document.
With this method, all of your style rules are contained in a single text file. Website
maintenance is easier since you just need to open the CSS file to update the styles.

19
ACTIVITY 5: CREATE A STYLE.CSS FILE

Step 1:

Create a new HTML file. Copy and paste these codes:

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

</head>
<body>
<h1>This is a red heading with a black background</h1>
<p>this is the main paragraph</p>
</body>
</html>

Step 2:

Create a css file by naming it as “style”, and use the file extension “.css” (style.
css)

Step 3:

In the style.css file, copy and paste these codes:

@charset “UTF-8”;

h1 {
color: red;
background-color: black;
}

Save your files. Open the HTML file in a browser. Take a screenshot and show it to
your teacher!

20
 TOPIC 5: CSS SYNTAX

A CSS syntax contains a selector and a set of declarations which are composed of
properties and values. The selector identifies the element that you want to style. The
declaration starts and ends with a curly bracket { and }, which contains a CSS property
name and a value, and is separated by a semi-colon.

h1 {
color: red;
background-color: black;
}

Some points to remember:

1. The declaration block must be

inside the curly brackets { }

2. Each declaration line is ended

with a semicolon

3. Make sure that the properties

and values are correctly
spelled!

21
In this example, all Heading 1 elements will be in red text, with black background color.

h1 {
color: red;
background-color: black;
}

22
 TOPIC 6: DIV TAGS

The <div> tag is the most commonly used HTML tag in web development. It helps you
separate your content on a webpage, create specific sections, and style this tag using
CSS. The purpose of div tags is to hold content. This content can be placed anywhere
on your webpage and it can even overlap by applying different styles. The content can
consist of different elements which are styled by CSS.

Check out the example below to see how a <div> tag was applied in HTML. Just like
other HTML tags, a <div> tag must have an opening and closing tag: <div> and
</div>, and should be located inside the <body> tag.

<html>
<head>
<title>CSS Exercise</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="container">
<h3>Hi! This is Heading 3</h3>
<p>This is the paragraph. This is in blue text</p>
</div>

</body>
</html>

23
 TOPIC 7: BASIC SELECTORS

Now that you already know the basic CSS syntax, and the <div> tags, let us now move
on to Basic Selectors. A CSS selector allows you to specify the HTML element/s that
you want to style.

Tag or Element Selector

This selector selects the default HTML tags, and is based on the tag name. Example:
<p>, <h1>, <table>, <header>, etc.

In this example, all Heading 3 elements will be in red text, with black background color;
and all Paragraph elements will be in red text.

h3 {
color: red;
background-color: black;
}

p {
color: red;
}

24
Here are some common HTML tags that you can style in CSS:

Headings <h1> to <h6> Example

h1 to h6 (h1 being the largest, h6 the h1 {

smallest) color: red;

Default sizes of headings: background-color: black;

text-align: center;
h1: 32px
}
h2: 24px

h3: 18px
h4 {
h4: 16px
color: red;
h5: 12px text-align: left;

h6: 11px font-size: 14px;

Take note, font sizes for h1 - h6 tags are font-weight: bold;

different from browser to browser. You }
may use these sizes as your generic
guide, and may change the size according
to your preference.
Paragraph <p> Example

The default size of the paragraph is 16px. p {

You can also change the size, depending color: #660055;
on your design.
text-align: left;
font-size: 14px;
}

25
 Lists <ul>, <ol> Example

A list will allow you to group related text ul {

together, or enumerate certain things. list-style-type: circle;
This also helps you organize your content color: #660055;
font-size: 14px;
on your website. }
<ul> is an unordered list, usually in a
ol {
bullet format. color: #ff0000;
font-size: 14px;
<ol> is an ordered list, usually marked by
}
numbers.

There are a lot of HTML tags that you can style using CSS. You may browse through
the internet to check some of the available cheat sheets that you can use as your
reference.

ID Selector

Similar to tags, you can also use the same properties in the ID selectors. The ID
selector is used to select a specific element and is unique within a page. There are
no default ID selector names but there are standard ones that you can use. You must
include a hash (#) character before the ID element to declare it as an ID selector.

How it looks like in the HTML file

<html>
<head>
<title>CSS Exercise</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<h3>Hi! This is Heading 3</h3>
<p>This is the paragraph. This is in blue text</p>
</div>

</body>
</html>

26
How it looks like in the stylesheet file (style.css)

h3 {
color: white;
background-color: darkblue;
padding: 5px;
}

p {
color: darkblue;
}

#container {
width: 900px;
height: 500px;
padding: 30px;
background-color: lightblue;
}

And this is how it looks like on a browser

27
Class Selector

A class selector has the same properties and values of an ID selector. They have
similar behaviors and can also be applied on a <div> tag. The only difference is that
classes can be used multiple times on a page (unlike IDs, which are unique and are
used only once), and that classes start with a period ( . ) character.

How it looks like in the HTML file

<html>
<head>
<title>CSS Exercise</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="row"><h1>Hi! This is Heading 1</h1></div>

<div class="row"><p>This is the default paragraph style.</p></div>
<div class="row">This is a row with its own text styles.</div>

</body>
</html>

28
How it looks like in the stylesheet file (style.css)

h1 {
color: white;
}

p {
color: #f9d5e5;
font-weight: normal;
}

.row {
background-color: #622569;
color: #eeac99;
margin: 10px;
padding: 10px;
font-size: 18px;
font-weight: bold;
}

And this is how it looks like on a browser

29
ACTIVITY 6: APPLYING CSS
Step 1
Create a new HTML file. Copy and paste these codes:
<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

</head>
<body>
<h1>This is a red heading with a black background</h1>
<p>this is the main paragraph</p>
</body>
</html>

Step 2
Create a css file by naming it as “style”, and use the file extension “.css” (style.css)

Step 3:
In the CSS file, create CSS rules for the following:
1. Heading 1 <h1>
2. Paragraph <p>
3. An ID div for container
4. A class div for row

Apply the CSS rules in your HTML codes.

Save your files. Open the HTML file in a browser. Take a screenshot and show it to
your teacher!

30
 TOPIC 8: WEB DEVELOPMENT APPS
Developing a website can be a daunting task. However, you can be an experienced
web designer in no time just as long as you practice the craft. If you find the hard
coding a little intimidating, you can always opt for easier alternatives in creating a
website. What’s important is that you were able to learn the basics of web development
from our previous lessons.

Here are some apps that you can use for your web project:

1. Wordpress - Wordpress allows you to create beautiful websites with a lot of features
that are perfect for your personal projects and blogs. Wordpress provides dozens
of templates to choose from that you can also customize and apply the basic web
design skills that you acquired from our lessons.

2. Wix - This is a great free web development app that you can use for your projects.
This is a fully managed subscription service wherein Wix handles the hosting, back-
ups and security of your websites. You may opt to choose the free account with
limited features or the paid account with more advanced choices.

3. Adobe Dreamweaver - Dreamweaver is a paid, extensive web development app

that you can use to edit your HTML and CSS files. It has a WYSIWYG editor (“What
You See Is What You Get”) that allows you to see your website edits in real time
without having to view it in a browser.

4. Sublime - Feeling brave? Sublime is a free app that you can download on your own
computers. This is a text editing tool, similar to Notepad, that allows you to hard-
code HTML and CSS files.

5. Canva - Although a graphic design app, you can use Canva as a tool to create
optimized images for your websites. The free version of Canva offers hundreds of
design elements, and dozens of typefaces and templates.

31
 SUMMATIVE ASSESSMENT #1:
PORTFOLIO WEBSITE FINAL PROJECT - PART 2
OPTION 1
Remember your final project from last quarter? Time to pull that out and enhance
your website by applying different CSS rules and adding content (text, images,
videos, social media links)
Your 4-page portfolio website should contain the following:
• Home Page - This is your index.html.
• About Me - A page about you, your skills, or anything that you want your
future clients to know about you. Remember the internet safety tips discussed
in the previous lesson.
• Portfolio - Place your sample works here. A brief description per work is
recommended.
• Contact Me - Let your clients know how they can get in touch with you if they
want to hire you!
Requirements for CSS styles:
1. A <div> ID
2. A <div> class
3. Heading 1 to Heading 6
4. Paragraph
You can be as creative as you want. Just make sure not to go overboard and still
apply the basic principles and elements of design.

OPTION 2
Create a portfolio site using Wix. Your Wix website should have the following pages:
• Home Page - This is your index.html.
• About Me - A page about you, your skills, or anything that you want your
future clients to know about you. Remember the internet safety tips discussed
in the previous lesson.
• Portfolio - Place your sample works here. A brief description per work is
recommended.
• Contact Me - Let your clients know how they can get in touch with you if they
want to hire you!
• Socials - Link your social media sites to your portfolio website!

32
 SUMMATIVE ASSESSMENT #2:
REFLECTION PAPER
Submit a final reflection paper that talks about what you learned from this term.
The guide questions below can serve as your guide. Make sure to answer in a
paragraph format.

1. If you can create your own web development process, how would the process
be like? Discuss the purpose of each step.

2. Why is it important to know the different technical requirements for the web?
How will this benefit you as a web designer?

3. Make a comparative assessment on WordPress, Wix, and Dreamweaver. You

may use the internet to know more about these apps. Identify the different
functions of these apps, and as well as its pros and cons.

4. If you are to choose between the three apps, which do you think is best for
you? Why?

33
 RUBRICS
Reflection Papers

Needs
Excellent Very Good Acceptable
Improvement
94-100 87-93 79-86
70-78
Insights The learner The learner makes The learner makes The learner
makes surprising very good insights good insights as makes shallow,
50% insights. He/she as far as meanings far as meanings superficial, or silly
sees or perceives and messages and messages in interpretations.
meanings that in the topic. He/ the topic.. He/ she There is no
indicate his/ her she shows an can perceive some significant evidence
deeper reading ability to perceive deeper meanings, of an attempt to
and appreciation of more than what is but most insights derive or perceive
what needs to be physically visible in are shallow and meanings from
analyzed. what needs to be superficial. what needs to be
analyzed analyzed
Reflexivity The learner makes The learner makes The learner makes The learner makes
perceptive or wise perceptive or wise shallow or expected shallow inferences
50% inferences about inferences about inferences about about how a work
his or herself in his or herself in his or herself in affects him or her.
the context of the the context of the the context of the No attempt is made
topic. The learner topic. The learner topic. There is to reflect beyond
expands his or her attempts to expand no statement or the self.
reflection beyond his or her reflection comment made
the context of the beyond the context about these
topic to make a of the topic to make inferences in the
statement on the a statement on the context of the
human condition. human condition. human condition.

Activities

Needs
Excellent Very Good Acceptable
Improvement
94-100 87-93 79-86
70-78
A p p l i c a t i o n The learner The learner The learner showed The learner
of Codes showed excellent showed a very a good proficiency barely showed
proficiency in good proficiency in the application proficiency in
40% the application in the application of HTML/CSS in the application
of HTML/CSS in of HTML/CSS in the output. The of HTML/CSS
the output. The the output. The application of in the output.
application of application of HTML/CSS was The application
HTML/CSS was HTML/CSS was somewhat used of HTML/CSS
maximized which highly used which which shows a was barely used
shows a high level shows a good level satisfactory level which shows
of mastery and of mastery and of mastery and a low level of
understanding. understanding. understanding. mastery and
understanding.

34
Quality The learner created The learner created The learner created The learner
an excellent a good quality a mediocre quality created a poor
40% quality web page. web page. Layout/ web page. Layout/ quality web page.
Layout/design is design is average. design is tolerable. Layout/design is
visually striking. Links, pages, Some links, pages, dull. Most links,
All links, pages, functions are functions are pages, functions
and functions are mostly complete complete and are incomplete
complete and and working. working. and not working.
working.
Enthusiasm The learner The learner showed The learner showed The learner
showed great enthusiasm and some enthusiasm showed little
20% enthusiasm and joy in producing in producing the enthusiasm and
joy in producing the project. There project. There joy in producing
the whole project. is an obvious is some sense the project. The
There is an obvious sense of enjoyment of enjoyment works give a
sense of enjoyment emanating from emanating from sense of simply
and happiness most of the individual pieces fulfilling a class
emanating from the individual pieces from the whole requirement.
individual works and the whole portfolio.
and the whole portfolio.
portfolio.

Final Project

Needs
Excellent Very Good Acceptable
Improvement
94-100 87-93 79-86
70-78
Creativity The learner took The learner took The learner is The learner is
something ordinary something ordinary able to produce barely able
30% and made it and brought the a creative project. to produce a
uniquely their own. project to life. The The project shows creative project.
The project shows project shows a fairly commonplace The work shows
a keen sense sense of wonder ideas and the cliché or poorly
of wonder and and openness that resulting works developed ideas
perceptiveness that allows the learner are what one must and the resulting
allows the learner to go beyond tools expect from a works are less
to go beyond tools and materials learner of this age than what one
and materials and create an and life experience must expect
and create an effective visual from a learner of
effective visual communication tool. this age and life
communication tool. experience
Execution/ The learner was The learner was The learner was The learner
Output able to apply able to apply able to apply was not able
all of the layout most of the layout some of the layout to apply the
30% principles, and principles, and principles, and layout principles,
rules in typography rules in typography rules in typography and rules in
and color theory in and color theory in and color theory in typography and
his/her project. his/her project. his/her project. color theory in
his/her project.

35
Content The project has a The project has The purpose and The website lacks
well-stated clear a clearly stated theme of the project a purpose and
30% purpose and theme purpose and theme, is somewhat vague. theme.
that is carried out but may have one
throughout the site. or two elements
that do not seem to
be related to it.
Enthusiasm The learner The learner showed The learner showed The learner
showed great enthusiasm and some enthusiasm showed little
10% enthusiasm and joy in producing in producing the enthusiasm and
joy in producing the project. There project. There joy in producing
the whole project. is an obvious is some sense the project. The
There is an obvious sense of enjoyment of enjoyment works give a
sense of enjoyment emanating from emanating from sense of simply
and happiness most of the individual pieces fulfilling a class
emanating from the individual pieces from the whole requirement.
individual works and the whole portfolio.
and the whole portfolio.
portfolio.

36
 APPENDICES
Appendix 1 - Sample Web Layout

37
WEB DESIGN SAMPLE REFERENCES
5 star serviced residence in Hong Kong: K11 artus. Hybrid Residence. (n.d.). Retrieved August 30, 2021,
from https://www.artus.com.hk/

Freight, S. (n.d.). Sell travel and experiences online. Easol. Retrieved August 30, 2021, from https://
easol.com/

An off-earth odyssey. Planet of Lana. (n.d.). Retrieved August 30, 2021, from https://planetoflana.com/

Shirley, K., Gauk-Roger, T., Horne, S., Fasel, M., Staff, E., & Newman, J. (n.d.). Only natural diamonds.
Only Natural Diamonds. Retrieved August 30, 2021, from https://www.naturaldiamonds.com/

Website awards - best web design trends. Awwwards. (n.d.). Retrieved August 30, 2021, from https://
www.awwwards.com/

IMAGE REFERENCE
Graphic resources for everyone. Freepik. (n.d.). Retrieved August 30, 2021, from http://www.freepik.
com/

CONTENT REFERENCES
BBC. (2021, October 28). What is the World Wide Web? BBC Bitesize. Retrieved January 18, 2022,
from https://www.bbc.co.uk/bitesize/topics/zkcqn39/articles/z2nbgk7

Fast, secure managed WordPress hosting. WordPress.com. (n.d.). Retrieved January 18, 2022, from
https://wordpress.com/

Free website builder: Create a free website. wix. (n.d.). Retrieved January 18, 2022, from https://www.
wix.com/

tech4pub.com. (2018, August 22). Infographic: When to use JPEG, GIF, and PNG. Technology for
Publishing LLC. Retrieved January 18, 2022, from https://www.tech4pub.com/2014/12/10/
infographic-jpeg-gif-or-png/

W3Schools free online web tutorials. W3Schools Online Web Tutorials. (n.d.). Retrieved January 18,
2022, from https://www.w3schools.com/

Web design software. WebsiteSetup. (2021, December 22). Retrieved January 18, 2022, from https://
websitesetup.org/web-design-software/

Website design software | Adobe Dreamweaver. (n.d.). Retrieved January 18, 2022, from https://www.
adobe.com/sea/products/dreamweaver.html

COVER AND OTHER ADDITIONAL GRAPHICS ARE FROM FREEPIK.COM

38