DEPARTMENT OF EDUCATION

DIVISION OF CAMARINES SUR

COLEGIO DELA VIRGEN DEL PILAR (CVP) INC.
COLACLING LUPI, CAMARINES SUR
SCHOOL ID: 433585
S/Y 2021 - 2022

SENIOR HIGH SCHOOL LEARNING MODULES

GRADE 11

MODULE 10
QUARTER 2 – WEEK 5

Prepared by:
Jessie s. Monida
Teacher

MODULE WEB PAGE DESIGN USNG TEMPLATES AND

10 ONLINE WYSIWYG PLATFORMS
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
1
 INTRODUCTION
The web is gigantic place and if you using internet everyday you probably
visit several websites whether for news, entertainment, business or education. But
have you wondered how these websites actually work? How are they built? What
skills are necessary to build a website? With almost 1 billion websites now on the
internet, the answers to these questions could be your first step towards a better
understanding of web site designing.

LEARNING
1. Create an original or derivative ICT content using online creation tools,
platforms and applications to effectively communicate messages related t
specific professional track.

MODULE

a. Define Web Page Design and its Basic elements

b. Identify the different web templates and WYSIWYG platforms.
c. Design a web page using an online WYSIWYG platform (notepad
only)

Before you flip the module into the next page, ask first the guidance of our lord

Dear Lord and Father of All

Thank you for ways in which you provide for all of us. For your protection and love we
thank you.
Help us focus our hearts and minds now on what we are about to learn.
Inspire us by your Holy Spirit as we listen and write.
Guide us by your eternal light as we discover more about the world around us.
We ask all thus in the name of Jesus
Amen

ACTIVITY 1: PROS AND CONS

Direction: Search at least two different types of WYSIWYG online platforms.
Discuss the Pros and the Cons and features of each. Then create a complete Venn
Diagram to summarize your preferences.

PROS CONS

SENIOR HIGH SCHOOL LEARNING MODULES

EMPOWERMENT TECHNOLOGY G11
2
 LESSON 1: WEB PAGE DESIGN
A website is a collection of publicly accessible, interlinked web pages that
share a single domain name. Website can be created and maintained by an
individual, group, business or organization to serve a variety of purpose. Together
all publicly accessible websites constitute the World Wide Web.
Web design is a similar process if creation with the intention of presenting the
content on electronic web pages, which the end users can access through the
internet with the help of web browser.
Every single web page in a website has different content, but all the pages are
using similar graphic design. Often, sites will use website templates which contain
all the basic elements of web design such as:
Layout – it means that your design should align with the handful of soothing
adjectives; it should be simple, familiar, intuitive, clean and accessible. Use plenty
of whitespace (or padding and margins) to give the elements of your site room to
breathe, and use grid- based design to keep design items organized and orderly.
Strong photography, icons, or graphics provides supplementary information to your
text but make sure images complement each other and the brand you’re looking to
represent.

SENIOR HIGH SCHOOL LEARNING MODULES

EMPOWERMENT TECHNOLOGY G11
3
Color – As for choosing a color scheme, paying attention to you topic, brand or
industry perspectives, along with your target audience demographics will make this
a somewhat a painless process. Always look for ways to narrow your scope from
roughly 7 million discernible hues the eye can detect.
Navigation – your site navigation is not a space in which to be creative. First off,
dint fall into the trap of overly animated hover effects and complex. Navigational
elements which can exist in site’s header, body and footer simply serve to direct
your visitors to the information they desire as quickly as possible.

Fonts - your text should be easily readable, which generally means body copy
should be at least 16 pixels. Using complementary font is ideal for heading or
accents, but don’t go beyond three typefaces or unnecessary sizing adjustments. Of
course, you’ll want to make sure there’s plenty of contrast between your text and
the site’s background colors, which generally means a light color paired with dark
tone. Also, avoid that piercing red font on green background eyesore.
Content – your site visitor and potential customers want information quickly such
as, is your brand trustworthy? Experienced? is it capable of delivering top notch
product and services? Given people short attention span and lightning fast first
impression, communicating clearly is critical, thus information should be easy to
read and digest.

Web Templates
It is pre-designed web page on set of HTML webpages that anyone can use to
“plug in”. Website templates allow anyone to set up a website.
A web design template is a catchall name for several types of template like:
1. HTML Templates – website design templates represents with HTML codes
only.
2. PSD Templates – templates which contain only .psd files, graphics only, with
no code.
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
4
 3. FLASH Templates – web design templates developed with flash.
4. FLASH Intro Templates – templates of an intro clip, developed with flash
only and used to represent a company or / and a project.

Online WYSIWYG Platforms

Whether you attracted in learning to make your own website or want to start a
blog without having to learn HTML or other coding languages, you may want to
consider using website builder that make use of WYSIWYG editor.

WYSIWYG stands for what you see is what you get. In other words, you are
creating website using drag and drop interface or changing the way fonts look in an
editor that is how your finished product will look.
There are different benefits related with using a WYSIWYG editor. You have
control over what your website looks like, and you dint have to pay a professional
to handle the coding for you. There are also numbers of web host that have their
own built-in editors, meaning you can create your website and publish it to the web
immediately.

LESSON 2: BASIC WEB PAGE DESIGN

What does Web Page mean?

SENIOR HIGH SCHOOL LEARNING MODULES

EMPOWERMENT TECHNOLOGY G11
5
 A web page is a document for a world wide web that can be accessed and
displayed on a monitor or smart phone using any web browser. Web page are made
up of Hypertext Markup Language (HTML) and can be created and modified by
using basic application like notepad and professional HTML editors.
HTML is easy to Learn and Use
HTML is easy to learn and understand. For some who wants to learn web
development. HTML is the first and foremost computer language that you need to
take note but do not worry, it is not sensitive case and as simple as it is. It already
has some tags that serve as specific purpose to make. One can easily understand
other’s code and make changes in it when required without reading a whole book or
manual. Moreover, it does not throw any error or create any problem like other
programming languages do when the developers forgets to close the tags or makes
mistakes in coding.

HTML is Free
One of the biggest advantages of HTML is that we free for all cost and there is no
need to purchase specific software for it to be used.
Online Website Builder – Easy Use of Drag and Drop Interface
For those who love to make changes to their website, a drag and drop interface is
convenient.
WYSIWYG
WYSIWYG is the acronym for What You See Is What You Get. This means that
whatever you will type, insert, draw, place, rearrange or whatever you do on a web
page is what is the audience will see. Just like using the Microsoft Word,
WYSIWYG shows and prints whatever you will type on the screen.
HTML
 HTML stands for Hypertext Markup Language
 HTML describes the structure of a web page
 HTML consist f a series of elements
 HTML elements tells the browser how to display the content
 HTML elements are represented by TAGS
 HTML TAGS label of pieces of content such as heading, paragraph, table and
so on.
 Browsers do not display the HTML tags, but use them to render the content of
the page.

SENIOR HIGH SCHOOL LEARNING MODULES

EMPOWERMENT TECHNOLOGY G11
6
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
7
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
8
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
9
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
10
Activity 1.1: WHAT WEBSITE CAN DO?
Direction: Write down 10 things or more as much as you can that you think a
website can do? Follow the format given below as your guide.

WEBSIT
E

POST ASSESSMENT: WHAT I KNOW

Direction: Choose the best answer for each question. Write the letter and the word
of the correct answer on a separate sheet of paper. Please do follow the directions
accordingly.
1. What does HTML stands for?
a. Hypertext Markup Language
b. Home Tool Markup Language
c. Hyperlink and Text Language
d. None of the above
2. It s responsible for reading HTML instruction and displaying web page
output.
a. Editor
b. Programmer
c. Browser
d. Website
3. Which of the following is not an example of a browser?
a. Mozilla Firefox
b. Internet Explorer
c. Google Chrome
d. Weebly

SENIOR HIGH SCHOOL LEARNING MODULES

EMPOWERMENT TECHNOLOGY G11
11
 4. Which of the following is not belongs to the group?
a. Weebly
b. Wix
c. Microsoft edge
d. WordPress
5. WYSIWYG is stands for?
a. What You See is What You’ve Got
b. What You See Is What You Believe
c. What You See Is What You Get
d. Both a and b
6. This section contains information about the documents like title, search engine
or keywords but not visible to the reader?
a. Body section
b. Head section
c. HTML documents
d. Both a and b
7. It contains the information or content that you want to appear on the web
page?
a. HTML documents
b. Head section
c. Body sections
d. None of the above
8. It allows users to create websites and mobile sites through the use of online
drag and drop tools?
a. Weebly
b. Wix
c. WordPress
d. All of the above
9. A WYSIWYG cloud based web development platform that was first
developed and popularized by the Israeli company>
a. Weebly
b. Wix
c. WordPress
d. Both a and b
10. To make your website publicly accessible you need to _________ it.
a. Save
b. Create
c. Publish
d. Delete

11 – 15. List down 5 examples of WYSIWYG Website Builders

a. __________________________________
b. __________________________________
SENIOR HIGH SCHOOL LEARNING MODULES
EMPOWERMENT TECHNOLOGY G11
12
 c. __________________________________
d. __________________________________
e. __________________________________
16 -20. List down the 4 Web Design Templates.
a. __________________________________
b. __________________________________
c. __________________________________
d. __________________________________

References:
a. http:/slideshare.net
Empowerment Technologies making Small Shifts towards a Big Difference
for Senior High School, Joel C. Yuvienco

SENIOR HIGH SCHOOL LEARNING MODULES

EMPOWERMENT TECHNOLOGY G11
13