Introduction to World Wide Web
and Web Development
IT 5443
Web Technologies and Application Development
http://it5443.azurewebsites.net
Jack G. Zheng
Spring 2019
This document is hosted at
https://www.edocr.com/v/qezldpd2/jgzheng/Introduction-to-World-Wide-Web-and-Web-Development
Overview
2
This lecture notes provide some basic introduction
to the Web and its fundamental pieces. It also
introduces good resources to get your further.
Major topics:
What is the Web?
History and evolution stages
How does the Web work?
Client server architecture
Key technology components
Simple vs. dynamic web
Client vs. server side
How to start web development?
Tools and resources
What is the Web?
3
The Internet
A world-wide network of networks and computers
based on the Internet protocol
World Wide Web, or the Web
Is a client/server application for information and
services
Is one of the Internet applications based on the HTTP
protocol
The difference between the two?
http://www.diffen.com/difference/Internet_vs_World_
Wide_Web
Web Related Terms
4
Web page

usually refers to a static HTML file, or a dynamically generated HTML document displayed in a
browser. It resembles a document and mainly informational.
Web application

a specific functionality-oriented component that utilizes web technologies to deliver information and
services to users or other applications/information systems.
Examples: registration, shopping, survey, learning, gaming, etc.
Web site

a collection of web pages, applications, etc., under a common name and serve a common purpose
(loosely).
Web (based) information system

an information system that utilizes web technologies to deliver information and services, to users or
other information systems/applications.
A web information system usually consists of one or more web applications, together with
information components and other non-web components.
Web service (two different meanings)

Technically: a software component that utilizes web technologies to serve other applications (not
human users).
Or in a more non-tech context: a service provided to users through a website.
Evolution Stages
5
Stage
Beginning Time
Features
Pre-web
Before 1990
All kinds of Internet applications with its specific
protocols
Early/simple web
Early 1990s
Collection of interlinking web pages. Document
based information retrieval.
Dynamic web
Mid 1990s
More advanced dynamic processing on both server
and client side. More functional applications
emerged.
Web as a
platform
21st century
A fundamental platform to support all kinds of
services and integrate various kinds of systems.
Web 2.0
Since about 2006
Services that support massive user participation and
contribution.
Redefined client/server communication style.
Greater advancement in software-as-a-service.
Mobile Web
Since about 2010
Major renovation of user experience design and
application architectures.
Major client-side advancement.
* Note: each later stage does not replace the early stage
at this time. They only signal the beginning of some
drastically new developments. The applications of each
stage are still widely used today.
Pre-Web
6
Before there was the Web, there was the Internet
TCP/IP (Transmission Control Protocol/Internet Protocol) is the key to the
Internet

Internet applications other than the Web (note Web itself is a kind of
Internet applications)
Usenet, BBS, Telnet
Email, FTP
P2P, gaming
Video streaming, instant messaging, VoIP
Remote control
Which Internet application generates the most traffic on the Internet?
https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-
networking-index-vni/vni-hyperconnectivity-wp.html
More from Cisco: https://www.cisco.com/c/en/us/solutions/service-
provider/visual-networking-index-vni/index.html
Extended reading: some history of the Internet
https://en.wikipedia.org/wiki/History_of_the_Internet
http://itwebtutorials.mga.edu/html/chp1/history.aspx
Early Web, Simple Web
7

Invented by Sir Tim Berners-Lee, 1989
The early simple web focused on interlinking web
pages/documents for information viewing.
5 fundamental elements of the web (see slides later, starting #13, for
more details about the architecture of a simple web and its
fundamental elements)
Web content: HTML (Hypertext Markup Language)
Web client: browser
Web server
Web address: URL (Uniform Resource Locator)
Web protocol: HTTP (Hypertext Transfer Protocol)
Extended reading: some history of the Web
https://webfoundation.org/about/vision/history-of-the-web/
25 years of the World Wide Web: Tim Berners-Lee explains how it all began:
http://www.independent.co.uk/life-style/gadgets-and-tech/news/25-years-of-the-world-wide-web-
the-inventor-of-the-web-tim-bernerslee-explains-how-it-all-began-9185040.html
Dynamic Web
8
Dynamic web refers to the addition of the advanced
processing power with programming capabilities at
either server side or client side (or both)
Because of these powers, more functional
applications emerged, going beyond just information
viewing.
Shopping, registration, survey, learning, gaming, etc.
More Internet applications began to have a web
interface
E-mail, forum (BBS), etc.
See slides later (#29 to #33) for key technologies
summary
Web as a Platform
9
Early Web is a more of an application itself to deliver
information and service to human over the Internet
It eventually evolved to an underlying platform that
supports all kinds of software applications and services
Applications are developed based on Web technologies and
standards directly, not OS (think about a Windows application).
There is no installation on local systems and minimum need for
OS support.
Many kinds of applications and services have been brought to
the Web: e-commerce, multimedia, gaming, socialization,
communication, etc.
Connects human-machine, human-human, machine-machine
Facilitates the standards development and interoperability
https://www.webopedia.com/TERM/W/web_as_a_platform.html
Web 2.0
10
Web 2.0 is a general and loose concept for the
advancements of the World Wide Web since 2006

"Web 2.0 is term that was introduced in 2004 and
refers to the second generation of the World Wide
Web. The term "2.0" comes from the software
industry, where new versions of software programs
are labeled with an incremental version number.
Like software, the new generation of the Web
includes new features and functionality that was not
available in the past. However, Web 2.0 does not
refer to a specific version of the Web, but rather a
series of technological improvements."
http://www.techterms.com/definition/web20
Key ideas/technologies
Massive user participation and contribution
Socialization: connection, communication, networking,
interaction, sharing
Collective intelligence: content aggregation,
crowdsourcing, folksonomy, wisdom of the crowd
Rich user experience
Asynchronous client/server communication style
Software-as-a-service.
https://commons.wikimedia.org/wiki/File:Web-20-
iceberg-model-from-Web20andBeyond-book.jpg
Learning module #11 will cover this topic
https://www.edocr.com/v/gvbmxvzg/jgzheng/Web-20-Overview
(Mordern) Mobile Web
The popularity of smart phone and tablets pushed the changes of web design on
small screens and touch based interfaces, and eventually the application
architecture.

It's mainly about user experience, particularly with a focus on user interfaces and
interactions.
Web sites: focus on the display of information adapted to the mobile device
Web applications: focus on functional features, with UI specifically designed for mobile devices

It impacted the application architecture as well.
Mobile computing also greatly advanced all aspects of Web 2.0 to a whole new level
(user generated content, participation, social, collaboration, etc.)
Overview of mobile web

https://www.edocr.com/v/k52p5vj4/jgzheng/Mobile-Web-Overview

Learning module #12 will cover this topic with more details
11
Mobile web refers to the access and use of web sites and web
applications over computer networks through web browsers
using smart mobile devices (and optimized for these devices).
Key Technology Components
12
1. Architecture: Client/Server
2. Client: browser
3. Server
4. Communication protocol: HTTP
5. Addressing: DNS, URL
6. Presentation/UI/content
7. Processing capabilities (server or client
side)
Client/Server (C/S) Architecture
13
C/S architecture is a distributed application structure that partitions
tasks or workloads between the providers of a resource or service,
called servers, and service requesters, called clients
(http://en.wikipedia.org/wiki/Client%E2%80%93server_model)
Note: servers and clients can be installed and work independently (not tied to
a specific server or client)
Communication
medium
The medium can be local
network, internet, or any
designated channel
Clients and servers are usually
applications (software), not
necessarily hardware. They may
exist on the same computer.
The Internet
Fundamental Technologies in a
Simple Web Architecture
14
Web server
HTML Files
HTTP -
Response
URL
http://spsu.edu/index.html
Web client: browser
HTTP -
Request
Server side
Client side
Communication
medium
HTML (Hypertext Markup Language)
15
An HTML file (or a web page) is a pure text file created using HTML
HTML is a standard markup language to describe a web
document/page using tags (markups)
All content in a web page are wrapped in tags: ,

,

,

,
, , etc.
Web browsers interpret (render) these tags and display the content in a more
readable format
Example
https://www.w3schools.com/html/
tryit.asp?filename=tryhtml_tables
(HTML on the left and browser
rendering on the right)
HTML is commonly complimented
by CSS (cascade style sheet) to
make web page appearance
Content/Presentation
16
HTML/CSS is the most common choice to present web
content and UI to end users
HTML describes a web document/page using tags (markups)
CSS (cascade style sheets) takes the styling role from the
original HTML and is used together with HTML.
Other UI languages and formats
XHTML: http://www.w3schools.com/html/html_xhtml.asp
WML: http://en.wikipedia.org/wiki/Wireless_Markup_Language
XUL: http://en.wikipedia.org/wiki/Xul
More:
http://en.wikipedia.org/wiki/User_interface_markup_language
Are all HTML pages web pages? Not necessarily, examples:
Local .htm/.html documents

.mht - MIME HTML, a web page archive format, which is used offline

.chm - Microsoft Compiled HTML Help
Client / Browser
17
A web client presents user interface and interacts with a user.
Web browser is the most widely-used web client with comprehensive UI features

A browser interprets HTML tags and display the content nicely to users (rendering)

Provides an interface for users

It processes client side scripts and works with other plug-ins

http://en.wikipedia.org/wiki/Web_browser
Web browser products and market share

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

http://www.w3counter.com/globalstats.php

http://gs.statcounter.com/

http://www.netmarketshare.com
Browser/rendering engine: the core part that handles the markups, scripts, and other client processing
can be integrated into other programs

http://en.wikipedia.org/wiki/Web_browser_engine

Gecko: used in FireFox

Trident (EdgeHTML): used in IE/Edge
WebKit (Blink): used in Chrome and Safari
Other types of web client: any application that can process HTTP as an client can be view as a web
client. Examples:

Embedded browser in a native desktop or mobile application: Visual Studio
Web service consumer

Hybrid applications which has a component to communicate with the web server

Specific programs without UI: cURL, wget, etc.
Extended reading: a more intensive
look at browsers:
https://www.html5rocks.com/en/tut
orials/internals/howbrowserswork/
Web Server
18
Web server
Hosts web sites, files (web pages), applications, etc.
Processes requests from clients (browsers) and send response back to clients
A web server communicates with clients using HTTP protocol
Resources (files, etc.) on web servers are located by URLs.
Web servers are located by the IP address and domain names.

http://en.wikipedia.org/wiki/Web_server

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server
Major web server products
Apache, IIS, Nginx (a new popular one)
Market share data
http://w3techs.com/technologies/overview/web_server/all
http://news.netcraft.com/
A basic web server does not have additional processing capabilities
Complemented by web server extensions or modules (e.g. PHP) which add programming
capabilities to handle advanced processing
More specialized servers used in multi-tier web applications
Application servers enrich and scale web applications, with features like session, transaction,
security, etc. see server side processing slide later.
Database servers for data and content management
Others: LDAP, Email, etc.
Addressing
19
URL (Uniform Resource Locator) is used to locate a resource on a web server
A standard in IETF RFC 1630.

http://en.wikipedia.org/wiki/Uniform_resource_locator
The World Wide Web's naming scheme had the goal of uniquely identifying all
objects stored on the computers on the Internet. This addressing has two parts
Server address: identified by IP addresses or domain names

File/resource local address: identified by local address pointer
Domain Name System (DNS)
A system that provides the conversion between IP addresses and domain names

Top level domains are managed by ICANN (http://www.icann.org) and IANA (http://www.iana.org)
Check IP and domain name online http://cqcounter.com/whois/
URL types

File based URL: the URL directly corresponds to a file (either static or dynamic)
Resource identifier based URL: the URL is only an representation (an access point) of resource
(typically used in REST)
Extended reading:
https://eager.io/blog/the-history-of-the-url-path-fragment-query-auth/
URL encoding http://en.wikipedia.org/wiki/Percent-encoding
URL (Uniform Resource Locator)
20
URL (or web address) is used to locate a particular
resource on a web server
Components of a URL
Protocol: communication language
Host (domain, IP): web server address
Port: application connecting point/channel
File (resource) path and name
Complete syntax reference: https://en.wikipedia.org/wiki/URL
Example
http://www.spsu.edu:80/aboutus/index.htm
The default port for HTTP is 80;
":80" is usually omitted.
"http" is the protocol for
the Web. :// separates
protocol and domain
"www.spsu.edu" is the domain;
".edu" is the top level domain
"aboutus/" is the directory (path)
on the server; "index.htm" is the
actual file (web page). "/" is used
for path levels.
Some URL Variations
21
Non www domain (the server does not have to be named in www)
http://spsu.edu/aboutus/index.htm
Default document (for example index.html) will be returned if the file part is
not specified
http://www.spsu.edu/aboutus/

If the Web (HTTP) is configured at a different port other than 80
http://www.spsu.edu:800/aboutus/index.htm
URL parameter added after ?
http://www.spsu.edu:80/aboutus/index.htm?ref=homepage
https protocol (HTTP secured)
https://www.spsu.edu/aboutus/index.htm
Virtual pointer (not an actual file)
http://www.spsu.edu/aboutus

IP based
http://168.12.14.112/
HTTP Overview
22
HTTP (Hypertext Transfer Protocol) is the feature
communication protocol for the web
A web server and a browser communicate based on HTTP
http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
Features
An application layer protocol typically running on top of TCP/IP
A request-response cycle protocol
Stateless - http://en.wikipedia.org/wiki/Stateless_protocol
HTTP over TCP/IP
HTTP is a client-server application-level protocol.
Typically runs over a TCP/IP connection; but it does not have
to run on TCP/IP.
Extended reading:
http://www.httpwatch.com/httpgallery/
HTTP Methods
23
HTTP has two types of messages
HTTP Request: a message sent to the web server
HTTP Response: a message sent by the web server
(responded by the server)
http://www.httpwatch.com/httpgallery/introduction/
See example HTTP request and response
messages at http://web-sniffer.net
Or using other tools (see the tools slide)
HTTP Request
24
Message header
Method (GET)
Host
Message body
Contains optional data (usually used with forms)
HTTP Response
25
Message header
Status codes
http://www.httpwatch.com/httpgallery/errors/
http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
Message body
Actual content: HTML, etc.
Domain
26
A domain is a name (address) assigned to a server on the
Internet.
A domain name is divided into several levels starting from the
right, and separated by dots "."
Example:
www.spsu.edu
Top-level domain: a highest level domain that are pre-defined;
usually indicates the type of the site
Created in 1980: .com, .net, .org, .edu, .gov, .int, .mil
2 letter country code: .us, .uk, .jp, .ca, .au, .cn,
https://en.wikipedia.org/wiki/Generic_top-level_domain
Generic top level domains are managed by

ICANN (http://www.icann.org) and IANA (http://www.iana.org)
"edu" is the top level domain.
"spsu" is the 2nd level domain.
"www" is the 3rd level
domain, or host (a server).
DNS
27
The Domain Name System (DNS)
is a hierarchical decentralized
naming system for computers,
services, or other resources
connected to the Internet or a
private network. It associates
various information with domain
names assigned to each of the
participating entities. Most
prominently, it translates more
readily memorized domain names
to the numerical IP addresses.
Address resolution mechanism
Extended reading:
http://en.wikipedia.org/wiki/Dom
ain_name_system
http://computer.howstuffworks.c
om/dns.htm
Put the Simple Web Together
28
What happens after a URL is entered in the web browser?
1. Enter a URL (web address) http://spsu.edu/index.html in
the browser. The domain will be converted to IP address
168.28.176.243 by contacting DNS or from local cache.
2. The browser sends an
HTTP request to the server
3. The server processes the
request and finds the file
4. The server sends the
result back using HTTP
response message
5. The browser
renders (displays)
the file
SPSU's web server at
168.28.176.243
Local computer
and browser
Processing
29
Processing capabilities enhance the Web from an
application aspect
At the client side
DHTML: http://en.wikipedia.org/wiki/Dynamic_HTML
CSS, JavaScript and various components and libraries:
XMLHttpRequest (AJAX), JQuery, etc.
Browser plug-ins: Flash, Sliverlight, Java Applets, ActiveX,
embedded objects, etc.
At the server side
CGI: http://en.wikipedia.org/wiki/Common_Gateway_Interface
Web server extensions or application servers
Major platforms: .Net (IIS, ASP.Net, Mono), Java EE (Servlets,
JSP, EJB, WebLogic, WebSphere), PHP(Zend), Python,
ColdFusion, etc.
Client Side Web Technology
30
Client side technologies are supported by the web
client (browsers)
Everything will be downloaded to the client and executed
by browsers
Client side technologies
HTML: the basic content
Cascading Style Sheet (CSS): create web page style
(color, size, position, etc.), layout, and simple animation
Client-side scripting (JavaScript): advanced processing at
the client side that provides functionalities
Browser plug-ins
Flash, Sliverlight, Java Applets, PDF, embedded objects, etc.
View an example at
https://html-css-js.com
Server Side Web Technology
31
Server side technologies are supported by web
servers and other specialized servers
Everything will be process on the server side before client
side content (HTML, image, CSS, Javascript, etc.) is
downloaded
Server side technologies
Web server
Serving static file requests
Web server extensions or application servers
Java, PHP, ASP.Net, Perl, CGI, ASP, ColdFusion, etc.
Database servers
SQL Server, MySQL, Oracle, etc.
Server Side Processing
32
Generated Content
(HTML, CSS, etc.)
Web Server
Extension, Module,
or Application Server
Web Server
Client
(Browser)
Request
Response
Database
Server
Other
Servers:
Email,
LDAP, Video
streaming,
other web
servers, etc.
Static files/pages
Processing
Delegation
HTTP response message with
client content (HTML, CSS,
JavaScript, image, flash, etc.)
More specialized servers used
in multi-tier web applications.
Application servers enrich and
scale web applications, with
features like session,
transaction, security, etc.
Database servers for
data and content
management
A basic web server does not have
additional processing capabilities;
it's complemented by web server
extensions or modules which add
programming capabilities to
handle advanced processing.
https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction
Simple vs. Dynamic Web
Dynamic Web is enabled by advanced processing capabilities at both the client side and
server side (especially the server side)
Simple/Static
Dynamic
Overview
Usually document (HTML files) based web
applications with limited client scripting
Advanced processing is utilized at many levels
Technologies
Client side: HTML, CSS
Client side: CSS, JavaScript
Server side: PHP, Java, .Net, Python
Advantages
Simple, small and fast
Functional, versatile
Web content
Static HTML files
A mixture of HTML, scripts, programming codes,
executable programs, data storage, etc.
Web page
construction
Web pages are authored at design time
Web pages are "assembled" at run time (on the fly)
Content source
Single source: HTML file
Multiple sources: HTML files, XML/JSON files, other
files, databases, other websites, etc.
Web navigation and
interaction mode
Click and read
Rich interaction: write/type, choose, move, slide,
drag and drop, expand, draw, listen, speak, etc.
Usage and
Examples
Commonly used for web presence,
information publishing, etc., for personal or
small business websites:
http://zheng.kennesaw.edu
http://it5443.azurewebsites.net
http://www.berkshirehathaway.com
Wide range of applications: e-commerce, intranet,
business software, e-learning, social networking,
system admin, etc.

E-Commerce: http://amazon.com
Web search engines: http://google.com
Content publishing: http://wordpress.com
Web portal: http://yahoo.com

E-Learning: https://kennesaw.view.usg.edu
Web Development
34
Web design vs. development
Front end, back end, full stack
Knowledge and skills
Development tools
Utility tools and resources
Web Design vs. Web Development
35
The defined lines between designers and developers are
becoming more blurred as more designers are learning to code
and more developers are paying close attention to design
theory.
http://designmodo.com/designer-vs-developer/
See the complete
infographic at
https://www.webfx.com/blog/
web-design/web-designers-
vs-web-developers-
infographic/
Front end vs Back end Development
36
Front end development focuses on the client side
User interfaces and interactions
Applications that can be done at the client side
Major languages: HTML/CSS/JavaScript
Focus on usability and user experiences
Back end development focuses on the server side
Logic and functions
Database operations
Other server supported applications and services like communication,
authentication, etc.
Mainly use server side languages and platforms like ASP.Net/C#,
Java, PHP, Python
Full stack development
Cover both front and back end, and the overall architecture spanning
over clients and servers
Coding Tools
37
Easy to use
Notepad ++
Efficient coding
Visual Studio Code
https://blog.templatetoaster.com/dreamweaver-alternative-micorsoft-
visual-studio-code/
Advanced IDE
Visual Studio
Eclipse
Dreamweaver
Web based
http://htmleditor.tools
https://codepen.io
https://jsfiddle.net
Utility Tools
38
HTTP Tools
Browser integrated developer tools like Chrome
Developer Tools
Add-ons like HttpWatch https://www.httpwatch.com
Web based like http://web-sniffer.net
Use specific sniffing tools like WireShark
More
http://html-css-js.com
Web Hosting
39
Websites and applications are put on a server to serve the
public, which is called web hosting.
Hosting choices
Microsoft Azure for Students (https://imagine.microsoft.com/en-
us/Catalog/Product/99) provides free service to students.
GitHub Pages (https://pages.github.com) provide free services
for Git based projects.
Commercial hosting. Purchase your individual hosting with
your own domain from a commercial provider
Usually about 5 to 10 dollars per month for shared hosting
10 to 15 dollars for a domain per year.
Do some research using Google or
http://www.whoishostingthis.com/hosting-reviews/
Find a free service provider like https://www.000webhost.com
or https://www.freehosting.com
Key Readings and Resources
40
General introduction

This lecture notes:
https://www.edocr.com/v/qezldpd2/jgzheng
/Introduction-to-World-Wide-Web-and-
Web-Development

Introduction to Web as a Platform:
https://msdn.microsoft.com/library/bb3309
32.aspx
https://www.youtube.com/watch?v=3XgEu
qKSRIw

http://www.slideshare.net/randyconnolly/ch
apter01-presentation-16514220 - the first
chapter of the textbook Fundamentals of
Web Development.

http://itwebtutorials.mga.edu/html/chp1/ser
ving-pages.aspx
Server side

https://developer.mozilla.org/en-
US/docs/Learn/Common_questions/What_
is_a_web_server

https://developer.mozilla.org/en-
US/docs/Learn/Server-
side/First_steps/Introduction
Browser

https://www.html5rocks.com/en/tutorials/internals/h
owbrowserswork/

https://hacks.mozilla.org/2017/05/quantum-up-
close-what-is-a-browser-engine/
HTTP

http://www.httpwatch.com/httpgallery/

http://www.ntu.edu.sg/home/ehchua/programming/
webprogramming/HTTP_Basics.html
URL

http://eager.io/blog/the-history-of-the-url-path-
fragment-query-auth/
DNS

http://computer.howstuffworks.com/dns.htm

http://en.wikipedia.org/wiki/Domain_name_system
Development

https://www.w3schools.com

https://www.codecademy.com

https://developer.mozilla.org

http://www.w3resource.com

http://html.net

https://html-css-js.com