Basic Web Page

Creation
• Web page creation using templates
• Web page design using an online
WYSIWYG platform
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.

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.
 Other Ways to Create a Website
• Hypertext Markup Language (HTML) is an
early way of creating codes or tags to
create web pages
• Cascading Style Sheets (CSS) is an early
way of creating codes or tags to design a
website
Example of Setting up background color:
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 Webpage.”
5. Specify the filename “Sample Webpage.”
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 WebPage folder. You will
see a new folder generated including your htm/html file.

10. Open the Sample WebPage.htm file and you will

see that you just created a webpage using MS Word.
 Creating Your Own Website
Using Jimdo

• Jimdo is a WYSIWYG web hosting offering

free, professional, and business web
hosting services.
• Jimdo also has an IOS and Android which
can be used to manage website if no
personal computer is available.
 Steps in Creating a Jimdo
Account
• Create an account on Jimdo by going to
www.jimdo.com. and select Sign up.
• You will be prompted on this page
• You will be prompted to select any
Template. Once a template is selected,
there are three options to be selected.
Select only Website or Store.
• Series of option buttons again appear just
like below. Select the type of website or
store and click Let’s Go button.
• Select Jimdo Free by clicking Get Started
button below it:
• Write a domain name you want for your site
and click Create a free website button.
• You will be prompted on the page you
selected
About Us Page
 Tips on Using WYSIWYG

• By default, the home page is shown in the

editor.
• To navigate to another page, simply click
the page title on the navigator
• The site navigator contains a set of links
going through the different pages of your
website like Home, About Us and Contact.
 Inserting a Page
• Hover your mouse pointer over the site
navigator
• The Edit Navigator will appear.
• Click on the Edit Navigation button
• Click on Add a New Page
• Rearrange pages using the tools on the
right of the page title
• 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 is used to move the element
up by one level
– Move element down is used to move the
element one level lower
– Delete element is used to remove element
– Copy element is used to copy the element
– Drag tool clicks and drags the element to a valid
part of the page
Clicking on an element will show more options
regarding on what visual element you clicked:

I. Header
If it is a header, clicking the text will allow you
to edit the text and change its font size.
II. Image – allows you to upload an image
directly from computer or a dropbox account.
View tools – is used to enlarge image, link
photo and remove link

Other tools caption and alternative text,

allow sharing to Pinterest
Sizing tools are used to make
image larger or smaller or restore
to actual size page.

Align tools are used for left,

center or right alignment page

Edit image – clicking tou will

this button, you will be
prompted to Photoeditor menu
III. Paragraph – If it is a paragraph you will
be treated to more options similar to using a
word processor
 Adding Elements
-To add elements on screen, hover the mouse
pointer over the top or bottom of an existing
element until the Add Element button appears
Visual Elements that can be
Added
Clicking Add more elements button below
will prompt the image below
• Heading – to insert heading type of text
• Text – to insert a paragragp type of text
• Photo – to insert a single photo
• Text with Photo – to insert a photo
surrounded with text
• Photo Gallery – to insert multiple photos in
one area
• Horizontal line – to insert a horizontal line
that acts as a divider
• Spacing – to add a space with a specified
size
• Columns – to insert columns that divide an
area vertically.
• Video – to insert a video from a video
hosting site like Youtube
• Form – creates an email form for feedback
• Store Item –adds a space for selling an
item.
• Share Buttons – adds buttons for the site
visitor to share your website
• Additional Elements – includes other
options like Google maps, file download,
widgets, etc.
Jimdo Free Tools
• Templates – changes the design template
selected
• Style – changes the design style of the
page like color
• Store – manages the orders made from
your website
• Blog – creates blog for your website
• SEO (Search Engine Optimization) used
for others to easily find your site using
search engine like Google and Bing
• Settings – changes account and website
setting
-Account settings include changing your
password, email & personal profile
-Website allows you to change site title
and footer
• Help – accesses Jimdo’s help archive
 Activity
Create a blog post on your
Wordpress blog advertising your
newly created website. Make sure
you insert details about your
website that will attract your
readers to visit it.