Lesson 8 Basic Web Page Creation

LESSON 8
BASIC WEB PAGE

CREATION
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. 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.
WYSIWYG is designed for anyone who has not
or does not have prior coding skills.
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 names
“Sample Web Page”
5. Specify the filename “Sample Web Page”
6. On the Save As type, select “Web Page (*. Html;
*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. Html
or .html file.
10. Open the Sample Web page. Html and you will see that
you just created a web page using MS. Word
Creating Your Own Website using Jimbo
Jimbo is a WYSIWYG web hosting service. It

offers free, professional, and business web
hosting services. Jimbo also has 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 Jimbo by going to www.jimbo.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.
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 Navigator button. Click on Add
a New Page.
3. Rearrange pages using the tool on the right of
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
Visual Elements
Header
If it is a header, clicking the text will allow you to edit
the text and change its font size.
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.
Paragraph
If it is a paragraph, you will be treated to even more
options similar to using a word processor.
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 mage clockwise or counterclockwise 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 tex; allow sharing to Pinterest (Tip:
Alternative Text refers to the text that will be shown if the image does not load.)
Adding Elements
1. To add elements on screen, hover the mouse pointer to over the top or bottom
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 surrounded with text
e. Photo Gallery- to insert multiple photos on the 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 a column 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 for feedback
k. Store Item- Adds a space for selling an item (online shopping)
l. Share Buttons- add buttons for the site visitor to share your
website
m. Additional Elements- includes other options like Google pas, file
download, widgets, etc.
3. Edit the element to your linking then click Save.

Site Settings
Templates- changes the design template selected

Style- changes the design style of the page (like color)
Blog- creates a blog for your website.
Upgrade- upgrades to JimdoPro or JimdoBusiness
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 your website
Statistics- views your site’s statistics
Help- accesses Jimdo’s help archieve.
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 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 manage email accounts for your website.
-The Store settings allows you to manage the items you sell on your website.
Settings
-The SEO option is a premium feature that maximizes the Search Engine
Optimization feaure of Jimbo so visitors can easily locate your website.
- The Apps option contains settings for embedded apps on your website like
Dropbox, QR Codes, Google Analytic, and Twitter.
- The Jimbo settings allows you to remove the Jimbo Box on your website
(premium feature) and check Jimbo News.
THAT’S ALL
THANKYOU!
Irish Nicole L. Rodriguez
Devine A. Lozada
Leaonard Silagan
Roy Manligoy

Lesson 8 Basic Web Page Creation

Uploaded by

Copyright:

Available Formats

Lesson 8 Basic Web Page Creation

Uploaded by

Document Information

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

Lesson 8 Basic Web Page Creation

Uploaded by

Copyright:

Available Formats

LESSON 8

BASIC WEB PAGE

WYSIWYG is the acronym for What You See

As mentioned earlier, people use HTML codes

1. Open Microsoft Word

Jimbo is a WYSIWYG web hosting service. It

By default, the home page is shown on your

1.Hover your mouse pointer over the site

Hovering over a text, image, or any

 Used to move the element up by

Move Element Down

 Used to move the element one

 Used to remove the element

 Used to copy the element

 Click and drag the element

Rotate Tools- used to rotate mage clockwise or counterclockwise page.

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

Templates- changes the design template selected

You might also like