INTERNET PROGRAMMING &

Web Development

By
Raygan KANSOY
 World Wide Web (WWW)
• Informally people often use the terms "Internet" and "World Wide
Web" (WWW) interchangeably, but this is inaccurate: the WWW is in fact just
one of many services delivered over the Internet. Web uses internet to pass over
the information.
• WWW, is a system of interlinked, hypertext documents accessed through the
Internet.
• The web provides a communication platform for users to retrieve and exchange
information over the internet.
• Tim Berners-Lee, a British scientist, invented the WWW in 1989-1991, while
working at CERN.
• The Web was originally conceived and developed to meet the demand for
automated information-sharing between scientists in universities and institutes
around the world.
 Brief History of WWW
• The objective behind the invention of WWW was to merge the evolving
technologies of computers, data networks and hypertext into a powerful and
easy to use global information system.
• In March 1989, Tim Berners-Lee, while working at CERN, took the initiative
towards the invention of WWW and wrote the first proposal named
“Information Management: A Proposal” to develop a distributed information
system. He resubmitted a slightly edited version in May 1990.
• In November 1990, Tim Berners-Lee, together with CERN colleague, Robert
Cailliau, submitted a formal management proposal for ‘WorldWideWeb:
Proposal for a HyperText Project’.
 Brief History of WWW
• By Christmas 1990, Berners-Lee had defined the Web’s basic
concepts, that make it possible for users to locate and share
information through the Internet.
• HTML (Hyper Text Markup Language): The markup
(formatting) language for the web.
• HTTP (Hypertext Transfer Protocol): A set of rules for
transferring data across the Web (between a server and a
client).
• URL (Uniform Resource Locator): A kind of “address” that
is unique and used to identify to each resource on the web.
 Brief History of WWW
• In 1990, he had written the first browser/editor (“WorldWideWeb.app”) and
server software.
• info.cern.ch was the address of the world's first web server, running on a NeXT
computer at CERN.
• By the end of 1990, the first web page was served on the open internet:
http://info.cern.ch/hypertext/WWW/TheProject.html
• The world's first web page address provided information about the World Wide Web
project.
• In 1991, people outside of CERN were invited to join this new web community.
• On 30 April 1993, CERN issued a statement putting the Web into the public
domain, ensuring that it would act as an open standard. The move had an
immediate effect on the spread of the web.
 Brief History of WWW
• In 1993, a team at the University of Illinois’ National Center for Supercomputing
Applications released Mosaic, the first Web browser to become popular with the
general public.
• The Web began to enter everyday use in 1993-4, when websites for general
use started to become available
• In 1994, Tim BL founded the World Wide Web Consortium (W3C), an
organization that brings together representatives from many different technology
companies to work together on the creation of web technology specifications. The
aim was to standardize and develop the Web further.
• By the end of 1994, the Web had 10,000 servers - of which 2000 were commercial -
and 10 million users
• The next few years saw the launch of websites such as Yahoo (1994), Amazon
(1995), eBay (1995) and Google (1998).
Evolution of WEB
 Evolution of WEB Web 1.0
• The first version of web Web 1.0 also referred as Syntactic web or
read only web is the era (1990–2000) where the role of a user is
limited with consuming information provided by the content producers.
• There is no option given for user or consumer to communicate back the
information to the content producers.
• During this early phase of web development, web pages were mostly
static documents read from a server and displayed on a client, with no
options for users to contribute content, or for content to be tailored to a
user's specific demands.
 Evolution of WEB Web 2.0
• The Web 2.0 also referred as Social Web or read-write web is the era
(2000–2010 and continues even now) which facilitates interaction
between web users and sites.
• Previously a consumer of content provided by others, the web user has
now become a prosumer, capable of adding information to a web page,
and in this way communicating not only with the server, but through the
server with other clients (users) as well.
• These Web 2.0 technologies have made possible a wide range of social
web sites now familiar to everyone, including chat rooms, blogs, wikis,
product reviews and e-markets.
• Some of the famous Web 2.0 applications are Facebook, Youtube,
Flickr, Twitter etc.,
 Evolution of WEB Web 2.5
• The Web 2.5 is the concept to address the practical and real evolution
which we are currently seeing in our era 2010–2020 between Web 2.0
and 3.0.
• Web 2.5 is majorly focusing on
mobile computing and
evolution in mobile
technologies.
• Some of the technologies which
got introduced in this era are
Progressive Web Apps(PWA),
Accelerated Mobile On our way to Web 3.0 some of player
Pages(AMP) etc. like Amazon, Google, etc., provides a
service model in Cloud computing for
• To make in conceptually clear developers to create web applications
for their users to connect them on any
we can call Web 2.5 as the devices, anytime and anywhere.
convergence between Social
and Semantic web.
 Evolution of WEB Web 3.0
• The Web 3.0 also referred as Semantic Web or read-write-execute is the era
(2010 and above) which refers to the future of web.
• In this era computers can interpret information like humans via Artificial Intelligence
and Machine Learning. Which help to intelligently generate and distribute useful
content tailored to a particular need of a user.
What if computers can understand meaning behind information and what if
they can learn “what we are interested in” ???
• They can help us find what we want
• They can recognize People, Place, Events, Companies, Product, Movies etc.,
• They can understand the relationship between things

• Some of the examples of web 3.0 are Apple’s Siri, Googles Cloud API, Wolfram
Alpha.
 How WWW Works?
• The web works on a "client-server model".
• Client-server architecture is an architecture of a computer network in which
many clients (remote processors) request and receive service from a centralized
server (host computer)
• Clients are the typical web user's internet-connected devices and web-accessing
software available on those devices. Client is capable of receiving information or
using a particular service from the service providers (Servers).
• Server is a remote computer which provides information (data) or access to
particular services. It stores webpages, sites, or apps. When a client device wants
to access a webpage, a copy of the webpage is downloaded from the server onto
the client machine to be displayed in the user's web browser.
 How WWW Works?
Following steps explains how the web works:
• User enters the URL of the web page in the address bar of web browser.
• The client, which is your ccomputer, more specifically the browser you are using, sends
a request to the Domain Name Server for the corresponding IP address.
• After receiving IP address, browser sends the request for web page to the web server
using HTTP protocol which specifies the way the browser and web server
communicates.
• Then web server receives request using HTTP protocol and checks if the page exists, if it
exists the server will send the HTML page in response
• Now the web browser receives the web page. It interprets it and display the contents of
web page in web browser’s window.
• If the requested page doesn’t exists then the server sends a 404 Error code which means
the web page doesn’t exist on the server.
How WWW Works?

An important disadvantage of the

client-server model is that if too many
clients simultaneously request data
from the server, it may get overloaded.
An important advantage of the client-server In addition to causing network
model is that its centralized architecture helps congestion, too many requests may
make it easier to protect data with access result in a denial of service.
controls that are enforced by security policies.
 Client-Side VS Server-Side
Programming
Frontend Backend
Runs on the user computer Runs on the server

Interfacing Processing
Collection of user input, interfacing Process es data, doing transactions, and
with the server complex computetion
Fully Visible Invisible
Scripts can beviewed by the user Scripts are not open to users.

Less Secure More Secure

Generally less secure as users can see Alot more secure as users don’t see the
and mess with the scripts source code, and they usually can not
interrupt the process.
HTML, CSS, JavaScript, VBScript PHP, ASP, Phyton, Ruby, C#, Java
 Front End & Back End Development
How website looks.. How website works..

• The main difference between front and back end development is the particular area
of focus.
• The front end is concerned with a website’s appearance, look and feel; while the
back end focuses on functionality on a website’s server-side, including all
communications between the browser and the database.
• To build a website, a front end developer takes care of the theme, including the
presentation, images and style.
• The back end developer takes care of the database, security, site performance and
users.
• Each side needs to communicate and operate effectively with the other as a single
unit to improve the website’s functionality.
 Front End Development
• The part of a website that user interacts with directly is termed as
front end.
• It is also referred to as the ‘client side’ of the application.
• It includes everything that users experience directly:
 colors and styles,
 images,
 graphs and tables,
 buttons,
 navigation menu and etc.
 Front End Development

• The structure, design, behavior, and content of everything seen on browser

screen when websites, web applications, or mobile apps are opened up, is
implemented by front end developers.
• Responsiveness and performance are two main objectives of the front end.
• The developer must ensure that the site is responsive i.e. it appears correctly
on devices of all sizes no part of the website should behave abnormally
irrespective of the size of the screen. 
 Front End Development
Front End Languages
• HTML
• CSS
• JavaScript
• VBScript

Front End Frameworks and Libraries

• AngularJS
• React.js
• Bootstrap
• jQuery
• SASS
 Front End Development
Languages
HTML
• HTML stands for Hyper Text Markup Language.
• It is used for creating websites and web applications for World Wide Web.
• HTML5 is the latest and most enhanced version of HTML.
• HTML5 is a standard language for structuring and presenting content on the WWW.
• Any page made in HTML5 is compatible with both computers and mobile devices. In
other words, you can set the mobile specification from the HTML document itself.
• All the latest versions of web browsers including the mobile web browsers that come
pre-installed on iPhones, iPads, and Android phones have excellent support for
HTML5.
 Front End Development
Languages
CSS (Cascading Style Sheets)
• CSS is a simply designed language intended to simplify the process of
making web pages presentable.
• CSS is a language that that lets you describe how the elements defined in
your HTML should be styled, allowing changes in font, color, layout, simple
animations, and other superficial elements.
• It is used for defining the look and feel of a webpage
• More importantly, CSS enables you to do this independent of the HTML that
makes up each web page.
• CSS3 is the most widely used version, though CSS4 has been released
 Front End Development
Languages
JavaScript
• Developed by Netscape, it is good for network-centric web applications.
• It is a famous scripting language used to create the magic on the sites to make the
site interactive for the user.
• It is used to enhancing the functionality of a website by running cool games and
displaying timely content updates, interactive maps, animated 2D/3D graphics,
scrolling video jukeboxes, etc.
• JavaScript can calculate, manipulate and validate data.
• With the breakthroughs of Node.js and AngularJS, JavaScript became the
undisputed frontrunner in-browser programming today

Most web developers use JavaScript for client-side scripting in order to be sure their website
works in all browsers.
 Front End Development
Languages
JavaScript
• The merits of using JavaScript are:
• Less server interaction − You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
• Immediate feedback to the visitors − They don't have to wait for a page reload to
see if they have forgotten to enter something.
• Increased interactivity − You can create interfaces that react to user-initiated events
such as button clicks, link navigation.
• Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
 Front End Development
Languages
VBScript
• "Microsoft Visual Basic Scripting Edition"
• It is developed and maintained by Microsoft for the purpose of developing dynamic web applications.
• It is a lightweight active scripting language modeled on Visual basic.
• The syntax of VBScript is very similar to that of Visual Basic.
• It gives different functionalities to the web pages and designs the user interaction in a different manner.
• VBScript only worked in Internet Explorer while JavaScript was a cross-browser solution that also
worked in other browsers.
• It is not supported by their competitors' browsers such as Firefox and Opera.
• Unfortunately, VBScript is now disabled by default in Internet Explorer on all supported versions of
Windows after a recent Windows update.
• That’s a big reason why JavaScript won!
 Front End Development
Frameworks and Libraries
AngularJS
• AngularJs is a JavaScript open source front-end framework that is mainly
used to develop single page web applications (SPAs).
• It is a continuously growing and expanding framework which provides better
ways for developing web applications.
• It changes the static HTML to dynamic HTML. It is an open source project
which can be freely .
• It extends HTML attributes with Directives.
 Front End Development
Frameworks and Libraries
React.js
• React is a declarative, efficient, and flexible JavaScript library for building
user interfaces.
• ReactJS is an open-source, component-based front end library responsible
only for the view layer of the application.

Bootstrap
• Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications.
• It is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first web sites.
 Front End Development
Frameworks and Libraries
jQuery
• jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS
document, or more precisely the Document Object Model (DOM), and JavaScript.
• Jquery is a javascript toolkit that simplifies writing code and enables rapid web development.
• The claim of the developers is that jquery runs exactly the same across all brow
• Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser
event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

SAS
• It is the most reliable, mature and robust CSS extension language.
• It is used to extend the functionality of an existing CSS of a site including everything from
variables, inheritance, and nesting with ease.
 Back End Development
• Backend is the server side of the website.
• It is the part of the website that you cannot see and directly interact with.
• The parts and characteristics developed by backend designers are indirectly
accessed by users through a front-end application.
• It stores and arranges data, and also makes sure everything on the client-
side of the website works fine.
• Activities, like writing APIs, creating libraries, and working with system
components without user interfaces or even systems of scientific
programming, are also included in the backend.  
 Back End Development
Server-side programming must deal with dynamic content. Most web pages
are not static since they deal with searching databases.

Server-side Uses
• It processes the user input
• Displays the requested pages
• Interaction with servers/storages
• Interaction with databases
• Querying the database
• Encoding of data into HTML
• Operations over databases like delete, update. 
 Back End Development
Languages & Frameworks

PHP
• It is an open source, server-side scripting language designed
specifically for web development.
• Since PHP code executed on the server side so it is called server-side <!DOCTYPE html>
<html>
scripting language. <head>
• It has been used to create web applications for over 35 years, with <title> PHP Time</title>
</head>
multiple frameworks being available for the developers. <body>
<h1>Welcome</h1>
• Wordpress runs on it and powers 25% of the websites today,
<?php $t = date("H");
including most popular blogs and news websites. if ($t < 12) { echo '<p>Good morning!</p>'; } else
{
• It finds applications mainly in the fields of server-side and echo '<p>Good day!</p>'; } ?>
standalone web application development along with the development </body>
of CMS systems. </html>

• Notable websites built on PHP: Facebook, Wikipedia, Wordpress.

 Back End Development
Languages & Frameworks

ASP.NET
• ASP.NET is an open-source, server-side web-application framework designed for web
development to produce dynamic web pages.
• It was developed by Microsoft to allow programmers to build dynamic web
sites, applications and services.
• Prior to ASP.NET, Microsoft had developed another server-side scripting language with the name
ASP (Active Server Pages) which was used widely on the web. However, other than the name, ASP
and ASP.NET are very different technologies.
• .NET is a developer platform made up of tools, programming languages, and libraries for
building many different types of applications.
• The base platform provides components that apply to all different types of apps. Additional
frameworks, such as ASP.NET, extend .NET with components for building specific types of apps.
 Back End Development
Languages & Frameworks

Java
• Java was developed in an effort to create a simple, object-oriented interpreted programming
language.
• It was released in 1995 and quickly became the hottest new programming language due in part to
its promise of "write once, run anywhere".
• It was to act as an alternative to C++ which was widely used in business applications of the 90s.
• But over time, Java far surpassed C++ in terms of popularity due to its lower learning barrier and
the highly distributable nature of Java code. 
• It is powerful in terms of scalability and it’s components are easily available.
• Java, with the help of the Java Virtual Machine, is a language that is independent of platforms.
This makes it the most popular programming language for enterprises.
 Back End Development
Languages & Frameworks

Java
• Spring is one of the most popular frameworks for Java web applications and is
usually considered essential in a Java web developer's toolbox.
• However, development with Java can be overengineering, and
Hello World code snippet
development time can take considerably longer than other
in Java:
languages
• It is prevalent for large-scale applications, but you publicshould
class HelloWorld
{
consider other programming languages for smaller applications.
 public static void main(String[ ] args)
 {
  System.out.println("Hello World");
• Java is widely used in the fields of application development, Big  }
data, and web development. }

• Notable websites built on Java: Google, Amazon, eBay.

 Back End Development
Languages & Frameworks

Python
• Python is an interpreted, high-level and general-purpose programming language.
• It was designed to be simple and easy to learn. Hence reducing the overall
development time of the project code.
• Lets you work quickly and integrate systems more efficiently.
• Its ease of coding, and support from the open-source community has led to the
exponential growth of Python
• Used by both beginners and as well as experienced programmers
• It has a set of different libraries and APIs that support data analysis, data
visualization, and data manipulation.
 Back End Development
Languages & Frameworks

Python
• It is also one of the most popular languages that can
handle complex scientific calculations and used for from flask import Flask
app = Flask(__name__)
statistical analysis.
@app.route("/")
• Flask is a popular micro-framework for Python to create def hello():
web applications. It's a small framework that provides you return "Hello World!"
if __name__ == "__main__":
with the necessary features to get started with developing app.run()
your web application. Another popular framework is
Django.
• Notable websites built on Python: Youtube, Instagram, Dropbox, Quora.
 Back End Development
Languages & Frameworks

Python
 Back End Development
Languages & Frameworks

Ruby
• Ruby started as an object-oriented scripting language. But over time, it
grew into an interpreted high-level general-purpose programming
language and started to become popular at 2010s. #!/usr/bin/env ruby
require 'sinatra'
• It combines some of the best features of all popular programming
languages. It is dynamic, functional and concise. get '/' do
redirect to('/hello/World')
• Mostly popular for small applications as it is suitable for rapid web end
development.
get '/hello/:name' do
• Rails is the most popular framework to use with Ruby. A micro
"Hello #{params[:name]}!"
framework Sinatra can be better for beginners end
• Ruby is widely used in the field of web development, data analysis and
AI development.
 Back End Development
Languages & Frameworks

C#
• Microsoft developed C# as a C-like programming language with object-
oriented features. This was part of their .NET project.
• Initially, the language was seen as a copy of Java. However, future Hello World code snippet
developments brought a clear, distinct identity to C#. in C#:

• C# offers a great developer experience. With Microsoft’s backing and namespace HelloWorld
presence of over two decades, it has numerous libraries and frameworks. {
    class Hello
• Further, it is a platform-independent programming language.     {
        static void Main(string[ ] args)
• C# is widely used in the fields of system programming, game development,         {
web development and app development.             Console.WriteLine("Hello World");
        }
    }
}
 Back End Development
Languages & Frameworks

Node.js
• Node.js (released in 2009) is an open source and cross-platform runtime environment for
executing JavaScript code outside of a browser.

• You need to remember that Node.js is not a framework and it’s not a programming
language. Most of the people are confused and understand it’s a framework or a
programming language.

• It provides the ability to run JavaScript code on server-side. Those who are already familiar
with JaveScript do not have to learn anything new since the same coding can be used for both
front-end and back-end.

• You can use JavaScript for front-end rendering and then reuse it later in the back-end, which
is one of the key benefits to writing JavaScript.
 Back End Development
Languages & Frameworks

Node.js
• This language is mostly beneficial if applications are used in real-time such
as chats and online games
• Node.js mostly used for building back-end services like APIs, Web
Applicaitons or Mobile Applications.
• It uses Express framework for web application development.

• It’s used in production by large companies such as Paypal, Uber, Netflix,

LinkedIn, Netflix, Wallmart and etc.
Frontend VS Backend Development
Other Important Concepts in Web Development
Cross-browser Compatibility
• It is the practice of trying to make sure your webpage works across as many devices as
possible.
• This includes using technologies that all the browsers support, delivering better experiences
to browsers that can handle them (progressive enhancement), and/or writing code so that it
falls back to a simpler but still usable experience in older browsers.
• It also involves a lot of testing to see if anything fails in certain browsers, and then more
work to fix those failures.

Responsive Web Design

• Responsive web design is the practice of making your website functionality and layouts
flexible so they can automatically adapt to different browsers.
• An obvious example is a website that is laid out one way in a widescreen browser on the
desktop, but displays as a more compact, single-column layout on mobile phone browsers.
Other Important Concepts in Web Development

Performance
• It means getting web sites to load as quickly as possible, but also making them intuitive
and easy to use so that users don't get frustrated and go somewhere else.

Accessibility
• It means making your websites usable by as many different kinds of people as possible
(related concepts are diversity and inclusion, and inclusive design).
• This includes people with visual impairments, hearing impairments, cognitive disabilities,
or physical disabilities.
• It also goes beyond people with disabilities — how about young or old people, people
from different cultures, people using mobile devices, or people with unreliable or slow
network connections?
Other Important Concepts in Web Development
Internationalization
• Means making websites usable by people from different cultures, who speak different
languages to your own.
• There are technical considerations here (such as altering your layout so that it still works
OK for right-to-left, or even vertical languages), and human ones (such as using simple,
non-slang language so that people who have your language as their second or third
language are more likely to understand your text).

Privacy & Security

• These two concepts are related but different.
• Privacy refers to allowing people to go about their business privately and not spying on
them or collecting more of their data than you absolutely need to.
• Security refers to constructing your website in a secure way so that malicious users
cannot steal information contained on it from you or your users.
Website Development Process
Thank you for listening..
Any Questions?