ETech Week 8 Digital Module
ETech Week 8 Digital Module
OUTCOME-BASED EDUCATION
MODULE WEEK
8
Department of Education
SCHOOLS DIVISION OF LAOAG CITY
Laoag City
0
MODULE IN
EMPOWERMENT
TECHNOLOGIES
QUARTER 1
WEEK 8
Development Team
Writers: Christian Nicole G. Garcia
Editor: Eliza G. Salvador
Marju R. Miguel
1
WHAT I NEED TO KNOW
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.
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.
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.
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.
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)."
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.
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.
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).
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:
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:
3. Rearrange and manage pages using the tools on the right of the page title.
9
Editing Elements
Hovering over a text, image, or any element you see on the website will highlight
the element.
Move element down – used to move the element one level lower
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
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
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:
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:
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
1. Home page content – entices your visitors with contents like photos of your hobby
or interest plus text content.
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.
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
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.
16
WEEK 8 OUTPUT
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.
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.
Correctness The output is The output The output has The output
free from errors. contains minimal several errors. contains many
errors. errors.
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:
19