GREEN VALLEY COLLEGE FOUNDATION, INC.

Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1
GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

INTRODUCTION TO
THE WEB
Lesson 1
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

1.1 World Wide Web

Abbreviated as WWW or W3 but commonly known as the Web is a way of exchanging

information or data from one computer to another on the internet. Web is the networks of pages
consist of images, text, sound, and videos on the internet which can be viewed using browser
software.

World Wide Web was invented in 1989 by Tim Berners Lee at CERN and it was published
in 1992.

Evolution of the Web

1. Web 1.0
The first iteration of the web represents the web 1.0 or Static Website, which, according to
Berners-Lee, is the “read-only web.” In this Version it will only allowed the user to search for the
information and read only from the internet, the user can’t contribute or alter anything.

Figure 1: Web 1.0

2. Web 2.0
We are now seeing the infancy of web 2.0, or the “read-write” web as Berners-Lee
described it. It’s the ability to contribute content and interact with other web users. This vesion was
upgraded from static to dynamica and it emphasize user-generated content, convenient to use,
participatory culture and interoperability for end users.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

It also used to describe a diverse of web sites and application that allow every user to
create, co-create and share online information, content or material that they have created. There
are number of different types of of web 2.0 application including wikis, blogs, social networks,
folksonomies, podcasting & content hosting services.

Figure 2: Web 2.0

3. Web 3.0
In Web 3.0 or third generation, all application on the web or mobile will be upgraded with
more features that will focus on using a machine-based understanding of data to provide a data-
driven and semantic web. The ultimate goal of Web 3.0 is to create more intelligent, connected and
open websites.

Below are 5 main features of Web 3.0

1. Semantic Web
The next advancement of Web involves the Semantic Web. It improves the
technologies in order to generate, connect and share online content through
search and analysis to understand the meaning of each word rather than focusing
on keywords or numbers based on its ability.
2. Artificial Intelligence
With the help of AI in Web 3.0, computers will be able to recognized the
information like humans do in order to provide a faster, relevant, and better results.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

3. Connectivity
Is another key in Web 3.0, it aims to enhance user experience and involves it to
another level of connectivity that leverages the usability of all the available
information.
4. Ubiquity
The same content will be accessible using multiple applications. Every service and
device will be available, can be used, and accessed everywhere.
5. 3D Graphics
Three dimensional design has spread in several fields and extensively used in
websites and services in Web 3.0. Museum guides, computer games, geospatial
context, etc. are examples of 3 dimensional graphics.

1.2 Internet

An architectural system that has transformed communications and methods of commerce

by allowing various computer networks around the world to interconnect. It is a network of
networks that consists of private, public, academic, business, and government networks of local to
global scope, linked by a broad array of electronic, wireless, and optical networking technologies.
The Internet carries a vast range of information resources and services, such as the inter-
linked hypertext documents and application of World Wide Web (WWW), Electronic mail,
Telephony, and File sharing.

The Internet emerged in the United States in the 1970s but did not become visible to the
general public until the early 1990s. By 2020, several billion people, or more than half of the world’s
population, were estimated to have access to the Internet.
Uses of Internet

Internet is a virtual networking medium that can be connected and used on a variety of
devices these days. It enables the users to send, receive, collect, store, update, delete, and many
other operations of the data across the world. Internet usage is expanding its boundaries every
day, as the technological growth is huge. A few of the major uses of Internet are e-commerce, e-
learning, knowledge sharing, social connectivity, variety of media, file transfer, communication,
etc..

Why we use the Internet?

 Seek information on anything across the globe on a real-time basis.
 Communicate, collaborate with others.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

 Telecommute to office or work from home.

 Do transactions with business entities.
 Down load files from a remote.
 Get educated and entertained.
 Carry out social.
 Do group activities.
 Collect operational data from remote equipment (stationary as well as moving).
 Process data while it is streamed to the central server.
 Get real-time data on the surrounding devices, systems, weather to automate activities.
 Design a decision-taking system as against the decision support system.
 Connect people, stakeholders, machines and everything.

Differences between the World Wide Web and Internet

The Internet is a global network of networks while the Web, also referred formally as World
Wide Web (www) is collection of information which is accessed via the Internet. Another way to
look at this difference is; the Internet is infrastructure while the Web is service on top of that
infrastructure. Alternatively, the Internet can be viewed as a big book-store while the Web can be
viewed as collection of books on that store. At a high level, we can even think of the Internet as
hardware and the Web as software.

1.3 Structure of the Web

The basic idea behind the World-Wide Web is based on a client server application and
hypertext documents as illustrated in the figure below. The model is simplified in that it only
contains an element that exists within the World-Wide Web concept. Later the model will be
expanded to a generic resource accessing model.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

Figure 3.0: Structure of the Web

Client
The client is the user's interface to the Internet. Whatever type of service requested this
interface stays the same, so users do not need to understand the differences between the many
different accesses schemes in common use on the Internet. This principle is the same as is seen
from other popular applications such as Microsoft Windows, Macintosh etc. where the user is
always presented to the same GUI interface.

Uniform Resource Identifier URI

The user initiates a request by specifying a Uniform Resource Identifier or a "hyperlink".
This link can specify any accessible information or resource on the Internet as long as it can be
uniquely identified as an object. The word "Web" refers to the combination of accessible objects
and the links pointing to them throughout the Internet.

The Server
The server is responsible for handling the request sent from the client. This can either be a
local accessible resource or the server can request the resource from another server in which case
the first server temporarily turns into a client.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

Hypertext Transport Protocol HTTP

The client sends of the user request to a WWW server using the Hypertext Transfer
Protocol (HTTP). This is a typical client-server application based on a stateless connection
between the client requesting the URI and the server handling the request.

Hypertext Markup Language HTML

On a successful request, a data object is returned from the server to the client. The object
is written in the Hypertext Markup Language (HTML) which is a hypertext language with the
possibility of containing hyperlinks that the user can follow.

World Wide Web Components

Structural Component Semantic Components

Client / Browsers Hyper Text Transfer Protocol (HTTP)
Servers Hyper Text Markup Language (HTML)
Caches Extensible Markup Language (XML)
Internet Uniform Resource Identifiers (URIs)
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

1.4 Web Technologies

Since computers can’t communicate with each other the way people do, they require
codes instead. Web technologies are the markup languages and multimedia packages computers
use to communicate.

In the IT world, the internet is an essential platform, whether it’s for developing or for
consumer use. When developing a website, typically three main languages come into play. These
languages are JavaScript, CSS, and HTML. HTML is the backbone of most webpages. Essentially,
it is used to create the structure of how a specific website would look like, from the headings, to the
paragraphs, the body, links, and even images.

9 Web Technologies Today

 Browsers
A browser is an application program that provides a way to look at and interact
with all the information on the World Wide Web. This includes Web pages, videos and
images. The word "browser" originated prior to the Web as a generic term for user
interfaces that let you browse (navigate through and read) text files online. Many people
will use web browsers today for access to the internet and is seen almost as a necessity in
how many navigate their daily life.

Browsers request information and then they show us in the way we can
understand. Think of them as the interpreters of the web. Here are the most popular ones:

 Google Chrome – Currently, the most popular browser brought to the user by
Google
 Safari – Apple’s web browser
 Firefox – Open-source browser supported by the Mozilla Foundation
 Internet Explorer – Microsoft’s browser

 HTML & CSS

With the HTML, the web browsers know what to show once they receive the
request. If you want to better understand how HTML works, you also need to know what
CSS is.
CSS stands for Cascading Style Sheets and it describes how HTML elements are
to be displayed on the screen. With this, you can create CSS text effects, page
transitions, image hover effects, and more.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

 Web development Frameworks

Web development frameworks are a starting point of items that a developer can
use to avoid doing the simple or mundane tasks, and instead get right to work. Below are
some examples of Web Development Frameworks:
 Angular is one of the latest web technologies designed specifically for developing
dynamic web applications. With this framework, you can easily create front-end
based applications without needing to use other frameworks or plugins.

Figure 4.0: Angular

 Ruby on Rails is a server-side website technology that makes app development

much easier and faster. The thing that really sets this framework apart is the
reusability of the code as well as some other cool features that will help you get
the job done in no time.

Figure 5.0: Ruby on Rails

 Meteor JS is written in Node.js and it makes it possible for you to create real-
time web applications for different platforms. The framework for creating simple
websites for personal use really stands out with Meteor JS. This is an open-source
isomorphic JavaScript web framework which also means that the webpage loading
time is significantly shorter. JavaScript stack also makes it possible to get the
same results with fewer lines of code than usually.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

Figure 6.0: Meteor JS

 Laravel is a PHP development framework ideal for small websites. It comes with a
number of useful features including the MVC support, object-oriented libraries,
Artisan, authorization technique, database migration, etc. Currently, it is one of the
most community-supported and community-developed frameworks, and given that
PHP has one of the largest communities out there, Laravel is a great tool powering
both small websites and large-scale B2B web apps managing millions of
transactions daily.

Figure 6.0: Laravel

 Programming Languages
As explained in Web Technology that since computers doesn’t use languages that
are anything like human languages, they need a different way to communicate.
Programming language is a formal language comprising a set of instructions that produce
various kinds of output. It is also used in computer programming to implement algorithms.
Most programming languages consist of instructions for computers.

Here are some of popular programming language:

 Javascript – used by all web browsers, Meteor, and lots of other frameworks
 Python – used by the Django framework as well as in the majority of mathematical
calculations
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

 Ruby – used by the Ruby on Rails framework

 PHP – used by WordPress to create those WYSIWYG editors that everyone is
using now. It’s also used by Facebook, Wikipedia, and other major sites
 Java – used by Android and a lot of desktop applications.

 Protocol
In computer science, a set of rules or procedures for transmitting data between
electronic devices, such as computers. In order for computers to exchange information,
there must be a preexisting agreement as to how the information will be structured and
how each side will send and receive it.

 Hypertext Transfer Protocol (HTTP)

With this protocol, each website can get to the browser. The protocol
requests the website from Google’s server and then receives a response with the
HTML, CSS, and JavaScript of the website.

 Data Distributed Protocol (DDP)

Uses websockets to create a consistent connection between the client
and the server. As a result of that, you get website updates in real-time without
having to refresh the browser.

 REST
Used mostly for API’s, this protocol has standard methods like GET,
POST, and PUT that let information be exchanged between applications.
 API
An API (application programming interface) allows other developers to use some
of the app’s functionality without sharing the code. The endpoints are exposed by the
developers while the API can control access with an API key. Examples of well-made APIs
are those created by Facebook, Twitter, and Google for their web services.

 Data Formats
Data appears in different sizes and shapes, it can be numerical data, text,
multimedia, research data, or a few other types of data. The data format is said to be a
kind of format which is used for coding the data. The data is coded in different ways. It is
being coded, so that it can be read, recognized, and used by the different applications and
programs.

 JSON – JavaScript Object Notation is syntax for storing and exchanging data (just
like XML). It is currently becoming the most popular data format out there.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

 XML – Predominantly used by Microsoft systems, it used to be the most popular

data format
 CSV – is data formatted by commas; for example Excel data

 Client (or Client-side)

Each user of an application is called a client. Clients can be computers, mobile
devices, tablets etc. Usually, multiple clients are interacting with the same app stored on a
server.

 Server (or Server-side)

The application code is usually stored on the server. The clients make requests to
the servers. The servers then respond to those requests after gathering the requested
information.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

Summary
In this lesson, we have discussed about the World Wide Web commonly known as the
Web, the leading information retrieval service of the Internet (the worldwide computer network).
The Web gives users access to a vast array of documents that are connected to each other by
means of hypertext or hypermedia links. The evolution of the web: the first iteration of the web
represents the web 1.0 or Static Website, the web 2.0 or the “read-write” web and lastly the web
3.0 where all application on the web or mobile will be upgraded with more features. Internet, its
uses and why we use it, the differences between the web and internet.

Also we have learned about the structure of the Web where the basic idea behind the W3
is based on a client server application and hypertext documents. Client, Uniform Resource
Identifier URI, Server, Hypertext Transport Protocol HTTP, and Hypertext Markup Language
HTML.

Lastly the web technologies that involves the use of hypertext markup language (HTML)
and cascading style sheets (CSS) and 9 web technologies today: Browsers, HTML and CSS, Web
development Frameworks, Programming Languages, Protocol, Application Programming Interface
API, Data Formats, Client, and Server.
 GREEN VALLEY COLLEGE FOUNDATION, INC. Document Code:
Km.2, Bo.2, Gensan Drive., Koronadal City South Cotabato FM-DEA-031
INSTRUCTIONAL MATERIALS Issue No: 01 Revision No: 00
Effectivity Date: June 4, 2020
SCHOOL OF ENGINEERING AND TECHNOLOGY Page No: Page 1 of 1

References
 Jen Simmons, Inventing the future of the Web, https://www.linkedin.com/learning/html-
essential-training-4/what-is-html?autoplay=true&trk=learning-course_table-of-
contents_video&upsellOrderOrigin=default_guest_learning

 Rasan Samarasinghe, Software Engineer at 99X Technology, Introduction to Web

Technologies, https://www.slideshare.net/rasansamarasinghe/introduction-to-web-
technologies?qid=9abd2106-8f86-45a2-aae0-8f8ef3f277d9&v=&b=&from_search=3

 CERN, A brief history of the World Wide Web,

https://www.youtube.com/watch?v=sSqZ_hJu9zA

 Henrik Frystyk, July 1994, The World Wide Web,

https://www.w3.org/People/Frystyk/thesis/WWW.html

 Krishnan, Prof. M.G., and Prof. Vikram Raj Urs. “Web Technologies.” PDF
Drive, 2014, www.pdfdrive.com/web-technologies-e39686810.html.