Web Creation – is it easy?
• YES.
• The internet is free.
• It is free of courtesy if many website providers that provide basic
functionalities for our website to function.
• Back in the day, we actually have to learn HTML (hypertext markup
language) and CSS (cascading style sheets) to create a website.
• Now, we will use a WYSISWYG editor.
WYSIWYG
• The WYSIWYG is an 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 are what the audience will see.
• Like using the Microsoft® Word, 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.
• 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 or
does not have prior coding skills.
Other Ways to Create a Website
• 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".
Creating a Website using Microsoft® Word
3. Click on File > Save As > Browse.
Creating a Website using Microsoft® Word
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”.
Creating a Website using Microsoft® Word
7. Click the Change Title button.
8. Input the title as seen below, then click OK then Save.
Creating a Website using Microsoft® Word
9. Check the files on your Sample Web Page folder. You will see a new
folder generated including your .htm or .html file.
Creating a Website using Microsoft® Word
9. Open the Sample Web [Link] file and you will see that you just
created a web page using MS Word.
Creating a Website using Microsoft® Word
• You have just created a web page using Microsoft® Word-a technique
you can also apply using Microsoft® Excel.
• These office applications can be used as a WYSIWYG 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 Website using Jimdo
• Jimdo is a WYSIWYG web hosting service.
• It offers free, professional, and business web hosting services.
• Jimdo also has an iOS and Android app which you can use to manage
your website whenever you do not have access to a PC.
• For this exercise you will create your own personal website that
focuses on your passion or hobby.
Creating Website using Jimdo
1. Create an account on Jimdo by going to [Link] and
clicking "START NOW". Optionally, you may also download the
official Jimdo App on your iOS or Android device. Make it easy!
2. Template Selection Page Input your email address, create a
password and check "I'm not a robot". You may also review the
terms of use and privacy policy. Afterwards, click "Let's do this!":
Creating Website using Jimdo
3. Select website as the kind of website you want to create.
Creating Website using Jimdo
4. You will be instructed to choose a template. Pick any that appeals to
you. This can still be changed later.
Creating Website using Jimdo
5. Choose make your own website with Jimdo Creator. Then skip the
question about what website you would like to create.
Creating Website using Jimdo
6. Select FREE when asked which Jimdo account is right for you.
Creating Website using Jimdo
7. Select the website address that you want. Though there are options for a
professional domain or a domain you already own, ignore them and choose
to use a free [Link] subdomain, This means that your website will be
something like [Link]
8. Wait for the page to load (it may take a while). This will load the website
editor wherein you can get a chance to modify the website to your liking.
This is called the WYSIWYG editor.
To use the editor, simply click on the element you want to change, whether it is
the navigator on top, the texts, or images. Almost everything can be changed.
Tips in Using 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. If it is not yet visible, hover your mouse pointer over the site navigator,
the Edit Home Services Contact Navigation button should appear. Note
that some site navigators may be located at Edit Navigation the side of
your page. This depends on the template your selected.
2. Click the Edit Navigation button. Click Add a new page. Name your new
page to anything you like.
3. Rearrange, add, delete or hide pages on your website by using the icons
next to page's name. Use the arrows on the Edit Navigation to rearrange
the pages. Arrows horizontally would move your page under the page
above it.
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
Click the picture
to edit.
Just click the picture or the
lines to edit. Write some few
intro and you’re good to go.
You can also add few more
sections in your page. You
can customize your page
however you want, whatever
you want.
END