Basic Webpage Creation

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

Basic Webpage Creation

Uploaded by

Copyright:

Available Formats

Basic Webpage Creation

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Webpage Creation

Uploaded by

Copyright:

Available Formats

LESSON 8

Basic Web Page

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

4. edit and insert elements for their website.

CSS – Cascading Style Sheets

1. Open Microsoft Word.

8. Input the title

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

5. The center shows the preview of your

MOVE ELEMENT DOWN

Align Tools – used for left, right, and center

Rotate Tools – used to rotate image clockwise

3. Edit the element to your liking then click

Store – manages the orders

Templates – changes the

Style – changes the design

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.