Lesson 8

• Web page creation using templates

• Web page design using an online WYSIWYG platform
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.
Pre-Test

True or False: Write T if the statement is correct; otherwise, write F on the space before each item.

____ 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 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.
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 the 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 web 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 the online WYSIWYG platform, let us try this:

Creating a Website using Microsoft Word

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

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.
2. You will be instructed to choose a template. Pick any template that you want.
3. Choose a 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 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 top you depends on which template you used. A sample of 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 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 on 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
III. Paragraph
If it is 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:
2. Select the visual element you want to add.
a. Heading – to insert heading type of text
b. Text – to insert the paragraph type of text
c. Photo – to insert a single photo
d. Text with Photo – to insert a photo surrounded with text
e. Photo Gallery – to insert a multiple photos on one area
f. Horizontal Line – to insert a horizontal line that acts as a divider
g. Spacing – to add a space with 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. Form – creates a Send an Email form for feedback
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.
3. Edit the element to your liking then click Save.

Templates – changes the design template selected

Style – changes the design style of the page (like color)
Blog – creates a blog for your website
Upgrade – upgrades to JimdoPro or JimdoBusiness
Settings – changes account and website settings
SEO – Search Engine Optimization; used for others to easily find your site using search engines like Google and
Bing
Store – mange's the orders made from your website
Statistics – views your site’s statistics
Help – accesses Jimdo’s help archive

You may use th etools located on the right-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.
The Account settings includes changing your password, email, and personal profile.
The Website options allows you to change your site title and footer; check your storage, create your privacy policy
and your favicon (icon of your website shown on a browser).
The Mobile settings is used to prepare your 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 allows 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 your website.
The Apps option contains settings for embedded apps on your website like Dropbox, OQ Codes, Google Analytics,
and Twitter.
The Jimdo settings allows you to remove the Jimdo Box on your website (premium feature) and check Jimdo News.
Once you are done the setting s, go to your site’s URL using a browser of your choice.
It is now time to add content to your website. Here are few site pages and elements that you should add:

1. Home page content – entices you 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 visitor 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

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 features so
visitors can easily locate your website
Lesson Summary

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
let 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 just hovering over the navigation bar and clicking edit navigation. You can also go to another page by
simply clicking on a page link like you would normally do when navigating through a website.

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