0% found this document useful (0 votes)
1K views40 pages

Basic Webpage Creation

The document discusses how to create websites using different WYSIWYG platforms like MS Word, Google Sites, and Jimdo. It provides step-by-step instructions on how to make a basic website using MS Word by saving a document as a web page. It also outlines the process of setting up a free website on Jimdo, including choosing a template and domain name. Key terms related to web design and development like WYSIWYG, HTML, and CSS are defined.
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
0% found this document useful (0 votes)
1K views40 pages

Basic Webpage Creation

The document discusses how to create websites using different WYSIWYG platforms like MS Word, Google Sites, and Jimdo. It provides step-by-step instructions on how to make a basic website using MS Word by saving a document as a web page. It also outlines the process of setting up a free website on Jimdo, including choosing a template and domain name. Key terms related to web design and development like WYSIWYG, HTML, and CSS are defined.
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/ 40

/jfpguevara0925/

1.Create a web page using MS Word, Google


Site and other platforms
2.Create your own website using a free host
3.Design a website using an online
WYSIWYG platforms
4.Edit and insert elements for their websites
/jfpguevara0925/
/jfpguevara0925/
- 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.

/jfpguevara0925/
/jfpguevara0925/
1. OPEN MICROSOFT
WORD

2. Type anything on the page


like “Welcome to my website”.

/jfpguevara0925/
3. Click on file ⮚ Save as
⮚ Browse.

/jfpguevara0925/
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”.

/jfpguevara0925/
6. On the Save as type, select 7. Click the Change Title
“Web Page (*.htm; *.html).” button

/jfpguevara0925/
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.

/jfpguevara0925/
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.

/jfpguevara0925/
/jfpguevara0925/
- 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.

/jfpguevara0925/
1. Create an account by going to www.jimdo.com
and clicking create your free website.

/jfpguevara0925/
2. YOU WILL BE INSTRUCTED TO CHOOSE A
TEMPLATE. PICK ANY TEMPLATE THAT YOU
WANT

/jfpguevara0925/
3. CHOOSE A URL FOR YOUR WEBSITE.
ENTER YOUR EMAIL AND PASSWORD.

/jfpguevara0925/
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.
/jfpguevara0925/
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.

/jfpguevara0925/
STEP-
BY-STEP
USING
JIMDO

/jfpguevara0925/
STEP 1 – GO TO GOOGLE AND TYPE
JIMDO.COM THEN CHOOSE SIGN UP

/jfpguevara0925/
STEP 2 – CHOOSE HOW YOU
WILL SIGN UP

/jfpguevara0925/
STEP 3 – AFTER CHOOSING AN OPTION
(GOOGLE, YOU WILL BE DIRECTED TO THIS
PAGE, CHOOSE NEW WEBSITE

/jfpguevara0925/
STEP 4 – CHOOSE FROM THE
GIVEN OPTIONS (EX. WEBSITE)

/jfpguevara0925/
STEP 5 – CHOOSE AGAIN AN OPTION (IF YOU ARE A
BEGINNER, CHOOSE THE OPTION NO CODING
REQUIRED)

/jfpguevara0925/
STEP 6 – CHOOSE AGAIN AN OPTION (IF IT IS
FOR AN INDIVIDUAL OR GROUP OR YOU MAY
SKIP THIS STEP)

/jfpguevara0925/
STEP 6 – CHOOSE AGAIN AN OPTION (IF IT IS
FOR AN INDIVIDUAL OR GROUP OR YOU MAY
SKIP THIS STEP)

/jfpguevara0925/
STEP 7 – YOU NEED TO TYPE THE NAME OF
YOUR PROJECT THEN CLICK CONTINUE

/jfpguevara0925/
STEP 8 – FOR THE LISTINGS, YOU CAN ALSO SKIP THE
STOP OR JUST SIMLY CHOOSE “I DON’T SEE MY PROFILE
HERE”, IF YOU CAN’T FIND IT THROUGH THE LIST.

/jfpguevara0925/
STEP 9 – SAME WITH THE OTHER OPTIONS, YOU CAN SKIP
THIS STEP BUT IT IS RECOMMENDED TO CHOOSE FROM THE
OPTIONS FOR EASY ACCESS OF YOUR WEBSITE

/jfpguevara0925/
STEP 10 – ASIDE FROM THE GIVEN OPTIONS, I SKIPPED
SOME OF THE OPTIONS BUT YOU CAN CHOOSE TO CLICK
BACK ANYTIME.

/jfpguevara0925/
STEP 11 – FOR THIS STEP, YOU CAN NOW CHOOSE A DOMAIN
FOR YOUR WEBSITE

/jfpguevara0925/
STEP 12 – FOR PERSONAL USE, I
RECOMMEND THE OPTION CHOOSE A
DOMAIN LATER

/jfpguevara0925/
THIS IS THE SAMPLE

/jfpguevara0925/
CLICK PUBLISH AND YOU MAY SHARE IT THROUGH FB, TWITTER ETC.

IT IS BETTER TO SHARE IT THAT WAY BECAUSE IT IS FOR FREE

/jfpguevara0925/
THIS IS THE APPEARANCE OF THE WEBSITE BASED ON THE OPTIONS/SETTINGS I
SELECTED

/jfpguevara0925/
REMINDER: THE DIFFERENT BUTTONS YOU WILL HAVE IN YOUR WEBSITE
DEPENDS ON THE NUMBER OF OPTIONS YOU SELECTED

/jfpguevara0925/
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.

/jfpguevara0925/
• 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
/jfpguevara0925/
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
/jfpguevara0925/

You might also like