1

COURSE OVERVIEW
Course Code : WebDev 1
Course Title : Web Development 1
Course/Program : BS Information Technology
Major :
Year Level : First Year
Semester : 1st

Course Description : This course provides an overview of the Computing Industry and
Computing profession, including Research and Application in different fields; an
Appreciation of Computing in different fields such as Biology, Sociology, Environment
and Gaming; an Understanding of ACM Requirements; an Appreciation of the history of
computing; and knowledge of the key components of computer systems (Organization
and Architecture), Malware Computer Security, Internet and Internet protocols, HTML4/5
and CSS.

Course Outline (List of Major Topics)

Web works
Introduction to html
Paragraph, Heading and Text
HTML Links
HTML Images List and Tables
HTML Frames
HTML Forms
HTM Audio and Video
CSS
CSS Font and Text
Background, Color and Opacity
CSS Advanced

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 2

MODULE No. 1

WEB WORKS
An overview to Internet and how its works Aug 2020

Introduction
This lesson will discuss a short history of the origin of the internet, uses and application of
internet, and understand how internet work in general concepts. In this lesson also included
different part of URL; identify some Protocol used in the internet concepts such as Internet
Protocol (IP) and Transmission Control Protocol (TCP); and understand Hypertext transfer
Protocol in Web development.

Target Learning Outcome

 Explain the History of the Internet and Website.
 Describe the internet protocols work.
 Describe how client and server interacts to each other.
 Understand the use and purpose of URL. ““Websites promote you 24/7:
 Explain how HTP works. No employee will do that.”
 Appreciate the importance of WWW in everyday life

Topics to be discussed: ― Paul Cookson

1.1 The Internet
1.2 The Internet Protocols
1.3 The URL and Domain System
1.4 Hypertext Transfer Protocol

Sub topics:
 IP services

 Design Issue

 Type of Addresses

 Computer Network

 URL Syntax
Image source: https://www.networkworld.com/article/3449217/

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 3

Learning Management Tools

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 4

Introduction
to Key Facts
This part will define
some terminologies about
world wide web. Image Source: google.com

==================

Terms Definition

Computer Network - is a group of computers that use a set of common communication proto-
cols over digital interconnections for the purpose of sharing resources located
on or provided by the network nodes

Internet Protocol (IP) is the principal communications protocol in the Internet protocol suite for re-
laying datagrams across network boundaries. Its routing function ena-
bles internetworking, and essentially establishes the Internet.

Transmission Control TCP/IP stands for Transmission Control Protocol/Internet Protocol. TCP/
Protocol (TCP) IP is a set of standardized rules that allow computers to communicate on a
network such as the internet.

Uniform Resource colloquially termed a web address,[1] is a reference to a web resource that
Locator (URL) specifies its location on a computer network and a mechanism for retrieving it

Client Is a host playing the role of a requestor of services

Server is a host providing the requisite service

Internet is made up of thousands of computer networks that are connected

(networked) to each other. These connected computer networks are using the
communication method called TCP/IP.

File Transfer Protocol File Transfer Protocol (FTP) is a standard Internet protocol for transmitting
files between computers on the Internet over TCP/IP connections. FTP is a
client-server protocol where a client will ask for a file, and a local or remote
server will provide it

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 5

Learning Content

1.1 Internet
The Internet, also known as
"the Net," is a worldwide sys-
tem of computer networks. Or
technically it is a network of
networks in which if they
have permission the users at
any one computer can get in-
formation from any other
computer.

Source: https://www.slideshare.net/VeaCarino/short-timeline-history-of-internet

History of the Internet

The ARPANet, the predecessor of the Internet, was first deployed in 1969.
It was conceived by the Advanced Research Projects Agency (ARPA) of the
ARPANET—Advanced
U.S. government in 1969 and was first known as the ARPANet. The original Research Projects
aim was to create a network that would allow users of a research comput-
er at one university to "talk to" research computers at other universities. Agency Network

Today, the Internet is a public, cooperative and self-sustaining facility ac-

cessible to hundreds of millions of people worldwide.

In 1983, the ARPANet transitioned into using the TCP/IP open

networking protocol suite and in 1985 the National Science
Foundation Network (NSFN) designed the network to connect
university computer science departments around the country.

Communications over the Internet greatly improved in 1989

when the hypertext transfer protocol (HTTP) was created, giv-
ing different computer platforms the ability to connect to the
same Internet sites. In 1993, the Mosaic Web browser was cre-
ated.

The Internet has continued to grow and evolve over the years
of its existence. IPv6, for example, was designed to anticipate
enormous future expansion in the number of available IP ad-
dresses. In a related development, the IoT is the burgeoning
environment in which almost any entity or object can be pro-
vided with a unique identified (UID) and the ability to transfer Fig 1 Mosaic web browser
data automatically over the Internet.

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 6

HOW THE INTERNET WORKS

Physically, the Internet uses a portion of the total resources of the currently existing pub-
lic telecommunication networks. Technically, what distinguishes the Internet is its use of a set of proto-
cols called Transmission Control Protocol/Internet Protocol (TCP/IP). Two recent adaptations of Inter-
net technology, the intranet and the extranet, also make use of the TCP/IP protocol.

The Internet can be seen as having two major components: Network protocols and Hardware.

Network protocols Hardware

The protocols, such as the TCP/IP suite, present As the second major component of the Internet, it
sets of rules that devices must follow in order to includes everything from the computer
or smartphone that is used to access the Internet to
complete tasks. Without this common collection of
the cables that carry information from one device
rules, machines would not be able to communicate. to another. Additional types of hardware in-
clude satellites, radios, cell phone tow-
ers, routers and servers.
The protocols are also responsible for translating These various types of hardware are the connec-
the alphabetic text of a message into electronic sig- tions within the network. Devices such as comput-
nals that can be transmitted over the Internet, and ers, smartphones and laptops are end points,
then back again into legible, alphabetic text. or clients, while the machines that store the infor-
mation are the servers. The transmission lines that
exchange the data can either be wireless signals
from satellites or 4G and cell phone towers, or
physical lines, such as cables and fiber optics.

The process of transferring information from once device to an-

other relies on packet switching. Each computer connected to
the Internet is assigned a unique IP address that allows the de-
vice to be recognized. When one device attempts to send a mes-
sage to another device, the data is sent over the Internet in the
form of manageable packets. Each packet is assigned a port
number that will connect it to its endpoint.

Fig 2 Data Packet

The message will then be sent over the Internet where it is received by the Internet service provider's
(ISP) router. The router will examine the destination address assigned to each packet and determine
where to send it.

Eventually, the packet reaches the client and travels in reverse from the bottom physical layer of the OSI
model to the top application layer. During this process, the routing data -- the port number and IP ad-
dress -- is stripped from the packet, thus allowing the data to be translated back into alphabetic text and
completing the transmission process.

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 7

USES OF THE INTERNET

In general, the Internet can be used to communicate across large or small distances, share
information from any place in the world and access information or answers to almost any question
in moments.

Some specific examples of how the Internet is used include:

Communication
•E-mail and other forms of communication,
such Internet Relay Chat (IRC), Internet Other examples include:
telephony, instant messaging, video
conferencing and social media  Online discussion groups and
forums
Education  Online dating
•education and self-improvement through  Online gaming
access to online degree programs, courses  Research
and workshops
 Reading electronic newspapers
Jobs and magazines
•both the employer and applicant use the  Online shopping
Internet to post open positions, apply for jobs
and recruit individuals found on social
networking sites like LinkedIn.

Difference between the World Wide Web and the Internet

The key difference between the Internet and the World Wide
Web (WWW or the Web) is that the Internet is a global connection of
networks while the Web is a collection of information that can be
accessed using the Internet. In other words, the Internet is
the infrastructure and the Web is a service on top.

The Web is the most widely used part of the Internet. Its outstanding
feature is hypertext, a method of instant cross-referencing. In most
Web sites, certain words or phrases appear in text of a different color
than the rest; often this text is also underlined. When a user selects one
of these words or phrases, they will be transferred to the related site or
page. Buttons, images, or portions of images are also used
as hyperlinks.

The Web provides access to billions of pages of information. Web

browsing is done through a Web browser, the most popular of which
are Google Chrome, Firefox and Internet Explorer. The appearance of a
particular Web site may vary slightly depending on the browser used.
Later or more updated versions of a particular browser are able to
render more complex features, such as animation, virtual reality,
sound and music files.
WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 8

SECURITY AND THE INTERNET

Large amounts of information, both public and private, is collected across the Internet, opening
users up to the risk of data breaches and other security threats. Hackers and crackers can break
into networks and systems and steal information such as login information or bank and credit
card account records. Some steps that can be taken to protect online privacy include:

 Installing antivirus and antimalware

 Creating difficult, varied passwords that are impossible to guess.
 Using a virtual private network (VPN) or, at least, a private browsing mode, such as Google
Chrome's Incognito window.
 Only using HTTPS
 Making all social media accounts private.
 Deactivating autofill.
 Turning off the device's GPS.
 Updating cookies so an alert is sent anytime a cookie is installed.
 Logging out of accounts instead of just closing the tab or window.
 Using caution with spam emails and never opening or downloading content from unknown
sources.
 Using caution when accessing public Wi-Fi or hotspots.

SOCIAL IMPACT OF THE INTERNET

 The social impact of the Internet can be seen as both positive and negative. On one side,
people argue that the Internet has increased the risk of isolation, alienation and
withdrawal from society, pointing to increases in an emotional response called FOMO, or
the fear of missing out. On the other side, people believe the Internet to have had the
opposite effect on society, arguing that the Internet increases civic engagement,
sociability and the intensity of relationships.

 Whether the impacts are good or bad, the Internet has changed the way society interacts
and connects. One example of change is the increased focus on personal growth and a
decline in a community that is determined by work, family and space. People are now
constructing social relationships based on individual interests, projects and values.
Communities are being formed by like-minded individuals not only offline and in person,
but through the Internet and the multitude of online environments which it creates and
offers. Social networking sites -- like Facebook and LinkedIn -- have become the
preferred platforms for both businesses and individuals looking to perform all kinds of
tasks and communicate with others.

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 9

BENEFITS OF THE INTERNET INCLUDE:

 This is a good place to briefly, but effectively, describe your product or services. Access to endless
information, knowledge and education.
 An increased ability to communicate, connect and share.
 The ability to work from home, collaborate and access a global workforce.
 The chance to sell and make money as a business or individual.
 Access to an unlimited supply of entertainment sources, such as movies, music, videos and games.
 The ability to amplify the impact of a message, allowing charities and other organizations to reach a wider
audience and increase the total amount of donations.
 Access to the internet of things (IoT), which allows home appliances and devices to connect and be
controlled from a computer or smartphone.
 The ability to save data and easily share files with cloud storage.
 The ability to monitor and control personal accounts instantly, such as bank accounts or credit card bills

1.2 Internet Protocols NOTES:

Internet Protocol (IP) :is

The Internet Protocol (IP) is the method or protocol by which data is sent the most widely used in-
from one computer to another on the Internet. Each computer (known as ternetworking protocol. It
a host) on the Internet has at least one IP address that uniquely identifies is also a foundation of all
it from all other computers on the Internet. internet-based applica-
tions
When you send or receive data (for example, an e-mail note or a Web
page), the message gets divided into little chunks called packets.

Each of these packets contains both the sender's Internet address and
the receiver's address.

Fig 3 How TCP/IP works

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
Any packet is sent first to a gateway computer that understands a small part of
the Internet. The gateway computer reads the destination address and forwards NOTES:
the packet to an adjacent gateway that in turn reads the destination address
and so forth across the Internet until one gateway recognizes the packet as be- A packet is the unit of
data that is routed be-
longing to a computer within its immediate neighborhood or domain. That gate-
tween an origin and a
way then forwards the packet directly to the computer whose address is speci-
destination on the Inter-
fied. net or any other packet-
switched network.
Because a message is divided into a number of packets, each packet can, if
necessary, be sent by a different route across the Internet. Packets can arrive in A gateway is a node
a different order than the order they were sent in. The Internet Protocol just de- (router) in a computer
livers them. It's up to another protocol, the Transmission Control Protocol (TCP) network, a key stopping
to put them back in the right order (See Fig 3). point for data on its way
to or from other net-
IP is a connectionless protocol, which means that there is no continuing con- works.
nection between the end points that are communicating. Each packet that trav-
els through the Internet is treated as an independent unit of data without any
relation to any other unit of data. (The reason the packets do get put in the right
order is because of TCP, the connection-oriented protocol that keeps track of
the packet sequence in a message.)

The most widely used version of IP today is Internet Protocol Version 4 (IPv4).
However, IP Version 6 (IPv6) is also beginning to be supported. IPv6 provides
for much longer addresses and therefore for the possibility of many more Inter-
net users. IPv6 includes the capabilities of IPv4 and any server that can support
IPv6 packets can also support IPv4 packets.

Fig 4 Example of Computer units with IP Address

 11

Type of address
IP addresses are classified into several classes of operational characteristics: unicast, multicast, anycast
and broadcast addressing.

UNICAST
-An address that is assigned to a single interface

ANYCAST
-Set of Computers that share a single address

MULTICAST
-One address for a set of interfaces/computers
-Delivered to all interfaces/computers identified by the address

BROADCAST
-All receivers capture the network packet
-addressing technique available in IPv4

1.3 Uniform Resource Locators (URLs)

What are URLs?
NOTES:
URLs make it possible to direct both people and software applica-
URL: is a standard way
tions to a variety of information, available from a number of
developed to specify the
different Internet protocols.
location of a resource
A URL is like your complete mailing address: it specifies all the infor- available electronically.
mation necessary for someone to address an envelope to you. RFC 1738
•In short, a URL is a very convenient and succinct way to direct peo- Scheme : Tells you
ple to a file or other electronic resource. what type of resource
•Learning how to interpret, use and construct URLs will assist your we are trying to reach
exploration of the Internet. and/or what mechanism
to use to obtain it.

General URL syntax:

<scheme>:<scheme-dependent-information>

Scheme Scheme Dependent Information

<scheme>:<scheme-dependent-information> <scheme>:<scheme-dependent-information>
Scheme examples: –This information is detailed with each scheme
–http (Hyper Text Transfer Protocol) –Most schemes include the:
–ftp (File Transfer Protocol) –Machine making the file available
–news (News Protocol) –Machine making the file available
–"Path" to that file

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 12

URL Example (for HTTP)

http://www.7sport.net/7sport/index.htm

•http is the scheme (hyper text transfer protocol)

•two slashes (//) separate the scheme from the machine/domain name
•www.7sport.net is the machine/domain name
•single slash (/) separates the name from the path
•Finally 7sport/index.htm is the path.

HTTP & FTP General Formats

scheme://machine.domain/full-path-of-file
Reasons for not being able to access URLs:
–the remote machine refuses the connection
–the site is very busy (e.g. peak hours of use)
–you have misspelled the URL
–the file was moved
–if all else fails you can try looking up the hierarchy by sequentially removing the file name
first, and then the last directory in the path.

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 13

1.4 Hypertext Transfer Protocol (HTTP)

HTTP means HyperText Transfer Protocol. HTTP is the underly- NOTE: URLs that begin
ing protocol used by the World Wide Web and this protocol defines how
messages are formatted and transmitted, and what actions Web serv- with "http://" are
ers and browsers should take in response to various commands. accessed over the
standard hypertext tran
For example, when you enter a URL in your browser, this actually sends
an HTTP command to the Web server directing it to fetch and transmit sfer protocol and
the requested Web page. The other main standard that controls how the use port 80 by default.
World Wide Web works is HTML, which covers how Web pages are for-
matted and displayed. URLs that start with
"https://" are accessed
over a secure HTTPS
HTTP is the foundation of data communication for the World Wide Web, connection and often use
where hypertext documents include hyperlinks to other resources that
the user can easily access, for example by a mouse click or by tapping port 443.
the screen in a web browser.

Development of HTTP was initiated by Tim Berners-Lee at CERN in 1989. Development of early
HTTP Requests for Comments (RFCs) was a coordinated effort by the Internet Engineering Task
Force (IETF) and the World Wide Web Consortium (W3C), with work later moving to the IETF.

When you access a website, your browser sends a request to the corresponding web server and it
responds with an HTTP status code. If the URL is valid and the connection is granted, the server
will send your browser the webpage and related files.

HTTP is a Stateless Protocol

HTTP is called a stateless protocol because each command is executed independently, without
any knowledge of the commands that came before it. This is the main reason that it is difficult to
implement Web sites that react intelligently to user input. This shortcoming of HTTP is being ad-
dressed in a number of new technologies, including ActiveX, Java, JavaScript and cookies.

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 14

Image Source: google.com

WEB SERVER ERROR MESSAGES

Ever encounter an error List of HTTP Response Codes:
on your way to a Web
site? Of course you have. Here is a list of error messages (also called HTTP status codes) that
Don't worry; you'll be you might encounter while surfing the Web and their respective mean-
glad to know most of
them have nothing to do
ings to help you figure out just what the problem is.
with your PC. It's usually
the other guy's fault --
the Web server, that is.
Here are some of the
more common errors
you'll see while surfing
the Internet. .

By - Webopedia Staff

Errors on the Internet, and

those annoying error mes-
sages, occur quite frequent-
ly — and can be quite frus-
trating — especially if you
do not know the difference
between a 404 error and a
502 error. Many times they
have more to do with the
Web servers you're trying to
access rather than some-
thing being wrong with your
computer.

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 15

List of HTTP Response Codes (Cont):

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA
 16

Learning Activity
ACTIVITY NO. 1

A. Direction: Identify which of the given example is a URL and identify its Parts
1. http://www.w3schools.com/html/html_forms.asp
2. ftp://garbo.uwasa.fi/pc/doc-net/

B. Direction: Analyse the process and give a possible solution to the problem.
Compare the services of the user can get using an ATM (Automatic Teller Machine) or access a
secure Web site online when it comes to Online Banking Process.

Assessment/Evaluation
Direction: Submit your comprehensive essay for the following question.
1. Explain How the Internet works
2. List down Top 10 Application of the Internet in daily lives
3. Explain how a Data is transfer from one Computing devices to other devices using the in-
ternet
4. How important Protocols in the Internet

References
Castro, E. (2012). HTML5 and CSS3: Visual quick start guide. Berkely, CA: Peachpit Press
Carey, P. (2010). New perspectives on HTML, XHTML, and dynamic HTML: Comprehensive. Australia:
Course Technology/ Cengage Learning.

https://www.webopedia.com/TERM/H/HTTP.html
https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
https://searchwindevelopment.techtarget.com/definition/Internet?
_ga=2.71119120.1696845850.1597026309-284610166.1583979356

WEBDEV1 (Ver. 1.0 Aug. 2020) BY: Mr. ROWEE M. MARFIL, MBA