Scribd
Upload
16 views

basic-webpage-creation

Uploaded by

pre123541974
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

basic-webpage-creation

Uploaded by

pre123541974
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Diana B.

Hamid
At the end of the lessons
students can:

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 platforms; and
4. Edit and insert elements for their website
- 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.
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 7. Click the Change Title
“Web Page (*.htm; *.html).” 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 filers


folder is generated by MS Word. These are the
files that make HTML file display visual
elements correctly.
- is a WYSIWYG web hosting service.
It offers free, professional and business
services. Jimdo 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 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.
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.
1. Stay 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.


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
I. Header
If it is a
header,
clicking
the text
will allow
you to
edit the
text and II. Image
change its If it is an image, several options will also
appear. It also allows you to upload an image
font size.
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:
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:

Heading- to insert heading type of text

Text- to insert a paragraph type of text


Photo- to insert a single photo

Text with photo- to insert a photo surrounded with text

Photo gallery- to insert multiple photos on one area

Horizontal line- to insert a horizontal line that acts as a divider

Spacing- to add a space with a specified size

Columns- to insert columns that divide an area vertically


Video- to insert a video from a video
hosting site like youtube

Form- creates a send an email form for feedback

Store items- adds a space for selling an items (online


shopping)

Share buttons- adds buttons for the site visitor to share your
website
Additional element- includes other options like
Google Maps, File download, widgets and etc.

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


Templates - changes the design templates
selected

Style - changes the design style of the page (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 Blog

Store - manages the orders made from


your website

Statistics - views your sites statistics

Help - accesses Jimdo’s help archieved


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.
1. Home page content- entices your visitors with contents like photos of
your hobby or interest plus text context.

2. About me/contact me- adds a page containing a form element which


allows visitors to email you. You may also add links to your twitter page.

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 classmates


websites including a short description.
• WYSIWYG- an editor that allows you to create and
design Web pages without any coding knowledge
• HTML- stands for hypertext Mark Up 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 visitor 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 MS Word and MS 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 also add a page by just hovering over
the navigation bar and clicking edit navigation. You can also go to
another page by simply clicking on the page link like you would
normally do when navigating through a website

You might also like