Wad 3 Units PDF

CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS
1. 1. Web Essentials:Clients, Servers, and Communication
The essential elements of the World Wide Web are:

 The web browsers: used to surf the Web
 The server systems: used to supply information to these browsers
 The computer networks: supporting browser-server communication
1.1.1. The Internet

 The Internet traces its roots to a project of the U.S. Department of Defense’s
Advanced Research Projects Agency or ARPA.
 The ARPANET project was proposed to support DoD’s research on
computer networking. in the late 1960s,
 The purpose of ARPANET was to create a larger heterogeneous network in
order to electronically connect DoD-sponsored researchers and in order to
develop tools for heterogeneous computer networking.
 The ARPANET computer network was launched in 1969 with four computers
at four sites running four different operating systems.
 An e-mail was available on ARPANET beginning in 1972, and it soon became
an extremely popular
 By 1983, when many ARPANET nodes were split off to form a separate
network called MILNET, there were only 113 nodes in the entire network, and
these were primarily at universities and other organizations involved in DoD-
sponsored research.
 Other networks were being built, both internationally and regionally within the
United States, which includes:
o SURAnet(Southeastern University Research Association
Network)was organized by the University of Maryland beginning in
1982 and included all major universities and research institutions in the
southeastern United States.
o CSNET (Computer Science Network) was partially funded by the U.S.
National Science Foundation (NSF) to aid scientists at universities
without ARPANET access.
1.1.2. Internet Protocols

 Several of the most widely used Internet protocols including the File Transfer
Protocol (FTP) – used for Internet’s file transfer and Simple Mail Transfer
Protocol (SMTP)-used for e-mail operations, were initially developed under
ARPANET.
 But the most emergence of the Internet as we know it was the development of
the TCP/IP (Transmission Control Protocol / Internet Protocol)
communication protocol. TCP/IP was designed to be used for host-to-host
communication both within local area networks and between networks.
PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 1 -

 ARPANET switched from using an earlier protocol to TCP/IP during 1982 for
allowing computers on outside networks such as CSNET to communicate via
TCP/IP with computers on the ARPANET.
 A “connection” from CSNET to the ARPA Internet often meant that a modem
connection was made from one computer to another for the purpose of
sending an e-mail messages asynchronouly.
 At first, many institutions connected through the so-called PhoneNet
(modem) approach for passing e-mail messages. This generally involved
long distance calls, and the expense of these calls could be a problem. Other
options, such as leasing telephone lines for dedicated use, could be even
more expensive.
 Beginning in 1985, the NSF began work on a new network based on TCP/IP,
called NSFNET. One of the primary goals of this network was to connect the
NSF’s new regional supercomputing centers. So that the NSFNET would
provide a backbone through which other networks could interconnect
synchronously.
 There are six supercomputer centers across America connected by the early
NSFNET backbone. Regional networks connecting to the backbone included
o SURAnet
o NYSERNet
o JvNCnet
o SDSCnet
 In addition, many universities and other organizations connected to the

NSFNET backbone either directly or through agreements with other
institutions that had NSFNET access, either directly or indirectly
 The original backbone operated at only 56 kbps, the maximum speed of a
home dial-up line today
 The backbone rate was upgraded to 1.5 Mbps (T1) in 1988 and then to 45
Mbps (T3) in 1991.
 NSFNET quickly replaced ARPANET, which was officially decommissioned in
1990. At this point, NSFNET was at the center of the Internet, that is, the
collection of computer networks connected via the public backbone and
communicating across networks using TCP/IP. This same year, commercial
Internet dial-up access was first offered
 In summary, the Internet is the collection of computers that can communicate
with one another using TCP/IP over an open, global communications network

1.2 Basic Internet Protocols
 A computer communication protocol is a detailed specification of how

communication between two computers will be carried out in order to serve
some purpose
 The Internet protocol specifies both the high-level behavior of software
implementing the protocol and the low-level details such as the specific fields
of information that will be contained in a communication message, the order in
which these fields will appear, the number of bits in each field, and how these
bits should be interpreted. We are primarily interested in a high-level view of
general-purpose Internet protocols. In this section we look at a key Web
protocol, HTTP, in more detail
1.2.1 TCP/IP
 It is a set of networking protocols that allows two or more computers to
communicate with each others.TCP and IP are actually two different
protocols, but often treated as one because most of the services in the
Internet such as e-mail, Web browsing, file downloads, accessing remote
databases—are built on top of both the TCP and IP protocols.
Internet Protocol(IP):
 A key element of IP is the IP address, which is a 32-bit number. Each device
on the Internet has one or more IP addresses associated with it
 IP addresses are normally written as a sequence of four decimal numbers
separated by periods (called “dots”), as in 192.0.34.166. Each decimal
number represents one byte of the IP address.
 The function of IP software is to transfer data from one computer (the
source) to another computer (the destination). When an application on the
source computer wants to send information to a destination, the application
calls IP software on the source machine and provides it with data to be
transferred along with an IP address of both source and destination
computers.
 The IP software running on the source split the message into one or more
packets with sequence numbers and attach header information such as
IP address of source and destination machines, .length of data, and so
on. Then transfer those packets along path from the source and destination
machines.
 If the destination computer is on the same local network as the source, then
the IP software will send the packet to the destination directly via this network
 If the destination is on another network, the IP software will send the packet
to a gateway, which is a device that is connected to the source computer’s
network as well as to at least one other network.

 The gateway pass the packets to the destination computer, if both gateway
and destination machines in the same network,. Otherwise gateway will pass
the packet to the next gateway it is directly connected. This process will
continue until the packet reaches the destination computer.
 IP software on that destination computer will receive the packet and pass its
data up to an application that is waiting for the data.
 The sequence of computers that a packet travels through from source to
destination is known as its route. A separate protocol (BGP-4, the Border
Gateway Protocol) is used to pass network connectivity information between
gateways so that each can choose a best next hop for each packet it
receives.
 IP software also adds some error detection information (a checksum) to
each packet it creates, so that if a packet is corrupted during transmission,
this can usually be detected by the recipient and discard any corrupted
packets and ask the source machine to resend the corrupted packet
 Thus, IP-based communication is unreliable: packets can be lost. Obviously,
IP alone is not a particularly good form of communication for many Internet
applications
Transmission Control Protocol (TCP)

 It is reliable and connection oriented protocol runs on top of IP that facilitates
the exchange of messages between computing devices in a network. It is
similar to telephone conversation
 A connection is established between TCP software running on two machines
by one of the machines (let’s call it A) sending a connection-request
message via IP to the other machine(B).
 If the connection is accepted by B, then B returns a message to A requesting
a connection in the other direction. If A responds affirmatively, then the
connection is established. Notice that this means that A and B can both send
messages to one another at the same time; this is known as full duplex
communication.
 Once a connection has been established, TCP provides reliable data
transmission by demanding an acknowledgment for each packet it sends via
IP. Essentially, the software sets a timer after sending each packet.
 The TCP software on the receiving side sends a packet containing an
acknowledgment for every TCP-based packet it receives that passes the
checksum test. If the TCP software sending a packet does not receive an
acknowledgment packet before its timer expires, then it resends the packet
and restarts the timer.
 Another important feature that TCP adds to IP is the concept of a port. The
port concept allows TCP to be used to communicate with many different
applications on a machine.

 For example, a machine connected to the Internet may run a mail server for
users on its local network, a file download server, and also a server that
allows users to log in to the machine and execute commands from remote
locations. As illustrated in the following Figure:
Figur
Figure : communication using TCP/IP.
- In that Boxes represent software applications on the respective host

machines
- ovals represent data transmitted between applications
- circled numbers denote the time order of operations.
operations
- “TCP[25]” represents a TCP header containing 25 as the port number.
 IN the above figure , a mail server conforming with SMTP will typically ask
TCP to listen for requests to port 25. If at a later time an IP message is
received by the machine running the mail server
server application and that IP
message contains a TCP message with port 25 indicated in its header, then
the data contained within the TCP message will be returned to the mail server
application. Such an IP message could be generated by a mail client calling
onn TCP software on another system(he
system right side of the figure).
 TCP and IP provide many other functions, such as splitting long messages
into shorter ones for transport over the Internet
Interne and reassembling them
on the receiving side.

1.2.3 UDP, DNS, and Domain Names
User Datagram Protocol(UDP)

 It is unreliable and connectionless protocol. So, there is no need to establish
connection prior to data transfer.
 UDP (User Datagram Protocol) is an alternative protocol to TCP that also
builds on top of IP. The main feature that UDP adds to IP is the port concept
that we have just seen in TCP.
 However, it does not provide the two-way connection or guaranteed delivery
of TCP. Its advantage over TCP is speed for simple tasks. For example, if all
you want to do is send a short message to another computer without
excepting acknowledgement then UDP is probably a good alternative to TCP
 It is similar to sending SMS
Domain Name Service (DNS)

 One Internet application that is often run using UDP rather than TCP is the
Domain Name Service (DNS).
 DNS provides a mechanism for mapping back and forth between IP
addresses and host names.
 Basically, there are a number of DNS servers on the Internet, each listening
through UDP software to a port
 When a computer on the Internet needs to convert a host name such as
www.example.org to a corresponding IP address-it uses the UDP software
running on its system to send a UDP message to one of these DNS
servers, requesting the IP address. This server will then send back a UDP
message containing the IP address.
 UDP is sometimes referred to as a lightweight communication protocol
and TCP as a heavyweight protocol
 Internet host names consist of a sequence of labels separated by dots. The
final label in a host name is a top-level domain. There are two standard
types of top-level domain:
o generic (such as .com, .edu, .org, and .biz)
o country-code (such as .de, .il, and .mx)
 The top-level domain names are assigned by the Internet Corporation for
Assigned Names and Numbers (ICANN), a private nonprofit organization
that was originally funded by the U.S. government.
 Each top-level domain is divided into subdomains (second-level domains),
which may in turn be further divided, and so on.
 The owner of a second-level domain can then further divide that domain
into subdomains, and so on. Ultimately, the subdomains of a domain are
individual computers. Such a subdomain, consisting of a local host name

followed by a domain name is sometimes called

ca a fully qualified domain
name for the computer.
 For example, www.example.org is a fully qualified domain name in which
o www is local name www
o example is second-level
second domain
o org is top-level
level domain.
domain
 Some tools are available that allow you to query the Internet DNS.
D For
example, the nslookup command can be typed at a command prompt in
order to find the IP address given a fully qualified domain name or vice
versa.
 Typical usage of nslookup is illustrated by the following (user input is
italicized):
C:¥>nslookup
nslookup www.example.org
Server: slave9.dns.stargate.net
Address: 209.166.161.121
Name: www.example.org
Address: 192.0.34.166
 The output of first two lines identify the qualified name and IP address of
the DNS server that is providing the domain name information in the last two
line of the output
 Also notice that a single IP address can be associated with multiple
domain names. In this example, both www.example.org and
www.example.com are associated with the IP address 192.0.34.166
Reverse lookup
 A lookup that specifies an IP address to find corresponding qualified name
(URL address) is referred to as a reverse lookup. If multiple qualified names
are associated with an IP address, only one of the names will be returned by
a reverse lookup. This is known as the canonical name for the host; all
other names are considered aliases. In the following reverse lookup
indicates that www.example.com is the canonical name for the host with IP
address 192.0.34.166
C:¥>nslookup 192.0.34.166
Server: slave9.dns.stargate.net
Address: 209.166.161.121
Name: www.example.com
Address: 192.0.34.166
1.2.4 Higher-Level Protocols

 A variety of higher-level protocols are used to communicate once a TCP
connection has been established.
 SMTP and FTP are two examples of widely used higher-level protocols that
are used to communicate over TCP connections.
 SMTP(Simple Mail Transfer Protocol) supports transfer of e-mail between
different e-mail servers
 FTP(File Transfer protocol) is used for transferring files between machines.
 Telnet is an another higher-level TCP protocol, is used to execute
commands typed into one computer on a remote computer. Telnet can also
be used to communicate directly (via keyboard entries) with some TCP-based
applications.
 Hypertext Transport Protocol (HTTP) is TCP-based protocol used for
communication between web servers and browser, It is the key component in
the definition of the Internet, World Wide Web.
 Type of protocol will be used to communicate over a TCP connection is
normally determined by the port number used to establish the connection.
1.3 The World Wide Web

 Public sharing of information has been a part of the Internet since its early
days.
 the Usenet newsgroup service began in 1979 and provided a means of
“posting” information that could be read by users on other systems with
the appropriate software
 An FTP server application that allowed any user to transfer the files from
their origin machine to the another user’s machine.
 Internet Relay Chat (IRC), the first Internet chat software in widespread use,
which provided both public and private chat facilities.
 Gopher information servers is one of the most popular information
management technologies in the early 1990s that provided a simple
hierarchical view of documents
 The Wide Area Information System(WAIS) is used for indexing and
retrieving information
 the ARCHIE tool is used for searching online information archives
accessible via FTP
 The World Wide Web also was developed in the early 1990s among several
Internet information management technologies.
 All of these technologies consist of (at least) two types of software: server and
client.
 An system that wishes to provide information to other Internet systems must
run server software, and a system that wishes to access the information
provided by servers must run client software (for the Web, the client software
is normally a web browser).
 The server and client applications communicate over the Internet by following
a communication protocol built on top of TCP/IP. The protocol used by the
Web is the Hypertext Transport Protocol(HTTP). This protocol that supports
a client requesting a document from a server and the server returning the
requested document.
 This generic nature of HTTP gives it the advantage of somewhat more
flexibility than the protocols used by WAIS and Gopher.
 Most web pages are written using the Hypertext Markup Language, HTML,
which along with HTTP is a fundamental web technology. HTML pages can
contain the familiar web links (hyperlinks) to other documents on the Web.
While certain Gopher pages could also contain links, normal Gopher
documents were plain text. WAIS and ARCHIE provided no direct support for
links. In addition to hyperlinks, modern versions of HTML also provide
extensive page layout facilities, including support for inline graphics, which
has added significantly to the commercial appeal of the Web.
 The World Wide Web, then, can be defined in much the same way as the
Internet. While the Internet can be thought of as the collection of machines

that are globally connected via IP, where as World Wide Web can be defined
as the collection of machines (web servers) on the Internet that provide
p
information via HTTP, and provide HTML documents on request by
client(usually browser)
1.3.1 Hypertext Transport Protocol

 HTTP is a communication protocol sitting on top of IP. The basic structure of
HTTP communication follows what is known as a request–response
response model.
web web
 A HTTP interaction is always initiated by a client sending a request message

to the server; the server is then generate a response message.
 The format of the request and response messages is dictated by HTTP. The
request and response are both sent within a TCP-stylestyle connection between
the client and the server
 The following figure shows a browser window in which I typed
http://www.example.org in the Location bar.
 When I pressed the Enter

Ente key after typing this address:
o The browser created a message conforming to the HTTP protocol,

o Used DNS to obtain an IP address for www.example.org

o Created a TCP connection with the machine for which the IP address
obtained,
o Sent the HTTP message over this TCP connection,
o Finally received back a message containing the information that is
displayed in the client area of the browser .
 An HTTP request message consists of
o a start line followed by
o a message header and
o optionally a message body.
 The start line always consists of printable ASCII characters, and the header
normally does as well.
 The HTTP response is also a stream of printable characters..To see HTTP in
action, let’s connect to the www.example.com server using Telnet. from
command prompt. and view the response.
$ telnet www.example.org 80
Trying 192.0.34.166...
Connected to www.example.com (192.0.34.166).
GET / HTTP/1.1
Host: www.example.org Request message
HTTP/1.1 200 OK
Date: Thu, 09 Oct 2003 20:30:49 GMT.

Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Content-Length: 438
Connection: close
Content-Type: text/html
Response
<HTML> message
<HEAD>
<TITLE>Example Web Page</TITLE>
</HEAD>
<body>
<p>You have reached this web page by typing
“example.com”, “example.net”,
“example.org” into your web browser.</p>
…
</BODY>
</HTML>

 The request consists of the three lines beginning with the GET and ending
with a blank line,
 The response message in this case begins with the line
HTTP/1.1 200 OK
- is status line of the response,.
Date: Thu, 09 Oct 2003 20:30:49 GMT.

,,,
- is the header of the response.
<HTML>
…
</HTML>
- is the body of the response and is written using the HTML language,
 Notice that the body of response contains the information displayed by

the browser
1.4 HTTP Request Message

1.4.1 Overall Structure
 Every HTTP request message has the same basic
structure:
- Start line
- Header field(s) (one or more)
- Blank line
- Message body (optional)
 Example of HTTP request message

GET / HTTP/1.1  start line
Host: www.example.org  header field
 blank line
1.4.2. Start line

- Every start line consists of three parts, with a single space used to
separate adjacent parts:
1. Request method
2. Request-URI portion of web address
3. HTTP version
- Example:
GET / HTTP/1.1
Request method request

request-URI HTTP version
1.4.2.1. HTTP Version

 The initial version of HTTP was referred to as HTTP/0.9,, and the first Internet
RFC (Request for Comments)
Comments
 HTTP/1.0 released in 1997, HTTP/1.1 was formally defined, and is currently
an Internet Draft Standard.
Standard All operational browsers and servers support
HTTP/1.1
1.4.2.2. Request-URI
 The second part of the start line is known as the Request-URI.
 Request-URI (/ in this example) forms a string known as a Uniform Resource
Identifier(URI) by concatenating the string http:// with the value
alue of
o the Host header field (www.example.org, in this example), and
o the Request-URI
URI (/
( in this example)
 In out example, the URI is http://www.example.org/
URI
 A URI is an identifier that is to
o be associated with a particular resource such
as a web page or graphics image on the World Wide Web.
 Every URI consists of two parts:
o the scheme, which appears before the colon (:), and
o another part that depends on the scheme.
 Web addresses, use the http scheme or https scheme.. In this scheme, the
URI represents the location of a resource on the Web. A URI of this type is
said to be a Uniform Resource Locator (URL).
 Some other URI schemes that mark the URI as a URL are shown in the
following Table: Some Non-http
Non URL Schemes

 A complete list of the currently registered URI schemes can be found at

[IANA-SCHEMES].
Uniform Resource Name (URN)

 A URN is designed to be a unique name for a resource rather than
specifying a location at which to find the resource.
 For example, an edition of War and Peace has an ISBN (International
Standard Book Number) of 0-1404-4417-3 associated with it, and this is the
only book worldwide with this number.
 this book has an associated URN, which can be written as follows:
urn:ISBN:0-1404-4417-3
 The URI for a URN always consists of three colon-separated parts, as
illustrated above
 The first part is the scheme name, which is always urn for a URN-type URI.
 The second part is the namespace identifier, which in this example is
ISBN.
 The third part is the namespace-specific string. In this example it
represents the ISBN of a book
1.4.2.3 Request Method

 The standard HTTP methods and a brief description of each are shown in the
following Table: Standard HTTP/1.1 Methods
Method Request server to

GET Return the resource specified by the Request-URI as the body of a
response message
POST Pass the body of this request message as data to be processed by
the Request-URI
HEAD return the same HTTP header fields that would be returned if a GET
method were used, but except the message body
PUT store the body of this message on the server and assign the
specified Request-URI to the data stored so that future GET request
messages containing this Request-URI will receive this
data in their response messages.
TRACE return a copy of the complete HTTP request message, including
start line, header fields, and body, received by the server. Used
primarily for test purposes
1.4.3. Header Fields and MIME Types

 The Host header field is required in every HTTP/1.1 request message, which
is used to construct URI associated with HTTP Request

 HTTP/1.1 also defines a number of other header fields, several of which are
commonly used by modern browsers.
 Each header field:
 begins with a field name, such as Host,
 followed by a colon and then
 a field value.
 The following is an example of an actual HTTP request sent by a browser
consists of a start line, followed by ten header fields, and ends with short
message body:
POST /servlet/EchoHttpRequest HTTP/1.1

host: www.example.org:56789
user-agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4)
accept: text/xml,application/xml, application/xhtml+xml, text/html; q=0.9,
text/plain; q=0.8,video/x-mng,image/png,image/jpeg,
image/gif;q=0.2,*/*;q=0.1
accept-language: en-us,en;q=0.5
accept-encoding: gzip,deflate
accept-charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
connection: keep-alive
keep-alive: 300
content-type: application/x-www-form-urlencoded
content-length: 13
doit=Click+me
 The following table shows some common MIME types
MIME Type Description

text/html HTML document
text/plain Human-readable text with no embedded
formatting information
image/gif Image represented using Graphics Interchange
Format (GIF)
image/jpeg Image represented using Joint Picture Expert
Group (JPEG) format
application/octet-stream Arbitrary binary data (may be executable)
application/x-www-form- Data sent from a web form to a web server for
urlencoded processing
audio/mid Audio represented using mid format
video/mp4 Video represented using mp4 format

 The Standard Top-level MIME Content Types includes the following:

- application - image - video
- audio - text - multipart, etc
 Note: for multipart, the content could contain multiple entities, each with its
own header and body
 Yet another common feature of header fields is that many header field values
use quality values to indicate preferences. A quality value is specified by a
string of the form ;q=num, where num is a decimal number between 0 and 1,
with a higher number representing greater preference
 In the above example, according to Accept header field, the browser prefers
text/xml (quality value 0.9) over image/jpeg (quality value 0.2).The string */* in
the Accept header field value represents all possible MIME types
 List of request header fields commonly used are listed in the following table:
header filed Use

Host Specify authority portion of URL (host plus port number
User-Agent A string identifying the browser or other software that is
sending the request
Accept MIME types of documents that are acceptable as the body
of the response, possibly with indication of preference
ranking.
Accept-Language Specifies preferred language(s) for the response body
Accept-Encoding Specifies preferred encoding(s) for the response body
Accept-Charset Allows the client to express preferences to a server that
can return a document using various character sets
Connection Indicates whether or not the client would like the TCP
connection kept open after the response is sent. Typical
values are:
- keep-alive if connection should be kept open
- close if not
Keep-Alive Number of seconds TCP connection should be kept open
Content-Type The MIME type of the document contained in the message
body
Content-Length Number of bytes of data in the message body
Referer The URI of the resource from which the browser obtained
the Request-URI value for this HTTP request. For
example, if the user clicks on a hyperlink in a web page,
causing an HTTP request to be sent to a server, then
Referer field of the request contain the URI of the web
page containing the hyperlink

1.5. HTTP Response Message

Messag
 HTTP response message consists of a status line, header fields, and the
body of the response, in the following format:
Status line
Header field(s) (one or more)
Blank line
Message body (optional)
Example:
HTTP/1.1 200 OK
Date: Thu, 09 Oct 2003 20:30:49 GMT.

GMT
Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
(Red
Last-Modified: Wed, 08 Jan 2003 23:11:55
GMT
Content-Length: 438
Connection: close
<HTML>
<HEAD>
<TITLE>Example Web Page</TITLE>
</HEAD>
<BODY>
…
</BODY>
</HTML>
1.5.1 Response Status Line

 The example of status line shown below:
HTTP/1.1 200 OK
 The first line of a response message is the status line,, which consists of
three fields:
 The HTTP version used by the server software
 A numeric status code indicating the type of response and
 text string (the reason phrase)) that presents the information
represented by the numeric status code in human-readable
human readable form.
 In this above example, the status code is 200 and the reason phrase is
OK., which indicates that no errors were detected by the server. The body of
a response having this status code should contain the resource requested by
the client.

Status code
 All status codes are three-digit decimal numbers.. The first digit
represents the general class of status code.. The five classes of HTTP/1.1
first digit of status codes are given in the following Table:
 The last two digits of a status code define the specific status within the
specified class. A few of the more common status codes are shown in the
following Table: Some Common HTTP/1.1 Status Codes
Status Reason Phrase Meaning

code
200 OK Request processed normally
301 Moved Permanently URI for the requested resource has changed.
All future requests should be made to URI
contained in the Location header field of the
response
307 Temporary Redirect URI for the requested resource has changed
at least temporarily. This request should be
fulfilled by making a second request to URI
contained in the Location header field of the
response
401 Unauthorized The resource is password protected, and the
user has not yet supplied a valid password
403 Forbidden The resource is present on the server but is
read protected
404 Not Found No resource corresponding to the given
Request-URI was found at this server
500 Internal Server Error Server software detected an internal failure
1.5.2 Response Header Fields

 The header fields used in HTTP request messages, including Connection,
Content-Type, and Content-Length,
Content are also valid in response messages.
messages

 Some other common response header fields are shown in the following Table
1.5 Some Common HTTP/1.1 Response Header Fields
Filed Name Use

Date Time at which response was generated
Server Information identifying the server software generating this
response
Last-Modified Time at which the resource returned by this request was last
modified
Expires Time after which the client should check with the server before
retrieving the returned resource from the client’s cache
Location Used in responses with redirect status code to specify new URI
for the requested resource.
1.5.3 Cache Control / client side catching

 Several of the response header fields described in table 1.5 are used in
conjunction with cache control:
 In computer systems, a cache is a repository for keeping copies of information
that originates elsewhere. A copy of information is placed in a cache in order
to improve system performance.
 Most web browsers often cache recently viewed web pages that they
requested from servers for quick reloading. If there are no changes between
the version stored in the cache and the current version on the web, this
speeds up your browsing experience
 For example, if an image such as a button icon is included in a web page, a
copy of the image obtained from the server will typically be cached in the
client’s cache. Then if another page at the same site uses the same image,
the image can be retrieved from the client cache rather than sending another
HTTP request to the server and waiting for the server’s response containing
the image.
 Advantage of using cache
 HTTP caching generally leads to
1. quicker display by the browser
2. reduced network communication, and
3. Reduced load on the web server.
 Drawback of using a cache:
 information in a cache can become invalid. For example, if the button
image in the preceding example is modified on the server, but a client
accesses its cached copy of the older version of the image, then the
client will display an invalid version of the image.
 This problem can be avoided in several ways:

 In the first approach the client ask the server whether or not the client’s
copy is valid. This can be done with very little communication by
sending an HTTP request for the resource using the HEAD method,
which returns only the status line and header portion of the response. If
Last-Modified time in the response message precedes the value of the
Date header field returned with the cached resource, then the cached
copy is still valid and can be used. Otherwise, the cached copy is
invalid and the browser should send a normal GET request for the
resource.
 In a second approach, if the server returns an ETag with the resource.
The client can then simply compare the ETag returned by a HEAD
request with the ETag stored with the cached resource. If the ETag
values match, then the cached copy is valid
 Finally, if the server can determine in advance the earliest time at which
a resource will change, the server can return that time in an Expires
header. In this case, as long as the Expires time has not been reached,
the client may use the cached copy of the resource without the need to
validate with the server.
1.6 Web Clients

 A web client is software that accesses a web server by sending an HTTP
request message and processing the resulting HTTP response.
 Web browsers running on desktop or laptop computers are the most
common form of web client software, but there are many other forms of client
software, including text-only browsers(LYNX), browsers running on cell
phones,
 Any web client that is used by the human to access web pages from web
servers is known as a user agent.
 some web clients are not designed to be used directly by humans, but used
by a search engine are called robots.
 Robots crawl the Web automatically and download information that is used by
search engines
 Early web browsers generally either were text-based or ran on specialized
platforms
 The MosaicTM browser, developed at the National Center for
Supercomputer Applications (NCSA) in 1993, was the starting point for
bringing graphical web browsing to the general public.
 The developers of Mosaic founded Netscape Communications
Corporation, and released Netscape Navigator for public use
 Other popular browser base on mosaic includes the following:
 Microsoft Internet Explorer(IE)
 MozillaTM and FirefoxTM
 OperaTM

 SafariTM
 Google Chrome
1.6.1 Basic Browser Functions

 The window of a typical modern browser is split into several rectangular
regions, most of which are known as bars.
 The primary region is the client area,, which displays a document.
 The title bar displays a title assigned by the document author to the
document
 The title bar also displays the browser name as well as standard window-
window
management controls such as minimize,
minimiz maximize, close icons
 The menu bar contains a set of dropdown menus, much like most other
applications that incorporate a graphical user interface (GUI).
 The toolbar contain short cut for various menu items as icons
 The following Figure: five standard regions in a Mozilla 1.4 window.
 The browser’s Navigation toolbar contains standard push-button button controls

that allow the user to return to
 Back button: used to load a previously viewed web page
 Forward button :reverse
: the effect of pressing Back,
 Reload: get ask the updated version of current page from web server
 Stop button: halt page downloading currently in progress
 Print button: print the content of the client area of the window
 text box, known as the Location bar, where a user can enter a URL
and press the Enter key in order to request the browser to display the
document located at the specified URL.
 The status bar displays messages and icons related to the status of the
browser.
 For example, the two icons in the right portion of the status bar in
Figure shows that the browser is online (left icon) and that the browser

is communicating with the server over an insecure communication

channel.
 The messages displayed in the left portion of the status bar are
normally information about the communication between client and
server
 The following table show some status messages displayed in left status bar
Status message Meaning

Resolving host www.example.org.. Requested IP address from DNS; waiting
for response
Connecting to www.example.org... Creating TCP connection to server
Waiting for www.example.org... Sent HTTP request to server; waiting for
HTTP response
Transferring data from HTTP response has begun, but has not
www.example.org.... completed
Done HTTP response has been received,
although further processing
may be needed before the document will be
displayed
Task of browser:
 A primary task of any browser is to make HTTP requests on behalf of the
user.. If a user types an URL in Location bar, the browser must perform a
number of tasks:
 Reformat the URL entered as a valid HTTP request message.
 If the server is specified using a host name use DNS to convert this
name to the appropriate IP address
 Establish a TCP connection using the IP address of the specified web
server.
 Send the HTTP request over the TCP connection and wait for the
server’s response.
 Display the document contained in the response. If the document is not
a plain-text document but instead is written in a language such as
HTML, this involves rendering the document: positioning text and
graphics appropriately within the browser window, creating table
borders, using appropriate fonts and colors, etc.
1.6.2 URLs
 An http-scheme URL consists of a number of parts. Let’s consider the
following example URL:
http://www.example.org:56789/a/b/c.txt?t=win&s=chess#para5
 In that

o www.example.org:56789
 It is known as the authority of the URL.
 It could be either a fully qualified domain name or IP address of
web server
o 56789
 It is known as port number, which is separated from IP
address/ domain name using color(:)
 It is an optional. If it is ignored port number 80 is assumed
o /a/b/c.txt
 It is called as path of the URL
o t=win&s=chess
 It is called as query string of URL
 These are the names and values of HTML form fields sent
server page
 t and s are name of form fields, where as win and chess are
values of corresponding field respectively
o /a/b/c.txt?t=win&s=chess
 It is called as request URI of URL address
o #para5
 It is known as the fragment of the URL
o para5
 It is known as the fragment Identifier.
 Fragment identifiers are used by browsers to scroll particular
part of HTML documents
1.6.3. User-Controllable Features

 Graphical browsers provide many user-controllable features, including:
o Save: allows user to save web documents to the client machine’s file
system.
o Find in page: allows user to search and find particular word / phrase
found in the HTML
o Automatic form filling: The browser can “remember” information
entered on certain forms, such as billing address, phone numbers, etc.
When the form is visited at a later date, the browser can automatically
fill in previously saved data
o Preferences: Users can customize browser functionality in a wide
variety of ways. In Mozilla, a window presenting preference options is
obtained by selecting Edit| Preferences as shown in the following
figure:

Some preference settings directly related to the HTTP topics are:

- Accept-Language: used to set language preference by the user
- Default character set/encoding: The character set/encoding to be
assumed for documents that do not specify one
- Cache properties: The amount of local storage allocated to the cache and
the conditions controlling when a cached file will be validated are
determined under this property
- HTTP settings: used to set the version of HTTP used and whether or not
the client will keep connections alive
o Style definition: The user can define default font sizes, background
and foreground colors, etc for HTML pages that are displayed in the
web browser
o Document meta-information: it is used to set web document’s MIME
type, character encoding, size, etc

o History: The browser will automatically maintain a list of all pages

visited within the last several days. Users can use the history list to
easily return to any recently visited page.
o Bookmarks (“favorites” in Internet Explorer): Users can explicitly
bookmark a web page, so that they can visit those sites without
remembering its URL address
1.6.4 Additional Functionality

 Browsers can also perform a number of other functions, including the
following:
o Automatic URL completion: If the user has entered a URL in the
Location bar and begins to type it again later time, the URL will be
completed automatically by the browser.
o Script execution: In addition to displaying documents, browsers can
run programs (scripts) to perform a variety of tasks, including validating
data entered on a form before sending it to a web server
o Event handling: When the user clicks link or a button in a web
page, the browser treats this as the occurrence of an event. Browsers
recognize a number of different types of events, including mouse button
clicks, mouse movement and can perform a variety of actions in
response to an event—loading a document from a URL, clearing a
form, or calling a script function defined by the document author
o Secure communication: When the user sends sensitive information,
such as a credit card number, to a web server, the browser can encode
this information in a way the prevents any machines in the Internet from
obtaining the information.
o Plug-in execution: While the browser itself normally understands only
a limited number of MIME types, most browsers support some form of
plug-in protocol that allows the browser’s capabilities to be
supplemented by other software. For example to display pdf file, flash
file, etc
o Cookies: browser allows web server to store some information in the
client machine to support session tracking thro cookies
1.7 Web Servers

 A web servers receives HTTP requests from browsers and locates the requested
web page then sends it to the user’s web browser. We will discuss basic
functionality found in most web servers
1.7.1 Server Features

 The primary feature of every web server is to accept HTTP requests from web
clients and return an appropriate resource (if available) in the HTTP response.

 This basic functionality involves a following number of steps:

1. The server calls on TCP software and waits for connection
requests to one or more ports.
2. When a connection request is received, the server dedicates a
“subtask” to handling this connection.
3. The subtask establishes the TCP connection and receives an HTTP
request.
4. The subtask examines the Host header field of the request to
determine which “virtual host” should receive this request and
invokes software for this host.
5. The virtual host software translates virtual address of requested
resource into physical address on the server.
6. If the resource is a file, the host software determines the MIME
type of the file, and creates an HTTP response that contains the file in
the body of the response message.
7. If the resource is a program, the host software runs the program,
providing it with information from the request and returning the output
from the program as the body of an HTTP response message.
8. The server stores logs information about the request and response—
such as the IP address of the requester and the status code of the
response—in a plain-text file
9. If the TCP connection is kept alive, the server subtask continues to
monitor the connection until :
 A certain length of time has elapsed
 the client sends another request, or
 The client initiates a connection close.
1.7.2 Server History

 NCSA’s httpd web server was a starting point for web server development.
httpd was used on a large fraction of the early web servers, but the NCSA
discontinued development of the server in the mid-1990s.
 When this happened, several individuals who were running httpd began
developing their own updates to the open-source httpd software. Their
updates were called “patches” and this led to calling their work “a patchy
server” which soon became known as “the Apache server” They released
their first free, open-source server to public in April 1995, and within a year
Apache was the most widely used server on the Web.
 Microsoft began development of web server Microsoft’s Internet
Information Server (IIS) that provides all of the features found in Apache,
although IIS does have the drawback of running only on Windows systems,
while Apache runs on Windows, Linux, and Macintosh systems. IIS and
Apache are by far the most widely used servers on the market.

 Both servers can be configured to run a variety of types of programs, but

some programming languages tend to be used more frequently on one
system than the other. For example, many IIS servers run programs written
in VBScript, while a typical Apache server might run programs written in
either Perl or the PHP scripting language (PHP stands for “PHP
Hypertext Processor”)
 A number of IIS and Apache servers also run Java programs. When running a
Java program, both Apache and IIS servers are usually configured to run the
program by using separate software called a servlet container. The servlet
container provides the Java Virtual Machine that runs the Java program
(known as a servlet), and also provides communication between the servlet
and the Apache or IIS web server.
 Tomcat is a popular, free, and open-source servlet container developed
and maintained by the Apache Software Foundation, the same organization
that is continuing development of the Apache web server.
 Tomcat can also be run as a standalone web server that communicates
directly with web clients. Furthermore, the standalone Tomcat server can
serve documents stored in the server machine’s file system and run programs
written in non-Java languages.
1.7.3 Server Configuration and Tuning

 Modern servers have a large number of configuration parameters. In this
section, we will cover many of the key configuration items found in Tomcat.
Similar features, along with some not found in Tomcat, are included in the
Apache and IIS servers.
 server configuration can be broken into two areas:
o external communication and
o internal processing
 In Tomcat, this corresponds to two separate Java packages:

o Coyote, which provides the HTTP/1.1 communication, and
o Catalina, which is the actual servlet container.
Coyote: external communication

 Some of the Coyote parameters, affecting external communication, include
the following:
o IP addresses and TCP ports that may be used to connect to this server.
o Number of subtasks (called threads in Java) that will be created when
the server is initialized. With the help of this many TCP connections can
be established simultaneously with minimal overhead
o Maximum number of threads that will be allowed to exist
simultaneously. If this is larger than the previous value, then the number

of threads maintained by the server may change, either up or down, over

time.
o Maximum number of TCP connection requests that will be queued, if
the server is already running its maximum number of threads. Connection
requests refused, if the queue is full
o Length of time the server will wait after serving an HTTP request over
a TCP connection before closing the connection, if another request is
not received.
 The settings of these parameters can have a significant influence on the

performance of a server; changing the values of these and similar parameters
in order to optimize performance is often referred to as tuning the server.
 There are various trade-offs involved in attempting to tune a server.
 For example, increasing the maximum number of simultaneous threads
execution will also increases memory requirements and thread-
management overhead, and may lead to slower responses to individual
requests
 On the other hand, lower values for this parameter may lead to some
clients having their connection requests refused, which may lead some
users to believe that the site is down.
 Tuning is therefore often performed by trial and error: if a server seems to be
running poorly by some measure, the server administrator may try to vary one
or more of these parameters and observe the impact, retaining parameter
values that seem to help. Load generation or stress test tools can be used
to simulate requests to a web server, and can therefore be helpful for
experimenting with tuning parameters based on anticipated traffic patterns
Catalina: internal processing

 The internal Catalina portion of Tomcat also has a number of parameter
settings that affect functionality. These settings can determine:
o Which client machines may send HTTP requests to the server.
o Which virtual hosts are listening for TCP connections on a given
port.
o What logging will be performed.
o How the path portion of Request-URIs will be mapped to the server’s
file system or other resources.Whether or not the server’s resources
will be password protected.
o Whether or not resources will be cached in the server’s memory.
 The Tomcat server you have installed than you can use a web interface for
setting most of these parameters. To do this, simple open a browser on the

machine that running the server, then typing following URL address in the
address bar:
http://localhost:8080
 Then clicking the Server Administration link should cause a log-in

log page to be
displayed. Provide valid user and password and press enter to see se the
following administration screen with Connector edit page:
 On n the left side of the browser window, Java Web Services Developer Pack (JWSDP)
Service entry is listed. First, click on the handle icon next to the JWSDP Service entry
in order to reveal its associated server components
 This Service has five components: Connector, Host, Logger, Realm, and Valve.
 A Connector is a Coyote component that handles HTTP communications directed to
a particular port.
 The panel on the right in this figure is is typical of the panels displayed for creating and
editing Tomcat components.
 Some of the key fields for the Connector component type are listed in the following
Table:
Field name Description
Accept Count Define maximum number of TCP connection allowed to wait
in the queue
Connection Its value indicates how many milliseconds the server s has to
Timeout wait for client request without closing connection,
connection if client is
idle

IP Address It this field is blank, then server will accept request from any
machine. It there are IP addresses mentioned then sever will
only accept request from clients having IP address listed in
this field
Port Number Port number on which server listen for TCP connection
requests
Min Spare Determine initially, how many number of threads kept ready
Threads in thread pool to receive request from client
Max Threads Determine maximum number of thread allowed
simultaneously to process multiple clients request
Max Spare Maximum number of idle threads allowed to exist at any one
Threads time
1.7.4 Defining Virtual Hosts

 The Host component is used to define a virtual host. The virtual host name should
normally be a fully qualified domain name that would be used by visitors to your
web site, although the Host supplied as part of the JWSDP Service is given the
unqualified name localhost. This is a special name that the DNS system treats as a
reference to a special IP address, 127.0.0.1. If an IP message is sent to this address,
the IP software causes the message to loop back to itself for receipt.
 Some of the key fields of host component are described in the following Table:

Name fully qualified domain name (or localhost) that clients will
use to access this virtual host
Application Directory containing web applications for this virtual host
Base
Deploy on Boolean value “True” indicates that applications should
Startup be automatically initialized when the server starts
Auto Deploy Boolean value indicating whether or not web applications
added to the Application Base while the server is running
should be automatically initialized.
 Several of the fields listed in the above Table are associated with web applications. A
web application is a collection of files and programs that work together to provide a
particular function to web users.
 For example, a Web site might run two web applications: one for use by
administrators of the site that provides maintenance functionality, and another for
use by external clients that provides customer functionality
 In Tomcat, a web application is represented by a Context component. If you open
the localhost Host, you will find that it has several contexts predefined

 Each Host and Context is associated with a directory in the server’s file system. The
directory associated with a Host is specified by the value of the Application Base
field.
 The directory associated with a Context is specified by the value of the Document
Base field
 Context has the following properties:
o Cookies=True|False – indicates whether application support cookies or not
o documentBase - determine the physical path associated with current context
or virtual directory
o debug level: 0|1|2 determine how error message to be displayed to end user
when error encountered
1.7.5 Logging
 Through logging, Web server record information about server activity.
 An access log is a file that records information about every HTTP request
processed by the server.
 A web server may also maintain message logs which stores a variety of
debugging and other information generated by web applications, and
errors encountered by web server itself.
 Access logging in Tomcat is performed by adding a Valve component to
a Service. The primary fields for an Access Log Valve are shown in the
following Table:
Directory Determine the directory where log file will be written
Pattern Information to be written to the log
Prefix String that will be used to begin log file name
Resolve Hosts It its value is false then IP addresses should be written to the
log file, otherwise host names should be written to the log
file
Rotatable Whether or not date should be added to file name and file
should be automatically rotated each day
Suffix String that will be used to end log file name
 The combination of values for the Directory, Prefix, Rotatable, and Suffix
fields determine the file system path to the access log
 For example JWSDP access log name might be access_log.2005-07-20.txt
 The Tomcat server writes one line of information per HTTP request processed
to the access log, with the information to be output and its format specified by
the Pattern field.
 The Pattern for the JWSDP Service access log Valve is

%h %u %t "%r" %s %b
 This corresponds to what is often called the common access log format. The
following is an example access log line in common format (this example is
split into two lines for readability):
www.example.org - admin [20/Jul/2005:08:03:22 -0500]
"GET /admin/frameset.jsp HTTP/1.1" 200 920
 The following information is contained in this log entry:

o Host name (or IP address) of client machine making the request
o User name used to log in, if server password protect is enabled
o Date and time of response, plus the time zone (offset from GMT) of the
time
o Start line of HTTP request (quoted)
o HTTP status code of response (200 in this example)
o Number of bytes sent in body of response
1.7.6 Access Control

 Tomcat can provide automatic password protection for resources that it
serves.
 This is a two-stage process.
 First, a database of user names is created. Each user name is assigned a
password and a list of roles. Think of a role as a user’s functional relationship
to a web application: administrator, developer, end user, etc. Some users may
be assigned to multiple roles.
 The second stage is to tell Tomcat that certain resources can only be
accessed by users who belong to certain roles
 For example, the Tomcat administration tool application (admin Context) can
only be accessed by users with admin role.
 The second stage of this process—associating resources with required roles
is performed by web application developers
 The first stage—defining one or more user databases—can be performed by
web system administrators, application developers, or both.
1.7.7 Secure Servers

 Normally, the HTTP request and response messages are sent as simple text
files. Each of these message may travel through a number of machines
before reaching its destination.
 It is possible that some machine along the route will extract information from
the IP messages it forwards for misusing those information.
 Furthermore, it is often possible for other machines to sneak the network and
view messages associated with other machines.

 In general, any machine other than the sender or receiver that extracts
information from network messages is known as an eavesdropper.
 To prevent eavesdroppers from obtaining sensitive information, such as credit
card numbers, all such sensitive information should be encrypted before being
transmitted over any public communication network.
 We can use the https scheme on the URL to indicate a browser that it should
encrypt an HTTP request before it sent to the public network
 For example, entering the URL
https://www.example.org
 This will cause the browser to attempt to send an encrypted HTTP GET
request to www.example.org.
 Many browsers and servers support one or more versions of the Secure
Socket Layer (SSL) protocol as well as the newer Transport Layer
Security (TLS) protocol, which is based on SSL 3.0.
 The following description of HTTP encryption is derived from the TLS 1.0
specification, but the same general ideas apply to the earlier SSL protocols as
well.
o A client browser that wishes to communicate securely with a server
begins by initiating a TLS Handshake with the server.
o During the Handshake process, the server and client agree on
various parameters that will be used to encrypt messages sent
between them.
o The server also sends a certificate to the client. The certificate
enables the client to be sure that the machine it is communicating with
is the one the client intends..
o Certificates are necessary to avoid so-called man-in-the-middle
attacks, in which some machine intercepts a message intended for
another machine (the target), prevents the message from further
forwarding, and returns an HTTP reply to the sender pretending to be
from the target.
o Such an interception could occur at a rogue Internet bridge device on
the route between client and server, or through unauthorized alteration
the DNS system,
 At the conclusion of the TLS Handshake, the client uses the cryptographic
parameter information obtained to encrypt its HTTP request message before
sending it to the server over TCP/IP. The server’s TLS software decrypts this
request before any other server processing is performed.
 The server similarly encrypts its response before sending it to the client, and
the client immediately decrypts the received message.

 Tomcat supports the TLS 1.0 and earlier protocols. To enable the secure
server Tomcat features, you must do two things:
1. Obtain and install a certificate.
2. Configure the server to listen for TLS connections on some port.
 For test purposes, you can generate your own “self-signed” certificates using
the keytool program distributed with Sun JavaTM JDKTM development
software. by entering the following at a command prompt:
keytool -genkey -alias tomcat -keyalg RSA
 This says that you want to generate a self-signed certificate that can be
referenced by the name tomcat and that the encryption/decryption keys
generated for use with this certificate should be compatible with the RSA
encryption/decryption algorithm
 You will be prompted to enter several pieces of information. Enter fully
qualified domain name of your machine
 enter your first and last name when asked. Also, I suggest using the password
changeit when asked, which will allow you to use defaults when you configure
the server to use this certificate
 Configuring the server to listen for TLS connections simply involves adding a
second Connector to a Service The Type field of the new Connector must be
set to HTTPS.
 On the resulting Connector panel, make sure that the Secure field is set to
True, and fill in the port number (say 8443) to be used for this connection.
 Other fields can retain their default values
 Now restart your Tomcat server, close and reopen your browser, and then
browse to https://localhost:8443, If you created a self-signed certificate. you
should see a message asking you whether or not you wish to accept the
certificate. After accepting it, you should see the default JWSDP web page
produced by your server
1.8 Making a Request and Receiving a Response

 When given a web page URL, a web browser uses HTTP to request the web
page found at that address. Figure 1.8 shows a web browser sending a
request to a web server.
 In the following Figure the web browser sends an HTTP request to the server.
The request (in its simplest form) is
GET /books/downloads.html HTTP/1.1

Fig: Client requesting a resource from a web server.
 The word GET is an HTTP method indicating that the client wishes to obtain
a resource from the server. The remainder of the request provides
provide the path
name of the resource (e.g., an HTML5 document) and the protocol’s name
and version number (HTTP/1.1). The client’s request also contains some
required and optional headers.
 Any server that understands HTTP (version 1.1) can translate this request
reques
and respond appropriately. Figure 1.9 shows the web server responding to a
request.
Fig. Client receiving a response from the web server.
 The server first sends a line of text that indicates the HTTP version, followed
by a numeric code and a phrase describing the status of the transaction. For
example,
HTTP/1.1 200 OK
 indicates success, whereas

HTTP/1.1 404 Not found
 informs the client that the web server could not locate the requested resource.
HTTP Headers
 Next, the server sends one or more HTTP headers, which provide additional
information about the data that will be sent. In this case, the server is sending
an HTML5 text document, so one HTTP header for this example would read:
Content-type: text/html
 The information provided in this header specifies the Multipurpose Internet

Mail Extensions (MIME) type of the content that the server is transmitting to
the browser
1.9. Multitier Application Architecture

 Web-based applications are often multitier applications (sometimes referred
to as n-tier applications) that divide functionality into separate tiers
 The tiers of web-based applications often reside on separate computers. The
following Figure presents the basic structure of a three-tier web-based
application.
Data tier
 The bottom tier (also called the data tier or the information tier) maintains
the application’s data. This tier typically stores data in a relational database
management system (RDBMS). Amazon might have an inventory information
database containing product descriptions, prices and quantities in stock.
Another database might contain customer information, such as user names,
billing addresses and credit card numbers. These may reside on one or more
computers, which together comprise the application’s data.
Middle tier
 The middle tier implements business logic, controller logic and
presentation logic to control interactions between the application’s clients
and its data. The middle tier acts as an intermediary between data in the
information tier and the application’s clients. The middle-tier controller logic
processes client requests and retrieves data from the database. The middle-
tier presentation logic then processes data from the information tier and
presents the content to the client. Web applications typically present data to
clients as HTML documents.
 Business logic in the middle tier enforces business rules and ensures that
data is reliable before the application updates a database or presents data to

users. Business rules dictate how clients access data and how applications
process data. For example, a business rule in the middle tier of a retail store’s
web-based
based application might ensure that all product quantities remain
positive. A client request to set a negative quantity in the bottom tier’s product
information database would be rejected by the middle
middle tier’s business logic.

Fig. Three-tier architecture.
Client tier/ Top tier

 The top tier, or client tier, is the application’s user interface, which
gathers input and displays output.
 Users interact directly with the application through the user interface, which is
typically a web browser or a mobile device. In response to user actions (e.g.,
clicking a hyperlink), the client tier interacts with the middle tier to make
requests and to retrieve data from the information tier. The client tier then
displays
isplays the data retrieved for the user.
1.10. Client-Side
Side Scripting versus Server-Side
Server Scripting
 Client-side scripting with JavaScript can be used to validate user input, to
interact with the browser, to enhance web pages, and to add client/server
communication
ication between a browser and a web server.
 Client-side
side scripting does have limitations, such as browser dependency;
o the browser or scripting host must support the scripting language and
capabilities.
o Scripts are restricted from arbitrarily accessing the local hardware and
file system for security reasons.
o Another issue is that client-side
client side scripts can be viewed by the client by
using the browser’s source-viewing
source capability. So Sensitive information,
such as passwords or other personally identifiable data,
data, should not be
on the client
o Also, placing certain operations in JavaScript on the client can open
web applications to security issues.

server-side scripts
 Programmers have more flexibility with server-side scripts, which often
generate custom responses for clients. For example, a client might connect to
an airline’s web server and request a list of flights from Boston to San
Francisco between April 19 and May 5. The server queries the database,
dynamically generates an HTML document containing the flight list and sends
the document to the client. This technology allows clients to obtain the most
current flight information from the database by connecting to an airline’s web
server.
 Server-side scripting languages have a wider range of programmatic
capabilities than their client-side equivalents. Server-side scripts also have
access to server-side software that extends server functionality—Microsoft
web servers use ISAPI (Internet Server Application Program Interface)
extensions and Apache HTTP Servers use modules.
1.11. Introduction to HTML5

What is HTML?
 HyperText Markup Language (HTML) is the main markup language for
creating web pages and other information that can be displayed in a web
browser. HTML is a text file containing small mark-up tags and commands
that tell Web browsers how to display the page.
o HTML stands for Hyper Text Markup Language
o HTML is not a programming language, it is a markup language
o A markup language is a set of markup tags
o HTML uses markup tags to describe web pages
 The purpose of a web browser (like Internet Explorer) is to read HTML
documents and display them as web pages. The browser does not display the
HTML tags, but uses the tags to interpret the content of the page:
o The text between <html> and </html> describes the web page
o The text between <body> and </body> is the visible page content
o The text between <head> and </head> is not displayed in the browser
o The text between <h1> and </h1> is displayed as a heading
o The text between <p> and </p> is displayed as a paragraph
1.11.1. HTML TAGS / HTML ELEMENTS

 HTML markup tags are usually called HTML tags.
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Examples of tags: <b> <i> <u>
1.11.2..Types of HTML elements/Tags:

HTML Elements broadly categorized in to two. They are :

i) Container Element / Container Tag
ii) Void element / Empty tag
Syntax for container Element:

<tag-name [attribute-name=attribute-value…]> some content </tag-name>
 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The content of the element is everything between the start and the end tag
 Most HTML elements can have attributes.
 A container tag affects enclosing text in some way.
 Container Element further divided into two they are
i) Block level container tag
 This element enclose its content as tags as well as text
 Example::<head>,<body> tags
<body bgcolor=green>
<font face=verdana color=red>hello</font>
</body>
ii) Text level container tag
 This element enclose its content as only text
 Example: <i>,<u>,,<font>,<p> tags
<u> underline</u>
<font size=6>Hello</font>
Syntax for void Element / Empty Element

<tag-name [attribute-name=attribute-value…] />
 Some HTML elements have empty content, which have no end tag, and start
tag ends with /
 Example:
<hr color=red width=80% /> <br/>
 Empty tags do not affect text adjacent to the tags.
Attributes

 HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: attribute-name="attribute-value"
 Attributes are used to describe the properties of a tag. Attributes are always
specified as part of a start tag and always consist of the attribute name
followed by an equal sign, followed by the attribute value.
 Example: <body bgcolor=”purple”>. Here bgcolor is an attribute of body tag,
which will determine the background color of the document
1.11.3. BASIC STRUCTURE / LAYOUT OF HTML PAGE

 All WebPages have an <html> tag at the beginning and </html> at the end,
telling the browser where the document starts and where it stops
 An HTML 5 document is composed of three parts:
i) A line containing HTML version information:<!DOCTYPE>
ii) A header section (delimited by the HEAD element),
iii) A body section, which contains the document's actual content.
 The following figure shows structure of html page:

Version info
Head section
Body section
 <DOCTYPE…> contains encoding information, document type and its version

information
 The head section is used for text and tags that do not show directly on the
page. It includes the <title> , <meta> tags , CSS and scripting information.
 The body section is used for text and tags that are shown directly on the
page of the browser.
 A basic structure of simple webpage is given below:
<!DOCTYPE...html [version, encode information.].>

<html>
<head>
<title> title of the HTML Page </title>
<meta name="…" content="…" />
<meta name="…" content="…" />
…

<style type="text/css”>
…<!- css code placed here ->
</style>
<script language="javascript”>
//javascript code placed here
</script>
</head>
<body>
<!- content that to be displayed in the browser placed here ->
</body>
</html>
<!DOCTYPE> and Version Info

 Since there are a number of different versions of HTML, it's a good idea to
declare what version of HTML you're using right away. The very first item in
your document should be a declaration of version information if version
attribute is ignored in <DOCTYPE version=5 assumed.
<!DOCTYPE HTML>
<Head> Section
 Head section enclosed between <head> and </head> tag.
 The head section of the webpage includes all the stuff that does not displayed
directly on the client area of browse.
<title> Element
 This is called a nested element, because it’s enclosed in the head element’s start and
end tags.
 The <title> and </title> tags encapsulate the title of your web page. Its content
is displayed in the title bar of the browser.
<meta> Element
 Another component in the head section is Meta tags. Meta tags are used to
give information about author of the page, software used to create current
page. An example given below:
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
 It also includes keywords for search engine to list your web page during
searches.This helps to improve the rankings in search engines.
 An example given below:
<meta name="keywords" content="HTML, XHTML, CSS, tutorials " />

 It is also used to provides an instruction to browser about how often the page
should refreshed automatically, what character set should be used to interpret
current document, redirection information, etc
<meta http-equiv="refresh" content="10;url=http://www.tizag.com"/>
<meta charset="UTF-8">
<script> tags
 Quite often the head section contains Scripts like Javascript or VBScript
which are programming languages for more complex HTML pages. Javascript
and VBScript are used either to validate HTML form input controls, or to
generate animation and change content of the HTML page dynamically
<style> tag
 Finally, more and more pages contain codes for cascading style sheets
(CSS). CSS is a rather new technique for optimizing the layout of major
websites. CSS are used to format content of the HTML in programmer friendly
mannere
<Body> Section
 The body of the document contains all that can be seen when the user loads
the page. It may consist of text, images, tables, forms, list items, special
characters etc related tags.
 It may also contain user interface controls such as textbox, list box, drop down
list, text area, password field, video, audio controls, etc
 Body section always will begin with <body> and end with </body> tags.
<body> tag has the following attributes:
o bgcolor – define background color of the document
o text – define foreground color of the entire document
o background – bring the background image instead of background color
o alink – define active link color
o vlink – define visited link color
o link – define not yet visited link color or new link color
o leftmargin, topmargin, rightmargin, bottommargin – define
corresponding margin of the page. The values should given in pixel
o bgproperties=fixed/scroll. It determines whether background image
should be placed multiple time or not. If fixed is given as value, when
the content of the web document grow more than one page the
background image will not be pasted multiple time
Example::
<body bgcolor="black" text="red"
link="yellow" alink="orange"

vlink="white" background="image.gif">
Comment Element /  Element

 A comment is a way for you as the web page developer to control what lines
of code are to be ignored by the web browser and not displayed by browsers.
 HTML5 comments start with . To add comments in the
HTML documents the following tag is used:

(or)

Example:
<p>This is a paragraph.</p>

<p>This is another paragraph</p>
Output:
This is a paragraph.
This is another paragraph
1.11.4. TEXT FORMATTING S TAGS
Tag Name with Attribute Description Output

HTML Text Formatting Tags
<b> bold text </b> This will makes the enclosed bold text
text bold
<big>big text </big> This will makes the text larger
than normal text
<em>emphasized</em> emphasised text Emphasized
<font> … </font> It is used to change either courier
Attributes: color,size or face of the
color = colour enclosed text
face = typeface e.g.:<font face="Courier"
size = 1 to 7 size=4> courier </font>
<i> italic </i> Make enclosed text Italic Italic
<small>small</small> Relatively smaller font

<strike> strike </strike> Strikethrough Strike
<strong>strong</strong> strong (usu. bold) Strong

<sub> … </sub> Subscript. H2O
E.g.: H<sub>2</sub>O
<sup> … </sup> Superscript. 12th STD
E.g.: 12<sup>th </sup> STD
<tt>typewriter text</tt> typewriter text (e.g. Courier)
<u> underline </u> Underline Underline
<blink>…</blink> Makes the enclosing text to blink. Only Netscape

browser supports this tag
<marquee></marquee> This tag is used to scroll the text in different
attributes: direction. Based on behavior. E.g.:
scrollamount=integer <marquee direction=up behavior=slide>
scrolldelay=number hello
direction= </marquee>
up|down|left|right This will make the text to scroll from bottom to top
behavior= one time. And stop scrolling
scroll|slide|alternate
height= height in pixel
width= width in pixel
bgcolor= background clr
HTML Citations, Quotations, and Definition Tags

Tag Meaning
<abbr> Defines an abbreviation or acronym
Example:
The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.
Output:
<address> Defines contact information for the author/owner of a document

Example: Output:
<address>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<bdo> Defines the text direction

Example: output:
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
<blockquote> Defines contact information for the author/owner of a document

Example:
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The
world’s leading conservation organization, WWF works in 100
countries
</blockquote>
Output:
<q> Defines an inline quotation

Example:
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
Output:
WWF's goal is to: “Build a future where people live in harmony
with nature.” We hope they succeed.
<cite> Defines the title of a work
Example:
<p><cite>The Scream</cite> by Edward Munch. Painted in
1893.</p>
Output:
The Scream by Edward Munch. Painted in 1893.
<dfn> Defines a definition term
Example: <dfn>Definition term</dfn>
Output: Definition term
1.11.5. Heading
 Some text in web document may be more important than other text. HTML5
provides six heading elements (h1 through h6) for specifying the relative
importance of information.

 Heading element h1 is considered the most significant one and is typically

rendered in a larger font than the other five.
 Each successive heading element (h2, h3, etc.) is typically rendered in a
progressively smaller font.
 Example: output:
<h1>heading level - 1 </h1>
1.11.6. Images:<img> element

 Other than text, web pages may also contain images, animations, graphics, audios and
even videos. The most popular image formats used by web developers today are PNG
(Portable Network Graphics), GIF (Graphics Interchange Forma)t and JPEG
(Joint Photographic Experts Group).
 <img> is an void Element is used to embed image in your web pages along
with text / paragraph. It contains more attributes. Other than SRC, all
attributes are optional. The lists of attributes are
Attribute Description
Src URL address of an image file,
Width It determines the width of the image in pixel
height It determines the height of the image in pixel
Align It determine alignment of the text along with image. The
possible values are top, bottom, middle, absmiddle,
absbottom, abstop, left, right
Alt This information useful for the user those who viewing
your web page with CUI based browser such as LYNX.
Since CUI browser does not have capability to show
image, in that place the text assigned to alt will be
displayed. In the GUI browse, this will be shown as tool
tip, when user moves mouse over the image

Border It define thickness of the border of the image. Based on

whole number assigned to this attribute, the border of the
image will be displayed with more or less thickness.
Example:
<!DOCTYPE html>
<body>
<p>
<img src = "fish.jpg" width = "160" height = "140"
border=10 alt = "fishes in the river" />
<img src = "flow11.jpg" height = "150"
border=5 alt = "marigold flower" />
</p>
</body>
</html>
Output:
1.11.7. LISTS ELEMENTS / LIST TAGS

 Information provided in the form of list is more human readable than information
provided in the form of paragraph. HTML supports three types of lists. They are:
 ordered lists
 unordered lists
 definition lists

1.11.7.1. Unordered Lists

 It consist of items displayed with a bullet next to each one. Within the list, individual
items are represented with the <li> tag.
 The attribute of the <ul> is type. It allows you to change the type of bullet shown
next to each item in the list.
The possible values for type attribute is disc (),circle (o),square (■)
Example: output in the browser:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
1.11.7.2. Ordered Lists

 Ordered list are used to display numbers in front of each items, instead of bullets. It
has two attributes
o The start attribute allows you to specify the starting number for a list.
o The type attribute within the ordered lists allow you specify the type of
numbering system. possible value for type=”1/A/a/I,I”
o Type value and its possible series are listed below:
1 = 1,2,3,4,….
A = A,B,C,D,…
a = a,b,c,d,…
I = I,II,III,IV,…
i = i,ii,iii,iv,…
 Example: <ol type=”A” start=”5”> generating ordered list starting alphabet E.
<ol type=A start=5> output in the browser:
<li>Coffee</li> E. Coffee
<li>Milk</li> F. Milk
</ol>
1.11.7.3. Definition Lists

 It consists of list of terms and their associated definitions. They are enclosed
between <dl> tags and </dl>

 Each term in the list is identified by the <dt> tag. Description of each term is
identified by <dd> tag must follow the <dt> tag to provide the definition of the
preceding term.
o <dl> - definition list
o <dt>- definition term
o <dd>- definition description
Syntax: Output:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
…
</dl>
Example:
<dl>
<dt>Java</dt>
<dd>A programming language</dd>
<dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol</dd>
</dl>
1.11.7.4. <dir> Element
 This tag will work in the same way as <ul> except. It will move the content one tab
towards right side. List items are represented using <li>
1.11.7.5. Nested Lists

 Lists may be nested to represent hierarchical relationships, as in a multilevel outline.
Any combination of <OL> and <UL> can be nested at any level of depth
 An example of nested list is given below:
<!DOCTYPE html>
<body>
<h2> Hotel Hiland - Menu</h2>
<ul>
<li>break fast / dinner
<ol type="a">
<li>Idli
<ul>
<li>Rava Idli
<li>mini idli

</ul> Output:
<li>Dosai
<ul>
<li>Rava Dosai
<li>ghee Dosai
</ul>
<li>chapatti
</ol>
<li>lunch
<ol type="i">
<li>Meals
<ul>
<li>Ordinary
<li>Spl. Meals
</ul>
<li>Mini Meals
<ul>
<li>lemon rice
<li>sambar rice
</ul>
</ol>
</ul>
</body>
</html>
1.11.8.Tables
 Tables are frequently used to organize data into rows and columns. To
construct table the following HTML elements are used:
 <table> - is the outer most tag that encapsulates all other following tag. Its
attributes includes:
o border=integer - define the border of the table
o bgcolor=#rrggbb – define background color of the table
o background=url – define background picture of the table
o align = left|right|center- define alignment of table within the page
o cellpadding =integer – define space allowed within the cell in pixel
o cellspacing =integer – define gap or space between cells in pixels

o width =integer – define width of the table in terms o f percentage of browser

window
 <caption align="top|bottom">…</caption> - It is used to define table title. This
element must be positioned inside <table>, but not inside of <thead>,<thead>, and
<tbody>
 Table consists of following three sections:
o <thead> - define table header. It encapsulates row in which each column
defined using <th>. It is an option section
o <tbody> - define table body where actual data to be displayed. It encapsulates
multiple rows in which each column defined using either <td> or <th>.
o <tbody> - define table body where table’s primary data to be displayed. It
encapsulates multiple rows in which each column defined using <td>
o <tfoot> - define table footer . It encapsulates rows in which each column
defined using either <th>. The text placed in the footer commonly includes
calculation results and footnotes. It is an optional section
 <tr> - define table row.All three sections <thead>, <tbody>, and <tfoot> consists
of one or more row. It consists of following attributes, which are also applicable to
<td> and <th>:
o bgcolor=#rrggbb – define background color of the table
o background=url – define background picture of the table
o align = left|right|center- define horizontal alignment of text within cell
o valign = top|middle|bottom - define vertical alignment of text within cell
 <td> - define table data (or) cell (column) within each row.
 <th> - define table heading (or) cell (column) within each row. Text placed in this
cell displayed in center of the cell with bold. Both <td> and <th> consist of following
attributes:
o rowspan=integer – used to merge two or more cell horizontally
o colspan=integer – used to merge two or more cell horizontally
 Example 1
<!DOCTYPE html>
<html>
<body>
<table border = "5" bgcolor=pink>
<caption><strong>Table of Fruits (1st column) and
Their Prices (2nd column)</strong> </caption>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Total</th> <th>$3.75</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody> </table> </body> </html>
Output:
Example 2: Using rowspan and colspan with Tables

<!DOCTYPE html>
<html>
<body>
<table border = "10">
<tbody>
<tr>
<th colspan=3>Price List of seeds(per Kg)</th>
</tr>
<tr>
<th rowspan=2>Paddy</th>
<td>Ponni</td>
<td>Rs. 150</td>
</tr>
<tr>
<td>Sorna</td>
<td>Rs. 90</td>
</tr>
<tr>
<th rowspan=3>Millet</th>
<td>Co-1</td> Outpiut:
<td>Rs. 80</td>
</tr>
<tr>
<td>Co-2</td>
<td>Rs. 110</td>
</tr>
<tr>
<td>ADT-95</td>
<td>Rs. 90</td>
</tr>
</tbody>
</table>
</body>
</html>
1.11.9. ANCHOR Element \ HTML HYPERLINKS (LINKING)

 One of the most important HTML5 features is the hyperlink, which links other
resources, such as web documents and images Anchor tag (<A>) is used to
establish link between multiple web pages.
 When a user clicks a hyperlink, the browser tries to execute an action
associated with it Some of action includes:

o navigate to a URL
o open an e-mail client
o download executable file to client machine
 in web page, Any displayed element can act as a hyperlink.such as text,
image, etc
 Web browsers typically underline text hyperlinks and color their text blue by
default
 We use =Anchor Element (<A>) to define hyperlink with href attributes
 Linking can be of two types:
o Internal linking: linking different part of the same web document
o External linking: linking external resources
1.11.9.1. INTERNAL LINKING \ INTERNAL DOCUMENT REFERENCE

 internal linking—a mechanism that enables the user to jump between
locations in the same document.
 Internal linking is useful for long documents that contain many sections.
 Clicking an internal link enables the user to find a section without scrolling
through the entire document
 To define internal hyperlink destination, we have to use following syntax:
<a name=”somename”> destination content here </a>
 It is similar to book mark in the book
 To define internal hyperlink, we have to use following syntax:

<a href=”somename”> hypertext </a>
 Example::INTERNAL.HTML
<!DOCTYPE html>
<html>
<body>
<a name="top"> <hr color="red" /> </a>
<h2 align="center">
<a href="#favorite">Click here to see my favorite</a>
</h2>
<hr color="red" />
<pre>
1
2
3
4
5
6
7

8
9
10
11
12
13
14
15
16
17 output, after clicking link
18
19
20
21
22
23
24
25
26
</pre>
<hr color="red" />
<a name="favorite">My Favorites</a>
<hr color="red" />
<ul>
<li> listening music
<li> swimming in the sea
<li> Reading News paper
<li> Watching TV
</ul>
<hr color="red" />
<a href="#top">back
"#top">back to top</a>
<hr color="red" />
</body>
</html>
1.11.9.2.
2. EXTERNAL LINKING / EXTERNAL DOCUMENT REFERENCE
 External linking— is a mechanism that enables the user create a hyperlink in
the current web document to any external resources such as another web
documents, image, link to client email software etc
 Example:
<!DOCTYPE html>
<html>
<body>

<h1>Click link to take action</h1>

<ul>
<li><a href = "http://www.google.co.in">google search engine</a></li>
<li><a href = "INTERNAL.HTML#favorite">My favcorites</a></li>
<li><a href = "http://www.dinamalar.com/download/latha.ttf">
Download Tamil font</a></li>
<li><a href = "mailto:kajendran@yahoo.com?subject=Test">
"mailto:kajendran@yahoo.com?subject=Test">
send e-mail</a></li>
</ul>
</body>
</html>
 In the above code, first link consist of absolute address,

address, where as second
link consist of relative address, which also contain internal link to particular
part of corresponding document.
document
 output fo the above code
1.11.9.3. Using Images as Hyperlinks

 An an image hyperlink can be created by by nesting an <img> < element
within an <A>-anchor
anchor element shown below:
<a href = "contact.html">
<img src = "images/contact.jpg"
"images alt = "Contact Me" />
</a>
 The img element’s src attribute value specifies that this image (contact.jpg)
(
resides
des in a directory named images. The image directory and the the current
HTML document are in the same directory

1.11.10. HTML Forms and Its Control Elements

• HTML5 provides a mechanism, called a form, for collecting data from a user
for submitting to server side program for processing
1.11.10.1. <form> Element

• <form> element has following attributes:
 method="get|post"
 Action="URL-Address-of-server-Script"
• Example:
<form method = "post" action = "http://www.xyz.com">
 Within the <form> element, you can include the following html elements to
define various UI controls including the following:
• <input> - it is used to define text field, password filed, check box, radio
button, push button, hidden field, submit and reset buttons
• <textarea> - it is used to define multiline text box
• <select> & <option> - it is used to define dropdown list
• <fieldset> and <legand> - it is used is used to group form controls into
logical, related “chunks.” with title caption
Difference between post and get:

 Using method = "post" appends form data to the browser request, which
contains the protocol (HTTP) and the requested resource’s URL. This method
of passing data to the server is transparent, not visible to user
 Using method = "get", appends the form data directly to the end of the URL
of the script, where it’s visible in the browser’s Address field
1.11.10.2. <input> Element

 <input /> element has attribute type, which is responsible for creating UI
controls such as textbox, password field, check box, radio button, button,
reset and submit button. Type has the following possible values:
o text creates an input text box that consists of a single line. Width of the
box is controlled by the size attribute, default size is 20 characters wide.
o password Exactly like text, except the characters input by the visitor
will reflect back as asterisks.
o checkbox Creates a box that can be checked. You can have multiple
checkboxes in a selection, and all of them may be checked if
applicable.
o radio This creates a radio button. You can have as many as you want
in a give subject area, but only one may be selected.

o submit This control creates the familiar "submit" button, which appears
as a raised button with a push-button look. The word on the control can
be customized using the value attribute.
o reset The same in appearance and customization features as submit,
this control will clear the form so the sire visitor can re-enter his or her
answers.
o file This creates a file selection control. The site visitor can then select
a file to upload.
o hidden Hidden controls are those that don't render in the browser.
They are used to insert information for the recipient of the form data.
o image Allows for the insertion of a custom image. This gives the
designer the ability to use a graphic for submit and reset instead of the
default option.
o button Creates a push button. These must be associated with a script
in order to work, since there is no built-in action for them
Example:
<form method="get" action = "http://www.xyz.com/validate.php">
User Name:
<input type = "text" autofocus name="username"/>
<p>
Password :
<input type = "password" name="passwd"/>
</p> <p>
<input type = "submit" value = "Login" />
<input type = "reset" value = "Clear" />
</form>
Output:
Example of creating radio button:

<fieldset>

<legend>select our gender:</legend>

<input type = "radio" name="gender" value ="M"/> Male
<input type = "radio" name="gender" value="F" checked/> Female
</fieldset>
Output:
Example of creating radio button:

<fieldset>
<legend>you are interested in:</legend>
<input type = "checkbox" name="interest" value="Music"/> Listening music
<input type = "checkbox" name="interest" value="TV"/> Watching TV
<input type="checkbox" name="interest" value="newspaper"/>Reading
Newspaper
</fieldset>
Output:
Example of Creating BUTTON and its output:

output
<input type="button" value="Hello world!">
1.11.10.3.
3. <select> and <option> Element
Example of Creating combo box:
box
District:
<select name="district">
<option
option value="Chennai">Chennai</option>
<option value="CGL">Chengalpet</option>
<option value="VPM" selected>villupuram</option>
</select>
Output:

Example of Creating LIST:

Hobbies:<br/>
<select name="hobby" size=3 multiple>
<option value="surfing"" selected>surfing net</option>
<option value="travelling">travelling</option>
<option value="temple" selected>visiting temple</option>
<option value="cooking">cooking food</option>
</select>
OUTPUT:
1.11.10.4. <textarea>
> Element : creating multiline textbox
Example:
your suggestion:<br/>
<textarea name="suggestion" rows=10 cols=25>
</textarea>
Output:
1.11.10.5. New HTML 5 Form Input controls

 HTML5 includes new input controls with types for colors, dates, times, e- e
mail addresses, numbers, ranges of integer values, telephone numbers,
URLs, search queries, months and week. week The type attribute takes following
values:
color | datetime | datetime-local
datetime local | time | month | week | url | search | range |
number | tel
 browsers that don’t support these input types simply render them as standard
text input elements
 The new HTML 5 input types are self validating on the client side, eliminating
the need to add complicated JavaScript code
 HTML 5 introduces the following attributes for input controls:

i) Autofocus – it is used to put input cursor in the corresponding control

when web page is loaded
ii) Autocomplete – allows you to remember previously typed words in the
corresponding controls
Type Description
color The color type is used for input fields that should contain a color.
Date The date type allows the user to select a date
datetime The datetime type allows the user to select a date and time (with
time zone).
datetime- The datetime-local type allows the user to select a date and time (no
time zone).
local
email The email type is used for input fields that should contain an e-mail
address. the value of this field is automatically validated(@ , .com)
month The month type allows the user to select a month and year.
number The number type is used for input fields that should contain a
numeric value. You can also set restrictions on what numbers are
accepted. Use the following attributes to specify restrictions:
 max - specifies the maximum value allowed
 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
range The range type is used for input fields that should contain a value
from a range of numbers. You can also set restrictions on what
numbers are accepted.
Use the following attributes to specify restrictions:
 max - specifies the maximum value allowed
 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
search The search type is used for search fields (a search field behaves like
a regular text field).
tel Define a field for entering a telephone number
time The time type allows the user to select a time with no time zone

url The url type is used for input fields that should contain a URL
address. The value of the url field is automatically validated when
the form is submitted
week The week type allows the user to select a week and year
 Following example demonstrate various features of new HTML 5 controls:
Example:
<!DOCTYPE html>
<body>
<h2>New HTML5 Form Controls Demo</h2>
<form method = "post" action = "http://www.xyz.com">
<p>Text Color:
<input type = "color" autofocus/> Hexadecimal code such as #ADD8E6)
</p>
<p>Date of Joining:
<input type = "date" required"/>(yyyy-mm-dd)
</p>
<p>Time of present at office:
<input type = "datetime-local" /> (yyyy-mm-ddThh:mm)
</p>
<p>Email:
<input type = "email" placeholder = "name@domain.com" required />
</p>
<p>Year and Month you got promotion:
<input type = "month" />(yyyy-mm)
</p>
<p>Font Size:
<input type = "number" min = "1"
max = "7" step = "1" value = "4""/>
(Enter a number between 1 and 7)
</p>
<p>Your Age:
<input type = "range" min = "17"
max = "55" value = "17"/>(valid between 17 and 55)
</p>
<p>Residence Telephone Number:
<input type = "tel" placeholder = "(###) ###-####"
pattern = "$\d{3}$ +\d{3}-\d{4}" required />
</p>
<p>Time at which left office:
<input type = "time" placeholder = "hh:mm"/>

</p>
<p>URL address:
<input type = "url"
url" placeholder = "http://www.domainname.com" />
</p>
<p>Week:
<input type = "week" />(yyyy-Wnn,
/>(yyyy such as 2012-W01)
</p>
<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear"
"Clear />
</p> </form> </body></html>
Output generated in google Chrome:

When user clicks color control, output obtained in internet explorer 8:
Various error message displayed in google chrome, while user entered

invalid inputs and submitted form:
form

placeholder Attribute
 The placeholder attribute allows you to place temporary text in a text field.
field
 Generally, placeholder text is light gray and provides an example of the text
and/or text format the user should enter
 When the focus is placed in the text field, the placeholder text disappears—it’s
disappears
not “submitted” when the user clicks the Submit button
required Attribute
 The required attribute forces the user to enter a value before submitting the
form. You can add required to any of the input types. For example, if the user
fails to enter value in the required filed and clicks the Submit button,, then
system will transfer focus to corresponding filed with error message and
asking the user to enter the information
1.11.11. Semantic elements / Page-Structure Elements

 Semantic elements are introduced to standardize web documents structure
and make not only readable to human, but also readable by machine, so that
visually impaired user can understand what the browser is displaying
 Page-structure elements that meaningfully identify areas of the page as headers,
footers, articles, navigation areas,
areas asides, figures and more

 A semantic element clearly describes its meaning to both the browser and the
developer.
 Examples of non-semantic
semantic elements: <div> and <span> - Tells nothing about
its content.
 Examples of semantic elements: <form>, <table>, and <img> mg> - Clearly
defines its content.
 HTML5 offers new semantic elements to clearly define different parts of a web
page:
 <header>
 <nav>
 <section>
 <article>
 <aside>
 <figcaption>
 <figure>
 <footer>
(i) <section> Element

 The <section> element defines a section in a document. A section is a thematic
grouping of content,
tent, typically with a heading
Example:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
(ii) <article> Element

 The <article> element represents an independent piece of content of a
document, such as a blog entry or newspaper article
 Examples of where an <article> element can be used:
 Forum post
 Blog post
 News story
 Comment
 Example:
<article>
<h1>anti
anti CAA protest</h1>
protest
<p> Citizenship Amendment Act (CAA) Protest erupted in UP, West

Bengal, assam, karnataka,.

karnataka, Atleast 6 people killed in UP at the anti
CAA protest on Dec 22, 2019 at 3:00 PM.
</p>
</article>
(iii) <nav> Element

 The <nav> element represents a section of the document intended for
navigation
 The <nav> element defines a set of navigation links. However, not all links in a
document should
hould be inside a <nav> element
<nav>
<a href="/html/">HTML</a> | Output:
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
(iv) <aside> Element

 The <aside> element describes content that’s related to the surrounding content
(such as an article)) but is somewhat separate from the flow of the text
 The <aside> element is used to identify content that is related to the primary
content of the webpage,
webpage but does not constitute the primary content of the
page.
 Advertisements, Author information, related relat links, and related content are
examples of content that may be found in an aside element
 Example:
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>It is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>
(v) <header> Element

 The <header> element specifies a header for a document or section. The

<header> element should be used as a container for introductory content. You
can have several <header> elements in one document.
 The following example defines a header for an article:
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
(vi) <footer> Element

 The <footer> element is a structural element used to identify the footer of a
page, document, article, or section.
 A <footer> typically contains
i) copyright
ii) authorship information
iii) links to terms of use
iv) contact information
 Example:
<footer>
<p>Posted by: Ronald Trump</p>
<p>on <time pubdate datetime="2012-03-01">2012-03-01</time></p>
</footer>
(vii) <figure> and <figcaption> Elements

 The <figure> element is intended to be used in conjunction with the
<figcaption> element to mark up diagrams, illustrations, photos, and code
listing etc
 The <figcaption> tag defines a caption for a <figure> element. The
<figcaption> element can be placed as the first or last child of the <figure>
element. Only one <figcaption> element may be nested within a <figure>
 Example:
<figure>
<img src="tajmahal.jpg" width="304" height="228">
<figcaption>Fig1. Taj Mahal, India.</figcaption>
</figure>

(viii) <summary> Element and <details> Element

 A <summary> element may only be used as the first child of a <details> <
element.. When the user clicks on the summary, the parent <details
details> element
is toggled open or closed, and then a toggle event is sent to the <details>
<
element,, which can be used to let you know when this state change occurs
 Example:
<article>
…
<p>
<details>
<summary>Recent Edition Testimonials</summary>
<ul>
<li>"Updated too reflect the state of the art in Java technologies; its deep and
crystal clear explanations make it indispensable.
<li>Gives new programmers the benefit of the wisdom derived from many years
of software development experience."
</ul>
</details></p></article>
Output:before
before clicking arrow mark
Output: after clicking arrow mark
(ix) <meter> element

 The meter element renders a visual representation of a measure within a range
 An example is given to display face book survey using meter
<section id = "3">
<h2>Results from our Facebook Survey</h2>
<p>If you were a nonprogrammer about to learn Java for the first
time, would you prefer a course that taught Java in the
context of Android app development?
development? Here are the results from
our survey:</p>

0<meter min = "0"

max = "54"
value = "14"></meter> 54
<p>Of the 54 responders, 14 (green) would prefer to
learn Java in the context of Android app development.</p>
</section>
Output:
(x) Text-Level Semantics:

Semantics <mark> Element and <wbr> Element
 The <mark> element highlights the text that’s enclosed in the element.
 We use the <wbr> element to prevent a word from breaking in an awkward
place.
 Example
<html><body>
<p> this is sample paragraph to demonstrate mark. <mark>This is marked
text</mark>.. This is outside marked text</p>
text
<h6>© 2018 by Krishnan & <wbr>Associates</wbr>,, Inc<h6>
</body></html>
Output:
1.11.12. input Element autocomplete Attribute and datalist element

1.11.12.1. input Element autocomplete Attribute

 The autocomplete attribute can be used on input types to automatically fill
in the user’s information based on previous input—such as name, address or
e-mail.
 You can enable autocomplete for an entire form or just for specific
elements.
 For example, an online order form might set automcomplete = "on" for the
name and address inputs and set autocomplete = "off" for the credit card
and password inputs for security purposes.
 The autocomplete attribute works only if you specify a name or id attribute for
the input element.
1.11.12.2. datalist Element

 The datalist element provides input options for a text input element.
 In this example, we use a datalist element to obtain the user’s qualification.
 Using Opera, IE 8, when the user clicks in the text field, a drop-down list of
qualification appears. If the user types "M" in the text field, the list on months
is narrowed to MA, MBA, MCA and ME.
 An example given below:
<!DOCTYPE html>
<body>
<h1>Autocomplete and Datalist Demo</h1>
<form method = "post" autocomplete = "on">
<p>Name:
<input type = "text" id = "eName" placeholder = "Name" required/>
</p>
<p>Email:
<input type = "email" id = "email" placeholder = "name@domain.com" />
</p>
<p>Educational Qualification:
<input type = "text" id = "txtList" placeholder = "Select a qualification"
list = "qualification" />
<datalist id = "qualification"/>
<option value = "BSc"/> <option value = "BA"/>
<option value = "BE"/> <option value = "ME"/>
<option value = "MBA"/> <option value = "MA"/>
<option value = "MCA"/>
</datalist>
</p>

<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p>
</form>
</body>
</html>
Output:
Name with autocomplete:
Data list with educational qualification:

1.11.13.Drag and Drop

 A drag operation could be the default action of a mousedown event that is
followed by a series of mousemove events, and the drop event could be
triggered by the mouse being released.
 drag-and-drop operations have the following:
1. Must have a starting point such as
 where the mouse was clicked, or
 the start of the selection or
 element that was selected for the drag
2. May have any number of intermediate steps
 elements that the mouse moves over during a drag, or
 elements that the user picks as possible drop points
3. Must either have an end point
 the element above which the mouse button was released, or
 the element that was finally selected, or be canceled
 The end point must be the last element selected as a possible drop
point before the drop occurs
Make an element draggable perform the following:
1. To make an element draggable, the element must use draggable attribute, and
set an event listener for dragstart that stores the data being dragged.
2. In the even handler you needs to store data into the DataTransfer object and
set the allowed effects such as copy, move, link, or some combination
To accept a drop, the drop target has to listen to the following events:
1. The dragenter event handler reports whether or not the drop target is
potentially willing to accept the drop, by canceling the event. This event
handling is optional
2. The dragover event handler specifies what feedback will be shown to the
user, by setting the dropEffect attribute of the DataTransfer associated with
the event. This event also needs to be canceled.
3. The drop event handler has a final chance to accept or reject the drop. If the
drop is accepted, the event handler must perform the drop operation on the
target.Otherwise, the drop operation is rejected.
 [NOTE:If drop is accepted, this event needs to be canceled, so that the
dropEffect attribute's value can be used by the source]

An Example is given below:

<!DOCTYPE HTML>
<html><head>
<style type="text/css">
div{
width:150px;
height:120px;
border:1px solid #aaaaaa;
}
</style>
<script>
function startDrag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function allowDrop(event)
{
event.preventDefault();
}
function acceptDrop(event)
{
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img id="myImg" src="fish.jpg"
draggable="true" >
<br>
<p>Drag the fish image into the rectangle:</p>
<div id="div1"
> </div>
</body>
</html>

Output:
Before drop: after drop:
Example 2:
<!DOCTYPE html>
<head>
<script>
function dragStartHandler(event) {
event.dataTransfer.setData("Text",event.target.id);
event.dataTransfer.effectAllowed = 'move'; // only allow moves
}
function dragOverHandler(event)
{
}
function dropHandler(eventent)
{
.preventDefault();
var data=event.dataTransfer.getData("Text");
.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
.target.appendChild(document.getElementById(data));
}
</script>

<body>
<p>What fruits do you like?</p><hr/>
<ol ><li draggable="true" data-value="apples"
value="apples" id="a">Apples</li>
<li draggable="true" data-value="oranges"
value="oranges" id="b">Oranges</li>
<li draggable="true" data-value="pears"
value="pears" id="c">Pears</li>
</ol>
<p>Drop your favorite fruits below:</p><hr/>

<ol > ><li value="fruit-grape">Grapes</li>
grape">Grapes</li>
</ol>
Output:
Before drop: after drop:
1.11.14. HTML5 Audio Element

 HTML5 defines a new element which specifies a standard way to embed an
audio file on a web page using an <audio> element.
 Example:
<!DOCTYPE html>
<body>
<audio controls>
<source src="love.wav
wav" type="audio/wavg">
<source src="Aarao
Aarao.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>
</body>
</html>
Output in Chrome: Output in firefox:
 The control attribute adds audio controls like play, pause, and volume.
volume
 You should also insert text content between the <audio> and </audio> Element
for displaying in the browsers that does not support the <audio> element.
 The <audio> element allows multiple <source> elements.
elements
 <source> elements can link to different audio files. The browser will use the
first recognized format. Currently, there are 3 supported file formats for the
<audio> element: MP3, Wav, and Ogg
 MIME Types for Audio Formats are for mp3 - audio/mpeg, Ogg - audio/ogg,
wav- audio/wav
 HTML5 Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as
<video>
video> and <audio>
The <source> tag allows you to specify alternative video/audio files
which the browser may choose from, based on its media type or
codec support.
 Attributes of <Audio> tag

Attribute Value Description

autoplay - Specifies that the audio will start playing as soon as it

is ready
Controls - Specifies that audio controls should be displayed (such
as a play/pause button etc).
Loop - Specifies that the audio will start over again, every
time it is finished
Muted - Specifies that the audio output should be muted
Preload auto Specifies if and how the author thinks the audio should
metadata be loaded when the page loads
none
src URL Specifies the URL of the audio file
 Attributes of <source> element

Media media_query Specifies the type of media resource
Src URL Specifies the URL of the media file
Type MIME_type Specifies the MIME type of the media resource
1.11.14. HTML5 Video Control

 HTML5 defines a new element which specifies a standard way to embed a
video/movie on a web page using the <video> element.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls poster="sunflower.jpg">
<source src="bear.mp4" type="video/mp4">
<source src="lion.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:

 The control attribute adds video controls, like play, pause, and volume.
 It is also a good idea to always include width and height attributes. If height and
width are set, the space required for the video is reserved when the page is
loaded. However, without these attributes, the browser does not know the size
of the video, and cannot reserve the appropriate space to it. The effect will be
that the page layout will change during loading (while the video loads).
 You should also insert text content between the <video> and </video> tags for
displaying in the browsers that do not support the <video> element. The
<video> element allows multiple <source> elements.
 <source> elements can link to different video files. The browser will use the
first recognized format.
 Currently, there are 3 supported video formats for the <video> element: MP4,
WebM, and Ogg
 MIME Types for Video Formats
Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
 HTML5 Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as

<video> and <audio>

<track> Defines text tracks in media players
 <video> tag Optional Attributes

Autoplay - Specifies that the video will start playing as soon as it
is ready
Controls - Specifies that video controls should be displayed (such
as a play/pause button etc).
Src URL Specifies the URL of the video file
Width Pixels Sets the width of the video player
Height Pixels Sets the height of the video player
Loop - Specifies that the video will start over again, every time
it is finished
Muted - Specifies that the audio output of the video should be
muted
Poster URL Specifies an image to be shown while the video is
downloading, or until the user hits the play button
Preload auto Specifies if and how the author thinks the video should
metadata be loaded when the page loads
none
1.11.15. HTML 5 CANVAS

 The <canvas> element is used to draw graphics, on the fly, on a web page via
scripting (usually JavaScript).
 The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
 The following example shows how to create canvas and draw object on canvas
using javascript. Always specify an id attribute, and a width and height attribute
to define the size of the canvas. You can have multiple <canvas> elements on
one HTML page. To add a border, we used the style attribute
<!DOCTYPE html>

<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
so #0000FF;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
/*The fillStyle property can be a CSS color, a gradient, or a pattern
pattern The default
fillStyle is #000000 (black) */
ctx.fillRect(0,0,150,75);
</script> Its output shown in the browser is given below:
</body>
</html>
Canvas Coordinates
 The canvas is a two-dimensional
dimensional grid.
 The upper-left
left corner of the canvas has coordinate (0,0)
 So, the fillRect() method above had the parameters (0,0,150,75).
 This means: Start at the upper-left
upper left corner (0,0) and draw a 150x75 pixels
rectangle.
Canvas - Paths
 To draw straight lines on a canvas, we will use the following two methods:

o moveTo(x,y) defines the starting point of the line

o lineTo(x,y) defines the ending point of the line
 To actually draw the line, we must use one of the "ink" methods, like stroke ().
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #ff0000;">
</canvas>
<script>
OUTPUT:
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Define a starting point in position (0,0), and an ending point in position (200,100).
Then use the stroke() method to actually draw the line
Drawing Circle on the Canvas

 To draw a circle on a canvas, we will use the following method:
arc(x,y,r,start,stop)
 To actually draw the circle, we must use one of the "ink" methods, like stroke()
or fill().
EXAMPLE:
 In the previous example replace the javascript code with the following code:

ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
The output will look like the following:
Write text in the Canvas

 To draw text on a canvas, the most important property and methods are:
- font - defines the font properties for text
- fillText(text,x,y) - Draws "filled" text on the canvas
- strokeText(text,x,y) - Draws text on the canvas (no fill)
 Using fillText():Example: In the previous example replace the javascript code
with the following code you will get output similar to the right side one:
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Using strokeText():
 In the previous example replace fillText( ) with the following code:
ctx.strokeText("Hello World",10,50);
 Then you would get out put similar to the following:
Canvas - Gradients
 Gradients can be used to fill rectangles, circles, text, etc. Shapes on the canvas
are not limited to solid colors.There are two different types of gradients:

createLinearGradient(x,y,x1,y1) - Creates a linear gradient

createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient
 Once we have a gradient object, we must add two or more color stops.The
addColorStop() method specifies the color stops, and its position along the
gradient. Gradient positions can be anywhere between 0 to 1.
 To use the gradient, set the fillStyle or strokeStyle property to the gradient, and
then draw the shape, like a rectangle, text, or a line. Using
createLinearGradient() in JavaScript code:
var c=document.getElementById("myCanvas"); Output:
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Drawing image on Canvas

 To draw an image on a canvas, we will use the following method:
drawImage(image,x,y)
 HTML and JavaScript code to draw image given below:
<!DOCTYPE html>
Output:
<html>
<body>
<p>Image to use:</p>
<img id="scream"
src="fish.jpeg"
align="left" />
<p>Canvas:</p>
<canvas id="myCanvas"
width="150"
height="120" style="border:1px solid #FF0000;">


</canvas>
<script>
var im=document.getElementById("scream");
ctx.drawImage(im,10,10);
</script>
</body>
</html>
1.11.15. Features of HTML 5

New Features HTML5 introduces a number of new elements and attributes that can
help you in building modern websites. Here is a set of some of the most prominent
features introduced in HTML5.
 New Semantic Elements: These are like <header>, <footer>, and <section>.
 Forms 2.0: Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
 Persistent Local Storage: To achieve without resorting to third-party plugins.
 WebSocket : A next-generation bidirectional communication technology for
web applications.
 Server-Sent Events: HTML5 introduces events which flow from web server to
the web browsers and they are called Server-Sent Events (SSE).
 Canvas: This supports a two-dimensional drawing surface that you can
program with JavaScript.
 Audio & Video: You can embed audio or video on your webpages without
resorting to third-party plugins.
 Geolocation: Now visitors can choose to share their physical location with your
web application. +
 Microdata: This lets you create your own vocabularies beyond HTML5 and
extend your web pages with custom semantics.
 Drag and drop: Drag and drop the items from one location to another location
on the same webpage

1.11.17. REMOVED ELEMENTS FROM HTML5

The following HTML 4.01 elements are removed from HTML5:
- <acronym> - <center> - <frameset>
- <applet> - <dir> - <noframes>
- <basefont> - <font> - <strike>
- <big> - <frame> - <tt>
1.12. CASCADING STYLE SHEET (CSS3)

1.12.1. INTRODUCTION TO CSS
 Cascading Style Sheets (CSS) is used for describing the presentation
semantics (the look and formatting such as spacing, margins, color, layout etc)
of web pages written in HTML and XHTML, but can also be applied to any
kind of XML documents
.
1.12.2. THE NEED FOR CSS
 CSS is designed primarily to enable the separation of document content
(written in HTML or a similar markup language) from document presentation,
including elements such as the layout, colors, and fonts. This separation can
 enable multiple pages to share same formatting.
 reduce complexity and repetition in the structural content
 A single style sheet can be used for formatting an entire web site.
 improve content accessibility,
 provide more flexibility
 External style sheets enable you to change the appearance and layout of all the
pages in your web site, just by editing one single CSS document. As a web
developer you can define a style for each HTML element and apply it to as
many web pages as you want, thus saving a lot of time.
 CSS can also allow the same markup page to be presented in different styles
for different rendering methods, such as on-screen, in print, by voice (when
read out by a speech-based browser or screen reader) and on Braille-based,
tactile devices.
 It can also be used to allow the web page to display differently depending on
the screen size or device on which it is being viewed.

1.12.3. BASIC SYNTAX AND STRUCTURE OF STYLE RULE

 CSS has a simple syntax and uses a number of English keywords to specify the
names of various style properties
 A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors, and a declaration block
 The syntax of writing a style rule is:
selector {property: value; property: value;…}
Example:
 The selector is normally the HTML element you want to apply style. Each
declaration consists of a property and a value. The property is the style attribute
you want to change. Each property has a value.
 Selectors may apply to

 All elements of a same type, (e.g. <h2>, <UL>, etc), which is referred as
tag selector
 Only to the element that has attribute as either id (referred as ID selector)
or class ( referred as class selector) assigned to particular name
 Declaration block
 A declaration block consists of a list of declarations in braces. Each
declaration itself consists of a property, followed by a colon (:), and a value.
If there are multiple declarations in a block, a semi-colon (;) must be inserted
to separate each declaration
 CSS coding could be either written within the html file or written in external
file and linked within html file.
i. To write CCS code within html file, you have to use the following tag
and syntax:
<html>
<head>

</style>
</head>
<body> html content here</body></html>
ii. To write CCS code in the external file, the file must be saved with .css
extension and from within the html file you have to link this external
CSS file using following syntax:
<link rel=stylesheet type="text/css" href="style.css">
1.12.4. TYPES OF STYLE SHEETS

 The type of style sheets are
 Embedded style sheet / Internal style sheet : embedding CSS Code with in
HTML file
 External style sheet :Write CSS code in the external file(.css) and link with
different HTML files
 Importing a style sheet: it is the feature that combine feature of external
style sheet and embedding style sheet
 Inline style sheet: embedding CSS Code within the TAG or ELEMENT of
HTML file
(i) embedded style sheet / Internal style sheet:

 if style sheet information can be placed in the <head> section of same HTML
then it is referred to as internal style sheet. The following tag goes in the HEAD
portion of the document:

</style>
Example:
<!DOCTYPE html>
<html>
<head>

<title> using CSS style sheet</title>

<style type=text/css>
h1 {
background:pink;
Output:
color:brown;
text-transform:uppercase;
}
p{
text-align:justify;
color:navy;
text-decoration:bold;
text-transform:capitalize;
}
</style>
</head>
<body>
<h1>heading</h1>
<p>this is paragraph</p>
</body>
</html>
(ii) External style sheet

 With external style sheets you can provide a uniform look and feel to an entire
website. For that first you create separate CSS file(having .css extension) that
contain only CSS Rule. Next you can use same external style sheet for entire
website or across multiple websites. Different pages on a site can all use the
same style sheet
 To link CSS file from any html file, you can use the following syntax:
<link rel=stylesheet type="text/css" href="style.css">
 Here href attribute is used to link the external CSS file from html
 This help to apply uniform formatting styles to all html pages of one web site.
Any formatting changes need to be done only in external .CSS file that will be
reflected in all HTML file that referring this .CSS file
 Example:

Step1: defining external style sheet with name as mystyle.css

h1 {
background:pink;
color:brown;
}
p{
text-align:justify;
color:navy;
text-transform:capitalize;
}
Step2: Linking external style sheet mystyle.css into Html file

UseMyStyle.html
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="mystyle.css" type="text/css" />
</head>
<body>
<h1>heading</h1>
<p>this is paragraph</p>
</body>
</html>
(iii) Importing a style sheet

 You can also combine the above two features in which for some tag you can
define style sheet within the same document, where as for other tags you
could import from external style sheet.
 For example you can import a basic sheet, and then add on extra styles to it.
The import command is placed in the STYLE section mentioned above and
should be the first thing in that section as shown in the following example:

@import url(“url-address
address-of-external-css-file”);
additional css style code go here
</style>
Example:
<!DOCTYPE html>
<html>
<head>
@import url("mystyle.css");
UL
{
list-style-image:url("bullet.gif");
image:url("bullet.gif");
}
a:hover{color: "red";} OUTPUT
<style>
</head>
<body>
<h1>Course offered</h1>
<ul>
<li>MBA
<li>MCA
</ul>
</body>
</html>
(iv) Inline style sheet:

 in this case CSS Style code is defined within the tag or element itself by using
style attribute of that tag,
tag rather than in the <head> section. This style
definition is applied locally to that element only
 Example:
<!DOCTYPE html>
<html>
<body>

<h1 style=" background:black; color:white;text-transform:uppercase;

transform:uppercase; ">
Course offered
</h1>
<ul style="list-style-image:url('bullet.gif');color:red;">
image:url('bullet.gif');color:red;">
<li>BE CIVIL
<li>BE CSE
</ul>
</body>
</html>
Output:
1.12.5.. TYPES OF SELECTORS

SELECTOR USED IN CSS
 The following are the types of selectors used in the CCS :
(i) Tag selector
(ii) ID selector
(iii) Class selector
(i) Tag selector

 Here, we use element name or tag name (such as <p>,<h1>,<UL>,
<p>,<h1>,<UL> etc) to
define CSS formatting feature, So that whenever the tag included within the
html page the corresponding formatting feature is automatically applied
Example:
<html>
<head>
h1
{
background:pink;
transform:uppercase;
text-decoration:bold;
}

p { text-transform:lowercase;
transform:lowercase; }
</style>
</head>
<body>
<H1>this
>this is header </H1>
<p> THIS IS PARAGRAPH</a>
<H1>this is another header </H1>
<p> THIS IS ANOTHER PARAGRAPH</a>
</body>
</html>
Output:
GROUPING TAG SELECTOR

 In style sheets there are often you will want to define same formatting style for
more than one element.
 For example consider the following example:
h1 { color:green; }
h2{color:green; }
p{ color:green; }
 To minimize code, you can group more than one tag selectors as shown below:
h1, h2, p {
color:green;
}
 Note: Each Tag selector is separated with a comma.

(ii) Id selector
 The id selector is used to specify a style for a single, unique element.
 The ID selector uses the ID attribute of the HTML element to define CSS, and
in the style definition, value of the ID attribute is prefixed with #.
 The style rule is applied to only Elements that having corresponding ID
attribute
 In the following example, the style rule will be applied to only element having
id="mystyle":
 Example:
<html>
<head>
#mystyle
{
text-align:center;
background:pink;
}
</style>
</head>
<body>
<H1 id=”mystyle”>this is header with id=mystyle </H1>
<p> this is paragraph</a>
<H1>this is header </H1>
</body>
</html>
Its output shown below:

(iii) Class selector / Style classes

 The class selector is also referred as style classes.
 The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
 This allows you to set a particular style for many HTML elements with the same
class.
 The class selector uses the HTML class attribute, and it is defined with a "." in
style definition
 In the following example, all HTML elements with class="backcolor" will be
displayed with gold colored background:
<html>
<head>
.backcolor
{
background:gold;
}
</style></head>
<BODY>
<H1 class="backcolor">This is header with class = backcolor </H1>
<p> This is paragraph
<span class="backcolor">inside span</span>outside span</a>
<H1>This is header </H1>
<p class="backcolor"> this is paragraph with id=backcolor </p>
</body>
</html>
 Note: Two new tags SPAN and DIV have also been introduced to implement
CSS. The tags alone do not have any predefined attributes, and are there for style
to applied to them.
 The SPAN tag is an inline element, which means it works with text or items
with in another element
 The DIV tag is a block element, which means it works with blocks of text or
items, similar to the P, paragraph tag.

 Its output shown below:
 You can also specify that only specific HTML elements should be affected by a
class.
 Consider the following css style:
p.center {text-align:center;}
 The above css style all <p> elements with class="center", it cannot be applied
for other<p> elements having different class name or other tags (except <p> tag)
having same class name :
<p class=’center’> This is paragraph having class=’center’ </p>
<H1 class=’center’>This is header </H1>
< p> this is paragraph without class </p>
 So the style is applied only to the first <p> tag, it is neither applied to <H1>
not applied to second <p> tag
1.12.6. Backgrounds Using CSS / CSS Properties Related To Background

 CSS background properties are used to define the background effects of an
element.CSS properties used for background effects:
Property Description
background-color Sets the background color of an element
background-image Sets the background image for an element.
background-position Sets the starting position of a background image.

background- Sets whether a background image is fixed or scrolls

attachment with the rest of the page
Background Sets all the background properties in one declaration
background-repeat Sets how a background image will be repeated
 Possible value for background-color property

Value Description
Color Specifies the background color. Look at CSS Color Values for a
complete list of possible color values.
Transparent Specifies that the background color should be transparent. This is
default
Inherit Specifies that the background color should be inherited from the
parent element
Example:
body {background-color:yellow;}
h1{background-color:#00ff00;}
p{background-color:rgb(255,0,255);}
dd{background-color:transparent;}
li{background-color:inherit;}
 Possible value for background-image property

Value Description
url('URL') The URL to the image. To specify more than one image, separate
the URLs with a comma
None No background image will be displayed. This is default
Example:
body { background-image : url('paper.gif'); }
Possible values for background-repeat property

o By default, a background-image is placed at the top-left corner of an
element, and repeated both vertically and horizontally

Value Description
Repeat The background image will be repeated both vertically and
horizontally. This is default
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
Inherit Specifies that the setting of the background-repeat property should
be inherited from the parent element
 Possible values for background-position property

Value Description
left top If you only specify one keyword, the other value will be
left center "center". Example given below:
left bottom body
right top {
right center background-image:url('smiley.gif');
right bottom background-repeat:no-repeat;
center top background-attachment:fixed;
center center background-position:center;
center }
bottom
x% y% The first value is the horizontal position and the second value is
the vertical. The top left corner is 0% 0%. The right bottom
corner is 100% 100%. If you only specify one value, the other
value will be 50%. . Default value is: 0% 0%
body{ background-position: 50% 60; }
xpos ypos The first value is the horizontal position and the second value is
the vertical. The top left corner is 0 0. Units can be pixels (0px
0px) or any other CSS units. If you only specify one value, the
other value will be 50%. You can mix % and positions.
Example:
body{ background-position: 150 200; }

Example:
<!DOCTYPE html>
<head>
<style type='text/css'>
body {
background-image:url('rose.jpg');
background-repeat:repeat-y;
}
</style>
</head>
<body>
</body>
</html>
 If background-repeat:repeat-x; is used then
the output similar to shown in the bottom
image is obtained
 If the following style is used instead of above
one then only one copy of the background image is kept in the right-bottom of the
browser.
body{
background-image:url('rose.jpg');
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: white;
}
 Even you scroll the web page down, the background image remain kept in the
right-bottom corner of browser as shown in the following figure:

1.12.7. CSS Rule Cascading and inheritance

CSS rules
 It consist of one or more selectors followed by a declaration block in curly
braces ({})
 Selectors enable you to apply styles to elements of a particular type or
attribute. A declaration block consists of one or more declarations each of
which includes the property name followed by a colon (:), a value and a
semicolon (;)
 You may include multiple declarations in a declaration block
 CSS Rules are defined with following syntax:
selector{declaration-name:value;,,,}
Rule cascading
 Consider the following style sheet rule in a html file:
* { font-weight:bold }
#p3 { background-color:aqua }
 Where * applies to every element of the HTML document.
 For element having id=p3 both selectors * and #p3 will be applied , because
both define different properties
 Consider the following style sheet rule in a html file:
* { font-weight:bold }
#p3 { font-weight:normal }
 Where * applies to every element of the HTML document.
 For element having id=p3 only selector #p3 will be applied , because both
define same properties. #p3 given priority then *
 In order to choose between multiple declarations that all apply to a single
property of a single element, the browser (or user agent) applies rule
cascading, a multistage sorting process that selects a single declaration that will
supply the property value
 The very first step of this process involves deciding which external and
embedded style sheets apply to the document
 For example, if alternate external style sheets are available, only one will apply,
and rules in the other alternate style sheets will be ignored
 If a media type is specified for an embedded or external style sheet is not
supported by the user agent, then that style sheet’s rules will be ignored

 Once the appropriate external and embedded style sheets have been identified,
the next stage of the sorting process involves associating an origin and weight
with every declaration that applies to a given property of a given element
 In addition to an origin, every author and user style declaration has one of two
weight values: normal and important
 A declaration has important weight if it ends with an exclamation mark (!)
followed by the word important as shown in the following rule:
p { text-indent:3em; font-size:larger !important }
 In the above example property font-size has important weight, whereas
property text-indent has normal weight
 All user-agent declarations can also be considered to have normal weight
 Once the origin and weight of all declarations to an element property have been
established, they are prioritized (from high to low) as follows:
1. Important declaration with user origin
2. Important declaration with author origin
3. Normal declaration with author origin
4. Normal declaration with user origin
5. Any declaration with user agent origin
 So each declaration falling in to one of five priority bins
Example
 We begin by treating a ruleset with a comma-separated selector string as if it
were multiple rule sets each with a single selector; that is, a rule set such as
h1, #head5, .big { font-size:x-large }
 is treated as the equivalent three rule sets
h1 { font-size:x-large }
#head5 { font-size:x-large }
.big { font-size:x-large }
The origin of a declaration is one of the following:

 Author: an author who create web document can define style sheet as part
of an external or embedded style sheet with in the html file itself
 User agent: A browser or user agent may define default style property values
for HTML elements.
 User: Most modern browsers allow users to provide a style sheet or style
preferences that are treated as style rules
• Next, priority will be given based on type of selectors

• The bins we use for this purpose, from highest to lowest specificity (priority)
are:
1. ID selectors
2. Class and pseudo-class selectors
3. Descendant and type selectors
4. Universal selectors
• An example of pseudo-class selector is a:hover, a:visited, etc
• Finally style attribute defined in the element has higher priority then all
other
Consider an example
imp1.css contains the following statement:
p { color:blue }
imp2.css contains the following statements:
@import url("imp1.css");
p { color:green }
index.html contains the following statement:
<link rel="stylesheet" type="text/css"
href="imp2.css" />
p { color:yellow }
</style>
• Then the style rulesets are arranged order in the index.html file is:
p { color:blue }

p { color:green }
p { color:yellow }
• Elements <p> will be displayed with yellow text
The style cascade is summarized in the Figure:
Rule Inheritance:
• If no style rule defined for any element then it inherits Style rules from its
parent elements
• If the same property with different value defined in both parent and child
element selectors then for that property value defined in the child element
selector will be given priority
• Consider the following example:
exam
<!DOCTYPE html>

<html>
<head>
body { font-weight:bold;color:red;}
weight:bold;color:red;}
li { font-style:italic;color:black;
style:italic;color:black; }
span { font-weight:normal
weight:normal }
</style>
</head>
<body>
<p> Text outside LI,within paragraph and,
<span>inside a span</span></p>
<ul>
<li> embedded List item outside and
<span>inside a span</span>.
</li>
</ul>
</body>
</html>
Output:
 For <p>, it is inheriting style features color:red, font-weight:bold

weight:bold from its
parent element <body>
 For <span> within <p>, it is overridding font-weight:normal, and inheriting
color:red from <body>
 For <li>, it is inheriting style feature font-weight:bold from its parent element
<body> and overridding color:black
 For <span> within <li>, it is overridding font-weight:normal
weight:normal from <body>,
and inheriting color:black from <p>

1.12.7. Box Model and Text Flow

 Block-level
level elements (such as sections, <H1>,<P>)) render with a line break
before and after their content
 All block-level HTML5 elements have a virtual box drawn around them,
based on what is known as the box model.. When the browser renders an
element using the box model, the content is surrounded by padding,
padding a border
and a margin as shown in the following figure:
Fig. Box model for block-level

block elements.
 CSS controls the border using three properties: border-width,, border-color

and border-style.
1.12.7. 1. Borders
 Border consist of three properties:
properties border-width, border-style,border
style,border-color.
Their features are explained below:
Border-width property
 This determines thickness of the border.
border This property may be set to any valid
CSS length (e.g., em, ex, px)
px or to the predefined value of thin, medium or
thick
 Possible values for border
der-width property includes the following:
following
o thin o thick
o medium o integer value in pixel
 Example
o border-width:10;
Border-style property
 It determines how the border line to be displayed.
displayed Possible values for border-
style property includes the following:
following

o solid o ridge o outset

o double o dotted o dashed
o groove o inset o none
 Example
o border-style:inset;
Border-color property
 determine the color in which border line to be displayed
 Example
o border-color : red
Border property
 this property is used to combine features of border-style,
style, border-size
border and
border-color or you could use one or two features
 syntax
o border : width style color;
 Example
o border : 1px solid #0000FF;
 complete example given below:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
div { text-align: center;
width: 50%;
position: relative;
left: 25%;
border-width:
width: 6px;
border-style:solid;
border-color:red;
}
</style>
</head> OUTPUT:
<body>
<div>Solid border</div><hr>
</body>
</html>

Output for various combination of border-style,

border border-size is shown below:
1.12.8. margin and padding Properties

 The margin property sets the space between the outside of an element’s
border and all other content on the page
 The padding property determines the distance between the content inside an
element and the element’s border.
 Margins for individual sides of an element can be specified by using the
properties margin-top, margin-right,
margin margin-left and margin-bottom
bottom.
 You could use margin property to apply all four margin together, with
following syntax: margin:
margin top-margin right bottom left
 Padding can be specified in the same way, using padding-top, padding-right,
padding
padding-left and padding-bottom.
padding
 You could use padding property to apply all four margin together, with
following syntax: padding: top-margin
top right bottom left

1.12.9. Floating Elements (using css float property)

 Floating allows you to move an element to one side of the screen; other content
in the document then flows around the floated element.
 To set any element floating, we have to use float property in its style
definition, which has two possible values: left or right
 Thee following example demonstrates
d how floating elements can be used:
<!DOCTYPE html> Output:
<html>
<head>
img {
float:right;
border:thick double red;
}
</style>
</head>
<body>
<img src='rose.jpg' />
<p align="justify">This
This is sample paragraph, given to show the feature of float
property of CSS, which has two possible values left or right</p>
</body></html>
 In the above example, if change the CSS code similar to the following:
following
img { float:right;
border:thick
er:thick double red;
margin: 1em .8em 1em 1em;
}
 Then you would get following output:

 In the above example, if change the CSS code similar to the following:
following
img { float:right;
border:thick double red;
margin: 1em .8em 1em 1em;
padding:20px 20px 20px 20px;
}
Then you would get following output:
1.12.10. border-image property (Border Images)

 Border-image
image property allows you to fill border with image,
image rather than
solid colors
 The CSS3 border-image
image property uses images to place a border around any
block-level element Stretching an Image Border
 The border-image property has six values. They are
o border-image-source
source: the URL of the image to use in the border

o border-image-slice: Expressed with four space-separated values in

pixels. These values are the inward offsets from the top, right, bottom
and left sides of the image.
 The border-image-slice divides the image into nine regions: four
corners, four sides and a middle, which is transparent
 We could express the border-image-slice in two values—80
80—in which case the first value would represent the top and
bottom, and the second value the left and right.
 The border-image-slice may also be expressed in percentages
o border-image-repeat—specifies how the regions of the border image
are scaled and tiled (repeated).
 By indicating stretch just once, we create a border that will stretch
the top, right, bottom and left regions to fit the area.
 You may specify two values for the border-image-repeat
property.
 For example, if we specified stretch repeat, the top and bottom
regions of the image border would be stretched, and the right and
left regions of the border would be repeated (i.e., tiled) to fit the
area.
 Other possible values for the border-image-repeat property
include round and space.
 If you specify round, the regions are repeated using only whole
tiles, and the border image is scaled to fit the area.
 If you specify space, the regions are repeated to fill the area using
only whole tiles, and any excess space is distributed evenly around
the tiles
 A complete example is given below:
<!DOCTYPE html>
<html>
<head>
div {
border-width: 30px;
width: 234px;
padding: 20px 20px;

}
#stretch {
border-image:
image: url(border.png) 80 80 80 80 stretch;
}
#repeat {
border-image:
image: url(border.png) 34% 34% repeat;
}
</style>
</head>
<body>
<h2>Image Borders</h2>
<p><div id = "stretch">Stretching
"stretch">Stretching the image border</div></p>
<p><div id = "repeat">Repeating the image border</div></p>
</body>
</html>
Output:
1.12.11. Positioning Elements: Absolute Vs Relative Positioning

Position property
 The Position property is used in CSS to position elements in the web pages.
The possible values for position property includes the following:
o Relative: if the position property is set to relative then elements are
positioned relative to other elements

o Absolute: Setting an element’s position property as absolute removes

the element from the normal flow of elements on the page, instead
positioning it according to the distance from the top,, left, right or
bottom margins of its containing block-level element
z-index property
 The z-index property allows you to layer overlapping elements.. Elements that
have higher z-index values are displayed in front of elements with lower z-
index values
 For example element with z-index:2
z index:2 will be placed on top of element with z-
index:1
 A complete example for position and absolute is given below:
<!DOCTYPE html>
<head>
<body>
<img src='flow20.jpg' style="position:absolute; left:80px; top:80px; z-index:2"
z
width=200 />
<img
img src='flow11.jpg' style="position:absolute; left:20px; top:20px; z-index:1"
z
width=200 />
</body>
</html>
Output:
1.12.12. Color
 CSS3 allows you to express color in several ways.
ways They are:
o standard color names (such as Aqua,Cyan,Pink). There here are over 140
HTML color names.
names. The following code define text color to purple:
color:purple

o Hexadecimal RGB values (such as #00FFFF for Aqua). The following

code define background color to Aqua:
background-color:#00FFFF;
o RGB (Red, Green, Blue). The following code define background color
to RED using RGB:
background-color:RGB(255,0,0);
o RGBA (Red, Green, Blue, Alpha) gives you greater control over the
exact colors in your web pages. The value for each color—red, green
and blue—can range from 0 to 255. The alpha value—which represents
opacity—can be any value in the range 0.0 (fully transparent) through
1.0 (fully opaque)
background: RGBA(255, 0, 0, 0.5);
o HSL (hue, saturation, lightness) or HSLA (hue, saturation, lightness,

alpha) - CSS3 also allows you to express color using HSLA.
 The hue is a color or shade expressed as a value from 0 to 359
representing the degrees on a color wheel (a wheel is 360 degrees).
The colors on the wheel progress in the order of the colors of the
rainbow—red, orange, yellow, green, blue, indigo and violet.
 The saturation—the intensity of the hue—is expressed as a
percentage, where 100% is fully saturated (the full color) and
0% is gray.
 Lightness—the intensity of light or luminance of the hue—is
also expressed as a percentage. A lightness of 50% is the actual
hue. If you decrease the amount of light to 0%, the color appears
completely dark (black). If you increase the amount of light to
100%, the color appears completely light (white). An example:
background: hsla(0, 100%, 50%, 0.5);
1.12.13. TEXT ( CSS PROPERTIES FOR MANIPULATING TEXT )

1.12.13.1. font-family Property
 The font-family property allows you to specify a comma-separated list of fonts
to use for a particular style.

 The browser attempts to use the fonts in the order in in which they appear in the
list. If particular font is not available in the list, it tries to use the next font
 It’s advisable to end a font list with a generic font family: name in case the
other fonts are not installed on the user’s computer.
computer. An example is given below:
h1 { font-family: tahoma, helvetica, sans-serif;
sans }
 In this example, if the tahoma font is not found on the system, the browser will
look for the helvetica font. If neither is found, the browser will display its
default sans-serif font.
Fig.Generic font families.

1.12.13.2. font-size Property
 font-size property specifies size of the text in pt(point).
 Other possible measurement is relative values—xx-small, x-small, x small,
smaller, medium, large,, larger, x-large and xx-large—alsoalso can be used.
 Generally, relative font-size
font values are preferred over points, because an
author does not know the specific measurements of each client’s display. display
Relative values permit more flexible viewing of web pages.
h1 { font-size: 16pt;
16pt }
p { font-size: small;
small }
1.12.13.3. font-style Property

 The font-style text The possible values
style property specifies the font style for a text. value
could be normal, italic, oblique
p { font-style: italic;; }
1.12.13.4. font-weight Property
 It specifies how thick or thin characters in text should be displayed.
displayed The
possible values could bee normal|bold|bolder|lighter|number number
p { font-weight: bold; bold }

1.12.13.5. font Property

 It combine features of font-style, font-weight, font-size, and font-family.
 Syntax: font:style weight size/line-height font-family
 Example p{font : italic bold 12px/30px Georgia, serif; }
1.12.13.6. text-align property

 It specifies the horizontal alignment of text. The possible values could be
left,right,center, justify
p { text-align : justify; }
1.12.13.7. text-decoration property

 It specifies how text to be additionally decorated. The possible value for this
property is none, underline, overline, line-through
 Example: Output:
<h1 style= " text-decoration:overline " >
overline </h1>
<h2 style= " text-decoration: line-through " >
line-through</h2>
<h3 style= " text-decoration: underline " >
underline </h3>
1.12.13.8. text-transform property
 It controls the capitalization of text. The possible value for this property are
none, lowercase, uppercase, capitalize
 Example:
<h1 style= " text-transform: uppercase " > Heading </h1>
 Output:
HEADING
1.12.13.9. line-height property
 Specifies Sets the line height. Assign integer/float values in em, px, in
(inches), cm (centimeters), mm (millimeters), pt (point), pc (picas;1 pc = 12 pt)
p { line-height : 30px; }

1.12.13. Text Shadows

 The CSS3 text-shadow property makes it easy to add a text shadow effect to
any text. The property has four values as shown in the following code:
text-shadow: -4px 4px 6px dimgrey;
 Each from left to right represents:
o Horizontal offset of the shadow—the number of pixels that the text-
shadow will appear to the left or the right of the text. A negative value
moves the text-shadow to the left; a positive value moves it to the right.
o Vertical offset of the shadow—the number of pixels that the text-
shadow will be shifted up or down from the text. A negative value
moves the shadow up, whereas a positive value moves it down.
o blur radius—the blur (in pixels) of the shadow. A blur-radius of 0px
would result in a shadow with a sharp edge (no blur). The greater the
value, the greater the blurring of the edges. We used 6px.
o color—determines the color of the text-shadow. We used dimgrey.
 Complete example given below:
<h1 style="text-shadow: -4px 4px 0px dimgrey;font-size: 600%;">
Text Shadow
</h1>
 Output:
1.12.13. Box Shadows

 The CSS3 box-shadow property makes it easy to add a shadow effect to any
block-level element. The property has four values as shown in the following
code:
box-shadow: 25px 25px 50px dimgrey;
 Meaning of cach four values is same as in text-shadow property
 Complete example given below:
<h1 style="box-shadow: 20px 20px 15px dimgrey;
width:200px; height:50px; text-align:center;
border:3px solid black;">
box Shadow

</h1>
 output: (box-shadow: -20px -20px
px 15px dimgrey)
dimgrey
1.12.14. border-radius property

 This property allows you to add border with rounded corners to any block-
level element.
 If border-radius value greater than half of the shortest side length produces
a completely round end.
end
 You can also specify the radius for each corner with border-top top-left-radius,
border-top-right-radius,, border-bottom-left-radius and border-bottom-right-
border
radius.
 Complete example
xample given below:
<div style=" border: 3px solid navy;
padding: 5px 20px;
background: lightcyan;
width: 200px;
text-align:
align: center;
border-radius:
radius: 15px >
The border-radius
radius property example
</div>
output: (if border-radius: 50px)
1.12.15.. Transitions and Transformations

 With CSS3 transitions,, you can change an element’s style over a specified
duration—forfor example, you can vary an element’s opacity from opaque to
transparent over a duration of one second.
 CSS3 transformations allow you to move, rotate, scale and skew elements.
 Youou can make transitions and transformations occur simultaneously, doing
things like having objects grow and change their color at once.

 Transitions allow you to specify only the starting and ending values of the CSS
properties being changed
1.12.15.1. transition and transform Properties

Transition property
 Consider the example of following transition property declaration
img { transition: transform 4s, opacity 2s; }
 It indicates that an image transform takes four seconds to apply and the
opacity changes over two seconds—thus, the transform will continue for
another two seconds after the opacity change completes.
Transform property
 Consider example of transform property declaration:
img:hover ( transform: rotate(360deg) scale(2, 2);}
 This transform property specifies that the image will rotate 360deg and will
scale to twice its original width and height when the mouse hovers over the
image
 The transform property uses transformation functions, such as
rotate(Ndeg) and scale(width,height), to perform the
transformations.
 The rotate transformation function receives the number of degrees. Negative
values cause the element to rotate left. A value of 720deg would cause the
element to rotate clockwise twice.
 The scale transformation function specifies how to scale the width and
height. The value 1 represents the original width or original height, so values
greater than 1 increase the size and values less than 1 decrease the size
Example
 In the following example, we use the transition and transform properties to
scale and rotate an image 360 degrees when the cursor hovers over it.
<!DOCTYPE html>
<html>
<head>
img {
margin: 80px;
transition: transform 4s opacity 4s;

opacity:.5;
}
img:hover {
transform: rotate(360deg) scale(2, 2); opacity:1;
}
</style>
</head>
<body>
<img src = "sunflower.jpg" width = "150" / >
</body> </html>
 Output from initial to final when mouse hover around image:
1.12.16. Animation
animation Property
 The animation property allows you to represent several animation
properties in a shorthand notation, rather than specifying each separately, as
shown below:
animation: movingImage linear 10s 2 1s alternate;

 property for each values in the animation property from left to right listed
below:
animation-name: movingImage;
animation-timing-function: linear;
animation-duration: 10s;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
In the shorthand notation, the values are listed in the following order:
 animation-name - represents the name of the animation
(movingImage). This name associates the animation with the keyframes that
define various properties of the element being animated at different stages of
the animation
 animation-timing-function - determines how the animation
progresses in one cycle of its duration. Possible values include linear, ease,
ease-in, ease-out, ease-in-out, cubic-bezier.
• Linear:animation will move at the same speed from start to finish.
• Ease: animation starts slowly, increases speed, then ends slowly.
• ease-in: animation starts slowly, then speeds up
• ease-out: animation starts faster, then slows down
• ease-in-out: animation starts and ends slowly
• cubic-bezier value allows you to customize the timing function with
four values between 0 and 1, such as cubic-bezier(1,0,0,1).
 animation-duration - specifies the time in seconds (s) or milliseconds
(ms) that the animation takes to complete one iteration. The default duration is
0.
 animation-delay - specifies the number of seconds or milliseconds after
the page loads before the animation begins. The default value is 0.
 animation-iteration-count - specifies the number of times the
animation will run. The default is 1. You may use the value infinite to
repeat the animation continuously.

 animation-direction—specifies the direction in which the animation

will run. The value alternate used here specifies that the animation will run
in alternating directions—in this case, counterclockwise, then clockwise. The
default value, normal, would run the animation in the same direction for each
cycle.
The shorthand animation property cannot be used with the animation-
play-state property—it must be specified separately, which specifies whether
the animation is paused or running, it defaults to running.
@keyframes Rule and Selectors

 For the element being animated, the @keyframes rule defines the element’s
properties that will change during the animation, the values to which those
properties will change, and when they’ll change.
 The @keyframes rule is followed by the name of the animation
(movingImage) to which the keyframes are applied, followed by within curly
brace, set of selectors declaration that are to be applied in sequence to perform
animation is defined
 Consider the following selector declaration:
0% {opacity: 0; left: 50px; top 0px;}
 The selector, 0%, is followed by a declaration block with three declarations—
opacity, left and top
Example
 In the following example, we create a simple animation of an image that moves
in a diamond pattern as it changes opacity. The @keyframes rule includes
five selectors to represent the points-in-time for our animation.
 Recall that our animation will take 10 seconds to complete. In that context, 0%
indicates the beginning of a single animation cycle, 25% represents 2.5 seconds
into the animation, 50% represents 5 seconds into the animation, 75%
represents 7.5 seconds into the animation and 100% represents the end of a
single animation cycle. You can break down the animation into as many points
as you like. At each point, we specify the opacity of the image and the image
position in pixels from the left and from the top. We begin and end the
animation at the same point—left: 50px; top: 0px; creating a
diamond pattern along which the image moves
 Example:

<!DOCTYPE html>
<html>
<head>
Img {
position: relative;
animation: movingimage linear 10s 1s 2 alternate;
}
@keyframes movingimage {
0% {opacity: 0; left: 50px; top: 0px;}
}
</style>
</head>
<body>
<img src = "sunflower.jpg" width = "138" height = "180"
alt = "sun flower">
</body>
</html>
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

Wad 3 Units PDF

Uploaded by

Copyright:

Available Formats

Wad 3 Units PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wad 3 Units PDF

Uploaded by

Copyright:

Available Formats

CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

1. 1. Web Essentials:Clients, Servers, and Communication

The essential elements of the World Wide Web are:

1.1.1. The Internet

1.1.2. Internet Protocols

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 1 -

 In addition, many universities and other organizations connected to the

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 2 -

1.2 Basic Internet Protocols

 A computer communication protocol is a detailed specification of how

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 3 -

Transmission Control Protocol (TCP)

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 4 -

Figure : communication using TCP/IP.

- In that Boxes represent software applications on the respective host

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 5 -

1.2.3 UDP, DNS, and Domain Names

User Datagram Protocol(UDP)

Domain Name Service (DNS)

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 6 -

followed by a domain name is sometimes called

1.2.4 Higher-Level Protocols

1.3 The World Wide Web

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 9 -

1.3.1 Hypertext Transport Protocol

 A HTTP interaction is always initiated by a client sending a request message

 When I pressed the Enter

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 10 -

o Used DNS to obtain an IP address for www.example.org

Date: Thu, 09 Oct 2003 20:30:49 GMT.

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 11 -

Date: Thu, 09 Oct 2003 20:30:49 GMT.

 Notice that the body of response contains the information displayed by

1.4 HTTP Request Message

 Example of HTTP request message

1.4.2. Start line

Request method request

1.4.2.1. HTTP Version

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 13 -

 A complete list of the currently registered URI schemes can be found at

Uniform Resource Name (URN)

1.4.2.3 Request Method

Method Request server to

1.4.3. Header Fields and MIME Types

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 14 -

POST /servlet/EchoHttpRequest HTTP/1.1

 The following table shows some common MIME types

MIME Type Description

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 15 -

 The Standard Top-level MIME Content Types includes the following:

header filed Use

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 16 -

1.5. HTTP Response Message

Date: Thu, 09 Oct 2003 20:30:49 GMT.

1.5.1 Response Status Line

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 17 -

Status Reason Phrase Meaning

1.5.2 Response Header Fields

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 18 -