Mr. K.

Chairmadurai,
Assistant Professor/ CSE
Adhiparasakthi Engineering College,
Melmaruvathur.

UNIT I WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0 9

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.
UNIT II CLIENT SIDE PROGRAMMING 9
Java Script: An introduction to JavaScript–JavaScript DOM Model-Date and Objects,- Regular Expressions- Exception
Handling-Validation-Built-in objects-Event Handling- DHTML with JavaScript- JSON introduction – Syntax – Function
Files – Http Request –SQL.
UNIT III SERVER SIDE PROGRAMMING 9
Servlets: Java Servlet Architecture- Servlet Life Cycle- Form GET and POST actions- Session Handling- Understanding
Cookies- Installing and Configuring Apache Tomcat Web Server- DATABASE CONNECTIVITY: JDBC perspectives, JDBC
program example - JSP: Understanding Java Server Pages-JSP Standard Tag Library (JSTL)-Creating HTML forms by
embedding JSP code.
UNIT IV PHP and XML 9
An introduction to PHP: PHP- Using PHP- Variables- Program control- Built-in functions- Form Validation- Regular
Expressions - File handling – Cookies - Connecting to Database. XML: Basic XML- Document Type Definition- XML
Schema DOM and Presenting XML, XML Parsers and Validation, XSL and XSLT Transformation, News Feed (RSS and
ATOM).
UNIT V INTRODUCTION TO AJAX and WEB SERVICES 9
AJAX: Ajax Client Server Architecture-XML Http Request Object-Call Back Methods; Web Services: Introduction- Java
web services Basics – Creating, Publishing, Testing and Describing a Web services (WSDL)-Consuming a web service,
Database Driven web service from an application –SOAP.

Syllabus :

Web Essentials HTML 5 CSS 3

–Clients, Servers and –Tables –Inline, embedded and

Communication – Lists external style sheets
– The Internet – Image – Rule cascading
– Basic Internet protocols – HTML5 control elements – Inheritance
– World wide web – Semantic elements – Backgrounds
– HTTP Request Message – Drag and Drop – Border Images
– HTTP Response Message – Audio – Colors
– Web Clients – Video controls – Shadows
– Web Servers – Text
– Transformations
– Transitions
– Animations.

1
 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, and the computer networks
supporting browser-server communication.
• By considering communication, with a focus on
the Internet and some of its key
communication protocols, especially the
Hypertext Transport Protocol used for the bulk
of web communication.

The Internet
• The Internet traces its roots to a project of the U.S. Department
of Defense’s then named Advanced Research Projects Agency,
or ARPA.
• The ARPANET project was intended to support DoD research on
computer networking.
• As this project began in the late 1960s,there had been only a few
small experimental networks providing communication between
geographically dispersed computers from different
manufacturers running different operating systems.
• The purpose of ARPANET was to create a larger such network,
both in order to electronically connect DoD-sponsored
researchers and in order to experiment with and develop tools
for heterogeneous computer networking.

The Internet
• The ARPANET computer network was launched in 1969
and by year’s end consisted of four computers at four
sites running four different operating systems.
• ARPANET grew steadily, but because it was restricted to
DoD-funded organizations and was a research project,
it was never large.
• 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.

2
 The Internet
• Despite the relatively small number of machines
actually on the ARPANET, the benefits of
networking were becoming known to a wide
audience.
• For example, e-mail was available on ARPANET
beginning in 1972, and it soon became an
extremely popular application for those who had
ARPANET access.
• It wasn’t long before other networks were being
built, both internationally and regionally within
the United States.
• The regional U.S. networks were often
cooperative efforts between universities.

The Internet
• As one example, SURAnet(Southeastern University Research
Association Network) was organized by the University of
Maryland beginning in 1982 and eventually included
essentially all of the major universities and research
institutions in the southeastern United States.
• Another of these networks, CSNET (Computer Science
Network), was partially funded by the U.S. National Science
Foundation (NSF) to aid scientists at universities without
ARPANET access, laying the groundwork for future network
developments.
• While these other networks were springing up, the ARPANET
project continued to fund research on networking.

The Internet
• Several of the most widely used Internet protocols—
including the File Transfer Protocol (FTP) and Simple
Mail Transfer Protocol (SMTP), which underlie many of
the Internet’s file transfer and e-mail operations,
respectively—were initially developed under ARPANET.
• But perhaps most crucial to the 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 and between
networks.

3
 The Internet
• ARPANET switched from using an earlier protocol to
TCP/IP during 1982.
• At around the same time, an ARPA Internet was created,
allowing computers on some 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 along an
e-mail message.
• This form of communication was asynchronous. That is,
the e-mail might be delayed some time before it was
actually delivered, which precluded interactive
communication of any type.

The Internet
• Furthermore, each institution connecting to CSNET was
largely on its own in determining how it was going to
connect to the network.
• 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.
• It was obvious to everyone that the CSNET institutions
were still not enjoying all the potential benefits of the
ARPA Internet.

The Internet
• 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.
• But it was also decided that regional networks
should be able to connect to NSFNET, so that the
NSFNET would provide a backbone through
which other networks could interconnect
synchronously.

4
 The Internet

Geographic distribution of and connections between nodes on the early

NSFNET backbone.

The Internet
• The geographic distribution of the six
supercomputer centers connected by the early
NSFNET backbone.
• Regional networks connecting to the backbone
included SURAnet as well as NYSERNet (with
primary connections through the Ithaca
center), JvNCnet (with primary connection
through the Princeton center) and SDSCnet
(with primary connection through the San
Diego center).

The Internet
• The original backbone operated at only 56 kbit/s,
the maximum speed of a home dial-up line today.
• The backbone rate was upgraded to 1.5 Mbit/s in
1988 and then to 45 Mbit/s in 1991.
• Furthermore, the backbone was expanded to
directly include several research networks in
addition to the supercomputer centers, making it
that much easier for sites near these research
networks to connect to the NSFNET.
• In 1988, networks in Canada and France were
connected to NSFNET;

5
 The Internet
• NSFNET quickly supplanted 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.
• But the NSFNET terms of usage stipulated that purely
commercial traffic was not to be carried over the
backbone: the purpose of the Internet was still, in the
eyes of the NSF, research and education.

The Internet
• Increasingly, though, it became clear that there could
be significant benefits to allowing commercial
traffic on the Internet as well.
• This in turn would provide a less expensive network
for research and educational purposes.
• Whatever the motivation, the restriction on
commercial traffic was rescinded in 1991, spurring
further growth of the Internet and laying the
groundwork for the metamorphosis of the Internet
from a tool used primarily by scientists at research
institutions to the conduit for information,
entertainment, and commerce that we know today.

The Internet
• This also led fairly quickly to the NSF being able to
leave its role as the operator of the Internet
backbone in the United States.
• Those responsibilities were assumed by private
telecommunication firms in 1995. These firms are
paid by other firms, such as some of the larger
Internet service providers (ISPs), who connect
directly with the Internet backbone.
• These ISPs, in turn, are paid by their users, which
may include smaller ISPs as well as end users.

6
 The Internet
• The Internet is the collection of computers
that can communicate with one another
using TCP/IP over an open, global
communications network.

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.

TCP/IP
• TCP and IP are actually two different protocols.
• The reason that they are often treated as one is
that the bulk of the services we associate with
the Internet—e-mail, Web browsing, file
downloads, accessing remote databases—are
built on top of both the TCP and IP protocols.

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

Internet Protocol (IP)

• 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 for each
of the source and destination computers.

Internet Protocol (IP)

• IP function: transfer data from source device to
destination device
• IP source software creates a packet representing the
data
– Header: source and destination IP addresses, length of
data, etc.
– Data itself
• If destination is on another LAN, packet is sent to a
gateway that connects to more than one network

8
 Internet Protocol (IP)

Source

Network 1

Gateway Destination

Gateway

Network 2 Network 3

Internet Protocol (IP)

• The sequence of computers that a packet travels
through from source to destination is known as
its route.
• How does each computer choose the next
computer in the route for a packet?
• A separate protocol (the current standard is BGP-
4, the Border Gateway Protocol) is used to pass
network connectivity information between
gateways so that each can choose a good next
hop for each packet it receives.

Internet Protocol (IP)

• 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.
• The IP standard calls for IP software to simply
discard any corrupted packets.
• 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.

9
 Transmission Control Protocol (TCP)
• Limitations of IP:
– No guarantee of packet delivery (packets can be
dropped)
– Communication is one-way (source to destination)
• TCP adds concept of a connection on top of IP
– Provides guarantee that packets delivered
– Provide two-way (full duplex) communication

Transmission Control Protocol (TCP)

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

OK.

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

Here’s a packet.

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

Transmission Control Protocol (TCP)

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

10
 Transmission Control Protocol (TCP)

User Datagram Protocol (UDP)

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

Domain Name Service (DNS)

• DNS is the “phone book” for the Internet
– Map between host names and IP addresses
– DNS often uses UDP for communication
• Host names
– Labels separated by dots, e.g., www.example.org
– Final label is top-level domain
• Generic: .com, .org, etc.
• Country-code: .us, .il, etc.
• The top-level domain names are assigned by the
Internet Corporation for Assigned Names and
Numbers (ICANN)

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

Analogy to Telephone Network

• IP ~ the telephone network
• TCP ~ calling someone who answers, having a
conversation, and hanging up
• UDP ~ calling someone and leaving a message
• DNS ~ Internet version of directory assistance
(associating names with numbers.)

Higher-level Protocols
• Many protocols build on TCP
– Telephone analogy: TCP specifies how we initiate and terminate
the phone call, but some other protocol specifies how we carry on
the actual conversation
– when making a telephone call, the parties must agree on the
language(s) that will be used to communicate.
– to decide which party will speak first, how the parties will take
turns speaking, and so on
• Some examples:
– SMTP (email)
– FTP (file transfer)
– HTTP (transfer of Web documents)
• The primary TCP-based protocol used for communication
between web servers and browsers is called the Hypertext
Transport Protocol (HTTP). In some sense, just as IP is a key
component in the definition of the Internet, HTTP is a key
component in the definition of the World Wide Web.

12
 World Wide Web
• Public sharing of information has been a part of the Internet since its
early days.
• As the amount of information publicly available on the Internet grew,
the need to locate information also grew.
• Various technologies for supporting information management and
search on the Internet were developed.
• Information management technologies in the early 1990s were
– Gopher information servers, which provided a simple hierarchical view
of documents
– The Wide Area Information System(WAIS) system for indexing and
retrieving information
– The ARCHIE tool for searching online information archives accessible via
FTP.
• The World Wide Web also was developed in the early and for a while
was just one among several Internet information management
technologies.

World Wide Web

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

World Wide Web

• The Web is the collection of machines (Web
servers) on the Internet that provide
information, particularly HTML documents, via
HTTP.
• Machines that access information on the Web
are known as Web clients.
• A Web browser is software used by an end
user to access the Web.

13
 Hypertext Transport Protocol (HTTP)
• HTTP is based on the request-response
communication model:
– Client sends a request
– Server sends a response
• HTTP is a stateless protocol:
– The protocol does not require the server to
remember anything about the client between
requests.

Hypertext Transport Protocol (HTTP)

• Normally implemented over a TCP connection (80 is
standard port number for HTTP)
• Typical browser-server interaction:
– User enters Web address in browser
– Browser uses DNS to locate IP address
– Browser opens TCP connection to server
– Browser sends HTTP request over connection
– Server sends HTTP response to browser over connection
– Browser displays body of response in the client area of the
browser window

Hypertext Transport Protocol (HTTP)

• The information transmitted using HTTP is
often entirely text
• Can use the Internet’s Telnet protocol to
simulate browser request and view server
response

14
 Hypertext Transport Protocol (HTTP)

Hypertext Transport Protocol (HTTP)

HTTP Request Message

• Structure of the HTTP Request Message :
– start line
– header field(s)
– blank line
– optional body

15
 HTTP Request - start line

• Start line
– Example: GET / HTTP/1.1
• Three space-separated parts:
– HTTP request method
– Request-URI
– HTTP version

HTTP Request - start line

• Start line
– Example: GET / HTTP/1.1
• Three space-separated parts:
– HTTP request method
– Request-URI
– HTTP version
• 1.1, in which version part of start line must be exactly
as shown

HTTP Request - start line

• Start line
– Example: GET / HTTP/1.1
• Three space-separated parts:
– HTTP request method
– Request-URI
– HTTP version

16
 HTTP Request - start line
• Uniform Resource Identifier (URI)
• A URI is an identifier that is intended to be associated
with a particular resource on the World Wide Web.
• Every URI consists of two parts:
– Syntax: scheme : scheme-depend-part
• Ex: In http://www.example.com/
the scheme is http
– Request-URI is the portion of the requested URI that
follows the host name (which is supplied by the required
Host header field)
• Ex: / is Request-URI portion of http://www.example.com/

Uniform Resource Identifier (URI)

• URI’s are of two types:
– Uniform Resource Name (URN)
• Can be used to identify resources with unique names,
such as books (which have unique ISBN’s)
• Scheme is urn
– Uniform Resource Locator (URL)
• Specifies location at which a resource can be found
• In addition to http, some other URL schemes are
https, ftp, mailto, and file

Uniform Resource Name (URN)

urn:ISBN:0-1404-4417-3
• The URI for a URN always consists of three colon-
separated parts, as illustrated here.
• 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. Other currently registered URN
namespace identifiers along with pointers to
documentation for each are listed at [IANAURNS].
• The third part is the namespace-specific string. The
exact format and meaning of this string varies with the
namespace.

17
 Uniform Resource Locator (URL)

HTTP Request
• Start line
– Example: GET / HTTP/1.1
• Three space-separated parts:
– HTTP request method
– Request-URI
– HTTP version

HTTP Request - Request methods

• Common request methods:

– GET
• Used if link is clicked or address typed in browser
• No body in request with GET method
– POST
• Used when submit button is clicked on a form
• Form information contained in body of request
– HEAD
• Requests that only header fields (no body) be returned
in the response

18
 HTTP Request Methods

HTTP Request
• Structure of the request:
– start line
– 2. header field(s)
– blank line
– optional body

HTTP Request - Header fields

• Header field structure:
– field name : field value
• Syntax
– Field name is not case sensitive
– Field value may continue on multiple lines by
starting continuation lines with white space
– Field values may contain MIME types, quality
values, and wildcard characters (*’s)

19
 Multipurpose Internet Mail Extensions
(MIME)
• Convention for specifying content type of a
message
– In HTTP, typically used to specify content type of
the body of the response
• MIME content type syntax:
– top-level type / subtype
• Examples: text/html, image/jpeg

Multipurpose Internet Mail Extensions (MIME)

Multipurpose Internet Mail Extensions (MIME)

20
 HTTP Quality Values and Wildcards
• Many header field values use so-called 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.
• Example header field with quality values:
accept:
text/xml,text/html;q=0.9,
text/plain;q=0.8, image/jpeg,
image/gif;q=0.2,*/*;q=0.1
• A final common header field feature is the use of the *
character in a header field value as a wildcard character.
• For instance, the string */* in the Accept header field value
represents all possible MIME types.

HTTP Request - Header fields -Example

HTTP Request
• Common header fields:
– Host: host name from URL (required)
– User-Agent: type of browser sending request
– Accept: MIME types of acceptable documents
– Connection: value close tells server to close connection
after single request/response
– Content-Type: MIME type of (POST) body, normally
application/x-www-form-urlencoded
– Content-Length: bytes in body
– Referer: URL of document containing link that supplied URI
for this HTTP request

21
 HTTP Response Message
• Structure of the HTTP response Message:
– status line
– header field(s)
– blank line
– optional body

HTTP Response
• Status line
– Example: HTTP/1.1 200 OK
• Three space-separated parts:
– HTTP version
– Status code
– Reason phrase or Text String(intended for human
use)

22
 HTTP Response
• Status code
– Three-digit number
– First digit is General class of the status code:
• 1=Informational
• 2=Success
• 3=Redirection (alternate URL is supplied)
• 4=Client Error
• 5=Server Error
– Other two digits provide additional information

HTTP Response - Status code

HTTP Response - Status code

23
 HTTP Response
• Structure of the response:
– status line
– 2. header field(s)
– blank line
– optional body

HTTP Response - header fields

• Common header fields:
– Connection, Content-Type, Content-Length
– Date: date and time at which response was generated
(required)
– Location: alternate URI if status is redirection
– Last-Modified: date and time the requested resource was
last modified on the server
– Expires: date and time after which the client’s copy of the
resource will be out-of-date
– ETag: a unique identifier for this version of the requested
resource (changes if resource changes)

HTTP Response - header fields

24
 Client Caching
• A cache is a local copy of information obtained
from some other source
• Most web browsers use cache to store
requested resources so that subsequent
requests to the same resource will not
necessarily require an HTTP request/response
– Ex: icon appearing multiple times in a Web page

Client Caching
Client Server

1. HTTP request for image

2. HTTP response containing image

Browser Web
Server

3. Store image

Cache

Client Caching
Client Server

Browser Web
Server
I need that
image
again…

Cache

25
 Client Caching
Client Server

This…

HTTP request for image

Browser Web
HTTP response containing image Server
I need that
image
again…

Cache

Client Caching
Client Server

Browser Web
Server
I need that
image
again…

Get … or this
image

Cache

Client Caching
• Cache advantages
– (Much) faster than HTTP request/response
– Less network traffic
– Less load on server
• Cache disadvantage
– Cached copy of resource may be invalid
(inconsistent with remote version)

26
 Client Caching
• Validating cached resource:
– Send HTTP HEAD request and check Last-Modified
or ETag header in response
– Compare current date/time with Expires header sent
in response containing resource
– If no Expires header was sent, use heuristic
algorithm to estimate value for Expires

Character Sets
• Every document is represented by a string of integer
values (code points)
• The mapping from code points to characters is
defined by a character set
• Some header fields have character set values:
– Accept-Charset: request header listing character sets that
the client can recognize
• Ex: accept-charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
– Content-Type: can include character set used to represent
the body of the HTTP message
• Ex: Content-Type: text/html; charset=UTF-8

Character Sets
• Technically, many “character sets” are actually
character encodings
– An encoding represents code points using
variable-length byte strings
– Most common examples are Unicode-based
encodings UTF-8 and UTF-16
• IANA maintains complete list of Internet-
recognized character sets/encodings

27
 Character Sets
• Typical US PC produces ASCII documents
• US-ASCII character set can be used for such
documents, but is not recommended
• UTF-8 and ISO-8859-1 are supersets of US-ASCII and
provide international compatibility
– UTF-8 can represent all ASCII characters using a single byte
each and arbitrary Unicode characters using up to 4 bytes
each
– ISO-8859-1 is 1-byte code that has many characters
common in Western European languages, such as é

Web Clients
• A web client is software that accesses a web
server by sending an HTTP request message
and processing the resulting HTTP response.
• Many possible web clients:
– Text-only “browser” (lynx)
– Mobile phones
– Robots (software-only clients, e.g., search engine
“crawlers”)

Web Browsers
• First graphical browser running on general-
purpose platforms: Mosaic (1993)

28
 Web Browsers

Web Browsers
• Primary tasks:
1. Reformat the URL entered as a valid HTTP request message.
2. If the server is specified using a host name (rather than an IP
address), use DNS to convert this name to the appropriate IP
address.
3. Establish a TCP connection using the IP address of the specified
web server.
4. Send the HTTP request over the TCP connection and wait for the
server’s response.
5. 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.

HTTP URL’s
http://www.example.org:56789/a/b/c.txt?t=win&s=chess#para5

host (FQDN) port path query fragment

authority Request-URI

• Browser uses authority to connect via TCP

• Request-URI included in start line (/ used for
path if none supplied)
• Fragment identifier not sent to server (used to
scroll browser client area)

29
 Web Browsers
• User Controllable Standard features
– Save web page to disk
– Find string in page
– Fill forms automatically (passwords, CC numbers, …)
– Set preferences (language, character set, cache and HTTP
parameters)
– Modify display style (e.g., increase font sizes)
– Display raw HTML and HTTP header info (e.g., Last-
Modified)
– Choose browser themes (skins)
– View history of web addresses visited
– Bookmark favorite pages for easy return

Web Browsers
• Additional functionality:
– Automatic URL Completion
– Execution of scripts (e.g., drop-down menus)
– Event handling (e.g., mouse clicks)
– Management of form GUI for controls (e.g.,
buttons)
– Secure communication with servers
– Display of non-HTML documents (e.g., PDF) via
Plug-ins Execution

Web Servers
• Basic functionality:
– Receive HTTP request via TCP
– Map Host header to specific virtual host (one of many host
names sharing an IP address)
– Map Request-URI to specific resource associated with the
virtual host
• File: Return file in HTTP response
• Program: Run program and return output in HTTP response
– Map type of resource to appropriate MIME type and use
to set Content-Type header in HTTP response
– Log information about the request and response

30
 Web Servers – Server history
• httpd: NCAA’s, primary Web server c. 1990
• Apache: “A patchy” version of httpd, now the most
popular server (esp. on Linux platforms) 1995
• IIS: Microsoft Internet Information Server
• Tomcat: Apache Software Foundation
– Java-based
– Provides container (Catalina) for running Java servlets
(HTML-generating programs) as back-end to Apache or IIS
– Can run stand-alone using Coyote HTTP front-end

Web Servers - Server Configuration and Tuning

• Modern servers have a large number of

configuration parameters.
• Broadly speaking, server configuration can be
broken into two areas:
– external communication and
– internal processing.
• In Tomcat, this corresponds to two separate Java
packages:
– Coyote, which provides the HTTP/1.1 communication,
– Catalina, which is the actual servlet container.

Web Servers - Server Configuration

and Tuning
• Some of the Coyote parameters, affecting external communication,
include the following:
1. IP addresses and TCP ports that may be used to connect to this
server.
2. Number of subtasks (called threads in Java) that will be created
when the server is initialized.
3. Maximum number of threads that will be allowed to exist
simultaneously.
4. Maximum number of TCP connection requests that will be queued
if the server is already running its maximum number of threads.
5. Length of time the server will wait after serving an HTTP request
over a TCP connection
6. 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.

31
 Web Servers - Server Configuration
and Tuning
• The internal Catalina portion of Tomcat also has a number
of parameter settings that affect functionality. These
settings can determine:
1. Which client machines may send HTTP requests to the server.
2. Which virtual hosts are listening for TCP connections on a
given port.
3. What logging will be performed.
4. How the path portion of Request-URIs will be mapped to the
server’s file system or other resources.
5. Whether or not the server’s resources will be password
protected.
6. Whether or not resources will be cached in the server’s
memory.

Tomcat Web Server

• HTML-based server administration
• Browse to
http://localhost:8080
and click on Server Administration link
– localhost is a special host name that means
“this machine”

Tomcat Web Server

32
 Tomcat Web Server
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:
one each of Connector, Host, Logger, Realm, and Valve.

Tomcat Web Server - Connector

• A Connector is a Coyote component that
handles HTTP communications directed to a
particular port.

Tomcat Web Server - Connector

33
 Tomcat Web Server - Host
• The Host component (Figure 1.9) is used to
define a virtual host.

Tomcat Web Server - Host

Tomcat Web Server

34
 Tomcat Web Server
• Context provides mapping from Request-URI path to
a web application
• Document Base field is directory (possibly relative to
Application Base) that contains resources for this
web application
• For this example, browsing to
http://localhost:8080/
returns resource from
c:\jwsdp-1.3\webapps\ROOT
– Returns index.html (standard welcome file)

Tomcat Web Server

• Access log records HTTP requests
• Parameters set using AccessLogValve
• Default location: logs/access_log.* under
JWSDP installation directory
• Example “common” log format entry (one line):
www.example.org - admin
[20/Jul/2005:08:03:22 -0500]
"GET /admin/frameset.jsp HTTP/1.1"
200 920

Tomcat Web Server

• Other logs provided by default in JWSDP:
– Message log messages sent to log service by web
applications or Tomcat itself
• logs/jwsdp_log.*: default message log
• logs/localhost_admin_log.*: message log for
web apps within /admin context
– System.out and System.err output (exception
traces often found here):
• logs/launcher.server.log

35
 Tomcat Web Server
• Access control:
– Password protection (e.g., admin pages)
• Users and roles defined in
conf/tomcat-users.xml
– Deny access to machines
• Useful for denying access to certain users by denying
access from the machines they use
• List of denied machines maintained in
RemoteHostValve (deny by host name) or
RemoteAddressValve (deny by IP address)

Secure Servers
• Since HTTP messages typically travel over a
public network, private information (such as
credit card numbers) should be encrypted to
prevent eavesdropping
• https URL scheme tells browser to use
encryption
• Common encryption standards:
– Secure Socket Layer (SSL)
– Transport Layer Security (TLS)

Secure Servers
I’d like to talk securely to you (over port 443)

HTTP Here’s my certificate and encryption data HTTP

Requests Requests

Here’s an encrypted HTTP request

TLS/ Here’s an encrypted HTTP response TLS/ Web

Browser
SSL SSL Server

Here’s an encrypted HTTP request

HTTP HTTP
Responses Here’s an encrypted HTTP response Responses

36
 Secure Servers
Man-in-the-Middle Attack

Fake Fake
DNS www.example.org
Server 100.1.1.1
What’s IP
address for 100.1.1.1 My credit card number is…
www.example.org?

Real
Browser www.example.org

Secure Servers
Preventing Man-in-the-Middle

Fake Fake
DNS www.example.org
Server 100.1.1.1
What’s IP
address for 100.1.1.1 Send me a certificate of identity
www.example.org?

Real
Browser www.example.org

37
 Mr. K. Chairmadurai,
Assistant Professor/ CSE
Adhiparasakthi Engineering College,
Melmaruvathur.

Syllabus :
HTML 5

–Tables
– Lists
– Image
– HTML5 control elements
– Semantic elements
– Drag and Drop
– Audio
– Video controls

HTML Introduction
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating
Web pages
• With HTML you can create your own Website.
• HTML is easy to learn
• HTML is used to create web pages and web
applications.
• HTML is widely used language on the web.
• We can create a static website by HTML only.
• Technically, HTML is a Markup language rather than a
programming language.

1
 Hyper-Text Markup Language
• Hypertext refers to the way in which Web
pages (HTML documents) are linked together.
Thus, the link available on a webpage is called
Hypertext.
• HTML is a Markup Language which means you
use HTML to simply "mark-up" a text
document with tags that tell a Web browser
how to structure it to display.

HTML Document Structure

Structure of HTML

2
 Structure of HTML
• The <!DOCTYPE html> declaration defines
that this document is an HTML5 document
• The <html> element is the root element of
an HTML page
• The <head> element contains meta
information about the HTML page
• The <title> element specifies a title for the
HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the
document's body, and is a container for all
the visible contents, such as headings,
paragraphs, images, hyperlinks, tables,
lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

Title Tag
• The <title> tag defines the title of the document.
The title must be text-only, and it is shown in the
browser's title bar or in the page's tab.
• The <title> element:
– defines a title in the browser toolbar
– provides a title for the page when it is added to
favorites
– displays a title for the page in search-engine results

Title Tag
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
</body>
</html>

3
 HTML Headings
• HTML headings are titles or subtitles that you
want to display on a webpage.
• HTML headings are defined with
the <h1> to <h6> tags.
• <h1> defines the most important
heading. <h6> defines the least important
heading.

Heading Tag

Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

Heading Tag
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</html>

4
 Paragraph <p> Tag

Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

<html>
<head>
<title>Sample</title>
Paragraph
</head>
<body>
<p>HTML stands for Hyper Text Markup Language. HTML is
the standard markup language for creating Web pages. HTML
describes the structure of a Web page.HTML consists of a
series of elements.HTML elements tell the browser how to
display the content.
</p>
</body> Output
</html>

Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>This is a First paragraph</p>
<p>This is a Second paragraph</p>
</body>
</html>

5
<html> Code
<head>
<title>Sample</title>
</head>
<body>
<p> A paragraph always starts on a new
line, and browsers automatically add
some white space (a margin) before
and after a paragraph.
</p> Output
</body>
</html>

Line Break <br>

<html>
Code The HTML <br> element defines a
line break.
<head> Use <br> if you want a line break
(a new line) without starting a
<title>Sample</title> new paragraph:
</head>
<body>
<p> A paragraph always starts on a new
line<br>and browsers automatically add some
white space (a margin) before and after a
paragraph.
</p> Output
</body>
</html>

Horizontal Lines
<html> The <hr> tag defines a thematic
<head> break in an HTML page, and is
most often displayed as a
<title>Sample</title> horizontal rule.
The <hr> element is used to
</head> separate content (or define a
change) in an HTML page:
<body>
<p> This is Paragraph </p>
<hr/>
<p>The hr tag defines a thematic break in an
HTML page</p> Output
</body>
</html>

6
<html>
Without Formatting
<head>
<title>Sample</title>
</head>
<body>
<p>
function sample( int a )
{
printf ("%d",a)
}
</p>
</body> </html>

Preserve Formatting
<html> <pre>
<head>
<title>Sample</title>
</head>
<body>
<pre>
function sample( int a )
{
printf ("%d",a)
}
</pre>
</body> </html>

7
 Solution - The HTML <pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:

HTML Text Formatting

HTML Text Formatting

8
 Nested HTML Elements

Italics
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1><i>This is a heading</i></h1>
</body>
</html>

Center

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>
<center> A paragraph always starts on a new line,
and browsers automatically add some white
space (a margin) before and after a paragraph.
</center>
</p>
</body>
</html>

Bold

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to <b>HTML</b></p>
</body>
</html>

9
 Underlined
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to <u>HTML</u></p>
</body>
</html>

Strike Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to <strike>HTML</strike></p>
</body>
</html>

Superscript Text

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>a²</p>
</body>
</html>

10
 Subscript Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>A₂</p>
</body>
</html>

Larger Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <big>html</big></p>
</body>
</html>
One font size is bigger

Smaller Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to
<small>html</small></p>
</body>
</html> One font size is smaller

11
Emphasized Text

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <em>html</em></p>
</body>
</html>

Marked Text

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <mark>html</mark></p>
</body>
</html>

Text Abbreviation

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <abbr title = “WORKSHOP”>html</abbr></p>
</body>
</html>

12
 Text Direction
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to html</p>
<p><bdo dir="rtl">welcome to html</bdo></p>
</body>
</html>
BDO : Bi-Directional Override

HTML - Comments
• Comment is a piece of code which is ignored by any
web browser.
• It is a good practice to add comments into your
HTML code, especially in complex documents, to
indicate sections of a document.
• Comments help you and others understand your
code and increases code readability.
• HTML comments are placed in between <!-- ... -->

Comment
<html>
<head>
<!-- Head details of HTML -->
<title>HTML</title>
</head>
<!-- Body details of HTML -->
<body>
<p>Welcome to HTML Workshop</p>
</body>
</html>

13
 Invalid Comment
<html>
<head>
<!-- Head details of HTML -->
<title>HTML</title>
</head>
Space Should not be
< !-- Body details of HTML -->
<body> between < and !
<p>Welcome to HTML Workshop</p>
</body>
</html>

Multi-line
Comment

<html>
<head>
<title>HTML</title>
</head>
<!-- This is a multiline comment and it can span
through as many as lines you like. -->
<body>
<p>Welcome to HTML Workshop</p>
</body>
</html>

Comment
Tag
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to <comment> HTML </comment>
Workshop</p>
</body>
</html>

14
 Attribute
• HTML tags can also have attributes, which are extra bits
of information.
• An attribute is used to define the characteristics of an
HTML element and is placed inside the element's
opening tag.
• All attributes are made up of two parts − a name and
a value
• The name is the property you want to set.
• The value is what you want the value of the property to
be set and always put within quotations.

<html>
<head>
Attribute
<title>Align Attribute Example</title>
</head>
Name Value
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>

</html>

Output

15
 Title
Attribute
<html>
<head>
<title>Sample</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

HTML Styles
• The HTML style attribute is used to add styles
to an element, such as color, font, size, and
more.

•Use the style attribute for styling HTML elements

•Use background-color for backgroundcolor
•Use color for text colors
•Use font-family for text fonts
•Use font-size for text sizes
•Use text-align for text alignment

HTML Styles

16
 Style
Attribute

<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family : arial color : #FF0000 ">Welcome
to HTML</p>
</body>
</html>

HTML Colors
• HTML colors are specified with predefined
color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.

17
Colors – Text and
Background
<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "white" bgcolor = "black">

<p>Text Colour and Background Colour in HTML</p>
</body>

</html>

HTML Colors - Hex

Codes

• A hexadecimal is a 6 digit representation of a color.

• The first two digits represent a red value(RR)
• The next two are a green value(GG)
• The last are the blue value(BB).

Colors – Text and

Background

<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">

<p>Text Colour and Background Colour in HTML</p>
</body>

</html>

18
HTML Colors – RGB
values

• This color value is specified using the rgb( ) property.

• This property takes three values, one each for red, green, and
blue.
• The value can be an integer between 0 and 255 or a
percentage.

HTML Colors – RGB

values

<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "rgb(0,0,255)" bgcolor = "rgb(255,255,0)">

<p>Text Color and Background Colour in HTML</p>
</body>

</html>

Font Size
<html>
<head>
<title>Setting Font Size</title>
</head>

<body>
<font size = "1"> HTML</font><br />
<font size = "2"> HTML </font><br />
<font size = "3"> HTML </font><br />
<font size = "4"> HTML </font><br />
<font size = "5"> HTML </font><br />
<font size = "6"> HTML </font><br />
<font size = "7"> HTML </font>
</body>
</html>

19
 Font FACE
<html>

<head>
<title>Font Face</title>
</head>

<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>

</html>

Setting Font Colors

<html>
<head>
<title>Setting Font Color</title>
</head>

<body>
<font color = "#FF00FF">This text is in pink</font>
<br />
<font color = "red">This text is red</font>
</body>
</html>

<html>
Setting Font Colors
<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color =
"#ff0000">
<p>This is the page's default font.</p>

<p>
<font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>

<p>
<font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>

</html>

20
 Output Setting Font Colors

Marquee

<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>

Marquee

<html>

<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text
will scroll from left to right</marquee>
</body>
</html>

21
Marquee
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "up">This text will
scroll from bottom to up</marquee>
</body>

</html>

Image
• The <img> tag is an empty tag, which means that, it can contain only
list of attributes and it has no closing tag.

• <img src = "Image URL" ... attributes-list/>

• <img src = "/html/images/test.png" alt = "Test Image" />

• You can use PNG, JPEG or GIF image file

• Image name is always case sensitive.

• The alt attribute is a mandatory attribute which specifies an

alternate text for an image, if the image cannot be displayed.

Image

<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "/html/new.jpg" alt = "Test Image" />
</body>
</html>

22
 Image Height and
Width
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "new.jpg" alt = "Test Image"
width = "150" height = "100"/>
</body>
</html>

Image Border
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "new.jpg" alt = "Test Image"
border = "3"/>
</body>
</html>

Image alt attribute

<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "test.png" alt = "Test Image"
width = "150" height = "100"/>
</body>
</html>

23
 Set Image Alignment
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "new.jpg" alt = "Test Image"
border = "3" align = "right"/>
</body>
</html>

Output

Exercise

24
 HTML - Text Links
• A webpage can contain various links that take
you directly to other pages
• A webpage can contain various links that take
you directly specific parts of a given page
• These links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between
Web sites by clicking on words, phrases, and
images.
• <a href = "Document URL" ..
attributes-list>Link Text</a>

HYPERLINKS

<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.apec.edu.in">APEC</a>
</body>
</html>

HYPERLINKS – target attribute

_blank : Opens the linked document in a new window or tab.

_self : Opens the linked document in the same frame.

_parent : Opens the linked document in the parent frame.

_top : Opens the linked document in the full body of the window.

25
 HYPERLINKS – target attribute

<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.annauniv.edu" target=“_blank”>OPEN IN NEW WINDOW</a>
<a href = "https://www.annauniv.edu" target=“_self”>OPEN IN SELF</a>
<a href = "https://www.annauniv.edu" target=“_parent”>OPEN IN PARENT</a>
<a href = "https://www.annauniv.edu" target=“_top”>OPEN IN BODY</a>
</body>

</html>

HYPERLINKS – Setting Link Color

You can set colors of your
links, active links and visited links
using link, alink and vlink attributes of <body> tag.

<html>

<head>
<title>Hyperlink Example</title>
</head>

<body alink = "#54A250" link = "#040404" vlink = “yellow">

<p>Click following link</p>
<a href = "https://www.annauniv.edu">ANNA University</a>
</body>

</html>

HYPERLINKS – Download Links

<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href =
"https://cac.annauniv.edu/PhpProject1/aidetails/afug_2021_fu/IandC/01.B.E.CSE
.pdf">Download PDF File</a>
</body>

</html>

26
 HYPERLINKS – Image Link

<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click the image </p>
<a href = "https://www.annauniv.edu" >
<img src = "anna.jfif" alt = "Image Missing" border = "0"/>
</a>
</body>
</html>

HTML - Tables
• HTML table tag is used to display data in tabular form
(row * column). There can be many columns in a row.
• We can create a table to display data in tabular form, using
<table> element, with the help of <tr>, <td>, and <th>
elements.
• <table> tag
• <tr> - Table row
• <td> - Table Data cell
• <th> - Table Heading

HTML - Tables
<tr>
<html>
<td>Siva</td>
<head>
<td>5000</td>
<title>
</tr>
HTML Table Header
<tr>
</title>
<td>Sandeep</td>
</head>
<td>7000</td>
<body>
</tr>
<table border = "1">
</table>
<tr>
<th>Name</th>
</body>
<th>Salary</th
</html>
</tr>

27
 HTML - Tables

Table Background Color

<html> <tr>
<head> <td>Siva</td>
<title> <td>5000</td>
HTML Table Header </tr>
</title> <tr>
</head> <td>Sandeep</td>
<body> <td>7000</td>
<table border = "1" bordercolor = "green" </tr>
bgcolor = "yellow" > </table>
<tr> </body>
<th>Name</th> </html>
<th>Salary</th
</tr>

28
Table Background Image

<html>
<head> <tr>
<title> <td>Siva</td>
HTML Table Header <td>5000</td>
</title> </tr>
</head> <tr>
<body> <td>Sandeep</td>
<table border = "1" bordercolor = "green" <td>7000</td>
background = "test.png"> </tr>
<tr> </table>
<th>Name</th> </body>
<th>Salary</th </html>
</tr>

Table Height and Width

<html> <tr>
<head> <td>Siva</td>
<title> <td>5000</td>
HTML Table Header </tr>
</title> <tr>
</head> <td>Sandeep</td>
<body> <td>7000</td>
<table border = "1" width = "400" height = "150" > </tr>
<tr> </table>
<th>Name</th> </body>
<th>Salary</th </html>
</tr>

29
 Table Caption

<html> <tr>
<head> <td>Siva</td>
<title> <td>5000</td>
HTML Table Header </tr>
</title> <tr>
</head> <td>Sandeep</td>
<body> <td>7000</td>
<table border = "1" width = "400" height = "150" > </tr>
<caption>Employee Details </caption> </table>
<tr> </body>
<th>Name</th> </html>
<th>Salary</th
</tr>

Table Row span Attribute

<html>
<tr>
<head>
<td>Siva</td>
<title>
<td rowspan = "2">7000</td>
HTML Table Header
</tr>
</title>
</head>
<tr>
<body>
<td>Sandeep</td>
<table border = "1" width = "400“
</tr>
height = "150" >
</table>
<caption>Employee Details </caption>
</body>
<tr>
</html>
<th>Name</th>
<th>Salary</th
</tr>

30
 Table colspan Attribute
<html> <tr>
<head>
<td colspan = "2">Siva</td>
<title>
</tr>
HTML Table Header
</title>
<tr>
</head>
<td>Sandeep</td>
<body>
<td>5000</td>
<table border = "1" width = "400"
</tr>
height = "150" >
</table>
<caption>Employee Details
</body>
</caption>
</html>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>

31
 HTML Table Cell Padding & Spacing
HTML tables can adjust the padding inside the cells,
and also the space between the cells.

Cell Padding & Spacing

32
Exercise

Exercise

Exercise

33
Exercise

Exercise

Exercise

34
 HTML - Lists
• HTML offers web authors three ways for specifying
lists of information.
• All lists must contain one or more list elements.
• <ul> − An unordered list. This will list items using
plain bullets
• <ol> − An ordered list. This will use different
schemes of numbers to list your items.
• <dl> − A definition list (Description list). This
arranges your items in the same way as they are
arranged in a dictionary.

Unordered Lists
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>

35
 Unordered Lists - Type Attribute

<ul type = "square">

<ul type = "disc">
<ul type = "circle">

Unordered Lists - Type Attribute

<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul type = “square”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>

Unordered Lists - Type Attribute

<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul type = “disc”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>

36
 Unordered Lists - Type Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul type = “circle”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>

Ordered Lists
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

Ordered Lists – Type Attribute

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

37
 Ordered Lists – Type Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol type=“1”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

Ordered Lists – Type Attribute

<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol type=“I”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

Ordered Lists – Type Attribute

<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol type=“i”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

38
 Ordered Lists – Type Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“A”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

Ordered Lists – Type Attribute

<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“a”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

Ordered Lists – Start Attribute

<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

39
 Ordered Lists – Start Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol type=“1” start=“4”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>

HTML Description Lists

• A description list is a list of terms, with a
description of each term.
• The <dl> tag defines the description list,
the <dt> tag defines the term (name), and
the <dd> tag describes each term:

HTML Description Lists

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

40
Exercise

Exercise

41
 Exercise
<ul>
<li>Bulleted list item</li>
<li>Bulleted list item 2</li>
</ul>

<ol>
<li>Numbered list item</li>
<li>Numbered list item 2</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Definition of term</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>

Exercise

<ul>
<li>Bulleted list item
<ul>
<li>Nested list item</li>
<li>Nested list item 2</li>
</ul>
</li>
<li>Bulleted list item 2</li>
</ul>

Exercise

42
 HTML – FORMS – Control Elements
There are different types of form controls that you
can use to collect data using HTML form −
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

Control Elements

• The HTML <form> element can contain one or more of the following
form elements:
• <input>
• <legend>
• <label>
• <datalist>
• <select>
• <output>
• <textarea>
• <option>
• <button>
• <optgroup>
• <fieldset>

Text Input Control

<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>

43
Password Input Control

<html>
<head>
<title> Password Input Control </title>
</head>
<body>
<form>
Username: <input type = "text" name = “Username" />
<br>
Password: <input type = "password" name = “password" />
</form>
</body>
</html>

Checkbox Control

<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<p> Select the Courses </p>
<form>
<input type = "checkbox" name = "HTML" value = "on"> HTML
<input type = "checkbox" name = "CSS" value = "on"> CSE
<input type = "checkbox" name = "Javascript" value = "on"> JavaScript
</form>
</body>
</html>

Radio Button
Control

<html>
<head>
<title>Radio Button Control</title>
</head>
<body>
<p> Select the Courses </p>
<form>
<input type = "radio" name = "HTML" value = “HTML"> HTML
<input type = "radio" name = "CSS" value = “CSS”> CSS
<input type = "radio" name = "Javascript" value = “JS"> JavaScript
</form>
</body>
</html>

44
 Drop Down Box
Control
<html>
<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "HTML" selected>HTML</option>
<option value = "CSS">CSS</option>
<option value = "JAVASCRIPT">JAVA SCRIPT</option>
</select>
</form>
</body>
</html>

File Upload Control

<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" />
</form>
</body>

</html>

File Upload Control Output

45
 Button Control

<html>
<head>
<title>Button Control</title>
</head>
<body>
<form>
Username: <input type = "text" name = “Username" />
<br>
Password: <input type = “password" name = “password" />
<br><br>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>

Exercise

Exercise

46
 Exercise

Exercise

Exercise

47
 List of All <form> Attributes

List of All <input> Attributes

• The input value attribute specifies an initial value for an input field
• The input readonly attribute specifies that an input field is read-only
• The input disabled attribute specifies that an input field should be
disabled.
• The input size attribute specifies the visible width, in characters, of an
input field.
• The default value for size is 20.
• The input maxlength attribute specifies the maximum number of
characters allowed in an input field.
• The input min and max attributes specify the minimum and maximum
values for an input field.
• The input multiple attribute specifies that the user is allowed to enter
more than one value in an input field.
• he input required attribute specifies that an input field must be filled out
before submitting the form.
• The input autofocus attribute specifies that an input field should
automatically get focus when the page loads.

<INPUT> & <LABEL>

48
<SELECT>

<TEXTAREA>

<BUTTON>

49
<FIELDSET> AND <LEGEND>

<FIELDSET> AND <LEGEND>

Exercise

50
<DATALIST>

<OUTPUT>

<OUTPUT>

51
 SEMANTIC ELEMENTS

• Semantic elements have meaningful names which tells about type

of content. For example header, footer, table, … etc.
• HTML5 introduces many semantic elements as mentioned below
which make the code easier to write and understand for the
developer as well as instructs the browser on how to treat them.
• article • footer
• aside • header
• details • main
• figcaption • mark
• figure • nav
• section

<SECTION> ELEMENT

The <section> element defines a section in a document.

<ARTICLE> ELEMENT
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

52
 <HEADER> ELEMENT

The <header> element represents a container for

introductory content or a set of navigational links.

<FOOTER> ELEMENT

The <footer> element defines a footer for a

document or section.

<NAV> ELEMENT

The <nav> element defines a set of navigation links.

53
 <ASIDE> ELEMENT
The <aside> element defines some content aside from the content
it is placed in (like a sidebar).
The <aside> content should be indirectly related to the surrounding
content.

<FIGURE> AND <FIGCAPTION> ELEMENTS

The <figure> tag specifies self-contained content, like
illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for
a <figure> element. The <figcaption> element can be placed
as the first or as the last child of a <figure> element.

Semantic Elements in HTML

54
 DRAG AND DROP

• Drag and drop is a very common feature. It is when you

"grab" an object and drag it to a different location.
• Drag and Drop (DnD) is powerful User Interface concept which makes
it easy to copy, reorder and deletion of items with the help of mouse
clicks.
• This allows the user to click and hold the mouse button down over an
element, drag it to another location, and release the mouse button to
drop the element there.

Output

Audio CONTROLS
The HTML <audio> element is used to play an audio
file on a web page.
• The controls attribute adds audio controls, like play, pause, and
volume.
• The <source> element allows you to specify alternative audio files
which the browser may choose from. The browser will use the
first recognized format.
• The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.

55
 OUTPUT

VIDEO CONTROLS
The HTML <video> element is used to show a video on a
web page.

• The controls attribute adds video controls, like play, pause,

and volume.
• It is a good idea to always
include width and height attributes. If height and width are
not set, the page might flicker while the video loads.
• The <source> element allows you to specify alternative video
files which the browser may choose from. The browser will
use the first recognized format.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support
the <video> element.

VIDEO CONTROLS
• The controls attribute is a boolean attribute.
• When present, it specifies that video controls should be
displayed.
• Video controls should include:
• Play
• Pause
• Seeking
• Volume
• Fullscreen toggle
• Captions/Subtitles (when available)
• Track (when available)

56
VIDEO CONTROLS
OUTPUT

57
 Mr. K. Chairmadurai,
Assistant Professor/ CSE
Adhiparasakthi Engineering College,
Melmaruvathur.

Syllabus :
CSS 3

– Inline, embedded and external style sheets

– Rule cascading
– Inheritance
– Backgrounds
– Border Images
– Colors
– Shadows
– Text
– Transformations
– Transitions
– Animations.

• HTML markup can be used to indicate both the

semantics of a document (e.g., which parts are
elements of lists) and its presentation (e.g., which
words should be italicized).
• It is advisable to use markup predominantly for
indicating the semantics of a document and to use a
separate mechanism to determine exactly how
information contained in the document should be
presented.
• Style sheets provide such a mechanism.
• CSS provides a great deal of control over the
presentation of a document

1
<html>
<head>
<title>HelloWorld.html</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Example CSS
<html>
<head>
<title>CSSHelloWorld.html</title>
<link rel="stylesheet" type="text/css"
href="style1.css“ title="Style 1" />
<link rel="alternate stylesheet" type="text/css"
href="style2.css“ title="Style 2" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>

style1.css style2.css
body { p{
background-color:lime; font-size:smaller;
}
p{
letter-spacing:1em
font-size:x-large; }
background-color:yellow;
}

2
 Cascading Style Sheet Features
• The key property of style sheet technology is
that it can be used to separate the
presentation of information from the
information content and semantic tagging.

Cascading Style Sheet Features

• The content and semantics of the “Hello World!” page
did not change in the previous example: it consisted of
a single paragraph containing some text.
• Put another way, the body elements of
theHelloWorld.html and CSSHelloWorld.html files will
have exactly the same abstract syntax tree.
• But by changing the style sheet used by the browser to
display this tree, we can achieve different
presentations of the same information.
• There are significant advantages to having such a
separation between the information contained in a
document and its presentation.

Cascading Style Sheet Features

• From a developer’s perspective, another
useful feature of using style sheets is that it is
relatively easy to give all of the elements on a
page a consistent appearance.
• Example
• That is, if we want all of the h1 headers on a
page to have a certain size, we can
accomplish this easily using a style sheet

3
 Cascading Style Sheet Features
• Furthermore, if at a later time we wish to
change the size of the headers, we need only
make the change in that one style sheet.
• More generally, if we use a single style sheet
for all of the pages at a site, then all of the
site pages will have a consistent style, and
one that can be changed with little work.

CSS Core Syntax

CSS Core Syntax

• A CSS style sheet consists of one or more style rules
(sometimes called statements).
• Each line in the style1.css file is an example of a rule.
This form of rule is called a ruleset.
• Ruleset consists of two parts:
– a selector string followed by
– a declaration block, which is enclosed in curly braces ({
and })
• The declaration block contains a list of declarations
separated by semicolons (;)
• The selector string indicates the elements to which
the rule should apply.
• Each declaration within the declaration block specifies
a value for one style property of those elements.

4
 CSS Core Syntax

CSS Core Syntax

A style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will
be applied. This could be any tag like <h1> or <table> etc.
• Property − A property is a type of attribute of HTML tag.
Put simply, all the HTML attributes are converted into CSS
properties. They could be color, border etc.
• Value − Values are assigned to properties. For
example, color property can have value
either red or #F1F1F1 etc.

CSS Selector
• CSS selectors are used to select the content
you want to style.
• Selectors are the part of CSS rule set.
• CSS selectors select HTML elements according
to its id, class, type, attribute etc.

5
 Types of Selectors in CSS
1. CSS Type (Element) Selector
2. CSS Universal Selector
3. CSS Id Selector
4. CSS Class Selector
5. CSS Descendant selector
6. CSS Group Selector

Type Selector – Element Name

• The simplest form of selector string, consists of the name of
a single element type, such as body or p.
body { background-color:lime; }
p { font-size:x-large; background-color:yellow; }
• A rule can also apply to multiple element types by using a
selector string consisting of the comma-separated names of
the element types.
• For example, the rule
h1,h2,h3,h4,h5,h6 { background-color:purple }
• Each of the selectors (comma-separated components of the
selector string) was simply the name of an element type.
This form of selector is called a type selector.

Universal Selector - *
• The universal selector represents every possible
element type.
• The universal selector is used as a wildcard
character.
• It selects all the elements on the pages.
* { font-weight : bold }

• The rule specifies a value of bold for the font-

weight property of every element in the
document.

6
 ID Selector - #
• Every element in an XHTML document has an
associated id attribute, and that if a value is assigned
to the id attribute for an element then no other
element’s id can be assigned the same value
• The id selector selects the id attribute of an HTML
element to select a specific element.
• An id is always unique within the page so it is chosen
to select a single, unique element.
• It is written with the hash character (#), followed by
the id of the element.
• id values are case-sensitive
<p id="p3">
... #p1, #p3 { background-color:aqua }
</p>

Class Selector - .
• The class selector selects HTML elements with a
specific class attribute.
• It is used with a period character . (full stop
symbol) followed by the class name.
#p4, .takeNote { font-style:italic }
• Then any element that specifies takeNote
(without the leading period) as the value of its
class attribute will be given the properties
specified in the declaration block of the
corresponding style rule.

Class Selector - .
• An element can be assigned to multiple style
classes by using a space-separated list of class
names as the value of the class attribute.
• Note that, like id values, class values are case
sensitive and cannot begin with a decimal digit.
However, unlike id, multiple elements can have the
same value for their class attributes.
• ID and class selectors can also be prefixed by an
element type name, which restricts the selector to
elements of the specified type.
span.special { font-size:x-large }

7
 Descendant selector
• A selector may be specialized so that it holds only
within the content of certain element types.
• For example, the rule
ul span { font-variant:small-caps }
• says that the text within a span element that is in
turn part of the content of an unordered, or
bulleted, list (ul element) should be displayed using
a small-cap font form.
• Such a selector is known as a descendant selector.

Descendant selector
• Class selectors can also be included in the ancestor list;
for example, the selector
.special span
• would apply to any span element within the content of
any element belonging to the class special.
• A white-space-separated list of element and/or class
names may be used as a selector, representing a chain of
elements each of which must be a descendant of the
element to its left in order for the selector to apply. For
example, the rule
ul ol li { letter-spacing:1em }
• applies only to an li element within an ol element that
is within a ul element.

Group Selector
• The grouping selector is used to select all the
elements with the same style definitions.
• Grouping selector is used to minimize the
code.
• Commas are used to separate each selector in
grouping.

8
 Group Selector

h1 {
text-align: center;
color: blue;
}
h1,h2,p
h2 { {
text-align: center; text-
color: blue;
}
align: center;
p{ color: blue;
text-align: center; }
color: blue;
}

Pseudo-class Selector
• A pseudo-class is used to define a special state
of an element.
• For example, it can be used to:
– Style an element when a user mouse over it
– Style visited and unvisited links differently
– Style an element when it gets focus

selector:pseudo-class {
property: value;
}

Anchor Pseudo-classes
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */

a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

9
Selector strings
• Type selector :
h1,h2,h3,h4,h5,h6 { background-color : purple }
• Universal selector :
* { font-weight : bold }
• ID selector :
#p1, #p3 { background-color : aqua }
• Class selector :
#p4, .takeNote { font-style : italic }
span.special { font-size : x-large }
• Descendant selector :
ul span { font-variant : small-caps }
ul ol li { letter-spacing : lem }
• Pseudo-class Selector
• a:link { color : black }
a:visited { color : yellow }
a:hover { color : green }
a:active { color : red }

Types of CSS
There are three ways of inserting a style
sheet:
• Inline CSS
• Internal CSS
• External CSS

Inline CSS
• An inline style may be used to apply a
unique style for a single element.
• To use inline styles, add the style attribute
to the relevant element.
• The style attribute can contain any CSS
property.
• Inline styles are defined within the "style"
attribute of the relevant element.

10
 Inline CSS
<html>
<body>
<h1 style="color:blue; text-align:center;">
Inline Stylesheet Demo
</h1>
<p style="color:red;">
This is an Inline stylesheet
</p>
</body>
</html>

Internal CSS
• An internal style sheet may be used if one
single HTML page has a unique style.
• The internal style is defined inside the <style>
element, inside the head section.

Internal CSS
<html> <body>
<head> <h1>Internal Stylesheet Demo</h1>
<style> <p>This is an Internal stylesheet</p>
body </body>
{ </html>
background-color: linen;
}

h1
{
color: maroon;
margin-left: 40px;
}
</style>
</head>

11
 External CSS
• With an external style sheet, you can change the look
of an entire website by changing just one file!
• Each HTML page must include a reference to the
external style sheet file inside the <link> element,
inside the head section.
• An external style sheet can be written in any text
editor, and must be saved with a .css extension.
• The external .css file should not contain any HTML
tags.
• The style sheets we have used have been stored in files
and included in an HTML document through the use of
a link element.
• Such style sheets are known as external style sheets.

External CSS
<html>
body { <head>
background-color:lime; <link rel="stylesheet" href="style1.css">
} </head>
p{
font-size:x-large; <body>
background-color:yellow; <h1>External Stylesheet Demo</h1>
} <p>This external stylesheet refers
another file named style1.css</p>
</body>
</html>

Three CSS Definition Locations

• Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>
Note, the selector for inline CSS is the tag which contains the style attribute.

• Internal: the <style> markup tag

<html><head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>

• External: the .css stylesheet file

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />

12
 Rule Cascading
• The style sheet of the rule
* { font-weight:bold }
• which applies to every element of the HTML document.
• It also contains the rule
#p1, #p3 { background-color:aqua }
• both of these rules applied to an element with id attribute value p3.
• That is, if multiple rules apply to an element, and those rules provide
declarations for different properties, then all of the declarations are
applied to the element.
• But what would happen
• if the rule
#p3 { font-weight:normal }
• also appeared in a style sheet for the document?
• Which rule would apply to the font-weight property of the p3 element?

Rule Cascading
• For every property of every element on a page,
the browser must decide on a value to use for that
property.
• How does it determine this value if multiple style
declarations apply to that property of that
element?
• Furthermore,
• what should the browser do if no declaration at
all directly applies to that element property?

Rule Cascading
• In order to choose between multiple
declarations that all apply to a single property
of a single element, the browser (or other user
agent) applies rule cascading, a multistage
sorting process that selects a single declaration
that will supply the property value.
• Style rule cascading can be defined as the
process which is used to resolve the conflicts
in the style specification.

13
 Step 1 - Select style sheets and insert rules for HTML
attributes

• 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.

Step 2 - Prioritize declarations by origin and

weight
• 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.

Origin
• The origin of a style sheet declaration has to
do with who wrote the declaration:
• the person who wrote the HTML document,
• the person who is viewing the document,
• or the person who wrote the browser
software that is displaying the document.

14
 Origin
• Author: If the declaration is part of an external or
embedded style sheet or is part of the value specified
for the style attribute of the given element, then it
originated with the author of the document that is being
styled.
• User agent: A browser or other user agent may define
default style property values for HTML elements. In the
Mozilla 1.4 View|Use Style menu, this is the style sheet
represented by the “Basic Page Style” option.
• User: Most modern browsers allow users to provide a
style sheet or to otherwise indicate style preferences
that are treated as style rules.

Origin
• Styles may be defined by a user, an author or a
user agent (e.g., a web browser).
• A user is a person viewing your web page,
• you are the author—the person who writes the
document—and
• the user agent is the program used to render and
display the document.
• Styles defined by the user take precedence over
styles defined by the user agent, and styles
defined by authors take precedence over styles
defined by the user.

Weight
• 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 string important
p { text-indent:3em; font-size:larger !important }
• important weight to the declaration of the font-size property.
• A declaration without the !important string—such as the
declaration of the text-indent property in that example—would
have normal weight.
• All user-agent declarations can also be considered to have normal
weight.

15
 Origin and Weight
• Once the origin and weight of all declarations
applying 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

Origin and Weight

• That is, we can think of each declaration as falling into
one of five priority bins.
• We then look through the bins, starting with the first,
until we find a nonempty bin.
• If that bin has a single declaration, the declaration is
applied to the element property and we are done.
• Otherwise, there are multiple declarations in the first
nonempty bin, and we continue to the next sorting
stage in order to select a single declaration from
among the candidates within this bin.

Origin and Weight

• Before getting to this next stage, you may be
wondering why important user declarations
have higher priority than author declarations
while normal-weight user declarations have
lower priority.
• The reason is accessibility.

16
 Step 3 -Break ties based on specificity
(style attribute or most specific selector)
• There are multiple declarations in the first
nonempty bin, and we continue to the next
sorting stage in order to select a single
declaration from among the candidates within
this bin.

Specificity
• The case in which the top nonempty bin of the
weight-origin sort contains multiple style
declarations for a single element property.
• The next step is to sort these declarations
according to their specificity.

Specificity
• First, if a declaration is part of the value of a
style attribute of the element, then it is given
the highest possible specificity value.
• If a declaration is part of a ruleset, then its
specificity is determined by the selector(s) for
the ruleset.

17
 Calculation of Specificity
• The specificity of a selector can easily be calculated
• If two or more declarations conflict for a given element, and all
the declarations have the same importance, then the one in the
rule with the most specific selector will “win”.
• Specificity has four components; let’s call them a, b, c and d.
Component “a” is the most distinguishing, “d” the least.
• Component “a” is quite simple: it’s 1 for a declaration in
a style attribute (also known as inline styling), otherwise it’s 0.
• Component “b” is the number of id selectors in the selector
(those that begin with a #).
• Component “c” is the number of attribute selectors—including
class selectors — and pseudo-classes.
• Component “d” is the number of element types and pseudo-
elements in the selector.

Calculation of Specificity

Specificity Hierarchy
• Every CSS selector has its place in the specificity
hierarchy.
• There are four categories which define the
specificity level of a selector:
– Inline styles - Example: <h1 style="color: pink;">
– IDs - Example: #navbar
– Classes, pseudo-classes, attribute selectors - Example:
.test, :hover, [href]
– Elements and pseudo-elements - Example: h1, :before
• The universal selector (*) and inherited values
have a specificity of 0 - The universal selector (*)
and inherited values are ignored!

18
 Calculation of Specificity

A: h1
B: h1#content Calculation of
C: <h1 id="content" style="color:
pink;">Heading</h1> Specificity

Calculation of Specificity

19
 Step 4
• Break ties based on position within style
sheet (last occuring wins)
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>

<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p class="test">Hello
World!</p>

</body>
</html>

20
 <html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello

World!</p>

</body>
</html>

Steps in the CSS Cascade

21
 Style Inheritance
• While cascading is based on the structure of
style sheets, inheritance is based on the tree
structure of the document itself.
• That is, conceptually an element inherits a value
for one of its properties by checking to see if its
parent element in the document has a value for
that property, and if so, inheriting the parent’s
value.
• The parent may in turn inherit its property value
from its parent, and so on.

Style Inheritance
• when attempting to inherit a property value, an
element will search upward through its tree of
ancestor elements, beginning with its parent and
ending either at the root html element or at the first
element that has a value for the property.
• If the search ends at an element with a value for the
property, that value will be used by needValue as its
property value.
• If no ancestor element has a value for the property,
then as a last resort the property will be given a value
specified for each property by the CSS specification
and known as the property’s initial value.

Style Inheritance
• In CSS, inheritance controls what happens
when no value is specified for a property on an
element.
• Inheritance is a process of receiving values of
properties by a child element from its parent
element.
• CSS properties can be categorized in two types:
– inherited properties, which by default are set to
the computed value of the parent element
– non-inherited properties, which by default are set
to initial value of the property

22
 Style Inheritance
• p { color: green; }

• <p>This paragraph has <em>emphasized

text</em> in it.</p>

Style
Inheritance

<html>
<head>
<title>This is to understand CSS Inheritance - Example 1</title>
<style>
h1 {
color: maroon;
}
</style>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
</body>
</html>

Style
Inheritance
<html>
<head>
<title>This is to understand CSS Inheritance – Example2</title>
<style>
body {
color: maroon;
}
</style>
</head>
<body>
<h1>This is to test <i>inheritance</i> in CSS</h1>
<p>This paragraph inherits the value form body element</p>
</body>
</html>

23
 Style
Inheritance
<html>
<head>
<title>This is to understand CSS Inheritance - Example 3</title>
<style>
.up {
background-color: lightyellow;
color: maroon;
font-weight: bold;
}
.down {
background-color: inherit;
color: inherit;
font-weight: normal;
}
</style>
</head>
<body>
<div class="up">welcome
<p class="down">This paragraph inherits the value form its parent element</p>
</div>
</body>
</html>

<html >
<head>
<title>Inherit.html</title>
<style type="text/css">
body { font-weight:bold }
li { font-style:italic }
p { font-size:larger }
span { font-weight:normal }
</style>
Style
</head> Inheritance
<body>
<ul>
<li>
List item outside and <span>inside</span> a span.
<p>
Embedded paragraph outside and <span>inside</span> a
span.
</p>
</li>
</ul>
</body>
</html>

CSS Comments
• Comments are used to explain the code, and
may help when you edit the source code at a
later date.
• Comments are ignored by browsers.
• A CSS comment is placed
– inside the <style> element, and starts with /* and
ends with */:

24
 CSS Comments
Single line Multi-line
comment comment
<style> <style>
/* This is
/* This is a single-line a multi-line
comment */ comment */
p{
color: red; p{
} color: red;
}
</style>
</style>

HTML and CSS Comments

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

CSS Color Names

In CSS, a color can be specified by
using a predefined color name or RGB,
HEX, HSL, RGBA, HSLA values.

25
 CSS Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS Border Color

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Background Color

CSS Text Color

CSS Border Color

CSS RGB Colors

• An RGB color value represents RED, GREEN, and BLUE light
sources.
• In CSS, a color can be specified as an RGB value, using this
formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the
intensity of the color between 0 and 255.
• For example, rgb(255, 0, 0) is displayed as red, because
red is set to its highest value (255) and the others are set
to 0.
• To display black, set all color parameters to 0, like this:
rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this:
rgb(255, 255, 255).

26
 RGB Colors

RGBA Value
• RGBA color values are an extension of RGB color
values with an alpha channel - which specifies
the opacity for a color.
• An RGBA color value is specified with :
– rgba(red, green, blue, alpha).
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at
all).

RGBA Value

27
 CSS HEX Colors
• A hexadecimal color is specified with: #RRGGBB,
– Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same as
decimal 0-255).
• For example, #ff0000 is displayed as red, because
red is set to its highest value (ff) and the others
are set to the lowest value (00).
• To display black, set all values to 00, like this:
#000000.
• To display white, set all values to ff, like this:
#ffffff.

CSS HEX Colors

3 Digit HEX Value

body {
• Sometimes you will see a 3-digit hex
background-color: #fc9;
code in the CSS source. /* same as #ffcc99 */
• The 3-digit hex code is a shorthand for }
some 6-digit hex codes.
• The 3-digit hex code has the following h1 {
color: #f0f;
form:
/* same as #ff00ff */
– #rgb }

• The 3-digit hex code can only be used p {

when both the values (RR, GG, and BB) color: #b58;
are the same for each components. /* same as #bb5588 */
}
• So, if we have #ff00cc, it can be written
like this: #f0c.

28
 CSS HSL Colors
• In CSS, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to
360. 0 is red, 120 is green, and 240 is blue
• Saturation is a percentage value, 0% means a
shade of gray, and 100% is the full color.
• Lightness is also a percentage, 0% is black, 50%
is neither light or dark, 100% is white

HSL Colors

HSLA Value
• HSLA color values are an extension of HSL color
values with an alpha channel - which specifies
the opacity for a color.
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at
all)

29
 HSLA Value

CSS Backgrounds
• The CSS background properties are used to
add background effects for elements.
CSS background properties:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
•background (shorthand property)

background-color

30
 background-image

background-repeat
background-position

background-repeat:repeat-x;

background-repeat:repeat-y;

background-attachment
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

31
 CSS background - Shorthand property
When using the shorthand property the order of the property
values is:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
It does not matter if one of the property values is missing, as long
as the other ones are in this order.
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Borders
• The CSS border properties allow you to specify
the style, width, and color of an element's
border.
• The border-style property specifies what kind
of border to display.
• The border-width property specifies the width
of the four borders.
• The width can be set as a specific size (in px, pt,
cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:

<style>
border-style property
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>

32
If the border-style property has four
values:
border-style property
•border-style: dotted solid double
dashed;
•top border is dotted
•right border is solid
•bottom border is double p {
•left border is dashed border-top-style: dotted;
If the border-style property has three border-right-style: solid;
values: border-bottom-style: dotted;
•border-style: dotted solid double; border-left-style: solid;
•top border is dotted }
•right and left borders are solid
•bottom border is double
If the border-style property has two p {
values: border-style: dotted solid;
•border-style: dotted solid; }
•top and bottom borders are dotted
•right and left borders are solid
If the border-style property has one
value:
•border-style: dotted;
•all four borders are dotted

p.one {
border-style: solid;
border-width: 5px; border-width property
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

CSS Border - Shorthand Property

he border property is a shorthand property for the following
individual border properties:
•border-width
•border-style (required)
•border-color
p {
border: 5px solid red;
}

p {
border-left: 6px solid red;
}
p {
border: 2px solid red;
border-radius: 10px;
}

33
 CSS Margins
• Margins are used to create space around elements, outside of any
defined borders.
• With CSS, you have full control over the margins.
• There are properties for setting the margin for each side of an element
(top, right, bottom, and left).
• CSS has properties for specifying the margin for each side of an element:
– margin-top
– margin-right
– margin-bottom
– margin-left
• All the margin properties can have the following values:
– auto - the browser calculates the margin
– length - specifies a margin in px, pt, cm, etc.
– % - specifies a margin in % of the width of the containing element
– inherit - specifies that the margin should be inherited from the parent
element
• Negative values are allowed.

CSS Margins
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

p {
margin: 25px 50px 75px 100px;
}

CSS Margins

34
 CSS Padding
• The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
• With CSS, you have full control over the padding.
• There are properties for setting the padding for each side of an
element (top, right, bottom, and left).
• CSS has properties for specifying the padding for each side of an
element:
– padding-top
– padding-right
– padding-bottom
– padding-left
• All the padding properties can have the following values:
– length - specifies a padding in px, pt, cm, etc.
– % - specifies a padding in % of the width of the containing element
– inherit - specifies that the padding should be inherited from the parent
element
• Negative values are not allowed.

CSS Padding
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

div {
padding: 25px 50px 75px 100px;
}

CSS Padding

35
 CSS Height, Width
• The CSS height and width properties are used to set the height
and width of an element.
• The CSS max-width property is used to set the maximum width
of an element.
• The height and width properties may have the following values:
– auto - This is default. The browser calculates the height and
width
– length - Defines the height/width in px, cm etc.
– % - Defines the height/width in percent of the containing
block
– initial - Sets the height/width to its default value
– inherit - The height/width will be inherited from its parent
value

CSS Height, Width

CSS Box Model

• All HTML elements can be considered as boxes.
• In CSS, the term "box model" is used when talking
about design and layout.
• The CSS box model is essentially a box that wraps
around every HTML element.
• It consists of:
– margins, borders, padding, and the actual content.

36
 CSS Box Model

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

CSS Box Model

CSS Box Model

37
 CSS Box Model

Text Color
Text Alignment

CSS Text Text Decoration

Text Transformation
Text Spacing
Text Shadow
• The color property is used to set the color of the text.
• The color is specified by:
– a color name - like "red"
– a HEX value - like "#ff0000"
– an RGB value - like "rgb(255,0,0)“
• The text-align property is used to set the horizontal alignment
of a text.
– A text can be left or right aligned, centered, or justified.
• The text-decoration property is used to add a decoration to
text.
• The text-transform property is used to specify uppercase and
lowercase letters in a text.
• The text-shadow property adds shadow to text.

CSS Text Alignment

• text-align
•text-align-last
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
div {
text-align: justify;
}
p.a {
text-align-last: right;
}

38
 CSS Text Decoration
• text-decoration-line
•text-decoration-color
•text-decoration-style
•text-decoration-thickness

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}

p {
text-decoration: underline red double 5px;
}

CSS Text Decoration

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline
underline;
}

CSS Text Transformation

• The text-transform property is used to specify uppercase
and lowercase letters in a text.
• It can be used to turn everything into uppercase or
lowercase letters, or capitalize the first letter of each word:

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

39
 CSS Text Spacing
• text-indent
•letter-spacing
•line-height
•word-spacing

h1 {
text-indent: 50px;
letter-spacing: 5px;
line-height: 5.8;
word-spacing: 20px;
}

Text Shadow
In its simplest use, you only specify the
horizontal shadow (2px) and the vertical shadow (2px):
h1 {
text-shadow: 2px 2px;
}
add a color (red) to the shadow:
h1 {
text-shadow: 2px 2px red;
}

add a blur effect (5px) to the shadow:

h1 {
text-shadow: 2px 2px 5px red;
}
Multiple shadows:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
}

Text properties

40
 CSS Fonts
• Generic Font Families
• In CSS there are five generic font families:
– Serif fonts have a small stroke at the edges of each letter. They
create a sense of formality and elegance.
– Sans-serif fonts have clean lines (no small strokes attached). They
create a modern and minimalistic look.
– Monospace fonts - here all the letters have the same fixed width.
They create a mechanical look.
– Cursive fonts imitate human handwriting.
– Fantasy fonts are decorative/playful fonts.
• All the different font names belong to one of the generic font
families.

Generic Font Families

Generic Font Family Examples of Font Names

Serif Times New Roman

Georgia
Garamond

Sans-serif Arial
Verdana
Helvetica

Monospace Courier New

Lucida Console
Monaco

Cursive Brush Script MT

Lucida Handwriting

Fantasy Copperplate
Papyrus

CSS font-family Property

font-family property to specify the font of a text.
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}

41
 CSS Font Style
• The font-style property is mostly used to specify italic text.
• This property has three values:
– normal - The text is shown normally
– italic - The text is shown in italics
– oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Font Weight
• The font-weight property specifies the weight of
a font:

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

p.light {
font-weight: lighter;
}
p.thicker {
font-weight: 900;
}

Font Variant
• The font-variant property specifies whether or
not a text should be displayed in a small-caps
font.

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

42
 Font Size
• The font-size property sets the size of the text.
• Being able to manage the text size is important in web design.
• However, you should not use font size adjustments to make paragraphs look
like headings, or headings look like paragraphs.
• Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
• The font-size value can be an absolute, or relative size.

h1 {
font-size: 100%;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 14px;
}

CSS Font Shorthand Property

• The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
• Note: The font-size and font-family values are required. If one of
the other values is missing, their default value are used.
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}

CSS Shadow Effects

• With CSS you can add shadow to text and to
elements.
– text-shadow
– box-shadow

43
 CSS Shadow Effects -box-shadow
div {
box-shadow: 10px 10px;
}

The color parameter defines the color of the shadow.

div {
box-shadow: 10px 10px lightblue;
}
The blur parameter defines the blur radius.

div {
box-shadow: 10px 10px 5px lightblue;
}

The spread parameter defines the spread radius.

div {
box-shadow: 10px 10px 5px 12px lightblue;
}

CSS Shadow Effects -box-shadow

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.
div {
box-shadow: 10px 10px 5px lightblue inset;
}
An element can also have multiple shadows:
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

CSS Transformations
• The transform CSS property lets you rotate,
scale, skew, or translate an element.
• It modifies the coordinate space of the CSS
visual formatting model.
– 2D transform methods
– 3D transform methods.

44
 CSS 2D Transforms
• CSS transforms allow you to move, rotate, scale,
and skew elements.
• Mouse over the element below to see a 2D
transformation:
• 2D rotate

• CSS property:
– transform

CSS 2D Transforms Methods

With the CSS transform property you can use
the following 2D transformation methods:
•translate()
•rotate()
•scaleX()
•scaleY()
•scale()
•skewX()
•skewY()
•skew()
•matrix()

The translate() Method

The translate() method moves an
element from its current position
(according to the parameters given for
the X-axis and the Y-axis).

div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px);
}

45
 The rotate() Method

• The rotate() method rotates an element

clockwise or counter-clockwise according
to a given degree.
• Using negative values will rotate the
element counter-clockwise.

The scale() Method

• The scale() method increases or decreases the
size of an element (according to the
parameters given for the width and height).

46
 The skew() Method
• The skew() method skews an element along
the X and Y-axis by the given angles.

47
 The matrix() Method

• The matrix() method combines all the 2D transform methods

into one.
• The matrix() method take six parameters, containing
mathematic functions, which allows you to rotate, scale, move
(translate), and skew elements.
• The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

CSS 3D Transforms Methods

With the CSS transform property you can use the following 3D transformation
methods:
•rotateX()
•rotateY()
•rotateZ()

#myDiv {
transform: rotateX(150deg);
}

#myDiv {
transform: rotateY(150deg);
}

#myDiv {
transform: rotateZ(90deg);
}

48
 CSS Transitions
• CSS transitions allows you to change property
values smoothly, over a given duration.

• transition
•transition-delay
•transition-duration
•transition-property
•transition-timing-function

How to Use CSS Transitions?

• To create a transition effect, you must specify
two things:
– the CSS property you want to add an effect to
– the duration of the effect
• Note: If the duration part is not specified, the
transition will have no effect, because the
default value is 0.

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}

div:hover {
height: 300px;
width: 300px;
}

49
 transition-timing-function
The transition-timing-function property can have the following values:
•ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)
•linear - specifies a transition effect with the same speed from start to
end
•ease-in - specifies a transition effect with a slow start
•ease-out - specifies a transition effect with a slow end
•ease-in-out - specifies a transition effect with a slow start and end

transition-timing-function
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

Delay the Transition Effect

• The transition-delay property specifies a delay
(in seconds) for the transition effect.

div {
transition-delay: 1s;
}

50
 Transition + Transformation

CSS Animations
• An animation lets an element
gradually change from one
style to another. •@keyframes
•animation-name
• You can change as many CSS •animation-duration
properties you want, as many •animation-delay
•animation-iteration-count
times as you want. •animation-direction
• To use CSS animation, •animation-timing-function
•animation-fill-mode
– you must first specify some •animation
keyframes for the animation.
• Keyframes hold what styles
the element will have at
certain times.

51
 The @keyframes Rule
• When you specify CSS styles inside
the @keyframes rule, the animation will gradually
change from the current style to the new style at
certain times.
• To get an animation to work, you must bind the
animation to an element.
• The following example binds the "example" animation
to the <div> element.
• The animation will last for 4 seconds, and it will
gradually change the background-color of the <div>
element from "red" to "yellow":

CSS Animations
/* The animation code */
@keyframes example { /* The animation code */
@keyframes example {
from {background-color: red;}
0% {background-color: red;}
to {background- 25% {background-color: yellow;}
color: yellow;} 50% {background-color: blue;}
} 100% {background-color: green;}
}
/* The element to apply the
animation to */ /* The element to apply the
div { animation to */
width: 100px; div {
width: 100px;
height: 100px;
height: 100px;
background-color: red; background-color: red;
animation-name: example; animation-name: example;
animation-duration: 4s; animation-duration: 4s;
} }

Animation Shorthand Property

div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

div {
animation: example 5s linear 2s infinite alternate;
}

52
53