Scribd
Upload
103 views23 pages

E Tech

This document provides instructions for creating a basic web page using different methods in 4 steps: 1) Creating a web page using Microsoft Word templates. 2) Creating a website using a free host like Jimdo. 3) Designing a website using an online WYSIWYG (What You See Is What You Get) platform. 4) Editing and inserting elements like headings, text, photos, and galleries for their website.

Uploaded by

joana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
103 views23 pages

E Tech

This document provides instructions for creating a basic web page using different methods in 4 steps: 1) Creating a web page using Microsoft Word templates. 2) Creating a website using a free host like Jimdo. 3) Designing a website using an online WYSIWYG (What You See Is What You Get) platform. 4) Editing and inserting elements like headings, text, photos, and galleries for their website.

Uploaded by

joana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

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 - 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 feature so visitors can
easily locate your website.
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 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 an 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.
Web page using Microsoft Word— a technique you
can also use using Microsoft Excel. These office
applications can be used as a WYSIWYG platform. The
next step is uploading these files to a web server.
However, we will skip that step because we are going to
use a much easier approach in creating websites. We are
going to use an online application that is actually
designed to create websites.
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.
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.
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 to you
depends on which template you used.
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 one
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
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
If it is an image, several options would also
appear. It also allows you to upload an image directly
from your computer or a Dropbox account.
Sizing Tools - used to make image 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 counter­clockwise
page
View tools - used to enable enlarge image, link photo, and remove link
(Tip: Enable Enlarge Image will show a small image on the page and
will only be enlarged when a user clicks it. Link Photo allows you to
insert an image from another website or image host like Photobucket.)
Other tools - caption and alternative text; allow sharing to Pinterest
(Tip: Alternative Text refers to the text that will be shown if the image
does not load.)
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
e. Photo Gallery - to insert 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 a
specified size
h. Columns - to insert columns that
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

You might also like