Basic Web Page Creation

BASIC WEB PAGE CREATION
WYSIWYG
 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 MS Word, WYSIWYG shows and prints whatever you type on the screen.
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 file name “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.
CREATING YOUR OWN WEBSITE USING JIMDO
JIMDO
- is a WYSIWYG web hosting service. It offers free, professional and business services. Jimdo
also has IOS and Android apps which you can use to manage your website whenever you do
not have access to a PC.
You will create your own personal website that focuses on your passion or hobby.
1. Create an account 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 sites WYSIWYG editor.
5. The editor is pretty easy to use. The center shows the preview of your website. The design
tools is 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
by default, the home page is shown on your editor. To navigate the 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 using on the website will highlight the element.
Move element up- use to move the element up by one level
Move element down- use to move the element one level lower
Delete element- use to remove the element
Copy element- use 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 will also appear. It also allows you to upload an image
directly from your computer or a Dropbox account.
Sizing Tools- used you 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 counterclockwise
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 enlarge 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; allows sharing to Pinterest

(Tip: Alternative text refers to the text that will be shown if the
emerge 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 bottom of an
existing an element until the Add Element button appears.
2. Select the visual elements 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 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
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 items- adds a space for selling an items (onlineshopping)
l. Share buttons- adds buttons for the site visitor to share your website
m. Additional element- includes other options like Google Maps, File download,
widgets and etc.
3. Edit the element to your liking then click Save.
SITE SETTING
o Templates - changes the design templates selected

o Style - changes the design style of the page (color)
o Blog - creates a blog for your website
o Upgrade - upgrades to JimdoPro or JimdoBusiness
o Settings - changes account and website settings
o SEO - search engine optimization; used for others to easily find your site using
search engines like Google and Blog
o Store - manages the orders made from your website
o Statistics - views your sites statistics
o Help - accesses Jimdo’s help archieved
SETTING
The Settings options contains important information that you should edit to make the
most out of your Jimdo website.
The Account Settings includes changing you password, email, and personal profile.
The Website options allow 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 manage email accounts for your website.
The Store Settings allows you to manage the items you sale 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 websites.
The Apps option contains settings for embedded apps for 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 setting, go to your site’s URL using browser of your choice.

Basic Web Page Creation

Uploaded by

Copyright:

Available Formats

Basic Web Page Creation

Uploaded by

Document Information

Original Title

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 Web Page Creation

Uploaded by

Copyright:

Available Formats

BASIC WEB PAGE CREATION

CREATING A WEBSITE USING MICROSOFT WORD

CREATING YOUR OWN WEBSITE USING JIMDO

Move element up- use to move the element up by one level

Delete element- use to remove the element

Copy element- use to copy the element

Rotate Tools- used to rotate image clockwise or counterclockwise

Other tools- caption and alternative text; allows sharing to Pinterest

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

o Templates - changes the design templates selected

You might also like