WHOLE BRAIN LEARNING SYSTEM

OUTCOME-BASED EDUCATION

TECHNICAL VOCATIONAL AND LIVELIHOOD Grade

EMPOWERMENT
TECHNOLOGIES 12
LEARNING QUARTER I

MODULE WEEK
8
Department of Education
SCHOOLS DIVISION OF LAOAG CITY
Laoag City

0
 MODULE IN

EMPOWERMENT
TECHNOLOGIES

QUARTER 1
WEEK 8

BASIC WEB PAGE CREATION

Development Team
Writers: Christian Nicole G. Garcia
Editor: Eliza G. Salvador

Reviewers: Florendo D. Damaso, Jr.

Illustrators: Christian Nicole G. Garcia

Layout Artist: Christian Nicole G. Garcia

Management Team: Vilma D. Eda Joye D. Madalipay

Lourdes B. Arucan Juanito V. Labao

Marju R. Miguel

1
 WHAT I NEED TO KNOW

What this module is about?

This module is a SELF-PACED learning material for you to continue your studies
in the comfort and safety of your home. This module discusses online safety, security,
ethics, and etiquette standards and practice in the use of ICTs. It also discusses the use
of Internet as a tool for credible research and information gathering. Activities are found in
every lesson to check your understanding and that will let you create your own ICT contents
and evaluate existing online creation tools, platforms, and applications.

Most Essential Learning Competencies (MELC):

1. evaluate existing online creation tools, platforms and applications in developing ICT
content for specific professional tracks and creates an original or derivative ICT
content to effectively communicate or present data or information;
2. apply web design principles and elements using online creation tools, platforms,
and applications to communicate a message for a specific purpose in specific
professional tracks; and
3. create an original or derivative ICT content using online creation tools, platforms,
and applications to effectively communicate messages related to specific
professional tracks.

What are you expected to learn?

After going through this module, you are expected to:
 create a web page using Microsoft® Word;
 create your own website using a free host;
 design a website using an online WYSIWYG platform; and
 edit and insert elements for your website.

Important Reminder
DO NOT WRITE ANYTHING IN THIS MODULE. This module is government
property and other learners will use it again. You may use any clean sheet of paper that is
available in your home for your answers in the given activities. The rubrics and answer key
for the activities are found in the latter page of this module for you to self-check your
answers. This module will be retrieved by the end of the week.

At the end of this module:

You are required to create a blog post on your WordPress blog advertising your
newly created website. Make sure you insert details about your website that will entice your
readers to visit it.

2
 Lesson
BASIC WEB PAGE CREATION
8

WHAT I KNOW
This is to test your prior knowledge on the given lesson. Read and follow
the instructions carefully.

Pre-test. True or False

Directions: Read each statement carefully. On a clean sheet of paper, write T if the
statement is correct; otherwise, write F. Label this activity as WHAT I KNOW.

1. HTML stands for Hypertext Markup Language.

2. Jimdo's URL is www.jimdo.com.
3. The home page is the first page of your 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 it 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 website.
11. WYSIWYG stands for What You Sense Is What You Get.
12. Aside from Microsoft® Word, you can use Microsoft® PowerPoint to produce web
pages.
13. The site navigator is where the links to the different pages of your site are located.
14. Hovering your mouse over the site navigator will show the Create Page button.
15. To add an element, hover over the left or right side of an existing element.

3
 WHAT’S IN

Lesson Motivation

How hard is it to create a web page? You may already have your Facebook or
Twitter account, and you just recently made your own blog. What about a site that gives
you full control over its design? Interview three of your family members or classmates and
ask them to name a website they normally visit but are not familiar to you. Ask them what
makes the site great – graphics, layout, or content.

WHAT IS IT

Lesson Discussion
How basic is basic? Imagine the way our ancestors do fishing. They used fishing
rods or spears 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 will still be using our fishing rods or spears.

However, that is not the case in web page creation. First of all, the Internet is free.
Secondly, it is free, courtesy of many website providers that provide basic functionalities
for our website to function. Back in the day, you actually had to learn HTML (Hypertext
Markup Language) and CSS (Cascading Style Sheets) to be able to create a decent
website. Today, we can 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 Microsoft® Word, WYSIWYG shows and prints whatever
you type on the screen.

Other Ways to Create a Website

As mentioned earlier, people use HTML codes 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 have not, WYSIWYG is designed for anyone who has not
or does not have prior coding skills.

Before we proceed to using an online WYSIWYG platform, let us try this:

Creating a Website using Microsoft® Word

4
1. Open Microsoft® Word.
2. Type anything on the page like "Welcome to my Website."
3. Click on File > Save As > Browse.

4. On the Save As dialog box, locate your activities folder and create a new folder
named "Sample Web Page.”
5. Specify the File name "Sample Web Page."
6. In the Save as type dropdown menu, select "Web Page (*.htm; *.html)."

7. Click the Change Title button.

5
 8. Input the title as seen below, then click OK then Save.

9. Check the files in 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 files 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 Microsoft® Word – a technique you can
also use in Microsoft® Excel. These office applications can be used as a WYSIWYG
platform. The next step is uploading these files to a web server. However, we will skip that

6
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.

Creating Your Own Website using Jimdo

Jimdo is a WYSIWYG web hosting service. It offers free, professional, and business
web hosting services. 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 your own personal website that focuses on your
passion or hobby.

1. Create an account on Jimdo by going to www.jimdo.com and clicking Start Free.

Figure 1. Jimdo Home Page

2. After signing up for a free account, you should be prompted to start creating a
website. If you are not redirected to the page shown below, go to
www.jimdo.com/templates. From there, you may choose any template; it can be
changed at any time.

3. Choose what type of webpage you want and, optionally, for what purpose.

7
 Note: If you are prompted to choose a payment plan, select the free option (US$0).

4. Choose a unique URL for your website.

5. Your website will be generated and soon you will end up in the site's WSIWYG
editor.

8
 6. The editor is easy to use. The center shows the preview of your website. Site tools
are located on a menu accessible from the button on the top left.

It is now time to edit the website to your liking. Use the following tips:

Tips in using the WYSIWYG editor:

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. A sample of a navigator is shown below:

Inserting a Page

1. Hover 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 and manage pages using the tools on the right of the page title.

4. Click Save when done.

9
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 level lower

Delete element – used to remove the element

Copy element – used to copy the element

Drag tool – click and drag the element to a valid part of the page

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

I. Header

Heading Elements separate different sections of your pages. Clicking on a header

allows you to edit the text and change its font size.

II. Image

You can add individual photos, images, or icons to your pages. Clicking on images
allows you to align, resize, caption, or make them into hyperlinks. You can use the following
image file formats: JPG, GIF, PNG.

10
 Sizing Tools - used to make image larger or smaller or restore to
actual size page

Align Tools - used for left, right, and center alignment

Rotate Tools - used to rotate image clockwise or counter-clockwise

View Tools - used to enable enlarge image, link photo, and remove
link (Tip: Enable Enlarge Image will show a small
image on the page and will only be enlarged when a
user clicks it. Link Photo allows yo. to insert an image
from another website or image host like Photobucket.)
Other Tools - caption and alternative text; allow sharing to Pinterest
(Tip: Alternative Text refers to the text that will be
shown if the image does not load.)

III. Paragraph

Upon clicking on a paragraph, you will be treated to even more options similar to
using a word processor:

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:

11
 2. Select the visual element you want to add:

a. Heading – to insert header text

b. Text – to insert a text box or paragraph
c. Photo – to insert a single photo
d. Text with Photo – to insert a photo surrounded with text
e. Photo Gallery – to insert multiple photos in one area
f. Horizontal Line – to insert a horizontal line that acts as a divider
g. Spacing – to add a space with a specified size
h. Columns – to insert columns that divide an area vertically
i. Video – to insert a video from a video hosting site like YouTube
j. Button – to add a hyperlink that your visitors can click
k. Store Item – adds a space for selling an item (online shopping)
l. Share Buttons – adds buttons for the site visitor to share your website
m. Additional Elements – includes other options like Google Maps, file download,
widgets, etc.

Figure 2. Additional Elements

3. Edit the element to your liking then click Save.

Site Settings

Access the site settings by clicking on the Menu button on the top left.

12
 From the sidebar, you can navigate through the various site settings:

Design – make changes to the template and design of

Figure 3. Jimdo Free Tools

the elements on your website

Store – manage the orders made from your website

Blog – create a blog for your website

SEO – a premium feature for analyzing website traffic

Domains & Email – a premium feature for managing

domains & email accounts for your website
Settings – changes account and website settings

You may use the tools located on the left-hand side of the screen to get access to
these features.

Settings

The Settings option contains important information that you should edit to make
the most out of your Jimdo website. It allows you to change your site title and footer, check
your storage, create your privacy policy, your favicon (the icon of your website shown on a
browser), and many more options to manage your website information.

13
 The Store settings allows you to manage your store information. From here, you
will be able to see and manage all items for sale and all orders made.

Once you are satisfied with the content, design and settings, you can save the
changes you made. All changes will be implemented at once and you will be able to visit
your website by going to your site's URL using a browser of your choice.

WHAT’S MORE

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. About Me/Contact Me – adds a page containing a form element which allows

visitors to email you. You may also add links to your Twitter page.

3. Blog – creates a page that includes details about your WordPress blog and a link
to it.

4. Photo Gallery – a page that contains photos from your Photobucket account.

5. Community – a page that contains links to ten of your classmate's websites

including a short description.

14
 WHAT I HAVE LEARNED

Key Terms

 WYSIWYG – an editor that allows you to create and design web pages without any
coding knowledge.
 HTML – stands for Hypertext Markup Language.
 CSS – stands for Cascading Style Sheets.
 Jimdo – a free website provider with a WYSIWYG editor.
 Template – a ready-made design for a website.
 Heading – the topmost label of a website.
 SEO – stands for Search Engine Optimization; a feature that maximizes the search
engine optimization feature so visitors can easily locate your website.

WYSIWYG stands for What You See Is What You Get. It 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 WYSIWYG editor.

Jimdo is a WYSIWYG web hosting service offering free and paid services. It has an
android and iOS application that lets you manage your site on mobile. Jimdo WYSIWYG
editor is easy to use. Just click on an element to edit it. You can also add a page by hovering
over the navigation bar and clicking edit navigation. You can also go to another page by
simply clicking on the page link like you would normally do when navigating through a
website.

Jimdo has tools that will allow you to sell products online, create your own photo gallery,
add videos, and many more. You can also maximize search engines by properly tagging
your site.

15
 ASSESSMENT

Posttest. True or False

Directions: Read each statement carefully. On a clean sheet of paper, write T if the
statement is correct; otherwise, write F. Label this activity as ASSESSMENT.

1. HTML stands for Hypertext Markup Language.

2. Jimdo's URL is www.jimdo.com.
3. The home page is the first page of your 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 it 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 website.
11. WYSIWYG stands for What You Sense Is What You Get.
12. Aside from Microsoft® Word, you can use Microsoft® PowerPoint to produce web
pages.
13. The site navigator is where the links to the different pages of your site are located.
14. Hovering your mouse over the site navigator will show the Create Page button.
15. To add an element, hover over the left or right side of an existing element.

16
WEEK 8 OUTPUT

Take the Challenge!

Create a blog post on your WordPress blog advertising your newly created website.
Make sure you insert details about your website that will entice your readers to visit it.

Here are the rubrics for your Week 8 output:

Category 4 3 2 1

Skills All skills in Basic Most skills in Some skills in Few or no skills
Web Page Basic Web Page Basic Web Page from Basic Web
Creation are Creation are Creation are Page Creation are
applied. applied. applied. applied.

Content The output The output is The output is The output is

exceeds the complete. somewhat incomplete.
expectations. complete.

Correctness The output is The output The output has The output
free from errors. contains minimal several errors. contains many
errors. errors.

Efficiency The output is The output is The output is The output is

done in the done in the done but used done with the
most effective projected methods that least efficient
way without amount of time. consumed more method.
wasting time time or resource.
and effort.

17
18
Store, 2016
Empowerment Technologies: Innovative Training Works, Inc., pages 139 – 157. Rex Book
BOOK
References
WHAT I KNOW ASSESSMENT
Pretest Posttest
1. T 1. T
2. T 2. T
3. T 3. T
4. T 4. T
5. T 5. T
6. F 6. F
7. F 7. F
8. T 8. T
9. T 9. T
10. T 10. T
11. F 11. F
12. F 12. F
13. T 13. T
14. F 14. F
15. F 15. F
For inquiries or feedback, please write or call:

Department of Education – Schools Division of Laoag City

Curriculum Implementation Division
Brgy. 23 San Matias, Laoag City, 2900
Contact Number: (077)-771-3678
Email Address: [email protected]

19