Mother of Mercy Academy  Purok 6 Pob.

Barobo, Surigao del Sur

0907 699 0817
Barobo, Surigao del Sur @ moma.barobosds@gmail.com

Name: _________________________________________________________ Grade & Strand: _____________________

Parent’s Signature: _______________________________________________ Teacher: M. L. Espera - 09398335382

EMPOWERMENT TECHNOLOGIES
WEEK 11 - 12
Self-Learning Module
Unit 1: Lesson 7 - 8

Subject Description:
This module contains information about: the massive world of information and Communication Technology (ICT) has
continued to shape the world including the Philippines. This allows to discover the world of ICT in general and also helps
improve skills in various applications. It also creates several real-life scenarios where we can use these applications and
resources properly.

Learning Competency (MELC):

 Nature and purposes of online platforms
 Web applications for content development

Topic Title: Online Platforms for ICT Content Development and Basic Web Page Creation

Objectives:
At the end of this module, the students should be able to:
1. differentiate the platforms available for developing
web content;
2. understand the purpose of these platforms and
know the basics of using them;
3. enhance one’s knowledge in the world of cloud
computing;
4. create a webpage using MS Word;
5. create your own website using a free host;
6. design a website using an online WYSIWYG
platform; and
7. edit and insert elements for their website.

Activity 1: Pre-Test. True or False. Write True if the statement is correct; otherwise, write False on the space before each number.
1. HTML stands for Hypertext Markup Language
2. Jimdo’s URL is www.jimdo.net
3. CSS stands for Cascading Style Sheets
4. WYSIWYG stands for What You Sense Is What You Get
5. Aside from MS Word, you can use MS PowerPoint to produce web pages.
6. One of the advantages of Cloud Computing is there is no need to install.
7. The only downside of Facebook is that you are restricted to their “one-size-fits-all” design
8. Blogging Platforms typically looks like a newsletter where you are given options to change the
design to your liking.
9. A Content Management System (CMS) is a computer application (sometimes online or browser-
based) that allows you to publish, edit and manipulate, or delete web content.
10. CMS can’t be used in blogs, news websites, and shopping.

Online Platforms for ICT Content Development

We will focus on platforms that will allow us to share our own content to the rest of the world. We will also create a few of
them to experience what it is like to use all of them.

1. Social Media Platforms. Websites like Facebook allow you to create not only personal accounts but also pages and groups
where you can share content. The only downside of this is that you are restricted to Facebook’s “one-size-fits-all” design.

On the plus, Facebook has billions of users, LinkedIn is another example of social networking site where its focus is on
business and professional networking.

2. Blogging Platforms. Websites like WordPress, Tumblr, and Blogger focus on content and design. It typically looks like a
newsletter where you are given options to change the design to your liking. Though you can manipulate the design, social
media’s platform’s popularity is still unrivalled. The amount of customization in blogs is also unrivalled depending on the
content management system implemented by the provider.

Content Management System

1

A Content Management System (CMS) is a computer application (sometimes online or browser-based) that allows you
Page

to publish, edit and manipulate, or delete web content. CMS is used in blogs, news websites, and shopping.
 Cloud Computing
We already have stumbled upon the term “cloud computing” in the previous discussions. From the past lessons,
including this one, you have used the “cloud” in producing outputs for this class. Give yourself a minute to think about the
outputs that used “Cloud Computing.”
When we created infographics, we used Piktochart and its infographic editor uses cloud computing. This referred to
cloud computing because we did not need to install any software in our computer. The software is in the “cloud” or over the
Internet. Here are some advantages and disadvantages of cloud computing:

Advantages Disadvantages
1. No need to install 1. Can be hampered down by slow Internet speed, no
2. Saves hard disk space connection, no cloud computing
3. Easy access to your software/files; can be ran anywhere 2. May still require compatible software like a browser
as long as there is Internet connection 3. You do not own the software, you are simply renting it
4. Saves you money from buying software licenses and 4. Security risk of doing things over the Internet a opposed
additional hard disk space to your personal computer alone
5. No need to update because it updates automatically 5. More prone to hacking
6. Minimum system requirements 6. Limited control over the infrastructure itself.
7. Back up and data recovery are relatively easier than on
a physical device.

Using cloud computing is generally up to you. Large companies opt to use the cloud computing because they do not
need to pay licenses for each computer they have for their company; instead they can use a software on demand.

Basic Web Page Creation

How basic is basic? Imagine the way our ancestors do fishing. They used fishing rods or spear to catch fish. Today,
huge companies rule the fishing industry with their huge fishing vessels with huge nets to catch fish by the truckload.
Unfortunately, those fishing vessels are not affordable so we still be using our fishing rods or spear.
However, that is not the case in web page creation. First of all, the Internet is free. Secondly, it is of free courtesy of
many website provides that provide basic functionalities for our website to function. Back in the day, you actually have to learn
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) to be able to create a decent website. Today, we use a
WYSIWYG editor.

WYSIWYG
WYSIWYG is 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. Like using the Microsoft Word, WYSIWYG shows
and prints whatever you type on the screen.

Other Ways to Create a Website

As mentioned earlier, people use HTML code to create pages and CSS codes to design them. If you have taken up
these coding skills before, it will help you in creating pages using WYSIWYG. If you do not, WYSIWYG is designed for anyone
who has not or does have prior coding skills.
Before we proceed to using an online WYSIWYG platform, let us try this:

Creating a Webpage using Microsoft Word.

1. Open Microsoft Word.
2. Type anything on the page like “Hello World.”
3. Click on File > Save As > Browse.
4. On the Save As dialog box, locate your where you want to save your page (Documents folder or other) and name it
“Sample Web Page.”
5. Specify the filename “Sample Web Page”
6. On the Save As type, select “Web Page (*.htm; *.html).”
7. Click the Change Title button.
8. Input the title as seen below, then click OK then Save.
9. Check the files on your Sample Web page folder. You will see a new folder generated including your .htm or .html file.
10. Open the Sample Web Page.htm file and you will see that you just created a web page using MS Word.

Tip: Any file inside the Sample Web Page file folder is generated by MS Word. These are the files that make HTML files display
visual elements correctly.
You have just created a web page using MS Word – a technique you can also use using MS Excel. These office
applications can be used as WYSIWYG platform. The next step is uploading these files to a web server. However, we will skip
that step because we are going to use a much easier approach in creating websites. We are going to use an online application
that is actually designed to create websites.
2
Page
Creating You Own Website using Jimdo

Jimdo is a WYSIWYG web hosting service. It offers free, professional, and business web hosting services. Jimdo has also an
iOS and Android App which you can use to manage your website whenever do not have access to a PC.

For this activity, you will create your own personal website that focuses on your passion or hobby.

1. Open a web browser (Google Chrome, Mozilla

Firefox or MS Edge). Type at the address bar:
www.jimdo .com

2. Click Start Free button. The next page will appear is

the Sign up page. Select where you want to sign in,
through your Facebook or through your Google
account.

3. For our activity, select “Create Blog” under Blog.

4. Under Industry page, select “Personal” then click

Let’s go button.

5. The next page will be the Template, select what you

like (scroll down for more).
3
Page
 6. At the Pricing page, click the Get Started under Free.

7. Combine your first name and last name (without space) for your domain name. Click Check availability, then Create a free
website.

8. Your website is generated. Your first page will be displayed. This is where you start to edit.

Pages – to insert a page. The pages we

will need: Home, About Me, and Blog

Image – it allows you to upload image

directly from your computer.

Header – clicking the text will allow you to

edit the text and change its font size.

Paragraph – clicking it, you will be treated

to even more options similar to using a
word processor.
4
Page

Insert Pages - Navigation

 The pages that we will going to create: Home, About Me, and Blog.

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

 Move element up: used to move the element up to

one level
 Move element down: used to move the element  Drag tool: click and drag the
down to one level element to a valid part of the page
 Delete element – used to remove the element
 Copy element – used to copy the element

Adding Elements
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.

** You can change your template, Style, and Background by clicking the Menu at the upper left corner, then Design.

For Activities 2 to 4: Adding Content to Your Website

It is now time to add content to your website. Here are a few site pages and elements that you should add:
1. Home page content – entices your visitors with contents like photos of your hobby or interest plus text content.
2. Research five uncommonly used Filipino words, their definition, and example each when used in a sentence. Video yourself
to pronounce these words using all of them in individual sentences. Upload the video on YouTube and embed them as part
of your webpage.
5

3. About Me/Contact Me – adds an element containing a form which allows visitors to email you. You may also add links to
Page

your Twitter page.

 4. To submit, write your website here: _____________________________________________________________________
for example: https://marilieespera.jimdofree.com

________________________
Parent’s Signature
Activity 4: Post-Test. True or False. Write True if the statement is correct; otherwise, write False on the space before each number.

“If you think you are worth what you know, you are very wrong. Your knowledge today does not have much value beyond a couple of years.
________________________
Your value is what you can learn and how easily you can adapt to the changes this profession brings so often.” — Jose M. Aguilar
Parent’s Signature
Prepared by: Checked by: Reviewed by:

MARILIE L. ESPERA JANESSA WENZ L. URBIZTONDO, RN RAE ABNEE C. GARRIDO

Secondary Teacher Secondary Teacher SHS Coordinator/Assistant School Principal

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Name: _____________________________________________ Grade & Strand: 12 - ___________

EMPOWERMENT TECHNOLOGIES
Score Sheet for Lesson 7 & 8
(To be filled up by your teacher only)
6
Page