TVL Empowerment Technologies Q3 M16

Empowerment
Technologies
QUARTER 1
MODULE Collaborative Development of
16 ICT Content (Part 1)
TECHNICAL VOCATIONAL LIVELIHOOD

EXPECTATIONS
At the end of the lesson, the learner should be able to:

✓ recognize the difference between a website and a web page;
✓ explain the concepts behind web design principles and elements as a tool
for communication;
✓ identify the different parts of a website; and
✓ design a personal website that includes the basic parts of a website.
PRETEST
True or False: Write T if the sentence is correct; otherwise, write F on the
space before each item.
1. HTML stands for Hypertext Markup Language.

2. The banner is where the privacy policy, terms of use, sitemap,
social media icons and links to other important pages on the
website are located.
3. The website should be regularly updated and tested so that
problems can be easily resolved.
4. A website is a collection of web pages coded in HTML that are
linked to each other and to pages on other sites.
5. A website has portable design when the site is accessible at a
variety of speeds.
6. CSS stands for Cascading Style Sheets.
7. White spaces should not be used deliberately when designing a

website.
8. The home page is the first page of your website.
9. In website designing, shapes can be used to denote boundary.
10. WYSIWYG stands for What You Sense Is What You Get.
RECAP
Our last lesson was focused on Google Slide as an alternative online

application that you can use in creating presentation material.
Can you please tell the benefit of using this application?
LESSON
A web page is a document created for the World Wide Web (www) that can be
accessed via a web browser such as Firefox, Google Chrome, Microsoft Edge,
or Apple’s Safari. It may include many types of data or resources that you can
see, hear, and interact with. A web page could include text, graphics, sound,
video, and animation.
You may ask, how is web page different from website? A web page is one of
many files that make up a website; an example is a home page or a contact
page of a particular site. A website on the other hand is a collection of web
pages coded in HTML that are linked to each other and to pages on other sites.
Examples of these websites are facebook.com, youtube.com, google.com and
gmanetwork.com. Remember, all websites are made accessible through the
use of the Internet.
There are many software available which you can use to create a web page.
Back in the day, in order to create a decent website, you would have to learn
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).
Today, we use the WYSIWYG (What You See Is What You Get) editor. This
means that all you write, insert, draw, put, rearrange, and everything you do
on a page is what the audience will see.
In this particular lesson, you will be creating your own website. But before we
proceed to the creation of such, there are important elements and principles
that we need to follow when creating a website.
Basic Web Design Principles and Elements

Web design is a concept where websites are planned, created, updated, and
maintained. A good website design allows the user to understand the
message, contents, and ideas in the most convenient way.
Web Design Elements

In order to create an attractive, technically sound and effective web design,
elements must be organized in a manner that is pleasing to the eye, well-
coordinated, and that maintains good balance between elements.
1. Text – font family and type must be chosen correctly, simply, and in
readable format.
2. Graphics/Illustrations – must be of high quality and the text and other
elements must be well organized.
3. Shapes – may be used to exemplify an enclosed boundary in the web page’s
overall layout. Any type, such as normal geometric or abstract shape, that
can be positioned that match the user’s design can be placed. You should
play with whatever shape you consider is appropriate.
4. Background – or texture will help provide your website with a feeling of a
surface underneath. To make it look more attractive, this feature must be
used to bring out the content offered on the website.
5. Color – must blend well and go with the elements on the page. It will help
to achieve this effect by using bright and bold colors that attract but don’t
disrupt too much.
6. Video/Audio – can help viewers understand quickly what you are teaching
or selling.
7. Links – will enable users to connect to another site or page that is related
to the content of your page or site.
Web Design Principles

A good website design should be attractive, functional, responsive and useful.
Follow the basic principles of effective web design to create a functional and
impressive website.
1. Portable Design – website design must be portable and available to end
users who have various browsers, operating systems, and computer
platforms. Often check compatibility by viewing your sites through other
browsers.
2. Design for Low Bandwidth – website design must be available at different
speeds. Avoid large graphics or animations because if downloading is slow,
users will leave the site.
3. Direction – define the order of importance of the different elements and
position them in a sequence where the eye moves and perceive the objects
it sees. Design and structure should be consistent.
4. Accessibility – a visitor must be able to quickly access the information
when he/she enters the website. This means that the text needs to be
legible/readable, the colors have to establish visual harmony and balance,
and pictures should be of high quality.
5. White Spaces – use white spaces intentionally as breathing space in your
design. White spaces can also be used to indicate division of content.
6. Simplify – the more choices you add in your site, the more difficult it is for
a visitor to make a decision and more time is required to browse through
them. Simplify you web page by removing distracting options and clutter.
7. Convenience – to allow users to make an action, the click buttons should
be accessible and strategically placed in the web page.
8. Regular testing – the website should be periodically upgraded, updated,
and reviewed so that bugs can be fixed quickly. This includes the
hyperlinks and the loading of images and other elements in the page.
Visitors will not stick around or proceed if they encounter problems in
loading or viewing.
Parts of a Website
1. The Header
A website’s header or banner is the consistent section at the top of the site with
the logo and navigation menu in it. It is a zone at the top of the page that stays
constant and visible as visitors click around your site.
Figure 1: http://www.ocamposfinejewelry.com/
A header might include:
▪ Logo ▪ Phone number ▪ Navigation menu
▪ Buttons ▪ Address ▪ Social media icons
▪ Tagline ▪ Search box ▪ Login or My Account link
2. The Menu System

These are the hyperlinks at the top of the page to help you find what you’re
searching for. Typically, the navigation links are in or just below the header
for convenient access. For certain situations, putting the navigation bar
vertically on the left side of each page might be sensible.
The navigation bar/menu tab allows the visitors to search other website links
or sites. It appears in all pages within a website for more easy navigation.
Common menu found in a website:

a. Home - A home page is a web page that serves as the starting point
of website. This is usually the main web page that a user can see while
heading to a website from a search engine, and it may also serve as a
landing page for attracting web users.
b. About - The primary purpose of your site's About Us page is to provide
information about your website and what it can do or deliver.
c. Contact - A contact page is a common web page on a website that
allows visitors to contact the organization or individual providing the
website.
Menus found in a website varies depending on the nature of the

organization or business.
3. The Content Area
This is where the main content of the web page is positioned. Content can be
in a number of different forms such as text, images, video and Flash movies.
Sound can also be inserted in a web page such as background music. Website
content is the information your visitors consume.
4. Sidebar
A sidebar is website region used to view information that is not part of the main
content of the page. A sidebar can include an opt-in, call to action, links to
other parts of the website, links to popular or recent blog posts, ads, social
media links, or a brief “About” paragraph for context.
Figure 2: http://www.arbor-restaurant.co.uk/
5. The Footer
A footer serves the same function as the header — it’s a region on a website
that’s constant from page to page — except a footer is at the bottom of a page,
rather than at the top. The following information may be included in the
footer: copyright information, contact details, a map, links, opt-ins, social
icons, a search box, and many more.
Figure 3: https://www.bentley.edu/
ACTIVITIES
Activity 1. Identify the parts of a website.

Write the name of each part inside the box.
1:____________________ 4:____________________
_ _
2:___________
_____________
3:____________________
_
Activity 2. Personal Website Design
Draw a simple design of your own personal website. The design should be able
to include the 5 essential parts of a website discussed in this module. Each
link included in the website menu should be designed/drawn separately. Use
short bond paper/s to draw your design. You may use any drawing or coloring
materials. The criteria are as follows:
Criteria 20 15 12 10
Parts of the All the One Two essential Three or
website essential essential parts of the more
parts of the part of the website is essential
website are website is missing. parts of the
present. missing. website are
missing.
Layout The web site The web The web The web
has an pages have pages have a pages are
outstandingly an appealing usable cluttered
appealing and usable layout, but looking or
and usable layout. All may appear confusing. It
layout. All essential boring. Many is often
essential elements are of the difficult to
elements are easy to find. essential locate
easy to find. elements are important
White space, easy to find. elements.
design
elements
and/or
alignments
are used to
arrange
content
effectively.
WRAP-UP
1. State the difference between a website and a web page.
2. What are the elements involved in designing a website?
3. Identify the principles included in designing a website.
VALUING
Why do you think there is a need for us to study basic web design principles
and elements?
Place your answer here:
POSTTEST
True or False: Write T if the sentence is correct; otherwise, write F on the

space before each item.
1. In website designing, shapes can be used to denote boundary.

2. CSS stands for Cascading Style Sheets.
3. The banner is where the privacy policy, terms of use, sitemap,
social media icons and links to other important pages on the
website are located.
4. A website has portable design when the site is accessible at a
variety of speeds.
5. White spaces should not be used deliberately when designing a
website.
6. The home page is the first page of your website.
7. The website should be regularly updated and tested so that
problems can be easily resolved.
8. A website is a collection of web pages coded in HTML that are
linked to each other and to pages on other sites.
9. WYSIWYG stands for What You Sense Is What You Get.
10. HTML stands for Hypertext Markup Language.

TVL Empowerment Technologies Q3 M16

Uploaded by

Copyright:

Available Formats

TVL Empowerment Technologies Q3 M16

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TVL Empowerment Technologies Q3 M16

Uploaded by

Copyright:

Available Formats

Empowerment

TECHNICAL VOCATIONAL LIVELIHOOD

At the end of the lesson, the learner should be able to:

1. HTML stands for Hypertext Markup Language.

7. White spaces should not be used deliberately when designing a

Our last lesson was focused on Google Slide as an alternative online

Basic Web Design Principles and Elements

Web Design Elements

Web Design Principles

2. The Menu System

Common menu found in a website:

Menus found in a website varies depending on the nature of the

Activity 1. Identify the parts of a website.

1. State the difference between a website and a web page.

2. What are the elements involved in designing a website?

3. Identify the principles included in designing a website.

True or False: Write T if the sentence is correct; otherwise, write F on the

1. In website designing, shapes can be used to denote boundary.

You might also like