INTERNET PROGRAMMING

Prepared by V. ANITHA MOSES

 Internet Programming

Internet Programming

2
UNIT I WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0
Web Essentials: Clients, Servers and Communication – The
Internet – Basic Internet protocols – World wide web – HTTP
Request Message – HTTP Response Message – Web Clients – Web
Servers – HTML5 – Tables – Lists – Image – HTML5 control
elements – Semantic elements – Drag and Drop – Audio – Video
controls – CSS3 – Inline, embedded and external style sheets –
Rule cascading – Inheritance – Backgrounds – Border Images –
Colors – Shadows – Text – Transformations – Transitions –
Animations.
 Text book
H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet
and World Wide Web: How to Program, Prentice
Hall, 2011, 5th edition

4
 References

1.Stephen Wynkoop and John Burke ―Running a

Perfect Website‖, QUE, 2nd Edition,1999.
2.Chris Bates, Web Programming – Building Intranet
Applications, 3rd Edition, Wiley Publications, 2009.
3.Jeffrey C and Jackson, ―Web Technologies A
Computer Science Perspective‖, Pearson Education,
2011.
4.Gopalan N.P. and Akilandeswari J., ―Web
Technology‖, Prentice Hall of India, 2011.
5.UttamK.Roy, ―Web Technologies‖, Oxford
University Press, 2011.
 Internet Programming
⚫ Web service is a kind of client / server process
⚫ Need interaction between client and server
⚫ Programming for providing Web service can
also be divided into
– Client-side programming: to define the operation to
be performed on the client’s machine
– Server-side programming: to define the operation to
be performed on the server

6
 Internet
Database Web Server Web Client
Server-side Programming Client-side Programming

Skills that are often required: Skills that are often required:
• CGI • XHTML
• PHP • Javascript
• ASP • Java
• Perl • Dreamweaver
• Java Servlet, … • Flash
• SMIL, XML …
7
 Web Essentials

• Client: web browsers, used to surf the Web

• Server systems: used to supply information to these browsers
• Computer networks: used to support the browser-server
communication

Request “document A”

document A

Client Server

8
 Internet v.s. Web

• The Internet: a inter-connected computer networks, linked by

wires, cables, wireless connections, etc.
• Web: a collection of interconnected documents and other
resources.
• The world wide web (WWW) is accessible via the Internet, as
are many other services including email, file sharing, etc.

9
 Internet

• It was originated in 1969 at ARPANET (Advanced research

project Agency) of DoD (Department of Defense), USA

• It‘s prime purpose was to connect among various bodies of US

government
• Initially there were only four nodes (Hosts)
• In 1972, ARPANET was spread across the globe with 23 nodes
at different parts of the world

• Then all the other organizations in respective countries joined

to this network in order to send and receive data among other
countries
• Thereby internet has got populated with number of networks,
thus became a tech giant

• Around 1990s, Tim Berners Lee and O-Reilly had developed

WWW and other internet communication protocols
 The Internet: Definition
• the network of networks connected via the
public backbone and communicating using
TCP/IP communication protocol
– Backbone initially supplied by NSFNET, privately
funded (ISP fees) beginning in 1995
• The collection of computers that can
communicate with one another using
TCP/IP over an open, global
communication network.
• Terminologies used in internet:-

• Host: A computer that is connected to internet

• Communication service: Protocols to send and receive

data over the internet such as FTP, HTTP, WWW, VoIP,
etc.
• ISP: Internet Service providers are decentralized and
those who provide internet connectivity to its
subscribers. Ex: BSNL

• Online: When a computer is connected to internet

• Hyperlink: Allows an user to move from one page to
another
• Protocols: Set of rules for communication

• TCP/IP: to establish a virtual connection between

source and destination. It guarantees data delivery,
reliable, ordered packet delivery, etc
• Client/Server Model: TCP/IP uses this model where a client
refers to any computing device that generates HTTP request
and server refers to any computer that responds to the
corresponding request

• IP address: It is the unique address assigned to a computing

device that gets connected to the internet. It is also called as
logical address or software address. It is mutable.

• DNS: Domain Name Servers are used to translate the website

names given by the users into machine understandable IP
addresses from a database.

• URL: Uniform Resource Locator (URL) is defined as an unique

address for the file that has to be accessed over the internet.
If we want to access a website, we enter its URL in the
address bar of the web browser.
 How does the Internet Work?
• Through communication protocols
• A communication protocol is a specification of how communication
between two computers will be carried out
– IP (Internet Protocol): defines the packets that
carry blocks of data from one node to another
– TCP (Transmission Control Protocol) and UDP
(User Datagram Protocol): the protocols by which
one host sends data to another.
– Other application protocols: DNS (Domain Name
Service), SMTP (Simple Mail Transmission
Protocol), and FTP (File Transmission Protocol)

16
 Internet Protocols: IP
• IP is the fundamental protocol defining the
Internet (as the name implies!)
• IP address:
– 32-bit number (in IPv4)
– Associated with at most one device at a time
(although device may have more than one)
– Written as four dot-separated bytes, e.g.
192.0.34.166
 Internet Protocols: IP

• IP function: transfer data from source device to

destination device
• IP source software creates a packet
representing the data
– Header: source and destination IP addresses, length
of data, etc.
– Data itself
• If destination is on another LAN, packet is sent
to a gateway that connects to more than one
network
•A checksum is created to ensure the correctness
of the data; corrupted packets are discarded
• IP-based communication is unreliable
 Internet Protocols: IP

Source

Network 1
Network 3 Destination
Gateway Network 2

Gateway
Source

LAN 1
Gateway
Destination

Internet Backbone Gateway LAN 2

 Internet Protocols: TCP
• Limitations of IP:
1. No guarantee of packet delivery (packets
can be dropped)
2. Communication is one-way (source to
destination)
• TCP adds concept of a connection on top
of IP
1. Provides guarantee that packets delivered
2. Provide two-way (full duplex) communication
 Internet Protocols: TCP

Can I talk to you?

1. Establish
connection. { OK. Can I talk to you?

OK.

Here’s a packet.
2. Send packet
with
acknowledgment. { Source
Got it.
Destination

Here’s a packet.
3. Resend packet

acknowledgment. {
if no (or delayed) Here’s a resent packet.

Got it.
 Internet Protocols: TCP

3. TCP also adds concept of a port

– TCP header contains port number
representing an application program on the
destination computer
– Some port numbers have standard meanings
• Example: port 25 is normally used for email
transmitted using the Simple Mail Transfer
Protocol (SMTP)
– Other port numbers are available first-come-
first served to any application
Internet Protocols: TCP
 Internet Protocols: UDP

• Like TCP in that:

– Builds on IP
– Provides port concept
• Unlike TCP in that:
– No connection concept
– No transmission guarantee
• Advantage of UDP vs. TCP:
– Lightweight, so faster for one-time messages
 TCP/IP Protocol Suites

HTTP, FTP, Telnet, DNS,

SMTP, etc.

TCP, UDP

IP (IPv4, IPv6)

26
 Domain Name Service (DNS)
• Run using UDP rather than TCP
• DNS is the “phone book” for the Internet
– Map between host names and IP addresses
– DNS often uses UDP for communication

• Fully Qualified Domain Name (FQDN): a domain

name that includes a hostname.
✓ www.example.com is the FQDN
 Domain Name Service (DNS)

• FQDN can have three parts:

1. Hostname: www, mail, ftp, store, support, etc.
2. Domain: apple, microsoft, ibm, facebook, etc.
3. Top level domain (TLD): .com, .net, .org,
• Generic: .com, .org, etc.
• Country-code: .us, .sa, etc.
• Domains are divided into second-level
domains, which can be further divided into
subdomains, etc.
– E.g., in www.example.com, example is a second-level
domain
 Domain Name Service (DNS)

• nslookup program provides command-line

access to DNS (on most systems)
• looking up a host name given an IP
address is known as a reverse lookup
– Recall that single host may have mutliple IP
addresses.
– Address returned is the canonical IP address
specified in the DNS system.
Domain Name Service (DNS)

Reverse Lookup
 Analogy to Telephone
Network
• IP ~ the telephone network
• TCP ~ calling someone who answers,
having a conversation, and hanging up
• UDP ~ calling someone and leaving a
message
• DNS ~ directory assistance
 Higher-level Protocols
• Many protocols build on TCP
– Telephone analogy: TCP specifies how we
initiate and terminate the phone call, but some
other protocol specifies how we carry on the
actual conversation
• Some examples:
– SMTP (email)
– FTP (file transfer)
– HTTP (transfer of Web documents)
 The World Wide Web (WWW)

• WWW is a system of interlinked, hypertext documents that runs over

the Internet
• Two types of software:
– Client: a system that wishes to access the
information provided by servers must run client
software (e.g., web browser)
– Server: an internet-connected computer that
wishes to provide information to others must run
server software
– Client and server applications communicate over
the Internet by following a protocol built on top of
TCP/IP – HyperText Transport Protocol (HTTP)
33
 Basics of the WWW

• Hypertext: a format of information which allows one to move

from one part of a document to another or from one document
to another through hyperlinks
• Uniform Resource Locator (URL): unique identifiers used to
locate a particular resource on the network
• Markup language: defines the structure and content of
hypertext documents

34
 Static Web: HTML/XHTML, CSS

• HTML stands for HyperText Markup Language

– It is a text file containing small markup
tags that tell the Web browser how to
display the page

• XHTML stands for eXtensible HyperText Markup Language

– It is identical to HTML 4.01
– It is a stricter and cleaner version of HTML

• CSS stands for Cascading Style Sheets

35 – It defines how to display HTML elements

 Why Programmability?

• What’s the drawback to simple document model?

– Static
– Assume that documents are created before
they are requested

36
 Client-Side Programmability

• Scripting language: a lightweight programming language

• Browser scripting: JavaScript
– Designed to add interactivity to HTML
pages
– Usually embedded into HTML pages
– What can a JavaScript Do?
• Put dynamic text into an HTML page
• React to events
• Read and write HTML elements
• Validate data before it is submitted to a server
• Create cookies
• …

37
 Server-Side Programmability

• The requests cause the response to be generated

• Server scripting:
– CGI/Perl: Common Gate Way Interface
(*.pl, *.cgi)
– PHP: Open source, strong database
support (*.php)
– ASP: Microsoft product, uses .Net
framework (*.asp)
– Java via JavaServer Pages (*.jsp)
–…
38
 CGI

• Common Gateway Interface:

– CGI provides a way by which a web server
can obtain data from (or send data to)
database, and other programs, and
present that data to viewers via the web.
– A CGI program can be written in any
programming language, but Perl is one of
the most popular

39
 Web and the HTTP
(HyperText Transfer Protocol)
 World Wide Web
• Originally, one of several systems for
organizing Internet-based information
– Competitors: WAIS, Gopher, ARCHIE
• Distinctive feature of Web: support for
hypertext (text containing links)
– Communication via Hypertext Transport
Protocol (HTTP)
– Document representation using Hypertext
Markup Language (HTML)
 World Wide Web

• The Web is the collection of machines (Web servers)

on the Internet that provide information,
– particularly HTML documents, via HTTP.

• Machines that access information on the Web are

known as Web clients.

– A Web browser is software used by an end user to

access the Web

42
 Web Client: Browser

• Makes HTTP requests on behalf of the user

– Reformat the URL entered as a valid HTTP request
– Use DNS to convert server’s host name to
appropriate IP address
– Establish a TCP connection using the IP address
– Send HTTP request over the connection and wait
for server’s response
– Display the document contained in the response
• If the document is not a plain-text document but instead is written in HTML, this
involves rendering the document (positioning text, graphics, creating table
borders, using appropriate fonts, etc.)

43
 Web Servers

• Main functionalities:
– Server waits for connect requests
– When a connection request is received, the server creates a
new process to handle this connection
– The new process establishes the TCP connection and waits
for HTTP requests
– The new process invokes software that maps the requested
URL to a resource on the server
– If the resource is a file, creates an HTTP response that
contains the file in the body of the response message
– If the resource is a program, runs the program, and returns
the output

44
 Web and HTTP
• web page consists of objects, each object can be:
– HTML file,
– JPEG image,
– Java applet,
– audio file,
– …
• web page consists of base HTML-file which includes several
referenced objects
– each object is addressable by a URL, e.g.,

http://www.school.edu/someDept/pic.gif

host name path name

HTTP:
2-45
2-46
 What is a protocol and http?
• A Protocol is a standard procedure for defining and
regulating communication.
– i.e. TCP, UDP, HTTP, etc.
• HTTP is the foundation of data communication for
the World Wide Web
• The HTTP is the Web’s application-layer protocol for
transferring various forms of data between server and
client such as
– plaintext
– hypertext
– image
– videos and
– Sounds
– etc.
 HTTP:

• It is the standard protocol for communication between web

browsers and web servers.
• It defines:
– how a client and server establish a connection,
– how the client requests data from the server
– how the server responds to that request
– how data is transferred from the server back to the client.
– and finally, how the connection is closed
• It assumes very little about a particular system, and does not keep
state between different message exchanges.
– This makes HTTP a stateless protocol.
– The communication usually takes place over TCP/IP,
– The default port for TCP/IP is 80, but other ports can also be
used.
Hypertext Transport Protocol
(HTTP)

• HTTP is based on the request-response

communication model:
– Client sends a request
– Server sends a response
 HTTP overview (continued)
HTTP is “stateless” ??
• Server maintains no information about past client requests
– Server does not remember any previous requests.
– If a particular client asks for the same object twice in a period of a
few seconds,
• the server does not respond by saying that it just served the
object to the client;
• instead, the server resends the object, as it has completely
forgotten what it did earlier.

• protocols that maintain “state” are complex!

– past history (state) must be maintained
– if server/client crashes, their views of “state” may be inconsistent, must be
reconciled
 How http works?

• HTTP is implemented in two programs:

– a client program and a server program,
executing on different end systems,
– talk to each other by exchanging HTTP
messages.

• The HTTP client first initiates a TCP

connection with the server. Once the
connection is established, the browser and
the server processes access TCP through
their socket interfaces.
 HTTP
• Normally implemented over a TCP connection
– (80 is standard port number for HTTP)
• Typical browser-server interaction:
1. Client
• User enters Web address in browser
• Browser uses DNS to locate IP address
• Browser opens TCP connection to server
• Browser sends HTTP request over connection
2. Server
• Server sends HTTP response to browser over connection
3. Client
• Browser displays body of response in the client area of the
browser window
 HTTP connections
non-persistent HTTP
– At most one object sent over TCP connection, connection then
closed
– Downloading multiple objects required multiple connections
– Separate TCP connection is needed to serve each resource (object).

persistent HTTP
– Multiple objects can be sent over single TCP connection between
client and server
– Single TCP connection is needed to serve multiple resources.
– Server leaves the connection open even after serving the request
and closes connection on timeout.

HTTP:
 Non-persistent HTTP
(contains text, and a
suppose user enters URL: references to style.css )
www.SS.edu.jo/ANU/Web/SE432/se432.html

1a. HTTP client initiates TCP

connection to HTTP server 1b. HTTP server at host
(process) at www.SS.edu.jo waiting for
www.SS.edu.jo TCP connection at port
on port 80 80. “accepts” connection,
2. HTTP client sends HTTP notifying client
request message
(containing URL) into TCP
connection socket. 3. HTTP server receives request
Message indicates that message, forms response
message containing requested
client wants object from object, and sends message into
time
the folders: its socket
Web/SE432/se432.html 2-54
 Non-persistent HTTP (cont.)
4. HTTP server closes TCP
5. HTTP client receives response
connection.
message containing html file,
displays html. Parsing html file,
finds 10 referenced jpeg objects

time
6. Steps 1-5 repeated for
each of the referenced
objects
 HTTP Messages

• Request and Response Message Formats

 HTTP request message: general
format
• Structure of the request:
1. start line/request
2. header field(s)
3. blank line/empty
4. optional body
(sp presence of space)
 Example: HTTP request message
• HTTP request message:
– ASCII (human-readable format)

carriage return character

request line line-feed character
(GET, POST, GET /ANU/Web/SE432/SE432.html HTTP/1.1\r\n
HEAD commands) Host: www.SS.edu.jo\r\n
User-Agent: Firefox/3.6.10\r\n
Accept: text/html,application/xhtml+xml\r\n
header Accept-Language: en-us,en;q=0.5\r\n
lines Accept-Encoding: gzip,deflate\r\n
Accept-Charset: ISO-8859-1,utf-8;q=0.7\r\n
carriage return, Keep-Alive: 115\r\n
line feed at start Connection: keep-alive\r\n
\r\n
of line indicates
end of header lines
 HTTP Request: Start Line

• Start line
– Example: GET /ANU/Web/SE432/SE432.html HTTP/1.1
• Three space-separated parts:
– HTTP request method
– Request-URI (Uniform Resource Identifier)
• Request-URI is the portion of the requested URI that follows
the host name (which is supplied by the required Host header
field)
• In addition to http, some other URL schemes are https, ftp,
mailto, and file
– HTTP version
• We will cover 1.1, in which version part of start line must be
exactly as shown
 HTTP Request: Common Request
Methods

• GET
– Used if link is clicked or address typed in browser
– No message-body in request with GET method
• POST
– Used when submit button is clicked on a form
– Form information contained in the message-body
of request
• HEAD
– Requests that only header fields (no body) be
returned in the response
 What about HTTP 2
Method types ?
HTTP/1.0:
• GET
• POST
• HEAD
– asks server to leave requested object out of response
HTTP/1.1:
• GET, POST, HEAD
• PUT
– uploads file in entity body to path specified in URL field
• DELETE
– deletes file specified in the URL field

HTTP:
2-61
 HTTP Request: Header field(s)
• Header field structure:
– Field-name : Field-value
• Syntax
– Field name is not case sensitive
– Field value may continue on multiple lines by starting
continuation lines with white space
– Field values may contain MIME types, quality values,
and wildcard characters(*’s)
• Multipurpose Internet Mail Extensions (MIME)
– Standardized way to indicate the nature and format
of a document (IETF RFC 6838)
– Convention for specifying content type of a
 HTTP Request: Common header
fields

• Host: host name from URL (required)

• User-Agent: type of browser sending request
• Accept: MIME types of acceptable documents
• Connection: value close tells server to close
connection after single request/response
• Content-Type: MIME type of (POST) body,
normally application/x-www-form-urlencoded
• Content-Length: bytes in body
• Referrer: URL of document containing link
that supplied URI for this HTTP request
 HTTP Response
• Structure of the
response:
1. status line
2. header field(s)/lines
3. blank line
4. optional body

64
 Example: HTTP response message
status line
(protocol
status code HTTP/1.1 200 OK\r\n
status phrase) Date: Sun, 26 Sep 2010 20:09:20 GMT\r\n
Server: Apache/2.0.52 (CentOS)\r\n
Last-Modified: Tue, 30 Oct 2007 17:00:02 GMT\r\n
ETag: "17dc6-a5c-bf716880"\r\n
header Accept-Ranges: bytes\r\n
Content-Length: 2652\r\n
lines Keep-Alive: timeout=10, max=100\r\n
Connection: Keep-Alive\r\n
Content-Type: text/html; charset=ISO-8859-1\r\n
\r\n
data data data data data ...

data, e.g.,
requested
HTML file
 The GetResponses program, I

• Here’s just the skeleton of the program that provided the output
on the last slide:
– import java.net.*;
import java.io.*;

public class GetResponses {

public static void main(String [ ] args) {
try {
...interesting code goes here...
}
catch(Exception e) {
e.printStackTrace();
}
}
}
 The GetResponses program, II

• Here’s the interesting part of the code:

– URL url = new URL(args[0]);

URLConnection c = url.openConnection();
System.out.println("Status line: ");
System.out.println('\t' + c.getHeaderField(0));
System.out.println("Response headers:");
String value = "";
int n = 1;
while (true){
value = c.getHeaderField(n);
if (value == null) break;
System.out.println('\t' + c.getHeaderFieldKey(n++) +
": " + value);
}
 Viewing the response
• Here’s an example (from GetResponses):
• > java GetResponses http://www.just.edu.jo
•
Status line:
HTTP/1.1 200 OK
Response headers:
Date: Wed, 10 Sep 2017 00:26:53 GMT
Server: Apache/1.3.26 (Unix) PHP/4.2.2 mod_perl/1.27
mod_ssl/2.8.10 OpenSSL/0.9.6e
Last-Modified: Tue, 09 Sep 2017 19:24:50 GMT
ETag: "1c1ad5-1654-3f5e2902”
Accept-Ranges: bytes
Content-Length: 5716
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html
 HTTP Response: Common header fields

• Connection, Content-Type, Content-Length

• Date: date and time at which response was
generated (required)
• Location: alternate URI if status is redirection
• Last-Modified: date and time the requested resource
was last modified on the server
• Expires: date and time after which the client’s copy
of the resource will be out-of-date
• ETag: a unique identifier (hashcode) for this version
of the requested resource (changes if resource
changes)
 HTTP Response: Status
Codes
• The client can initiate requests to the server.
• In return, the server responds with status codes and message payloads
– (i.e. index.html)
• The status code is important and tells the client how to interpret the server response
• The HTTP specification defines certain number ranges for specific types of
responses
• Three-digit number
– First digit is class of the status code:
• 1xx: Informational Messages
• 2xx: Successful
• 3xx: Redirection
• 4xx: Client Error
• 5xx: Server Error
– Other two digits provide additional information
 Common Status Codes
• 200 OK
– Everything worked, here’s the data
• 301 Moved Permanently
– requested object moved, new location specified later in this msg (Location:)
• 302 Moved temporarily
– URL temporarily out of service, keep the old one but use this one for now
• 400 Bad Request
– There is a syntax error in your request
• 403 Forbidden
– You can’t do this, and we won’t tell you why
• 404 Not Found
– No such document
• 408 Request Time-out, 504 Gateway Time-out
– Request took too long to fulfill for some reason
• 505 HTTP Version Not Supported
 Basic Structure of HTML
<html>
<head>
<title>
This is title, describing the content
</title>
</head>
<body>
This is body, main part of the page
</body>
</html>

72
 <!-- main.html -->
<!-- Our first Web page comment
-->

<html>
<head>
<title>Internet and WWW How to Program -
Welcome define the title of the web page
</title>
</head>

<body>
<p>Welcome to XHTML!</p>
</body>
<p> - new paragraph
</html>

Example
73
 ⚫ An HTML document can be divided into 2
sections
⚫ head section
– contains information of how the page is formatted
– e.g. <title> … </title> can be found in head section
to indicate the title of the Web page when it is
shown in browser
⚫ body section
– contains the actual page contents
– e.g. <p>Welcome to HTML!</p> shows a line of text
“Welcome to HTML!” on the new paragraph

74
 Tags
• Tags: case insensitive
– For HTML, it is case insensitive
• Browse will not display information within tag that does
not understand
• Tags: no precise positioning
• Many start tags define attributes that provide additional
information
• E.g. <html>

start tag
75
 Common Tags – Headers
• Some text may be more important the others
• HTML provides six headers, called header elements,
for specifying the relative importance of information
– <h1> … </h1>, <h2> … </h2> to <h6> … </h6>
• It is assumed the text in <h1> is more important
than that in <h2> and so on so forth
• By default, the size of the text that is more important
is bigger

76
 <html>
<head>
<title>Internet </title>
</head>

<body>
6 headers are all used
<h1>Level 1 Header</h1> to indicate the relative
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
importance of text
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>

</body>
</html>

77
 Text under <h1> has the largest size

78