UNIT 1-INTERNET

PROGRAMMING

PREPARED BY
P.BRINDA,ASSISTANT
PROFESSOR-CSE
 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 Source Destination
Got it.
acknowledgment.

Here’s a packet.

{
3. Resend packet
if no (or delayed) Here’s a resent packet.
acknowledgment.
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
35 – It defines how to display HTML elements
 CSS stands for Cascading Style Sheets
 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 H TTP
 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
Hypertext Transport Protocol
(HTTP)
 HTTP is based on the request-response
communication model:
– Client sends a request
– Server sends a response
 H T T P 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
 H T T P 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 1b. HTTP server at host
server (process) at www.SS.edu.jo waiting for
www.SS.edu.jo TCP connection at port
on port 80 80. “accepts”
2. HTTP client sends HTTP connection,
request message notifying client
(containing URL) into
TCP connection socket. 3. HTTP server receives
Message indicates that request message, forms
response message containing
client wants object
time from the folders: requested object, and sends
message into
its
Web/SE432/se432.html socket
2-54
 Non-persistent H T T P (cont.)
4. HTTP server closes
5. HTTP client receives response
TCPconnection.
message containing html file,
displays html. Parsing html
file, finds 10 referenced jpeg
objects
tim
e 6. Steps 1-5 repeated
for each of the
referenced objects
 HTTP Messages

 Request and Response Message Formats

 H T T P 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: H T T P 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 Host: www.SS.edu.jo\r\n
User-Agent: Firefox/3.6.10\r\n
commands) 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
Connection: keep-alive\r\n
line feed at start
\r\n
of line indicates
end of header
lines
 HTTP Request: Start Line

 Start line
– Example: GET HTTP/1.1
/ANU/Web/SE432/SE432.html
 Three space-separated parts:
– HTTP request method
– Request-URI
• Request-URI(Uniform Resource
is the portion of Identifier)
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)
 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: H T T P 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
header ETag: "17dc6-a5c-bf716880"\r\n
Accept-Ranges: bytes\r\n
lines Content-Length: 2652\r\n
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