Scribd
Upload
3K views

Empowerment Technology Grade 11

The document discusses how to create basic web pages using templates in Microsoft Word or online WYSIWYG editors like Jimdo. It provides step-by-step instructions on making a simple website without coding skills. Students will work in groups to build websites on topics for social change campaigns using these online tools.

Uploaded by

Shein Gonzales
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3K views

Empowerment Technology Grade 11

The document discusses how to create basic web pages using templates in Microsoft Word or online WYSIWYG editors like Jimdo. It provides step-by-step instructions on making a simple website without coding skills. Students will work in groups to build websites on topics for social change campaigns using these online tools.

Uploaded by

Shein Gonzales
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

EMPOWERMENT TECHNOLOGY

Grade 11

Lesson 8 : Basic Web Page Creation

Web page creation using templates


Web page design using an online WYSIWYG

Lesson Objectives

At the end of this lesson, the students should be able to:

1. create a web page using Microsoft Word;


2. create your own website using a free host;
3. design a website using an online WYSIWYG platform; and
4. edit and insert elements for their website

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

Lesson Discussion

How basic is basic? Imagine the way our ancestors do fishing. They used fishing rod 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 will still be
using our fishing rod 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 providers 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 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:
1. Creating a Website using Microsoft Open Microsoft Word
2. Type anything on the page like "Welcome to
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 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 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 using
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 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 Create Your Free Website
or log in using your Facebook account.
Figure 1. Jimdo Home Page

Figure 2. Login page


2. You will be instructed to choose a platform. Pick Website.

3. Choose “no coding required”


4. Choose “any of the two”

5. Choose “select the theme that will fit to you content”

6. Input the name of your project


7. Click “Skip this Step”

8. Select “Continue without a custom domain.”


9.
It is now time to edit the website to your liking.
If done, click the publish button at the upper right corner to see your website live.

Click your website domain/link to see your website

Visit this page to learn more about Jimdo


https://www.youtube.com/user/jimdo
Group Activity: Same Groupings

Exploration: Adding Content to Your Website

Using your selected topic for social change campaign from previous activity 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 your website - adds a page containing a form element which allows visitors to email you.

3. Blog - Includes details and/or information about your campaign.

4. Photo Gallery – add photos to your webpage that are related to your campaign (ex. Layouts, photos,
etc.) you may use photos from the internet.

Note:

 Do this activity separately with your group members


 Communicate and discuss ideas through text, chat, voice call or video call only
 Assign task to each of your members
 Visiting or going out with your groupmates related to this activity is strictly prohibited

Submit your output to our Google Classroom


Deadline: January 16, 2021

You might also like