Empowerment Technologies

Web Page Designing

What does Web Page mean?
• A Web page is a document for the World Wide Web
that can be accessed and displayed on a monitor or
smartphone using any web browser. Web pages are
made up of Hypertext Markup Language (HTML) and
can be created and modified by using basic
application like Notepad and professional HTML
editors.
HTML is Easy to Learn and Use
• HTML is easy to learn and understand. For someone who wants to
learn web development, HTML is the first and foremost computer
language that you need to take note but do not worry, it is not a
sensitive case and as simple as it is. It already has some tags that
serve a specific purpose to make. One can easily understand others’
code and make changes in it when required without reading a whole
book of a manual. Moreover, it does not throw any error or create
any problem like other programming languages do when the
developer forgets to close the tags or makes mistakes in coding.
HTML is Free
• One of the biggest advantages of HTML is that it
is free of all cost and there is no need to
purchase specific software for it to be used.
Online Website Builder - Easy Use of Drag-And-
Drop Interface

•For those who love to make changes to their

website, a drag-and-drop interface is
convenient.
WYSIWYG
• WYSIWYG is the acronym for What You See Is
What You Get. This means that whatever you
will type, insert, draw, place, rearrange, or
whatever you do on a web page is what the
audience will see. Just like using the Microsoft
Word, WYSIWYG shows and prints whatever you
will type on the screen.
HTML
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by TAGS
• HTML TAGS label pieces of content such as “heading”, “paragraph”,
“table” and so on...
• Browsers do not display the HTML tags, but use them to render the
content of the page
Requirements in creating a web page using the
html
1. Editor – using the Notepad (source
code) in text and extension name -
.html or .htm.

2. Browser – responsible for reading

HTML instruction and displaying the
web page output. (ex. Internet
Explorer, Mozilla Firefox, Google
Chrome)
Creating a Website Using Notepad
•Web pages can be created and modified
using professional HTML editors. However,
in learning HTML, it is better to use a simple
text editor like Notepad.
Follow the steps below to create your first
web page with Notepad.
Step 1: Open Notepad
For Windows 8 or above computers:
a. Open the Start Screen (the window symbol at the bottom left on
your screen).
b. Search and open the Notepad
 Follow the steps below to create your first
web page with Notepad.
Step 2: Write the following HTML:

HTML document is divided into two main sections the head and the body. Each section
contains specific information. The head section contains information about the documents
like title, search engine or keywords but is not visible to the reader. The body section contains
the information or content that you want to appear on the web page.
Follow the steps below to create your first
web page with Notepad.
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad
menu.
Follow the steps below to create your first
web page with Notepad.
Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your browser (double click on the file, or
right-click - and choose "Open with").
Creating a Website Using an Online Website
Builder
• Wix.com is a WYSIWYG cloud-based web development platform that
was first developed and popularized by the Israeli company also
called Wix. It allows users to create websites and mobile sites through
the use of online drag-and-drop tools.

For this topic, you will create your own personal website that focuses
on your passion or hobby.
1. Create an account on Wix through their website www.wix.com and
click GET STARTED
2. Select “Create a New Site” from the drop down menu in the top
right corner of the dashboard. Once it’s clicked, Wix will ask what
type of website do you want to create. There are options for
everyone, from online stores to personal portfolios.
3. Customize your website with the Wix Editor.
Once you select a template, you can be able to customize it in
the Wix Editor using simple drag-and-drop editing.
4. Update the Texts and Images
At this point, you can get to see a preview page of your chosen
template. This is where you can play around with simple but
brilliant editing features, like the dragand-drop design and text
boxes.
5. Personalize the Background
If small images are still not enough, you can also change your
template background. The left-hand sidebar features a
‘Background’ button, which you can use to click and change with
ease.
6. Add Pages
Once you created a stunning homepage, there are few other
more pages you can add to ensure that your website has
everything visitors are looking for. For example, make sure to
include a “Home”, “About” and a “Contact Us” page.
 Web Page Design Using
Templates and online WYSIWYG
Platforms
The web is a gigantic place, and if you are using
internet every day, you probably visit several
websites whether for news, entertainment,
business or education. But have you ever
wondered how these websites actually work?
How are they built? What skills are necessary to
build a website? With almost 1 billion websites
now on the internet, the answers to these
questions could be your first step toward a better
understanding of website designing.
Web Page Design
• A website is a collection of publicly accessible, interlinked web pages that
share a single domain name. Websites can be created and maintained by
an individual, group, business or organization to serve a variety of
purposes. Together, all publicly accessible websites constitute the World
Wide Web.
• Web design is a similar process of creation, with the intention of presenting
the content on electronic web pages, which the end-users can access
through the internet with the help of a web browser.
• Every single web page in a website has different content, but all the pages
are using a similar graphic design. Often, sites will use website templates,
which contain all the basic elements of web design such as:
Layout
• It means that your design should align
with a handful of soothing adjectives; it
should be simple, familiar, intuitive,
clean, and accessible. Use plenty of
whitespace (or padding and margins) to
give the elements of your site room to
breathe, and use grid-based designs to
keep design items organized and orderly.
Strong photography, icons, or graphics
provide supplementary information to
your text but make sure the images
complement each other and the brand
you’re looking to represent.
Colour
• As for choosing a color scheme, paying
attention to your topic, brand or industry
perspectives, along with your target audience
demographics will make this a somewhat a
painless process. Always look for ways to
narrow your scope from the roughly 7 million
discernable hues the eye can detect.
Navigation
• Your site’s navigation is not a space
in which to be creative. First off,
don’t fall into the trap of overly
animated hover effects and
complex. Navigational elements
which can exist in a site’s header,
body, and footer simply serve to
direct your visitors to the
information they desire as quickly
as possible.
Fonts - Your text should be easily readable, which generally means
body copy should be at least 16 pixels. Using a complementary font is
ideal for headings or accents, but don’t go beyond three typefaces or
unnecessary sizing adjustments. Of course, you’ll want to make sure
there’s plenty of contrast between your text and the site’s background
colors, which generally means a light color paired with a dark tone.
Also, avoid that piercing red-font-on-green-background eyesore.

Content - Your site visitors and potential customers want information

quickly such as, is your brand trustworthy? Experienced? Is it capable
of delivering topnotch products and services? Given people’s short
attention spans and lightning-fast first impressions, communicating
clearly is critical, thus, information should be easy to read and digest.
Web Template
It is a pre-designed webpage on set of HTML webpages that anyone can
use to “plugin”. Website templates allow anyone to setup a website.
A web design template is a catchall name for several types of templates
like;
1. HTML templates – website design templates represented with HTML
code only
2. PSD templates – templates which contain only .psd files, graphics only,
with no code
3. Flash templates – website design templates developed with Flash
4. Flash intro templates – templates of an intro clip, developed with
Flash only and used to represent a company or/and a project.
Online WYSIWYG Platforms
• Whether you’re attracted in learning to make your own website or want
to start a blog without having to learn HTML or other coding languages,
you may want to consider using a website builder that makes use of a
WYSIWYG editor.
• WYSIWYG stands for what you see is what you get. In other words, you
are creating a website using drag-and-drop interface or changing the way
fonts look in an editor, that is how your finished product will look.
• There are different benefits related with using a WYSIWYG editor. You
have control over what your website looks like, and you don’t have to pay
a professional to handle the coding for you. There are also a number of
web hosts that have their own built-in editors, meaning you can create
your website and publish it to the web immediately.
Creating a Website Using an Online Website
Builder
Wix.com is a WYSIWYG cloud-based web
development platform that was first
developed and popularized by the Israeli
company also called Wix. It allows users to
create websites and mobile sites through the
use of online drag-and-drop tools.
For this topic, you will create your own personal
website that focuses on your passion or hobby.
1. Create an account on Wix through
their website www.wix.com and
click GET STARTED.
2. Select “Create a New Site” from
the drop down menu in the top
right corner of the dashboard.
Once it’s clicked, Wix will ask what
type of website do you want to
create. There are options for
everyone, from online stores to
personal portfolios.
For this topic, you will create your own personal
website that focuses on your passion or hobby.
3. Customize your website with the Wix Editor.
Once you select a template, you can be able to customize it in the Wix
Editor using simple drag-and-drop editing.

4. Update the Texts and Images

At this point, you can get to see a preview page of your chosen
template. This is where you can play around with simple but brilliant
editing features, like the dragand-drop design and text boxes.
For this topic, you will create your own personal
website that focuses on your passion or hobby.
5. Personalize the Background
If small images are still not enough, you can also change your template
background. The left-hand sidebar features a ‘Background’ button,
which you can use to click and change with ease.
For this topic, you will create your own personal
website that focuses on your passion or hobby.
6. Add Pages
Once you created a stunning
homepage, there are few
other more pages you can
add to ensure that your
website has everything
visitors are looking for. For
example, make sure to
include a “Home”, “About”
and a “Contact Us” page
For this topic, you will create your own personal
website that focuses on your passion or hobby.
7. Publish your Wix website
To make your website publicly accessible, you need to publish it. To
do so, click “Publish” from the top menu. However, before Wix will
publish your site, the last step in the process is to create your own
subdomain or connect a custom domain. For a serious website, you
should connect your own custom domain name, rather than using a
Wix subdomain.