UNIT I.

AN OVERVIEW OF
THE WEB

Prepared by: Joana Marie C. Tolentino

 UNIT TOPICS

01 02 03

THE INTERNET AND TYPES OF WEBSITES WEB DEVELOPMENT

THE WORLD WIDE LIFE CYCLE
WEB

04 05 06

WEB DEVELOPMENT TOOLS NEEDED FOR

LANGUAGES CREATING WEB
PAGES
 Intended Learning Outcomes

1. 2. 3 4 5
define the websites explain the role of list common tools
list and define key enumerate the
and explain the HTML in Structuring used for web
terms such as Internet, phases of the Web
purpose and content and CSS in development (e.g.,
World Wide Web, Web Development Life
characteristics of each styling web pages; code editors, browsers,
Browsers, URLs, Web Cycle (WDLC);
type of website; and and validation tools)
Servers, and Internet
Service Providers;
 The Internet and the
World Wide Web (WWW)
What is the Internet?
• The Internet is a massive network of
networks, a networking infrastructure.
It connects millions of computers
together globally, forming a network
in which any computer can
communicate with other computers
as long as they are both connected
to the Internet. Information can travel
via the internet via a variety of
languages called Protocols.
The Internet
• The Internet is a global network that
connects billions of devices and
allows for the seamless exchange of
information.

• In 1969, the first message was

transmitted over ARPANET, a
landmark moment that laid the
foundation for today's global network.
The Role of Internet Service
Providers (ISP)
Internet Service Providers (ISPs) are critical entities that provide
users access to the Internet. They maintain a permanent connection
to the Internet backbone—a central, high-capacity network
infrastructure that connects various regional networks.
Here are several major ISPs offer diverse broadband solutions:

PLDT

GLOBE

SKY BROADBAND

EASTERN TELECOM

CONVERGE ICT
What is the World
Wide Web?
• The World Wide Web or simply Web, is a
way of accessing information over the
medium of the internet. It is an
information-sharing model that is built on
top of the internet. The Web uses the HTTP
protocol, only one of the languages spoken
over the internet, to transmit data.
• Web services, which use HTTP allow
applications to communicate in order to
exchange business logic and use the web
to share information.
The Internet and the
World Wide Web
• Many people use the terms Internet and
World Wide Web interchangeably, but in
fact, the two terms are not synonymous.
• The Internet and the Web are two
separated but related things.
Types of Websites
Categories of Websites
Categories of Websites
HERE ARE SOME COMMON TYPES OF
WEBSITES
Personal Websites
Business Websites
E-commerce Websites
Educational Websites
Portfolio Websites
Blog Websites
News and Media Websites
Community and Forum Websites
Nonprofit Websites
Entertainment Websites
BUILDING A WEB PAGE
Web Browsers
•A Web Browser or simply Browser is a software
application used to locate, retrieve and display
content on the World Wide Web, including web
pages, images, videos and other files.
•As a client/server model, the browser is the client
that runs on a computer and contacts the web
server to request for information. The web server
sends the information back to the browser which
displays the results on the computer or other
internet enabled device that supports a browser.
Popular Web Browsers

• MOZILLA FIREFOX
• GOOGLE CHROME
• OPERA BROWSER
• MICROSOFT EDGE
• SAFARI BROWSER
• MAXTHON BROWSER
Uniform Resource Locator
•A Uniform Resource Locator (URL) is the address used
to access a specific resource on the internet. It acts as a
reference to a web page, file, or service, guiding users and
web browsers to the desired location.

A URL is composed of several components:

PROTOCOL DOMAIN NAME PATH

QUERY STRING FRAGMENT IDENTIFIER

Protocol
Specifies the method used to access the resource.
Common protocols include http:// and https:// (for secure
connections).
For example, https:// ensures data is encrypted for secure
communication.
Domain Name:
Indicates the server's address where the resource is hosted. It often
includes the website's name and a domain suffix (e.g., .com, .org,
.edu).
For instance, www.google.com is a domain name.
Domain Extensions
.com – Commercial Site

.gov – Government Site

.edu – Educational Institution Site

.net – Network Site

.org – Organizational Site

.biz – Business Site

.mil – Military Site

Path
Specifies the exact location of the resource within the
server. It often includes directories and file names.

For example, /about-us points to a specific page on the

website.
Query String
Used to pass additional information or parameters to the
server, often for search queries or dynamic content.
It follows a ? and consists of key-value pairs, like
?search=example.
Fragment Identifier
Refers to a specific section within a web page, usually
indicated by a #.
For example, #section2 jumps to a particular part of the
page.
https://www.example.com/products?category=books#bestsellers
The Role of Internet Service
Providers (ISP)
Internet Service Providers (ISPs) are critical entities that provide
users access to the Internet. They maintain a permanent connection
to the Internet backbone—a central, high-capacity network
infrastructure that connects various regional networks.
Here are several major ISPs offer diverse broadband solutions:

PLDT

GLOBE

SKY BROADBAND

EASTERN TELECOM

CONVERGE ICT
Web Servers
Web Servers are specialized computers that store and serve web pages
to users upon request. Each server is identified by an IP address and
often a domain name (e.g., Google.com).
Web Development
Life Cycle
Web Development Life
Cycle
The Web Development Life Cycle is a systematic process used
to develop web pages, ensuring they meet user needs and
function effectively.

PLANNING ANALYSIS DESIGN TESTING

IMPLEMENTATION PUBLISHING MAINTENANCE

Web Development Life Cycle
The Web Development Life Cycle is a
PLANNING systematic process used to develop web
pages, ensuring they meet user needs and
ANALYSIS
function effectively.
DESIGN

TESTING

IMPLEMENTATION

PUBLISHING

MAINTENANCE
Web Development
Languages
Hypertext Markup Language
Hypertext Markup Language (HTML) is the
standard markup language for creating web
pages and web applications.
Cascading Style Sheets
Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation of a
document written in a markup language like HTML.
How can we apply CSS to
a Web Page?
•Inline CSS
•Internal CSS
•External CSS
•CSS Frameworks
Inline CSS
•Inline CSS is used for applying style to a particular HTML Tag.
•The style attribute is used to style a particular HTML Tag.
•Least recommended styling method because of the difficulty
it brings in managing larger websites.
•Useful for testing and previewing changes
Internal CSS
•Inline CSS is used for applying style to a particular HTML Tag.
•The style attribute is used to style a particular HTML Tag.
•Least recommended styling method because of the difficulty
it brings in managing larger websites.
•Useful for testing and previewing changes
 Tools Needed for
Creating Web Pages
Text / Source Code Editor
•A Text Editor is a type of computer program that edits
plain text. Microsoft Notepad is readily available in all
devices running Windows Operating Systems.
•A Source Code Editor is a text editor program designed
specifically for editing source code of computer programs
by programmers. Sublime Text and Notepad++ are some
of the top source code editors available for web
development.
Other tools
• Code Editors: Tools like Visual Studio Code, Sublime
Text, or Atom provide environments for writing and
editing code, often with features like syntax
highlighting and code completion.
• Web Browsers: Essential for testing and viewing web
pages during development. Tools like Chrome and
Firefox also offer developer tools for debugging and
analyzing web performance.
Other tools
• Version Control Systems (e.g., Git): Track changes in
code, manage versions, and collaborate on projects,
ensuring smooth teamwork and project management.
• Graphic Design Tools (e.g., Adobe Photoshop, Canva):
Help in creating visual elements like logos, images, and
layouts for web pages.
• Validation Tools (e.g., W3C Validator): Check code for
adherence to web standards, ensuring compatibility
and accessibility.
thank you