Basic Web

Page
Creation
How hard is to crate a web
page? You already have you
facebook or twitter account, and
you just recently made your own
blog. What about a site that gives
you full control over its design?
How basic is basic? Imagine the
way our ancestor do fishing. They
used fishing rod or spear to catch
fish. Today, huge companies rule
the fishing industry with their huge
fishing vessels with huge nets to
catch fish by the truckload.
Unfortunately, those fishing vessels are
not affordable so we will still be using
our fishing rod or spear. However, that is
not the case in web page creation. First
of all, the internet is free, secondly, it is
of free courtesy of many website
providers that provide basic
functionalities for our website to
function.
Back in the day, you actually have
to learn HTML ( Hypertext
Markup Languages) and CSS
(Cascading Style Sheet) to be
crate a decent website . Today, we
use WYSIWYG
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 pages using WYSIWYG.
If you have not, WYSIWYG is
designed for anyone who has not or
does not have prior coding skills.
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 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 "Sample
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

file folder is generated by MS word
these are the files that make HTML files
display visual elements correctly
You have just created a web page using
Microsoft WORD – a technique you can also
use using Microsoft excel These office
application can be as a WYSIWYG a 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 Websites using Jimdo
Jimdo is a WYSIWYG web hosting service. It
offers free, professional, and businesss web hosting
services. Jimdo also has an iOS and Android app
which you can you can use to manage your
websites whenever you do not have access to a PC.
For this a WYSIWYG exercise you will
create your own personal website that focuses on
your passion or hobby.
1.Create an account on Jimdo by going to
www.jimdo.com. 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 editors is pretty easy to use. The center shows

the preview of your website.
The design tools are located on the right.
It is now time to edit the website to your liking. Use
the following tips to achieve it:

Tips in using the WYSIWYG editor:

Be 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
is a set of links going through the different pages of
your website. The navigator currently available to
you depends on which template you used. A sample
of a navigator is shown below.
Inserting a Page
1.Hover your mouse pointer over the site
navigator. The Edit Navigation button will
appear:

2. Click on Edit Navigation button. Click on

Add a New Pages
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 websites 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

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 allow 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 – use to enable enlarge image, link
photos and remove link ( Tip: Enable Enlarge
Image will show a small image on the page and
will only be enlarge when a user clicks it. Link
photo allows you to insert an image from
another website or 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.)
III. Paragraph
If it is a paragraph, you will be treated to even more options similar to using a word
processor:

Adding Elements
1. To add elements on screen, hover the mouse pointer over the top or button of an existing
element until the Add Element button appears:

2. Select the visual element you want to add.

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
surrounding 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
g.Spacing – to add a space with a specified size
h.Columns – to insert columns that divide an
area vertically
a. Video – to insert a video hosting site like YouTube
b. Form – creates a Send an Email from for feedback
c. Store Item – adds a space for selling an item (online
shopping)
d. Share Buttons – adds buttons for the site visitor to share
your website
e. Additional Elements – includes other options like
Google Maps, file download, widgets, etc.

3. Edit the element to your liking then click Save.

Site Settings
Templates - Changes the design template selected
Style - Changes the design style of the page (like color)
Blog
Upgrade - Creates a blog for your website

Settings - Changes account and website settings

Seo - Search Engine Optimization; used for others to easily

find your site using search engines like Google and Bing

Store - Manages the orders made from made from your website

Statistics
- Views your site’s statistics

Help - Accesses Jimdo’s help archive

 You may use the tools located on the right-hand side
of the screen to get access to these feature.

Settings
The Settings option contains important information that you
should edit to make the most out of your Jimdo website.
The account settings includes changing your password,
email, and personal profile.
The Website options allows you to change your site title and
footer; checks your storage; creates your privacy policy and
your favicon (the icon of your website shown on a browser).
The Mobile settings is used to prepare your page for mobile
devices.
The Email and Domain Management settings is a premium
feature. It is used to mage email accounts for your website.
The Store setting allows you to manage the items you sell on
your website.
The Seo option is a premium feature that maximizes the Search
Engine Optimization feature of Jimdo so visitors can easily
locate your website.
The Apps option contains settings for embedded apps on your
website like Dropbox, QR Codes, Google Analytics, and
Twitter.
The Jimdo settings allows you to remove the Jimdo Box on your
website (Premium feature) and check Jimdo News.

Once you are done editing the settings, go to your site’s URL using a
browser of your choice.
Skill Exploration
Exploration 8.1 Adding Content to Your Website
It is now time to add content to your website. Here a re a few site
pages and elements that should add:
1. Home page content – entices your visitors contents like photos of your
hobby or interest plus text content
2. About Me/Contact Me – adds a page containing a form element which
allows visitors to email you.
3. Blog – creates a page that includes details about your WordPress blog and a
link to it.
4. Photo Gallery – a page that contains photos from your photobucket account
5. Community – a page that contains links to ten of your classmate’s websites
including a short description.
Your Turn to Shine
1. What are the advantages and
disadvantages of a WYSIWYG editor?
2. What is the difference between your
WordPress blog and your Jimdo
Website?
3. List down three more WYSIWYG web
hosting services and their URL.
Take a Challenge!
Create a blog post in your
WordPress blog advertising
your newly created website.
Make sure insert details
about your website that will
entice your readers to visit it.
Key Terms
• 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 stands for What You See IS What You Get. It is
an editor that allows you to create and design web pages without
any coding knowledge. You can use Microsoft Word and Microsoft
Excel as WYSIWYG editor.

Jimdo is a WYSIWYG web hosting service offering free and paid

services. It has an android and iOS application that let you manage
your site on mobile. Jimdo WYSIWYG editor is easy to use. Just
click on an element to edit it. You can add a page by just hovering
over the navigation bar and clicking edit navigation. You can go to
another page by simply clicking on the page link like you would
normally do when navigating through a website.

Jimdo has tools that will allow you to sell your product online,
create your own photo gallery, add videos, and many more. You
can also maximize search engines by properly tagging your site.