UNIT I.

AN OVERVIEW
OF THE WEB

Prepared by: Joana Marie C. Tolentino

 UNIT TOPICS
0 0 0
1 2 3
THE INTERNET AND TYPES OF WEB
THE WORLD WIDE WEBSITES DEVELOPMENT LIFE
WEB CYCLE

04 05 06

WEB TOOLS NEEDED

DEVELOPMENT FOR CREATING
LANGUAGES 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 phases of the Web
purpose and content and CSS in development (e.g.,
Internet, World Wide Development Life
characteristics of each styling web pages; code editors,
Web, Web Browsers, Cycle (WDLC);
type of website; and browsers, and
URLs, Web Servers,
validation tools)
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

PLANNING
systematic process used to develop web
pages, ensuring they meet user needs and
ANALYSIS function effectively.

DESIGN

TESTING

IMPLEMENTATIO
N
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