LESSON 8

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.

 om
r. c
ke
P l ic
HOW BASIC IS BASIC?
 WEB PAGE CREATION
• INTERNET IS FREE
• BASIC FUNCTIONALITIES COURTESY
OF WEBSITE PROVIDERS
 HTML AND CSS
HTML – Hypertext Markup Language
- creates web pages

CSS – Cascading Style Sheets

- creates code for designing
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.
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.com
1. Create an account on Jimdo by going to
www.jimdo.com and clicking Create Your
Free Website.
2. Pick any template that you want or
choose a blank template.
3. Choose a URL for your website. Enter
your email address and password
 Creating Your Own Website
Using Jimdo.com
4. Your Website will be generated and soon
you will end up in the site’s WYSIWYG
editor.

5. The center shows the preview of your

website. The design tools are located on
the right.
Tips in using the
WYSIWYG Editor
 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 Page
 Editing Page

MOVE ELEMENT UP

MOVE ELEMENT DOWN

DELETE ELEMENT

COPY ELEMENT UP
DRAG TOOL – CLICK AND
DRAG THE ELEMENT TO
A VALID PART OF
THE PAGE
 I. Header
1. Clicking the text will allow you to edit and
change its font size
 I. Image
1. If image, several options will appear and
it will allow you to upload an image
directly from your computer or a Dropbox
account.
 Editing of Image
Sizing Tool – used to make larger or smaller or
restore to actual size page

Align Tools – used for left, right, and center

alignment page

Rotate Tools – used to rotate image clockwise

or counterclockwise page
View Tools – used to enable to enlarge image,
link photos, and remove link.
Other Tools – caption and alternative text; allow
sharing to Pinterest.
III. Paragraph
 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:
 Adding Elements
2. Select Visual element you want to add:
 Adding Elements
a. Heading – to insert heading type of text.
b. Text – to insert a 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 multiple photos
on one area
f. Horizontal Line – to insert a horizontal
line that acts as a divider
 Adding Elements
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. Form – creates a Send an Email form a
feedback
k. Store Item – adds a space for selling an
item (online shopping)
 Adding Elements
l. Share buttons – adds buttons for the site
visitors to share your website.
 Adding Elements
m. Additional Elements – includes other
options like Google Maps, file download,
widgets, etc.

3. Edit the element to your liking then click

save.
Site Settings

Store – manages the orders

made from your website.
Site Settings

Templates – changes the

design template selected.

Style – changes the design

style of the page (like color).
Site Settings
SEO – Search Engine
Optimization; used for others for
easily find your site using search
engines like Google and Bing
Statistics – views your site
statistics
SETTINGS – changes account
and website settings.
HAPPY WORKING
WITH YOUR
DESIGN!!!