Introduction

to
1 Webpage Design
M.N.B.M.M

M.N.M.M
What
2
is the
difference between
webpage, website,
web server, and
search engine?
M.N.B.M.M

M.N.M.M
A web page is a
3

document that is
suitable for the
World Wide Web and
web browsers.
M.N.B.M.M
4 WEB PAGE
A document which can be
displayed in a web browser such
as Firefox, Google Chrome,
Microsoft Internet Explorer or
Edge, or Apple's Safari. These are
also often called "web pages" or
just "pages."
M.N.B.M.M

M.N.M.M
5 A WEBSITE, or simply a site, is
a collection of related
web pages, including
multimedia content, typically
identified with a common
domain name, and published on
at least one web server.
M.N.B.M.M

M.N.M.M
6  web server
A computer that hosts a website on
the Internet. "Hosting" means that
all the web pages and their
supporting files are available on that
computer. The web server will send
any web page from the website it is
hosting to any user's browser, per
user request.
M.N.B.M.M

M.N.M.M
7
 search engine
A website that helps you find
other web pages, such as
Google, Bing, or Yahoo.
InternetExplorer, Edge,
Safari, Firefox, or
Chrome)
M.N.B.M.M

M.N.M.M
8  Web pages, which are the
building blocks of websites, are
documents, typically composed in
plain text interspersed with
formatting instructions of
Hypertext Markup Language (HTML
, XHTML). They may incorporate
elements from other websites with
suitable markup anchors.
M.N.B.M.M

M.N.M.M
9  Web pages are accessed and
transported with the
Hypertext Transfer Protocol (HTTP),
which may optionally employ
encryption (HTTP Secure, HTTPS) to
provide security and privacy for the
user. The user's application, often a
web browser, renders the page content
according to its HTML markup
instructions onto a display terminal.
M.N.B.M.M

M.N.M.M
 History

10The World Wide Web (WWW) was created in 1990

by the British CERN physicist Tim Berners-Lee. On
30 April 1993, CERN announced that the World
Wide Web would be free to use for anyone. Before
the introduction of HTML and HTTP, other protocols
such as File Transfer Protocol and the
gopher protocol were used to retrieve individual
files from a server. These protocols offer a simple
directory structure which the user navigates and
chooses files to download. Documents were most
often presented as plain text files without
formatting, or were encoded in word processor
M.N.B.M.M

M.N.M.M
11
Two types of Website:

 1. Static
 2. Dynamic

M.N.B.M.M

M.N.M.M
12 Two types of Website:
 A static website is one that has web pages stored on
the server in the format that is sent to a client web
browser. It is primarily coded in
Hypertext Markup Language (HTML);
Cascading Style Sheets (CSS) are used to control
appearance beyond basic HTML. Images are commonly
used to effect the desired appearance and as part of
the main content. Audio or video might also be
considered "static" content if it plays automatically or
is generally non-interactive. This type of website
usually displays the same information to all visitors.
M.N.B.M.M

M.N.M.M
13 Two types of Website:
 A dynamic website is one that changes or
customizes itself frequently and automatically. Server-
side dynamic pages are generated "on the fly" by
computer code that produces the HTML (CSS are
responsible for appearance and thus, are static files).
There are a wide range of software systems, such as
CGI, Java Servlets and Java Server Pages (JSP),
Active Server Pages and ColdFusion (CFML) that are
available to generate
dynamic web systems and dynamic sites. Various
web application frameworks and
web template systems are available for general-use
programming languages like Perl, PHP, Python and
M.N.B.M.M

M.N.M.M
 Why do people
14

put up websites?
Importance of
website?
M.N.B.M.M
15 Why do people put up websites?
1.To do business and trade
2.To share personal interests and
entertain people
3.To send out information and push
advocacies
4.To create communities
5.To search information
6.To create online school and upload a
tutorial
M.N.B.M.M

M.N.M.M
16

 THE TOP 10 MOST

IMPORTANT ELEMENTS
OF A WEBSITE DESIGN

M.N.B.M.M

M.N.M.M
17
1. Navigation
 The website design should be
easy to navigate and the menu
items should easily accessible
from any page. The viewer should
always know exactly where they are
on the website and have easy
access to where they would like to
M.N.B.M.M

M.N.M.M
18
2. Visual Design
 People are visually oriented creatures, and
utilizing great graphics is a good way to make
your website more appealing. Your website has
about 1/10th of a second to impress your visitor -
and potential customer - and let them know that
your website - and business (by proxy) - is
trustworthy and professional. However, it's
important not to go overboard with too much.
Scrolling text, animation, and flash intros should
be used sparingly in your web design and only to
emphasize a point for maximum effect.
M.N.B.M.M

M.N.M.M
 19
3. Content
 This is the backbone of your website. Not
only does your content play a major role in your
search engine placement, it is the reason most
visitors are seeking from your website in the
first place. Your website text should be
informative, easy to read, and concise.
Well thought out web content and copy will do
more than anything else to make your website
design engaging, effective and popular.
M.N.B.M.M

M.N.M.M
 20 4. Web Friendly
 No matter how informative, beautiful, and easy to
use your website design is, it's useless unless it's
web-friendly. It is important that your web designers
know the keys to making your website work on
all the major browsers, and that they utilize meta
tags, alt tags, are fully versed in
SEO (Search Engine Optimization). Many factors
effect your search engine placement and visual
appearance of your site, so make sure your web
designers know their stuff.
M.N.B.M.M

M.N.M.M
 21
5. Interaction
 A truly effective website design engages your
visitors immediately and continues to hold
their attention through EVERY page, as
well as influences them to contact you.
This is called 'conversion', and is probably
your website's ultimate goal. Again, there is a
fine line between ʻinteractionʼ and
ʻannoyanceʼ, so the level of interac- tion
should never outweigh the benefit.
M.N.B.M.M

M.N.M.M
226. Information
Accessibility
 Not all visitors to your website are interested in, or have
the time to peruse the entire site. They may need to
access only a phone number or address, or just a
certain bit of info. For this reason itʼs important to
place key information in plain site, in an area thatʼs easily
accessible. Weʼve all had the experience of not being
able to locate some needed information on a website,
and the result is always a frustrated visitor. The
experience is annoying at best, and a disgruntled visitor
won't stay on your site very long and is unlikely not to
return, much less do business with you.
M.N.B.M.M

M.N.M.M
 237. Intuitiveness
 A great website anticipates what your visitor is thinking
and caters directly to their needs, and has
elements arranged in a way that makes sense. If a
visitor is searching for one of your products or services
on a search engine or directory where your site is
listed, it's important that your website have a landing
page that is directly relevant to what they searched for
rather than forcing them to filter through all of your
information.
M.N.B.M.M

M.N.M.M
 8. Branding
24

 Your website should be a direct reflection of

your business and your brand. Your visitor
should immediately make a visual connection
between your logo, print material, and
brick-and-mortar location. A website that
does this not only contributes to the
memorability of your branding, but adds a
level of credibility and enhanced image of that of
your overall business.
M.N.B.M.M

M.N.M.M
 9. Turnaround Time
25

 The number one complaint of website design

customers is the time it takes to get the site
up and running. Unfortunately, a firm that
takes unusually long to complete your website is
par for the course. The longer it takes to
complete the website, the more business - and
value - you lose. A website that isnʼt on the web
isnʼt and working properly isn't going to bring you
any business!
M.N.B.M.M

M.N.M.M
2610. Conversion
 Your website can be the most important client
generator your business can have, and must place
the primary emphasis on bringing in new clients
and making additional services available to
existing clients through increased awareness of
all the services you offer. Providing them with
the tools they need to do business with you in an
easy and enjoyable way will increase your website
conversion and bring you the kind of success you
seek. M.N.B.M.M

M.N.M.M
27

5 Parts of a Website
and
their Design Trends

M.N.B.M.M

M.N.M.M
28 1. Header/Banner
 The header or banner is located on top
of a website. It includes the logo of the
company, the publisher, or owner of the
website. This automatically informs
website visitors what the website is
about. Websites that offer products and
services usually have banners that
feature their latest offers or even the
current news about their company.
M.N.B.M.M

M.N.M.M
29 1. Header/Banner
TRENDS
 Logos – are always in no matter how header design
innovates.
 Page-sized images – are trending in web design,
particularly in banners. Images make a huge impact in user
engagement, especially if the images are interesting and
visually appealing.
 Videos – are now utilised on headers. They usually contain
the introduction or summary of the commodities that the
company is offering.
 User interface elements – one good example of this is
M.N.B.M.M

navigation. For instance, a banner shows a series of images

M.N.M.M
30 2. Navigation Bar
 The navigation bar/menu tab allows
the visitors to check other pages of
the website. It appears in all pages
within a website for more
convenient navigation. Navigation
bars are usually placed just below
the banner/header for convenient
access. M.N.B.M.M

M.N.M.M
31 2. Navigation Bar
 Sidebar – this refers to the placement of the
primary navigation and not the usual content of a
regular sidebar. Usually they put the navigation
on the left side.
 Navicon – this is common in Facebook mobile
app. The navigation is practically hidden until you
tap the icon similar to this:
M.N.B.M.M

M.N.M.M
32 2. Navigation Bar
Hidden navigation allows users to view the entire page.
 Full screen navigation – this is similar to that of Navicon. The only
difference is that when you click the button to show the tabs, it
will go full screen instead of appearing on the side.
 Super-sized navigation – this navigation trend allows users to see
a preview of what they should expect in a certain tab. For
example, the website of a clothing brand has a tab for “Tops.” This
tab can still be narrowed down to blouses, shirts, tank tops, etc.
This basically allows users to explore especially because the
categories have submenus.
M.N.B.M.M

M.N.M.M
33 3. Sidebar
sidebars are still relevant because of these
advantages:
 Content marketing – you will be able to
market other contents of your website.
 Promotion – you can promote similar
websites or companies in the sidebar.
 Navigation – although this is not a primary
navigation, it will still allow users to navigate
other parts of the website through links.
M.N.B.M.M

M.N.M.M
 34
3. Sidebar
Trends:
Sidebars are basically standard. The trend may appear on the content of the
side bar. What trendy things should we put on the sidebar? Here some of
them:
 Social media buttons – these buttons serve as links to the social media
profiles of the website owner or the company.
 Widgets – these widgets could be in a form of feeds (usually social media),
polls, contact us forms, subscription boxes, etc.
 Archives – this content allows users to read your previous posts or entries.
M.N.B.M.M

M.N.M.M
35 4. Content
The quality of a website’s content
usually dictates the value of your
website. You can find different types
of content in a website. They could
come in a form of text, image, audio,
video, or a combination of those.

M.N.B.M.M

M.N.M.M
36
4. Content
Trends:
 Infographics – these are images, diagrams, and charts
that represent certain information.
 Video streaming – this engages users because videos
are easy to understand.
 Image collections – these are common in online
shops, real estate websites, and travel blogs.
M.N.B.M.M

M.N.M.M
 37
5. Footer
They say the footer is as important as
the header. Of course, the users will
reach the footer if they were engaged
with the website’s content. And the
purpose of engaging them is to make
sure they convert into clients.

M.N.B.M.M

M.N.M.M
38 4. Footer
Trends:
Social media buttons
About us link Address
Contact us link Phone number
Terms of service E-mail address
Privacy policy Other offers
Sitemap Related links/posts
Subscription boxes
M.N.B.M.M

M.N.M.M
39 Anatomy of a URL
 URL stands for UNIFORM RESOURCE
LOCATOR. It specifies the internet address of
a file stored on a host computer connected
to the internet. Every file in the internet has
a UNIQUE URL. Web programs use the URL to
retrieve the file from the host computer and
the directory in which it resides. URL’s are
translated into numeric addresses using the
Internet DOMAIN NAME SYSTEM (DNS).
M.N.B.M.M
40 Anatomy of a URL
 This is the format of a URL:
 PROTOCOL://HOST/PATH/FILENAME
Example: http:www.deped.gov.ph/index.html
PROTOCOL: http
HOST COMPUTER NAME: www
SECOND-LEVEL DOMAIN NAME: deped
TOP-LEVEL DOMAIN NAME: gov
COUNTRY-LEVEL DOMAIN NAME: ph
FILENAME: index.html
M.N.B.M.M
COMMON INTERNET DOMAINS
41

 A domain name is an identification string that

defines a realm of administrative autonomy,
authority or control within the Internet. Domain
names are used in various networking contexts and
for application-specific naming and addressing
purposes. In general, a domain name identifies a
network domain, or it represents an
Internet Protocol (IP) resource, such as a personal
computer used to access the Internet, a server
computer hosting a web site, or the web site itself
or any other service communicated via the Internet.
M.N.B.M.M
 COMMON
42
INTERNET DOMAINS
DOMAIN WHEN IS IT USED? AN EXAMPLE
.com - commercial - Youtube
Companies that are – youtube.com
trying to make money
- CSU – csu.edu
.edu -education - CNHS – cnhs.edu
- High school, colleges &
Universities
.gov - Government, or - Department of Education –
government-related deped.gov
entities

.org - organization - Consortium.org

Special (usually nonprofit)
Net - network INQ7.net
Internet service
Provider - Philippines - .ph
- Canada- .ca
.xx - Australia- .au
- Country code - France- .fr
.mil U.S. military The .mil TLD is limited to use by
M.N.B.M.M United States Department of the United States military.
Defense
43
LESSON 2

Designing and
Constructing
Web Pages
M.N.B.M.M
44
 One of the mistakes that new Web
developers commit is to start building a
Web page without prior PLANNING. Start
answering the following questions:
 1. Why are you building a Web site?
 2. What information do you want to
share over the internet?
 3. Who are your intended
audience/client?
 4. What is the theme of your site?
M.N.B.M.M
45 Methodology steps in developing a
Web site:
1. Identifying a Web Project
2. Developing Site Content
3. Determining Your Audience
4. Designing the Site and Navigation
5. Developing Web-Media Elements
6. Constructing a Web site and Web pages
7. Deploying a Web site on the WWW
M.N.B.M.M
 1. Identifying a Web Project
46

Why are you building a Web Site?

 Advertise products
 School web site (let the world know about it)
 Share knowledge and expertise (Blog)
What information do you want to share over
the internet?
 Your School web site, Batch web site, Personal web
site, Favorite subject web site, Student
Organization web
M.N.B.M.M
 2. Developing Site Content
47

What specific information is needed in order

to accomplish your site goals? Information
that goes into a web site must be well-
selected, accurate, and complete.
Example: Building a School Site (look into the
school archives, get info from the library,
school history, mission and vision, past
administrators, list of teachers, list of
courses/subjects, photos, logo, charts and
M.N.B.M.M

videos)
3. Determining Your Audience
48

Your intended readers or site visitors are your

audience. Try answering the following
questions related to building a School web
site:
1. What do parents want to know about a
school?
2. What information do new students need to
know about a school?
3. What is a student from other schools
M.N.B.M.M
 4. Designing the Site and Navigation
49

The purpose, content, and intended

audience of your site are your main
bases for determining the theme and
“LOOK and FEEL” of your site. Use the
same type/font style, size, background
color, position of logo and other
navigation tools such as menu items,
buttons and the like. (Formal, Hi-tech,
little cartoonish, and funny)
M.N.B.M.M
 4. Designing the Site and Navigation
50
Here are some design tips:
1. Rank site content according to its level of
importance to your target audience.
2. Determine if you will need additional media
(picture, sounds, illustrations) to support content.
3. Choose simple theme/template and repeat it on
all the pages of your sites. Do not use dark colors
as background.
4. Use only 2 to 3 styles of fonts for all the web
pages in the site.
M.N.B.M.M
 5. Developing Web-Media Elements
51

A webpage can contain a lot of things such as

text, pictures, hyperlink, forms, sound, and
animations.
Two general types of web elements:
1. Media – are used to present information. Ex:
text, pictures, illustrations, graphics, sound,
animations and video clips
2. Links – add interactivity to the page.
M.N.B.M.M
6.
52
Constructing a Web site and Web page
Web site – collection of web pages.
Web page – collection of web media elements.
Four (4) ways to develop your Web site:
1. Writing HTML tags
2. CSS codes
3. Java script codes
4. Using an HTML editor (notepad, Front Page,
Adobe Dreamweaver, Sublime)
M.N.B.M.M
6.
53
Constructing a Web site and Web page
HTML – Hypertext Mark-up language, markup
tags, which are used to specify how your web page
are to be displayed, can be written in Notepad.
CSS – Cascading Style Sheet, allows you to
layout your web page efficiently separating the
page’s contents from its design specifications.
JavaScipt – makes static HTML dynamic (interactive)
HTML Editor – can facilitate development by
allowing you to see exactly the how web page look
like “What you see is what you get”. M.N.B.M.M
 54
7. Deploying a Web site on the WWW
Complete the webpage and test the site. Check if all
text is displayed as you have planned them. Test to
make all other media elements load properly.
Now upload the site. You will need a web server in a
host computer to do it. Example: GeoCities (free web
hosting site)
Web server has two components:
1. A computer that is connected to the internet
2. A web server software that can manage the request
for information in browser.
M.N.B.M.M
55
LESSON 3

Starting HTML Coding

M.N.B.M.M
 56
The HTML Page
HTML – is a set of tags used to create a
Web page. HTML tags are used to format
the content you want to appear on your
webpage as well as to connect one page
to another hyperlinks.

M.N.B.M.M
 The HTML Page
57
My First HTML Code:
<HTML>
<HEAD>
<TITLE> ACTIVITY1 </TITLE>
</HEAD>
<BODY>
Welcome to my First Activity!!! <BR>
This is the body section of this HTML document.
<BR>
<B> This is the part of the body displayed in BOLD
style. </B>
</BODY> M.N.B.M.M
 The HTML Page
58
OUTPUT:
Head Section

Title Section

Body Section

• Tag <B> display text in

BOLD Style and stops
until it sees the tag </B>.

M.N.B.M.M
 The HTML Page
59
My First HTML Code:
What will you do?
1. Encode the HTML tags in NOTEPAD. (Start
Button/All Programs/Accessories/NOTEPAD)
2. Save the activity. Select FILENAME. Type .html at
the end of the name of the file. Example:
ACTIVITY1.html
3. Click SAVE. (Make sure to create a folder named
after you to organize the file, Folder name:
LASTNAME, FIRST NAME)
M.N.B.M.M
 60 The HTML Page
 Tags are paired. The Beginning tag and END Tag.
</> forward slash before the command.
 An HTML page is indicated with an <HTML>
</HTML> tag pair. It contains two sections the HEAD
and the BODY.
 The HEAD section is indicated by a <HEAD> tag
closed with the </HEAD> tag.
 You can set title of your page declaring it inside a
<TITLE> </TITLE> tag pair inside the HEAD section.
M.N.B.M.M