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. 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 (Hypertext Markup Language) codes to create pages and CSS (Cascading Style
Sheets) 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 Before we
proceed to using an online WYSIWYG platform, let us try this:
1. Creating a Website using Microsoft Open Microsoft Word
2. Type anything on the page like "Welcome to
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 filename "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.

Tip: Any file inside the Sample Web page files folder is generated by MS Word. These are the files that make HTML files display visual
elements correctly.
You have just created a web page using Microsoft Word-a technique you can also use 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 Your Own 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.

1. Create an account on Jimdo by going to www.jimdo.com and clicking Create Your Free Website or log in using your Facebook
account.

Figure 1. Jimdo Home Page

Figure 2. Login page

2. You will be instructed to choose

a platform. Pick Website.
 3. Choose “no coding
required”

4. Choose “any of the two”

5. Choose “select the theme that

will fit to you content”

6. Input the name of your project

7. Click “Skip this Step”

8. Select “Continue without a

custom domain.”

9. It is now time to edit the website

to your liking.
If done, click the publish button at the
upper right corner to see your
website live.

Click your website domain/link to see

your website

Visit this page to learn more about Jimdo https://www.youtube.com/user/jimdo

A website or web site is a set of related resources from the web. These resources were considered as web pages and
multimedia (e.g.: videos, music, images).

A platform-enabled website or online platform gives a feature on which allows to manipulate the content of the website. Most of the
online platforms requires you to register in order to publish, manipulate, organize, or even delete a certain web content. As a Senior
High School student, you are expected to know the different online platform as this would help you in different task like connect people,
stream your daily activity, shop online, or even creating a website of your own.

Here are the three types of online platforms:

1. Social Media Platforms
This platform allows you to create your personal account or profile. After you register on this website, it will allow you to create pages or
even groups where you can share content and ideas. Social Media platforms enables you to connect yourself to other users and get
updates on their news feed. Facebook, Instagram and Twitter are examples of Social Media platforms.
2. Blogging Platforms
A platform on where a writer or even a group of writers can share views on an individual subject. It is comparable to a newsletter where
you can add menus, designs or even multimedia of a subject. Blogger is an example of blogging site. If you love to write or you want to
share ideas online, blogging platforms is the perfect tool you can use.
3. Content Management System or CMS
One of the features of this platform is that you can publish your own website and manage its content through intranet or in a single
computer. This is a software where you can easily create, update, organize, and publish the content of your website. A popular
example of CMS is WordPress.

Activity 1: Identify which online platform to use

Now you have learned the three types of online platform. These online platforms are tools that you can use to create information, share
ideas and connect to other people. Below there are ten situations, read every item carefully and identify which online platform is the
best to use. Write your answer in ¼ sheet of paper.

Table 1: Identify which online platform to use. Social Media Platform, Blogging Platform, and Content Management System or
CMS.

Web Page Design Using Templates and Online WYSIWYG.

WYSIWYG is an acronym for "what you see is what you get". There many tools on creating or designing a website. However, there
are tools offers WYSIWYG process. These are tools on which the content (text and graphics) can be edited in a form closely
resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide
presentation.

1. Wix -. Its interface is one of the most

intuitive, slick, and powerful in the
evergrowing group of website-building
servicesWix offers standout features, such
as online storage for your site assets, cool
video backgrounds, animations for titles,
and mobile.
(Retrieved from
https://sea.pcmag.com/wix/8396/wix)

Photo Credits: Screenshot from

https://www.wix.com/
2. Weebly - This free website builder allows you to build
beautiful websites in a very short period of time – even if
you do not have any programming background.
(Retrieved from
https://www.websitebuilderexpert.com/website-
builders/weebly/free -website-builder-for-all/)

Photo Credits: Screenshot from

https://www.weebly.com/?lang=en

3. WordPress - is the world’s most popular tool for creating

websites. WordPress is capable of creating any style of
website, from a simple blog to a full-featured business
website. You can even use WordPress to create an online
store. (Retrieved from https://wpapprentice.com/blog/what-
is-wordpress/)

Photo Credits: https://pixabay.com/photos/wordpress-

blogging-blogger-editor-265132/

4. Drupal - It is a well-known content management system

intended to help advanced designers create a powerful
website capable of handling large volumes of visitors and
hundreds of pages of content. (Retrieved from
https://www.business.com/reviews/drupal/)

Photo Credits: Screenshot from https://www.drupal.org/

Creating your Own Website using Wix

Wix is a WYSIWYG web hosting service. It offers free, professional, and business web hosting services. Wix also has an iOS and
Android app which you can use to manage your website whenever you do not have an access to a PC.

Wix is another Web site that offers its users to create their own Website. The advantage of using Wix is that knowledge of Web site
programming is not a prerequisite. It also offers a wide range of templates. These templates have been designed for every purpose
intended by the user. This is possible because different Web site developers contribute to the pool of themes available. Wix offers a
drag-and–drop facility. Users can simply grab elements such as textboxes, photos, and shapes to arrange them in the layout they want.
Creating a Wix Website
1. Create an account on Wix by going to
www.wix.com. You have to sign up touse
the website. You may choose to log in using
your Facebook account or
Gmail account. Once logged in, you can
use the existing templates of wix and just
modify and enhance your website.

Photo credits:
https://www.wix.com/account/sites

2. Click Create Site.

Photo credits:
https://www.wix.com/account/sites

3. Choose Other.

Photo credits:
https://www.wix.com/new/vertical?
ref=myaccount&additionalreferralinfo
=siteless- main-button.

4. You will be instructed to choose a

template. Click Choose a Template.

Photo credits:
https://www.wix.com/new/site?
vertical=other
5. Pick any template that you want. Choose
categories and click any templates.

Photo credits: https://www.wix.com/website/

Templates

Photo credits:
https://www.wix.com/website
/templates/html/community-
education
6. Your website will be
generated and soon you will end
up in the site’s Wix editor.

7. The editor is pretty easy to

use. The center shows the
preview of your website.
The design tools are located on
the right. It is now time to edit
the website to your
liking.

8. Click Edit and create your

own amazing website.
Photo credits:
https://editor.wix.com/html/
editor/web/renderer/
new?siteId=f9729d47-
3200-4fc9-85d7-
4962458fe33c&metaSiteId
=12f2ed08-f07c-8d31-b14b-
733cf7fe35b1&editorSessionId
=42383395-932d-4a22-b619-
0e046d5ed470

9. You can click Preview in order to see the

design before saving the website.

Photo credits:
https://editor.wix.com/html/editor/web/renderer/new?siteId=f9729d47-3200-4fc9-85d7-4962458fe33c&metaSiteId=12f2ed08-f07c-8d31-
b14b-733cf7fe35b1&editorSessionId=0858a7ce-448b-4e23-8473-00c610e3f5bd
10. Once you are done editing
and click Save and choose
Save & Continue.

Photo credits https://editor.wix.com/html/editor/web/renderer/edit/8f21420c-bc8e-48f3-a613-9cacc9bfc489?editorSessionId=0858a7ce-

448b-4e23-8473-00c610e3f5bd&metaSiteId=6ad45859-d245-4f35-9ec7-fd685f139b26

11. You can click Edit and type the filename. Click done to publish the website.

To understand more the Wix Website, you can access the video tutorials below:
1. How to Make a Website with WIX? WIX 2019 Complete Tutorial?
https://www.youtube.com/watch?v=aa6JS_8QtNI

2. Wix Tutorial For Beginners 2019 - Create A Wix Website In Minutes

https://www.youtube.com/watch?v=JTdK9q_iuE0

Web Mapping Applications

Web mapping applications are Web sites developed from geographical information system (GIS) data. Mapping applications use GIS
to create a visualize maps. Today, a Web map is used not only for directions and locations but also to track consumer activity and to
locate stores and establishments.

The examples of mapping application are:

Google Maps – This is a Web mapping application developed by Google. It shows both graphic and satellite maps. The maps include
street names, building names, establishment names, and bus and train stations, to name a few. Some extension applications include
three-dimensional views of the satellite images and traffic conditions. To access Google Maps, http://www.google.com.ph/maps/

Google Maps
Photo credits: https://www.google.com.ph/maps/@8.1426185,123.8355356,15z
Wikimapia - This is a collaborative open content mapping application. Wikimapia offers satellite view of streets, buildings, and
establishments. This Web site uses Google Maps APIs for mapping. To access Wikimapia, http://wikimapia.org/

Wikimapia Application
Photo credits: http://wikimapia.org/#lang=en&lat=14.709800&lon=120.936200&z=12&m=w