Basic Web Page Creation

Empowerment Technologies
 Lesson Objectives
At the end of the lesson, the
students should be able to:
• Create a web page using
Microsoft Word;
• create their own website using
free host;
• design a website using an
online WYSIWYG platform;
and
• edit and insert elements for
their website
What websites do you normally
visit?
 Virtual Technology Concept
Virtual Concept
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod porta nisi, bibendum varius magna facilisis
ullamcorper. Etiam vel aliquet ante. Cras aliquam aliquam
posuere. Pellentesque ut diam turpis.

Reality Concept
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod porta nisi, bibendum varius magna facilisis
ullamcorper. Etiam vel aliquet ante. Cras aliquam aliquam
posuere. Pellentesque ut diam turpis. Integer est nibh,
facilisis placerat magna id, congue consequat nisi.
What can you say about
the design of those
websites?
 What is a Web Page?
A web page is a document
commonly written in HTML, that is
viewed in an Internet browser. A web
page can be accessed by entering a
URL address into a browser's
address bar. A web page may contain
text, graphics, and hyperlinks to
other web pages and files
 Ways to Create a Website
Using Microsoft Using Canva
Word
Designing a website Designing a website
using Microsoft Word using Canva does not
requires Coding Skills require Coding Skills
Steps on Creating a Website using
MS 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 "Welcome to my Website."
6. On the Save As type, select "Web Page (*.htm; *.html)."
7. Click the Change Title button.
8. Input the title "This is my sample web page using MS Word". 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 WELCOMETOMYWEBSITE.htm file and you will see that
you just created a web page using MS Word
Step #1

Ideas Research
Step #2

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Cras euismod porta nisi,
bibendum varius magna facilisis ullamcorper.
Etiam vel aliquet ante. Cras aliquam aliquam
posuere. Pellentesque ut diam turpis.

Building

Ideas Research
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Cras euismod porta nisi,
bibendum varius magna facilisis ullamcorper.
Etiam vel aliquet ante. Cras aliquam aliquam
posuere. Pellentesque ut diam turpis.
Step #3 - #4 - #5

Ideas Research
Step #6

Building

Ideas Research
Step #7

Building

Ideas Research
Step #8

Building

Ideas Research
Step #9

Building

Research
Step #10

Building

Research
C R E AT I N G A W E B S I T E U S I N G
C A N VA ,
A W Y S I W Y G P L AT F O R M
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
Canvasee.
is a WYSIWYG web hosting service. it
offers free and easy to use tools where you can
easily edit contents of your website.
 S T E P S O N C R E AT I N G A W E B S I T E
U S I N G C A N VA

• Go to www.canva.com and sign up for a free account

using your google account or facebook account.
• In the canva homescreen, select website and scroll
down to select the template you want.
• Edit or customize your template using your own
graphics, images or fonts.
• After editing your website, publish your website by
clicking the publish website button on the upper right
of the screen.
• Enter a URL or name for your website and click
publish.
• Canva will display your website address and you can
now view it.
STEP 1
STEP 2
STILL STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
SAMPLE FINISHED WEBSITE
EDITING ELEMENTS

Editing Images
• click on the image or photo.
• a tool bar will appear on top of the canva editor.
• in this tool bar you can either flip, crop your
image.
• selecting "Edit image" will show you other
editing option for your images like adjusting its
brightness, contrast, and saturation. You can
also put Filters on your images.
Editing Header or any Textbox with Paragraph
• click on the header or textbox.
• a tool bar will appear on the top of the canva editor.
• this tool bar is like what you will find on Microsoft
Word, where you can change the font, font size,
allignment, text color, etc.
Rearranging Images or Textbox
• click and hold the image or textbox and
place it wherever you want on you web
page.
Editing a Page or a Block
• click on the page or block.
• a tool tab will appear on the left side of
the page or block.
Move up - moves the whole page
up
Move down - moves the whole
page down
Add notes - this note will be seen on the canva
editor only
Lock page - this will make the whole page
uneditable
Duplicate page - creates a duplicate of the
selected page
Delete page - deletes the whole
page
Add page - will add a new blank
page
Element Floating Tool
• when an element is selected, this pops
up directly on top or under the element.

Duplicate - will create a duplicate of the elemen

Delete - will delete the selected element
More - will show other options like
copy, paste and text wrapping
ADDING ELEMENTS

In the far left side of the screen is the Visual

Elements Tabs. This is where you will get the
different elements you want to add to your web
page.
Templates - this tab will show you the ready-made
templates you can use.
Elements - will show you the different elements like:
lines & shapes, buttons, graphics, stickers,
photos, videos, and frames.
Uploads - will show you the option to upload an image or
video from your computer.

Projects - will show you your other works in Canva that

you can attach on your web page.

Text - will show you the option to put a header or textbox.

Apps - will show you the shortcut to apps where you can
also get images and videos from.
THANK YOU