ETech Q2 M2 - For learning and everything

BSEd-English (Agusan del Sur State College of Agriculture and Technology)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)
11/12

Empowerment
Technologies
Quarter 2 – Module 2:
Web page design using
templates and online
WYSIWYG platforms

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

Empowerment Technologies– Grade 11/12
Self-Learning Module (SLM)
Quarter 2 – Module 2: Web page design using templates and online WYSIWYG
platforms
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.

Development Team of the Module

Writers: Mary Joy M. Velasco
Editors: Kenneth B. Cagape, Mary Francis Antoinette T. Ontal
Reviewers: Evelyn C. Frusa PhD, Rolex H. Lotilla, Arvin M. Tejada
Illustrator: Name
Layout Artist: Alou Camille B. Sabado
Cover Art Designer: Ian Caesar E. Frondoza
Management Team: Allan G. Farnazo, CESO IV – Regional Director
Fiel Y. Almendra, CESO V – Assistant Regional Director Crispin A.
Soliven Jr., CESE – School Division Superintendent
Roberto J. Montero EdD, CESE – Asst. Schools Division Superintendent Gilbert
B. Barrera – Chief, CLMD
Arturo D. Tingson Jr. – REPS, LRMS Peter
Van C. Ang-ug – REPS, ADM
Gilda A. Orendain – REPS, Senior High School Belen
L. Fajemolin PhD – CID Chief
Evelyn C. Frusa PhD – Division EPS In Charge of LRMS Bernadita
M. Villano – Division ADM Coordinator
Carlo M. Melendres PhD – EPS, Senior High School

Printed in the Philippines by Department of Education –SOCCSKSARGEN Region

Office Address: Regional Center, Brgy. Carpenter Hill, City of Koronadal

Telefax: (083) 2288825/ (083) 2281893
E-mail Address: region12@deped.gov.ph

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 11/12

Empowerment
Technologies
Quarter 2 – Module 2:
Web page design using
templates and online
WYSIWYG platforms

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

Introductory Message
For the facilitator:

Welcome to the Empowerment Technologies Grade 11/12 Self-Learning Module

(SLM) on Web page design using templates and online WYSIWYG platforms!

This module was collaboratively designed, developed and reviewed by educators both
from public and private institutions to assist you, the teacher or facilitator in helping
the learners meet the standards set by the K to 12 Curriculum while overcoming
their personal, social, and economic constraints in schooling.

This learning resource hopes to engage the learners into guided and independent
learning activities at their own pace and time. Furthermore, this also aims to help
learners acquire the needed 21st century skills 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. Furthermore, you are expected to encourage and
assist the learners as they do the tasks included in the module.

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

For the learner:

Welcome to the Empowerment Technologies Grade 11/12 Self-Learning Module

(SLM) on Web page design using templates and online WYSIWYG platforms!

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:

What I Need to Know This will give you an idea of the skills or
competencies you are expected to learn in the
module.

What I Know This part includes an activity that aims to

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.

What’s In This is a brief drill or review to help you link

the current lesson with the previous one.

What’s New In this portion, the new lesson will be

introduced to you in various ways such as a
story, a song, a poem, a problem opener,
an activity or a situation.

What is It This section provides a brief discussion of the

lesson. This aims to help you discover and
understand new concepts and skills.

What’s More This comprises activities for independent

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.

What I Have Learned This includes questions or blank

sentence/paragraph to be filled in to process
what you learned from the lesson.

What I Can Do This section provides an activity which will

help you transfer your new knowledge or skill
into real life situations or concerns.

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 Assessment This is a task which aims to evaluate your
level of mastery in achieving the learning
competency.

Additional Activities In this portion, another activity will be given

to you to enrich your knowledge or skill of the
lesson learned. This also tends retention of
learned concepts.

Answer Key This contains answers to all activities in the

module.

At the end of this module you will also find:

References This is a list of all sources used in developing

this module.

The following are some reminders in using this module:

1. Use the module with care. Do not put unnecessary mark/s on any part of
the module. Use a separate sheet of paper in answering the exercises.
2. Don’t forget to answer What I Know before moving on to the other activities
included in the module.
3. Read the instruction carefully before doing each task.
4. Observe honesty and integrity in doing the tasks and checking your answers.
5. Finish the task at hand before proceeding to the next.
6. Return this module to your teacher/facilitator once you are through with it.
If you encounter any difficulty in answering the tasks in this module, do not
hesitate to consult your teacher or facilitator. Always bear in mind that you are
not alone.

We hope that through this material, you will experience meaningful learning
and gain deep understanding of the relevant competencies. You can do it!

What I Need to Know

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

This module was designed and written with you in mind. It is here to help you master
the nature and purposes of online platforms and applications. The scope of this
module permits it to be used in many different learning situations. The language
used recognizes the diverse vocabulary level of students. The lessons are arranged
to follow the standard sequence of the course. But the order in which you read them
can be changed to correspond with the textbook you are now using.

The module has one lesson, namely:

 Lesson 10 – Web page design using templates and online WYSIWYG
platforms

After going through this module, you are expected to:

1. Create a web page using Microsoft Word;
2. Create your own website using free host;
3. Design website using an online WYSIWYG Platform; and
4. Edit and insert elements for their website.

Definition of Terms
WYSIWYG editor- It allows you to create and design a web page without any
coding knowledge.

HTML- stands for Hypertext Markup Language

CSS- Stands for Cascading Style Sheets

Jimdo- a free website provider with WYSIWYG editor

Template- a ready-made design for a website

SEO- stands for Search Engine Optimization- a feature that maximizes the search
engine optimization feature so visitors can easily locate your website

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 What I Know

Direction: Read each question carefully and write the letter of the best answer on
your activity notebook.
1. Which of the following statements is true about WYSIWYG editor?
a. It is the acronym for What You Saw Is What You Got.
b. Using HTML and CSS in creating a website is easier than using
WYSIWYG.
c. WYSIWYG is designed for anyone who has no prior coding skills.
d. All of the above

2. Which of the following statements is related to HTML tags?

a. HTML tags are elements of document.
b. It is used to specify the elements of a document.
c. It defines the content of the document.
d. It defines the structure of the document.
3. Which of the following statements is true about Jimdo?
a. Jimdo is a WYSIWYG web hosting service offering free and
paid services.
b. It has an android and iOS application that let you manage your site
on mobile.
c. Jimdo is easy to use.
d. All of the above.
4. Which of the following site settings you are going to use if you want to use a
ready-made design?
a. Style
b. Template
c. Settings
d. Background
5. Which of the following elements you are going to add if you want to insert
multiple photos on one area?
a. Photo
b. Gallery
c. Photo Gallery
d. Photos

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 Lesson Web page design using
lO templates and online
WYSIWYG platforms

What’s In

Online Platform is technologies that are grouped to be used as a base upon which
other applications processes or technologies are developed some of the examples
of an online platform are Presentation/Visualization, Cloud Computing, Social
Media, Web Page Creation, File Management and Mapping.

WYSIWYG is an editor that allows you to create and design web pages without any
coding knowledge. You can use Microsoft Word and Microsoft Excel as a WYSIWYG
editor. Jimdo is a WYSIWYG web hosting service offering free and paid services.
Jimdo has tools that will allow you to sell your products online. Create your own
photo gallery, and videos, and many more. You can also maximize the search
engine by properly tagging your site.

What’s New

Read and answer each question concisely. Write your answer on your activity
notebook.

Activity l

1. List down at least three websites you normally visit.

2. What makes you normally visit the site- graphics, layout, or content? Why?

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 What is It

WEB DESIGN PRINCIPLES AND ELEMENTS

Website Template- Also known as web template is a predesigned webpage,

simply by adding your text and customization to create your desired web page. It
is usually built with HTML and CSS code.

WYSIWYG editor- It allows you to create and design a web page without any
coding knowledge

WYSIWYG- the acronym for <What You See Is What You Get=

- This means that whatever you type, insert, draw, place,

rearrange, and everything you do on a page is what the audience
will see. It shows and prints whatever you type on the screen.

Basic Web Page Creation

Creating a Website using Microsoft Word

1. Open Microsoft Word.
2. Type anything on the page like <Hello World!=
3. Click on File > Save As > Type any file name.
4. In the Save as Type, select <Web page (*.htm, *.html)=

Click the Change

Title button.

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 Input the title as seen
below, then click OK then
Save
Open your saved file and you will see that
you just created a webpage using MS
Word.

Creating Your Own Website using Jimdo

Jimdo is WYSIWYG web hosting service. It offers free, professional, and business
web hosting service . Jimdo also has an iOS and Android app which you can use to
manage your website whenever you do not have access to a PC. For this exercise
you will create own personal website that focuses on your passion or hobby.

1. Create an account on Jimdo by going

to www.jimdo.com and clicking
Create Your Website.

2. You will be instructed to choose a

template. Pick any template that you
want.

3. Chooses URL for your website.

Enter your email and password.

4. Your website will be generated and

soon you will end up in the site’s
WYSIWYG editor.

5. The editor is pretty easy to use. The center shows the

preview of your website. The design tools are located on the
right. It is now time to edit the website to your liking. Use
the following tips to achieve it.

Tips in using the editor

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

By default, the home page is shown on your editor. To navigate to another page,
simply click the page title on your navigator. The site navigator contains a set of links
going through the different pages of your website. The navigator currently available
to you depends on which template you used.

Inserting a Page
1. However your mouse pointer over the site navigator. The Edit Navigation
button will appear.

2. Click on the Edit Navigation button. Click on Add a New Page.

3. Rearrange pages using the tools on the right of the page title.

4. Click Save when done.

Editing Elements

Hovering over a text, image, or any element you see on the website will highlight the
element.

Move element up- used to move the element up by one level

Move element down- used to move the element one lower

Delete element- used to remove the element

Copy element- used to copy the element

Drag tool- click and drag the element to avoid part of the page

Clicking on an element will show more options regarding on what visual element you
clicked:

10

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 I. Header- If it is a header, clicking will allow you to edit the text and change its
font size.

II. Image- If it is an image, several options would also appear. It also allows you
to upload an image directly from your computer or a Dropbox account.

III. Paragraph- If it is a paragraph, you will be treated to even more options similar
to using a word processor:

Adding Elements

11

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 1. To add elements on screen, hover the mouse pointer over the top or bottom of
an existing element until the Add Element button appears

2. Select the visual element you want to add

3. Edit the element to your liking then click Save

Settings

 The settings option contains important information that you should edit to
make the most out of your Jimdo website.
 The account settings include changing your password, email, and personal
profile.
 The website options allow you to change your site title and footer; checks your
storage; creates your privacy policy and your favicon (the icon of your website
shown on a browser).
 The Mobile Settings is used to prepare you page for mobile devices.
 The Email and Domain Management setting is a premium feature. It is used
to manage email accounts for your website.
 The Store settings allow you to manage the items you sell on your website.
 The SEO option is a premium feature that maximizes the Search Engine
Optimization feature of Jimdo so visitors can easily locate you website.
 The Apps option contains settings for embedded apps on your website like
Dropbox, OR Codes, Google Analytics, and Twitter
 The Jimdo settings allows you to remove the Jimdo Box on your website
(premium feature) and check News.

12

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 What’s More

Read and answer each question concisely. Write your answer on your activity
notebook.

1. What are the advantages and disadvantages of a WYSIWYG editor?

2. What is the difference between your WordPress blog and your Jimdo Website?

3. List down three more WYSIWYG web hosting services and their URL?

13

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 What I Have Learned

1. Write an essay sharing your experience in creating and designing your

website using Microsoft Word.

What I Can Do

Answer the following in not less than five sentences. Write your answer on
your activity notebook.

1. In the campaign for social change activity, which platform you prefer;
WordPress or Jimdo? Why?

14

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 Assessment

Test I. MULTIPLE CHOICES

Direction: Read each question carefully and write the letter of the best answer on
your activity notebook.
1. Which of the following statements is true about WYSIWYG editor?
a. It is the acronym for What You Saw Is What You Got.
b. Using HTML and CSS in creating a website is easier than using
WYSIWYG.
c. WYSIWYG is designed for anyone who has no prior coding skills.
d. All of the above
2. Which of the following statements is related to HTML tags?
a. HTML tags are elements of document.
b. It is used to specify the elements of a document.
c. It defines the content of the document.
d. It defines the structure of the document
3. Which of the following URL’s you are going to visit if you want to create an
account on Jimdo?
a. www.jimdo.net
b. www.jimdo.com
c. www.jimdo.com.ph
d. www.jimdo.com.us
4. Which of the following things you can do on images in Jimdo?
a. Jimdo allows users to upload an image directly from their computer.
b. Users will be treated to more options similar to using a
word processor.
c. Users are directed to Photoshop.
d. You can add elements such as paragraph.
5. Which of the following is true about a website heading?
a. It is the top most label of a website.
b. It is the only place in a web page where users could put a text.
c. It is the only place in a web page where users could put a picture.
d. It is also known as the placeholder.
6. Which of the following statements is true about Jimdo?
a. Jimdo is a WYSIWYG web hosting service offering free and
paid services.
b. It has an android and iOS application that let you manage your site
on mobile.
c. Jimdo is easy to use.
d. All of the above.
7. Which of the following site settings you are going to use if you want to use a
ready-made design?
a. Style
b. Template
c. Settings
d. Background

15

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 8. Which of the following elements you are going to add if you want to insert
multiple photos on one area?
a. Photo
b. Gallery
c. Photo Gallery
d. Photos
9. Learning Jimdo is easier than learning HTML. What do you think is the best
explanation for this statement?
a. Jimdo is a WYSIWYG editor.
b. Learning Jimdo is easier than learning HTML because it allows users
to create and design web pages without any prior coding skills.
c. Learning Jimdo is easier than learning HTML because it is a user-
friendly website.
d. Learning Jimdo is easier than learning HTML because it provides
features that would help the user navigate the page.
10. Which of the following site settings you are going to use if you want
to change accounts and web settings?
a. Template
b. Settings
c. SEO
d. Statistics

Additional Activities

True or False: Write T if the statement is correct; otherwise, write F on your activity
notebook.
1. HTML stands for Hypertext Markup Language.

2. Jimdo’s URL is www.jimdo.net.

3. The home page is the first page of your e=website

4. Adding emails, an XML sitemap, and linking your Dropbox account are
premium features of Jimdo
5. You can include your Twitter account and link to your Jimdo Website.
6. The form element adds a space for selling an item.

7. The photo element adds multiple photos in one area.

8. CSS stands for Cascading Style Sheets.

9. The horizontal line in the Jimdo WYSIWYG editor is used as a divider.

10. You can insert YouTube videos in your Jimdo wesite.

16

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 Answer Key

10. T
9. T 10. B
8. T 9.
7. B
8. C
F
6. T 7.
5. T B
6.
4. D
5. 5. C
F
3. T A4.A 4.
2. 3. B
3.
F
1. T B
2. D
2.
Activities D
1. C D
1. C
Additional Assessment What I Know

17

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

References

Empowerment Technologies First Edition.(2016).Sampaloc Manila:Rex Bookstore,

Inc.

18

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

 DISCLAIMER
This Self-learning Module (SLM) was developed by DepEd
SOCCSKSARGEN with the primary objective of preparing for
and addressing the new normal. Contents of this module
were based on DepEd’s Most Essential Learning Competencies
(MELC). This is a supplementary material to be used by all
learners of Region XII in all public schools beginning SY
2020- 2021. The process of LR development was observed in
the production of this module. This is version 1.0. We highly
encourage feedback, comments, and recommendations.

For inquiries or feedback, please write or call:

Department of Education – SOCCSKSARGEN

Learning Resource Management System (LRMS)

Regional Center, Brgy. Carpenter Hill, City of Koronadal

Telefax No.: (083) 2288825/ (083) 2281893

Email Address: region12@deped.gov.ph

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)

Downloaded by UnoYan Camacho (lorrieannegianan@gmail.com)