UNIT I WEBSITE BASICS, HTML 5, CSS 3, WEB 2.

0 7
Web Essentials: Clients, Servers and Communication – The Internet – World wide web –
HTTP Request Message – HTTP Response Message – Web Clients – Web Servers –
HTML5 – Tables – Lists – Image – HTML5 control 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. Bootstrap Framework

1.1: Web Essentials

Server:
The software that distributes the information and the machine where the
information and software reside is called the server.
 provides requested service to client
 e.g., Web server sends requested Web page

Client:
The software that resides on the remote machine, communicates with
the server, fetches the information, processes it, and then displays it on
the remote machine is called the client.
 initiates contact with server (speaks first)
 typically requests service from server
 Web client is implemented in browser

Web server: Software that delivers Web pages and other documents to
browsers using the HTTP protocol.

Web Page: A web page is a document or resource of information that is

suitable for the World Wide Web and can be accessed through a web
browser.

Website: A collection of pages on the World Wide Web those are accessible
from the same URL and typically residing on the same server.

1
 URL: Uniform Resource Locator, the unique address which identifies
aresource on the Internet for routing purposes.

Below is additional information about each of the sections of the

httpURL for this page.

CLIENT-SERVER PARADIGM
 The Client-Server paradigm is the most prevalent model for distributed
computing protocols. It is the basis of all distributed computing paradigms at a
higher level of abstraction.
 It is service-oriented, and employs a request-response protocol.

 A server process, running on a server host, provides access

to a service. A client process, running on a client host,
accesses the service via the server process.
 The interaction of the process proceeds according to a protocol.
 The primary idea of a client/server system is that you have a
central repository of information—some kind of data, often in
a database—that you want to distribute on demand to some set
of people or machines.

2
3
 TYPES OF CLIENT-SERVER ARCHITECTURE

 Depending upon the number of layers or tiers used in the client-

server model, it can be categorized into 3 types:
 2 Tier Architecture
 3Tier Architecture
 N Tier Architecture

1) Two Tiers Architecture

 In this type of architecture,

the workload is divided
between the server (host of
the system) and the
client(which hosts the user
interface).
 In reality these are located on
separate computers but there
is no absolute requirement of

4
 this, providing that the tiers are logically separated can be hosted
(e.g. development and testing) on the same computer.
Advantages:
 Ease in Developing Applications:
 User Satisfaction:
 Applicable for Homogeneous Environment:
 High Performance:
Limitations:
The two tier architecture proved to be a good solution when user population
work is usually small (up to about 100 concurrent users) but it rapidly proved to
have a number of limitations:
 Performance: Performance begins to deteriorate as the population
grows.
 Security: Each user must have their own individual access to the
database, and be granted whatever rights may be required in order to
run the application.
 Capability: Independent of the type of client, much of the data
processing has to be located in database making it totally dependent
upon the capabilities and implementation provided by the database
manufacturer.
 Portability: As the two-tier architecture is dependent upon the specific
database implementation, porting an existing application to a different
DBMS becomes a major issue.

1) Three-Tier Architecture
In the three-tier architecture the functional process logic, data access,
computer data storage and user interface are developed and maintained
as independent modules on separate platform.

The three-tiers in a three-tier architecture are:

(i) Presentation Tier: Occupies the top level and displays information related
to service available on a website. This tier communicates with other tiers by
sending results to the browser and other tiers in the network.

5
(ii) Application Tier: Also called the middle tier, logic tier or business logic,
this tier is pulled from the presentation tier. It controls application functionality
by performing detailed processing.
(iii) Data Tier: Houses database server where information is stored and
retrieved. Data in this tier is kept independent of application servers or business
logic.

Advantages:
 Improved Data Integrity
 Enhanced Security
 Hidden Database Structure

Limitations:
 Complexity of Communication: Usually more efforts should be ensured
when creating 3-tier applications as the communication points are
increased (client to middle tier to server) and the performance increased
by tools like Visual Basics, Power Builder etc.

2) N-Tier Architecture
N Tier Architecture often referred as Multitier Architecture. It is
client-server architecture in which presentation, application
processing, and data management functions are physically separated.
it is an expanded form of three-tierarchitecture.

6
 Advantages:
 It provides a model by which developers can create flexible and reusable
applications. By segregating an application into tiers, developer acquires
the option of modifying or adding a specific layer, instead of reworking
the application.
Limitations:
 Difficult to Implement: Due to componentization of tiers, the
complex structure is difficult to implement or maintain.

1.2: The Internet

 INTERNET:
The Internet is a massive network of networks that connects
millions of computers together globally. It forms a network in which any
computer can communicate with any other computer with the help of
TCP/IP protocol as long as they are both connected to the Internet.

 IP ADDRESSING:
Each host on a TCP/IP network is assigned a unique 32 bit logical
address and it is called as Internet Protocol Address (IP Address). IP
address is used to identify a particular host on the internet.

 Each IP address Consists of 4 bytes or 32 bits. This is represented in

quad notation (or dot notation) as 4 x 8 bit numbers, each in the range 0 to
255, e.g. 131.123.2.220.
 IP address is divided into two main parts: 1. Network Number
2. Host Number
7
  5 classes of IP address:

IP address Format Range Purpose

class
Class A N.H.H.H 1 to 126 Large organization
Class B N.N.H.H 127 to 191 Medium organization
Class C N.N.N.H 192 to 223 Small organization
Class D - 224 to 239 Multicast group
Class E - 240 to 254 Experimental purpose

Loopback Address: (127.0.0.0 to 127.255.255.255)

Addresses within this range (127.0.0.0 to 127.255.255.255) are called
loopback addresses used for loop back functionality. IP datagrams sent by a
host to a 127.X.X.X loopback address are not passed down to the data link
layer for transmission.

 INTERNET SERVICE PROVIDER(ISP):

An Internet Service Provider (ISP) is an organization that provides its
customers the services for accessing, using, or participatingin the Internet.
Examples: BSNL, AirTel, Aircel etc.,

 FIREWALLS:
The hardware and software that sits between the internet and the local
network, checking all the data that comes in and out to make sure that it is
legitimate is called a Firewall.
The most basic firewall is a packet filter that inspects each packet coming in
or out of a network and uses a set of rules to determine whether that traffic is
allowed.
 PROXY SERVERS:
A proxy server is computer that functions as an intermediary between a web
browser (such as Internet Explorer) and the Internet. Proxy servers help improve web
performance by storing a copy of frequently used webpages. When a browser requests
a webpage stored in the proxy server's collection (its cache), it is provided by the
proxy server, which is faster than going to the web. Proxy servers also help improve
security by filtering out some web content and malicious software.

8
 GATEWAYS:
Gateway is a machine used to route packets form one network to
another network. In internet gateways provide all interconnections
between physical networks.
Gateways have two responsibilities:
1. Route packets based on network id to a gateway connected to that
network.
2. If they are connected to destination network, make sure that the packet
gets delivered to correct machine on that network.

 DNS (DOMAIN NAME SERVICE):

DNS is application software that provides a mechanism for mapping
back and forth between IP addresses and host names. DNS (Domain Name
System) contains a large database of domain names and their
correspondent Internet (IP Addresses) for example: www.widget.com
corresponds to its unique number 207.168.6.12
 Domain Names: The domain name is the user-friendly equivalentof an
IP address. Used because the numbers in an IP address are hard to
remember and use. Also known as a host name. Example:shu.ac.uk
 Internet host names consists f a sequence of labels separated by
dots. The final label in a host name is a top-level domain name.
 Two standard top-level domains are:
1. Generic (.com, .edu, .org, .biz, .net, .mil)
2. Country Code (.de, .il,. .uk, .in, .jp)
 Top-level domain names are assigned by the Internet Corporation
for Assigned Names & Numbers (ICANN).
 Each top-level domain is divided into sub-domain (second level
domains) assigned by registry authority of ICANN.
Domain Names
com gov org edu uk in jp

rediff yahoo gmail annauniv ac

u1 u2 u3 tec

cse ece it
Uniquely traced with the help of domain name space (http://www.cse.tec.ac.in)

9
 HOW INTERNET WORKS?
 The internet is a world-wide network of computers linked together by
telephone wires, satellite links and other means.
 All computers on the internet can be divided into two categories: servers
and browsers.
 Servers are where most of the information on the internet "lives". These are
specialized computers which store information, share information with other
servers, and make this information availableto the general public.
 Browsers are what people use to access the World Wide Web from any
standard computer. Chances are, the browser you’re using to view this page is
either Netscape Navigator/Communicator or Microsoft Internet Explorer.
These are by far the most popular browsers, but there are also a number of
others in common use.
 When you connect your computer to the internet, you are connecting to a
special type of server which is provided and operated by your Internet
Service Provider (ISP). The job of this "ISP Server" is to provide the link
between your browser and the rest of the internet. A single ISP server
handles the internet connections ofmany individual browsers - there may
be thousands of other people connected to the same server that you are
connected to right now.
 The following picture shows a small "slice" of the internet with several home
computers connected to a server:

10
 To view a web page from your browser, the following sequence happens:
1. You either type an address (URL) into your "Address Bar" or click on a
hyperlink.
2. Your browser sends a request to your ISP server asking for the page.
3. Your ISP server looks in a huge database of internet addresses and finds the
exact host server which houses the website in question, then sends that
host server a request for the page.
4. The host server sends the requested page to your ISP server.
5. Your ISP sends the page to your browser and you see it displayed on your
screen.

11
 BASIC INTERNET PROTOCOLS
Definition: Protocol
A protocol can be defined as the set of rules
governing the syntax, semantics and
synchronization of communication between
two end points.
Some common protocols used in Internet
Communications:

1. TCP (Transmission Control Protocol)

2. UDP (User Datagram Protocol)
3. IP (Internet Protocol)
4. HTTP (Hyper Text Transfer Protocol)
5. FTP (File Transfer Protocol)
6. Email Protocols:
 SMPT (Simple Mail Transfer Protocol)
 POP3 (Post Office Protocol 3)
 IMAP (Internet Message Access Protocol)
7. DHCP (Dynamic Host Configuration Protocol)

1. Transmission Control Protocol (TCP):

TCP is connection-oriented protocol that offers end-to-end packetdeliver. It
is a reliable, transport layer protocol.
TCP Services:
 Stream delivery service – TCP is stream oriented because it allows the
sending process to sen data as stream of bytes and the receiving process to
receive data as stream of bytes.
 Sending and receiving buffers – It may not be possible for sender and the
receiver process to produce and consume data at same speed. Therefore TCP
requires buffer for storage at both the ends.
 Bytes and segments – TCP groups a number of bytes into apacket called
segments.
 Full duplex service – Allows flow of data in both the directions.
 Efficient Flow Control
 Connection Oriented Service – Since it is connection-oriented protocol, before
data transmission takes place both the sending and receiving

12
 ends must establish a connection between each other.
 Reliable Service – It uses the acknowledgement mechanism to ensure the safe
and sound arrival of data.
TCP Segment Format:

Header Data

The unit of data transfer between two devices using TCP is called as
Segment. The segment consists of 20 to 60 byte header followed by data from
the application program.
2. User Datagram Protocol (UDP):

 UDP is connectionless, unreliable transport layer protocol. It

provides process-to-process communication instead of host-to- host
communication.
 It performs very limited error checking.
 UDP is a very simple protocol with a minimum overhead. If a process
wants to send a small message and does not care about reliability, it can
use UDP.
 Sending a small message using UDP takes much less interaction between
the sender and receiver than TCP.
 UCP is convenient protocol for multimedia and multicasting applications.
UDP Header Format:
UDP packets, called user datagram, have a fixed size headerof 8 bytes.
Source Port Number: 16 bit port number used by the running process on the
source host.

Destination Port Number: 16 bit port number used by the process running
on the destination host.

Length: 16 bit field that defines the total length of the user datagram [header
+ data].

Checksum: This field is used to detect errors over the entire user datagram
[header+data]. This ensures that the fields have not changed from the source to
destination.

 Applications:

 UCP is suitable for process that requires simple request- response

communication with little concern for flow controland error control.
 UDP is suitable for a process with internal flow and errorcontrol mechanism.
 UDP is suitable for multicasting.
 UDP is suitable for sending multimedia messages.
3. Internet Protocol(IP):
 The Internet Protocol (IP) is the principal communications protocol in the
Internet protocol suite for relaying datagrams across network boundaries.
Its routing function enables internetworking, and essentially establishes
the Internet.
 IP is the host-to-host network layer protocol for the internet.
 IP is connection less and unreliable protocol. It is connection less in the
sense that no state related to IP datagrams is maintained either on
source or destination side
 It is unreliable in the sense that it not guaranteed that an IP data gram
will get delivered to the destination or not.
 If an IP datagram encounters some error at the destination or at some
intermediate host (while traveling from source to destination) then the IP
datagram is generally discarded and anICMP error message is sent back to
the source.
 If reliability is important, it must be paired with a reliable protocol such
as TCP.

IP Header Format:
Protocol Version(4 bits) : This is the first field in the protocol header.
This field occupies 4 bits. This signifies the current IP protocol version being
used.
Header Length(4 bits) : This field provides the length of the IP header. The
length of the header is represented in 32 bit words.
Uses of IP Protocol:
Addressing
 While sending datagrams, an addressing mechanism is needed to send the
datagrams accurately. In order to achieve this, IP uses a technique for host
addressing. The addressing of devices (to which the datagrams are delivered)
needs to be unique as this system needs to work across networks.
Routing
 When a datagram is sent from one network to another, which aredistant and not
directly connected, the delivery is indirect. IPsupports this functionality
by routing the datagram through intermediate devices
(routers). It uses Internet Control MessageProtocol (ICMP) and routing protocols
like Routing Information Protocol (RIP) and Border Gateway Protocol (BGP) to
achieve this. DATA Encapsulation
 IP provides security to networks by encapsulating the data into an IP
datagram. This makes sure it is received and interpreted by the intended
recipient.
Formatting/Packaging
 IP uses a specific formatting and packaging prior to transmission. IP
accepts data from the transport layer protocols above it in the OSI layer--
UDP and TCP--and passes them to the data layers. This format and package
is only decipherable by the recipient.
Fragmentation
 Since the frame size of each physical and data link network usingIP may be
different, IP fragments datagrams into pieces, so that they can each be
carried on the local network. This helps with network reliability.
Reassembly
 IP reassembles the datagrams received into the full IP datagram (as they may
be fragmented) for the receiving device and passes it on to the higher layers
for interpretation.

4. File Transfer Protocol (FTP):

 File Transfer Protocol, or FTP, is a protocol used for transferring files
from one computer to another - typically from your computerto a web
server.
 FTP is the preferred method of exchanging files because it's faster than
other protocols like HTTP or POP. If you need to exchange large files, you
should consider FTP.
  FTP data is sent and received through computer port 21 and under the
TCP protocol.
 The transfer is asynchronous, meaning not at the same time and
therefore faster than other protocols.

Objectives of FTP were:

1. to promote sharing of files (computer programs and/or data),
2. to encourage indirect or implicit (via programs) use of remotecomputers,
3. to shield a user from variations in file storage systems amonghosts, and
4. to transfer data reliably and efficiently.

5. Hyper Text Transfer Protocol (HTTP):

 HTTP is a request/response protocol. It is a communication protocol used
to transfer the information on local area network and WWW.
 HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files
(text, graphic images, sound, video, and other multimedia files) on the World
Wide Web. As soon as a Web user opens their Web browser, the user is
indirectly making use of HTTP. HTTP is an application protocol that runs
on top of the TCP/IP suite of protocols (the foundation protocols for the
Internet).
 HTTP defines how messages are formatted and transmitted, and what
actions Web servers and browsers should take in response to various
commands. For example, when you enter a URL in your browser, this
actually sends an HTTP command to the Web server directing it to fetch
and transmit the requested Web page.
 HTTP is called a stateless protocol because each command is executed
independently, without any knowledge of the commands that came
before it. Hence this protocol cannot maintain the previous conversations
held between the browser and the server.
 Standard port for HTTP to listen on is 80.
 GET and POST are the two popular methods used by the HTTP protocol to
make requests to the server on WWW.

6. Simple Mail Transfer Protocol (SMTP):

 SMTP (Simple Mail Transfer Protocol) is a TCP/IP protocol used in sending
and receiving e-mail.
 However, since it is limited in its ability to queue messages at the receiving
end, it is usually used with one of two other protocols, POP3 or IMAP that
let the user save messages in a server mailbox and download them
periodically from the server.
 In other words, users typically use a program that uses SMTP for sending e-
mail and either POP3 or IMAP for receiving e-mail.
 SMTP is a application level protocol.
 SMTP is connection oriented protocol.
 It handles exchange of messages between e-mail servers over TCP/IP
network.
 Default port of SMTP is 25.

7. Post Office Protocol 3 (POP3):

 Post Office Protocol version 3 (POP3) is a standard mail protocol used to
receive emails from a remote server to a local email client.
 POP3 allows you to download email messages on your local computer and
read them even when you are offline. Note, that when you use POP3 to
connect to your email account, messages are downloaded locally and
removed from the servers.
 This means that if you access your account from multiple locations, that
may not be the best option for you.
 On the other hand, if you use POP3, your messages are stored on your
local computer, which reduces the space your email account uses on your
web server.
 By default, the POP3 protocol works on two ports:
 Port 110 - this is the default POP3
 8. Internet Message Access Protocol:
 The Internet Message Access Protocol (IMAP) is a mail protocol usedfor
accessing email on a remote web server from a local client.
 IMAP and POP3 are the two most commonly used Internet mailprotocols
for retrieving emails.
 IMAP allows the client program to manipulate the e-mail messageson
the server without downloading them on the local computer.
 IMAP enables the user to search the e-mails.
 This does not involve in transfer of mails. It allows users to access the
received mails.
 It enables us to take any action such as download, delete the mail without
reading it.
 Both protocols are supported by all modern email clients and web servers.
 While the POP3 protocol assumes that your email is being accessed only
from one application, IMAP allows simultaneous access by multiple
clients. This is why IMAP is more suitable for you if you're going to access
your email from different locations or if your messages are managed by
multiple users.
 Port 143 - this is the default IMAP port

1.3: WWW (WORLD WIDE WEB)

WORLD WIDE WEB (WWW): World Wide Web is a collection of software

and corresponding protocols used to access the resources over the medium
of internet. It is an information-sharing model that is built on top of the
Internet.
 It is an information-sharing model that is built on top of theinternet.
 Also called web or www, it is a collection of information, resources,
pictures, and sounds, multimedia on the internet that are linked and
connected together.
 The web uses the HTTP protocol, only one of the languages spoken over
the internet, to transmit data.
 Web services, which use HTTP to allow applications to communicate in
order to exchange business logic, use the web to share information.
 The web also utilizes browsers, such as Internet Explorer or
Firefox, to access Web documents called webpages that are linked to each
other via hyperlinks. Web documents also contain graphics, sounds, text
and video.
  WWW contains huge amount of documents, images and other
resources which can be accessed using hyperlinks. People use
internet through Web.
 Web is the largest transformable-information construct that was
introduced by Tim Burners-Lee in 1989.

QUICK POINTS ABOUT THE WEB:

 It is a system of internet servers that support specially formatted
documents.
 Documents are formatted in a markup language that supportslinks to
other documents.
 You can jump from one document to another simply by clicking onhot
spots (hyperlinks).
 Applications called web browsers that make it easy to access theWorld
Wide Web.
 There are more than 1,275,000,000 websites.
Internet Vs. WWW

Internet WWW
Internet is a massive WWW is a way of accessing
Definition network of networks, a information over the
networking infrastructure medium of the internet
It connects millions of
computers together
globally forming a network
It is an information sharing
in which any computer can
Purpose communicate with any model that is built on the
other computer as long as top of internet.
both are connected to
internet
Name of the
ARPANET NSFnet
first version
Network of computers,
Files, folders & documents
Comprises copper wires, fiber-optic
cables 7 wireless networks stored in various computers
Governed Hyper Text Transfer
Internet Protocol
by Protocol
This is the base, It depends on internet to
Dependency
independent of the WWW work
Created by Tim Berners Lee
Creator No such creator
in 1992.
Nature Hardware Software
 1.4 HTTP: Hyper Text Transfer Protocol

 Hyper Text Transfer Protocol (HTTP) is the communication protocol used

by Internet or WWW to transfer hypertext documents.
HTTP is based on the request-response communication model:
o Client sends a request
o Server sends a response
 HTTP is a stateless protocol:
o The protocol does not require the server to remember anything about
the client between requests. In other words, the current request does
not know what has been done in the previous requests.
 HTTP Messages:

A HTTP message is the information transaction between the client

and server.

 Whenever we issue URL from our browser to get a web resource

using HTTP, the browser turns the URL into a request message
and sends it to the HTTP server.
 The HTTP server interprets the request message, and returns an
appropriate response message, which is either the resource we
request or an error message.

Two types of HTTP Message:

1. HTTP Request – Client to Server
2. HTTP Response – Server to Client

1. HTTP Request Message:

HTTP Requests are messages which are sent by

the client or user to initiate an action on the
server.
After opening a connection to the intended
server, the HTTP client transmits a request in
the following format
(Structure of the HTTP Request):

 Start line
  Header Field(s)
 Blank line
 Optionally, a message body

 The Start line is generally split into three space-separated parts;

1. HTTP Request Method
2. Request URI
3. HTTP Version
Example: A typical start line might read:

1. HTTP Request Method

Common request methods:
a. GET
 Used if link is clicked or address typed in browser
 No body in request with GET method
b. POST
 Used when submit button is clicked on a form
 Form information contained in body of request
c. HEAD
 Requests that only header fields (no body) be returned
in the response
2. Request URI:
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/

3. HTTP Version: HTTP 1.0 / HTTP 1.1

 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)
  Multipurpose Internet
Mail Extensions (MIME)
o Convention for specifying
content type of a message the
 In HTTP, typically used to
specify content type ofbody of
the response
o MIME content type syntax:
 top-level type / subtype
o Examples: text/html,
image/jpeg
 Common header fields:
o Host: host name from URL
(required)
o From: Email address of user
o User-Agent: type of browser
sending request
o Accept: MIME types of
acceptable documents
o Accept-Language:
Languages to accept as
response
o Accept-encoding:
Compression Methods
o Connection: value ―close‖ tells server to close connection after single
request/response
o Content-Type: MIME type of (POST) body, normally
application/x-www-form-url encoded
o Content-Length: bytes in body
o If-Modified-Since: Return document only if modified sincespecified
o Referer: URL of document containing link that supplied URIfor this
HTTP request

Example: HTTP Request Message

2. HTTP Response Message:
HTTP Response sent by a server to the client.The
response is used to provide the client with the
resource it requested.
It is also used to inform the client that the action
requested has been carried out.
It can also inform the client that an error
occurred in processing its request.
An HTTP response contains the following things:
(Structure of the response)
– status line
– header field(s)
– blank line
– optional Message body
 Status Line
The Start line is generally split into three space-separated parts;
– HTTP version
– status code
– reason phrase (intended for human use)
1. HTTP Version: HTTP 1.0 / HTTP 1.1
2. Status Code:
o Status code is a three-digit number that indicates the result ofthe
request.
o First digit is class of the status code:
 1=Informational
 2=Success
 3=Redirection (alternate URL is supplied)
 4=Client Error
 5=Server Error
o Other two digits provide additional information
3. Reason Phrase:
It is also known as the status text. It is a human-readable text that
summarizes the meaning of the status code.
An example of the response line is as follows:
HTTP/1.1 200 OK
Here,
o HTTP/1.1 is the HTTP version.
o 200 is the status code.
o OK is the reason phrase.
Some Commonly Encountered HTTP Response Status Codes

Status Code Explanation

200 - OK The request succeeded.

204 - No Content The document contains no data.

301 - Moved Permanently The resource has permanently moved to a different URI.

401 - Not Authorized The request needs user authentication.

403 - Forbidden The server has refused to fulfill the request.

404 - Not Found The requested resource does not exist on the server.

408 - Request Timeout The client failed to send a request in the time allowed by
the server.

500 - Server Error Due to a malfunctioning script, server configuration

error or similar.

 Response Header Fields

The HTTP Headers for the response of the server contain the information
that a client can use to find out more about the response, and about the
server that sent it.
This information is used to assist the client with displaying the
response to a user, with storing the response for the use of future,
and with making further requests to the server now or in the future.
 Example: HTTP Response Message

1.5: WEB SERVER AND WEB CLIENT

 WEB SERVER:
A Web Server is basically a computer that is designed to
accept requests from remote computers and send on the
information requested over the internet. It is also used to host
website / web application.

 The primary function of a web server is to store, process and

deliverweb pages to clients.
 The communication between client and server takes place using
the Hypertext Transfer Protocol (HTTP).
 Pages delivered are most frequently HTML documents, which mayinclude
images, style sheets and scripts in addition to text content.

 Functions of a web server:

1. The web server accepts the requests from the browser.
2. The user request is processed by the web server.
3. The web server responds to the users by providing the service which they
demand.
4. The servers verify the given address for its existence, finds the necessary
files, run appropriate scripts and returns back the cookies to the browser.
5. Some servers also participate in session handling.
  Examples:
Apache
o Source: The Apache Software Foundation
o Operating System: Unix, Windows NT
o Current Version: 2.2.6
Internet Information Server
o Source: Microsoft
o Operating System: Windows Server 2003
o Current Version: 6.0
Sun Java System Web Server
o Source: Sun Microsystems
o Operating System: Solaris, Windows Server 2003,
2000, XP, Linux, HP-UX
o Current Version: 7.0
 WEB CLIENT:
A Web client is the browser on the PC/Mac that makes the
requests to the remote server. It is an application (e.g.
Internet Explorer, Firefox, Chrome, Safari, and Opera) running on a local
device (desktop, notebook, cell phone) used to interact mainly with Web
servers. A PC/Mac that uses a web (Client) browser is referred to as a Client
Machine.
 The primary function of a web client is to serve content.
 A user agent, commonly a web browser or web crawler, initiates
communication by making a request for a specific resource using HTTP
and the server responds with the content of that resource or an error
message if unable to do so.
Functions of a Web Browser:
1. Reformat the URL and send a valid HTTP request.
2. When user gives the address of particular web site, the web browser
converts the DNS to corresponding ip address.
3. The web browser establishes a TCP connection with the web server while
processing the user’s request.
4. The web browser sends the HTTP request to the web server.
5. The web browser displays the response page returned by the server in
appropriate format on the client machine.

29

Downloaded from EnggTree.com

  Examples:
Firefox
o Source: Mozilla Corporation
o Operating System: Mac OS X, Microsoft Windows, Linux
o Current Version:2.0.0.9
Internet Explorer
o Source: Microsoft
o Operating System: Windows, Vista
o Current Version: 7.0
Netscape
o Source: Netscape Corporation
o Operating System: Mac OS X, Microsoft Windows, Linux
o Current Version: 9.0.0.3
Opera
o Source: Opera Software
o Operating System: Microsoft Windows, Solaris, SolarisIntel, Sparc,
ONX, OS/2,
o MacOS, Linux sparc, Linux Power PC, Linux i386, Fress BSD i386, BeOS
o Current Version: 9.24
Safari
o Source: Apple Inc.
o Operating System: Mac OS X, Microsoft Windows, Linux
o Current Version: 3.0.4 (Beta version)

 DIFFERENCE BETWEEN WEB SERVER AND WEB BROWSER:

S.No Web Server Web Browser
Web server is essential to store web browser are used to access
1 all information and data of and locate these information
websites. and data.
web server is used to make the Web browser is used to search
2 links between websites and web something on the internet via
browser. websites.
web server is a program server Web browser is a software or
on computer or in cloud on application which is used for
3
internet that gives the data. collection and presentation of
data in shape of websites

30

Downloaded from EnggTree.com

 WEB PAGE:
A web page or webpage is a document commonly written in HyperText Markup
Language (HTML) that is accessible through the Internet or other network using a
browser. A web page is accessed by entering a URL address and may contain text,
graphics, and hyperlinks to other web pages and files.

Two types of Web Pages:

1. Static Web Page:
A static web page is delivered exactly as stored, as webcontent in the web server's
file system. Static pages show the same content each time they are viewed. They are
written with HTML.

2. Dynamic Web Pages:

A dynamic web page is generated by a web application that is driven by server-side
software or client-side scripting. They are written in scripting languages such as
PHP, Perl, ASP, or JSP. Dynamic web pages help the browser (the client) to enhance
the web page through userinput to the server.
Difference between Static and Dynamic Web Pages:

S.No Static Web Pages Dynamic Web Pages

"Static" means unchanged "Dynamic" means changing or
1
or constant lively.
They contain HTML code, Web pages, such as PHP, ASP,
which defines the structure and JSP pages are dynamic
and content of the Web Web pages. These pages
page. Each time an HTML contain "server-side" code,
page is loaded, it looks the which allows the server to
2
same. The only way the generate unique content each
content of an HTML page time the page is loaded. For
will change is if the Web example, the server may
developer updates and display the current time and
publishes the file date on the Web page.
If the file extension is ".htm" If the file extension is ".php,"
3 or ".html," the page is ".asp," or ".jsp," the page is
probably static most likely dynamic.

31

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 WEB SITE:
A Web Site is a set of interconnected webpages on WWW that
includes a beginning file called homepage.
 Web sites are accessed by using URLs provided by the authority of
the web site.
 Web sites are generally located on the same server, and prepared
and maintained as a collection of information by a person, group, or
organization.
Example: http://www.w3schools.com
 DIFFERENCE BETWEEN WEB SERVER AND WEB SITE:

S.No Web Servers Web Sites

The web server is a computer A web site is a set of linked web
program which delivers content pages associated with a
1 such as web sites or web pages. It particular person and can be
responds to the request for accessed via WWW.
web pages.
Web server hosts all the web All the web sites reside on the
2
sites on WWW. web server.
Web Servers consists of Web sites contain text files,
3 hardware and software images, videos and audios.
components

 WEB APPLICATION:
A web application or web app is any computer program that runs in a
web browser. It is created in a browser-supported programming language
(such as the combination of JavaScript, HTML and CSS) and relies on a
web browser to render the application.
 It is usable only with an active Internet connection
 It uses HTTP as its primary communications protocol.
Examples: Online ticket booking applications, Online games, google
docs, etc.,

32

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE
1.6: HTML 5.0

HYPERTEXT MARKUP LANGUAGE (HTML):

HTML is a markup language for describing web pages. It isscripting
language for developing web pages and it tells a web browser how to
format and display a web page.

 HTML was invented by Tim Berners Lee.

 It is a standard published by World Wide Web Consortium (W3C).
 HTML is derived from the Standard Generalized Markup Language
(SGML) by applying SGML constructs according to a certain set of
rules.
 HTML has a set of predefined tags to describe the format of a web
document.
 All tags have their own syntax and attributes.

Advantages of HTML:
1. It is plain text so is easy to edit.
2. It is also fast to download.
3. Is very easy to pick up\learn .
4. It is now a standard.
5. It is supported by most browsers.
6. Simple to edit only requires a text editor.
7. Can be easily edited with WYSIWYG editors (no coding required) .
8. Can be used to present just about any kind of data.
9. Tags can be used very loosely (i.e. used to be able to omit end tags
etc).
10. It is user friendly.
11. It is open technology.

Disadvantages of HTML:
1. It can create only static and plain pages so if we need dynamic
pages then HTML is not useful.
2. It is static needs to be manually updated or needs some
scripting support to change it in some way.
3. Need to write lot of code for making simple webpage.
4. Security features are not good in HTML.
5. If we need to write long code for making a webpage then it
produces some complexity.
33

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 BASIC STRUCTURE OF AN HTML DOCUMENT:

<!DOCTYPE html>
<html>

<head>
<title> title of the page </title> Head Section
</head>
<body>
Page design goes here Body Section
</body>
<html>

 The <!DOCTYPE> Declaration

 The <!DOCTYPE> declaration helps the browser to display a
web page correctly.
 There are different document types on the web.
 To display a document correctly, the browser must know both
type and version.
 The doctype declaration is not case sensitive. All cases are
acceptable:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

Common Declarations

HTML5: <!DOCTYPE html>

HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

34

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 <html> tag: Every HTML document starts with <html> tag.

This tells browsers that it is the beginning of HTML
document. This tag does not have any properties.
 </html> tag: This tag informs browsers that the end of the
HTML document has been reached.
 An HTML page has basically two distinct logical sections:
1. Head Section
2. Body Section
1. Head Section:
- Head section contains the meta-information about the HTML
page.
- This section is processed but not displayed on the screen.
- Head section may contain the following inside it:
 <title> tag – used to assign title to the web page which
appears on the title bar of the browser’s window.
 JavaScript codes for creating dynamic web pages.
 Cascading Style Sheets codes for styling the document.
2. Body Section:
The body section contains text and other tags which are
rendered on the screen.

 HTML CONSTRUCTS:
There are two main constructs in HTML:
1. Elements (also called tags)
2. Entities.
1. Elements:
HTML tags are keywords (tag names) surrounded by angle
brackets. HTML element or tag is a signal to the browser that it
should do something other than just throwing text on the screen. Tags
are descriptions that are embedded directly into the informational text
of the document.
Syntax: <tagname>content</tagname>

 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag

35

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

The end tag is written the

like the start tag, but
with a slash before tag
name
2. Attributes:
 HTML elements can have
attributes
 Attributes provide
additional information
about an element
 Attributes are always
specified in the start tag
 Attributes
come in
name/valu
e pairs
like:
name="val
ue"
Syntax:
<tagname
attributename=‖value‖
>content</tagname>
Example:

<applet width=‖100‖
height=‖100‖>

3. Entities:
 Entities are character sequences that reproduce special
characters on the browser screen.
 Reserved characters in HTML must be replaced with characterentities
(references).
 If you use the less than (<) or greater than (>) signs in your text,the
browser might mix them with tags.
 Character entities are used to display reserved characters inHTML.
 A character entity looks like this:
&entity_name; OR &#entity_number;

To display a less than sign we must write: &lt; or &#60;

 The advantage of using an entity name, instead of a number, is
that the name is easier to remember.
 The disadvantage is that browsers may not support all entity
names, but the support for numbers is good.
Some Useful HTML Character Entities
Result Description Entity Name Entity Number
breakingspace
non- &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
36

Downloaded from EnggTree.com

 EnggTree.com
€ euro &euro; &#8364;
© copyright &copy; &#169;
registered
® trademark &reg; &#174;

Example: HTML page that prints “Welcome” message on the screen:

<!DOCTYPE html>
<html>
<head>
<title> My First Web Page</title>
</head>
<body>
<center>
<h1>Welcome to HTML 5</h1>
</center>
</body>
</html>

 DOCUMENT STRUCTURE TAGS:

1. <html> tag:
Type: Container tag
Function: Declares the document to be an HTML document. All
document contents are defined between <html>
and </html> tag pair.
Syntax: <html> ……</html>
2. <head> tag:
Type: Container tag
Function: contains the tags that compose the document head.
37

Downloaded from EnggTree.com

 EnggTree.com
Syntax: <head> ……</head>
Related Tags: The tags that can be placed between the <head>
and </head> are: <base>, <link>, <script>,
<style>, <title>

3. <base> tag:
Type: Standalone tag
Function: Specifies the base URL of the document.
Syntax:
<base href=‖base-url‖> (or) <base target=‖frame_name‖>
Target – specifies the default frame name to which all the linked
documents should be loaded.
Related Tags: None.

4. <link> tag:
Type: Standalone tag
Function: Makes a link between an external source and this html
file.
Syntax: <link href=‖url-of-the-linked-file‖
title=‖title‖ rel=‖forward-relationaship‖ rev=‖reverse-
relationship‖>
Attributes:
Href – denotes the URL of the file to be linked.
Title – gives the link a descriptive title.

Rel – specifies the relationship of the linked file to the current

file.
Rev – specifies how current file relates to the linked file.

38

Downloaded from EnggTree.com

 Example: EnggTree.com
<head>
<link href=‖styles.css‖ rel=‖stylesheet‖>
</head>
5. <script> tag: Type:
container tag
Function: Contains script code such as JavaScript or VBScript
referenced in the body section of the document.
Syntax: <script language=‖scripting-language‖>
----- Script code ----
</script>

Attributes:
language – Scripting language used to write the script.
src – Specifies the URL of a file containing the script code, if
the code is not written between <script> and </script> tags.
type – MIME type of the script code.

Example:
<head>
<script src=‖external.js‖ type=‖text/javascript‖></script>
</head>

Related Tag: <noscript>

Type: Container tag.
Function: provides alternate content to use if script cannot be
executed.
Syntax: <noscript> ……alternate content.............</noscript>
Example:
<script language=‖vbscript‖>
Document.write(―Hello World!‖);
</script>
<noscript>
You either have scripting turned off or your browser
does not support VBScript
</noscript>
6. <style> tag:
Type: Container tag
Function: specifies or links a style information to the document.
Syntax: <style type=‖MIME-type‖ title=‖title‖>
39

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE
--style information—
</style>
Example:
<style type=‖text/css‖>
H1{font:12pt;font-weight:bold;}
</style>
7. <title> tag:
Type: Container tag
Function: makes the enclosed text the tile of the web page. The
text appears in the title bar of the browser.
Syntax: <title>--document title-- </title>
Attributes: None
Example:
<title>Welcome.html</title>
8. <body> tag:
Type: Container tag
Function: Contains all content and tags that compose the
document body.
Syntax:
<body bgcolor= ‖background-color ‖ background=‖image‖
link=‖unvisited-link-color‖ alink=‖active-link-color‖
vlink=‖visited-link-color‖ text=‖text-color‖>
Attributes:
bgcolor Specifies alink Specifies the color
background color of of an active link
the document
background Specifies background vlink Specifies the color
image of of a visited link
the document
link Specifies the color of text Specifies the color
a not yet visited link of the enclosed
text

Example:
<body bgcolor=‖yellow‖ >
<body bgcolor= ‖#0000FF ‖ >
<body background=‖flower1.jpg‖>

40

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 FORMATING TAGS:
1. <b> tag:
Type: Container tag
Function: Makes the enclosed text bold.
Syntax: <b> text </b>
Attributes: None
Example:
<b> Welcome </b>

2. <i> tag:
Type: Container tag
Function: Makes the enclosed text italic.
Syntax: <i> text </i>
Attributes: None
Example:
<i> Welcome </i>

3. <u> tag:
Type: Container tag
Function: Makes the enclosed text underlined.
Syntax: <u> text </u>
Attributes: None
Example:
<u> Welcome </u>
4. <big> tag:
Type: Container tag
Function: Renders the text in the font size bigger than the default
font size.
Syntax: <big> text </big>
Attributes: None
Example: <big> Welcome </big>
5. <small> tag:
Type: Container tag
Function: Renders the text in the font size smaller than the
default font size.
Syntax: <small> text </small>
Attributes: None
Example:<small> Welcome </small>
41

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

6. <s> / <strike> tag:

Type: Container
tag
Function: contains the text to be marked with strikethrough
character.
Syntax: <s> text </s> (or) <strike> text </strike>
Attributes: None
Example:
<s> Welcome </s> (or) <strike> welcome </strike>

7. <sub> tag:
Type: Container tag
Function: contains the text to be subscript to the text that
precedes it.
Syntax: _text
Attributes: None
Example:
a₁, a₂
8. <sup> tag:
Type: Container tag
Function: contains the text to be super script to the text that precedes it.
Syntax: ^text
Attributes: None
Example:
a¹, a²
9. <font> tag:
Type: Container tag
Function: contains the text whose font properties are to be
modified.
Syntax: <font size=‖size‖ color=‖color‖ face=‖font-face-type‖>
text </font>
Example:
<font face=‖Calibri‖ size=‖25pt‖ color=‖green‖> Welcome
</font>
10.<br> tag:
Type: Empty tag
Function: Inserts a line break in the document.
Syntax: <br/>
Example:<font face=‖Calibri‖ size=‖25pt‖color=‖green‖> Welcome
</font> <br/>
42
Downloaded from EnggTree.com
 EnggTree.com
11.<center> tag:
Type: Container
tag
Function: Centers all the text and other page components.
Syntax: <center> text </center>
Example:
<center> <font face=‖Calibri‖ size=‖25pt‖ color=‖green‖>
Welcome </font> </center>

12.<em> tag: Type:

Container tag

Function: defines emphasized text, with added semantic

importance.
Syntax: <em> Text </em>
Example: <em> welcome </em>

13.<mark> tag: Type:

Container tag
Function: defines marked or highlighted text.
Syntax: <mark> Text </mark>
Example: <mark> welcome </mark>

14.<del> tag: Type:

Container tag
Function: defines deleted (removed) of text.
Syntax: <del> Text </del>
Example: <del> welcome </del>

15.<ins> tag: Type:

Container tag
Function: defines inserted (added) text.
Syntax: <ins> Text </ins>
Example: <ins> welcome </ins>

Example HTML code (formatting tags):

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
43
Downloaded from EnggTree.com
 EnggTree.com
<hr color="blue">
<p><b>This text is bold</b>.</p>
<hr color="blue">
<p><strong>This text is strong</strong>.</p>
<hr color="blue">
<p><i>This text is italic</i>.</p>
<hr color="blue">
<p><u>This text is underlined</u>.</p>
<hr color="blue">
<p>This is <s> not </s> HTML.</p>
<hr color="blue">
<p><em>This text is emphasized</em>.</p>
<hr color="blue">
<h2>HTML <small>Small</small> Formatting</h2>
<hr color="blue">
<h2>HTML <big>Big</big> Formatting</h2>
<hr color="blue">
<h2>HTML <mark>Marked</mark> Formatting</h2>
<hr color="blue">
<p>My favorite color is <del>blue</del> red.</p>
<hr color="blue">
<p>My favorite <ins>color</ins> is red.</p>
<hr color="blue">
<p>This is _subscripted text.</p>
<hr color="blue">
<p>This is ^{superscripted} text.</p>
<hr color="blue">
<font face=‖Calibri‖ size=‖25pt‖ color=‖green‖> This is different
font</font>
<hr color="blue">
<center> End of formatting tags </center>
<hr color="red" width="40%">
</body>
</html>

44

Downloaded from EnggTree.com

 EnggTree.com
Output:
This text is normal.

This text is bold.

This text is strong.

This text is italic.

This text is underlined.

This is not HTML.

This text is emphasized.

HTML Small Formatting

HTML Big Formatting

HTML Marked Formatting

My favorite color is blue red.

My favorite color is red.

This is subscripted text.

This is superscripted text.

This is different font

End of formatting tags

16. <hr> tag:

Type: Standalone tag
Function: places a horizontal line on the page.
Syntax: <hr align=‖alignment‖ noshade size=‖thickness‖
width=‖pixels or percentage‖>
Attributes:
Align – LEFT | RIGHT | CENTER
45

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

Noshade – suppresses the shading effect and yields a

line. solid

Size – controls the thickness of the line.

Width – length of the line specifies in pixels or
percentage.
Example:
<!DOCTYPE html>
<html>
<body>
<h1> Heading 1 </h1>
<hr color="red">
<h2> Heading 2 </h2>
<hr color="blue" width="25%" align="left">
<h3> Heading 3 </h3>
<hr color="green" size="7pt">
</body>
</html>

Output:
Heading 1

Heading 2

Heading 3

17. <h1> ……. <h6> tags (heading tags):

Type: container tag
Function: Inserts section heading within the document. It is used
to specfy the relative importance of
information.
Heading Levels:
Level 1 - h1 – largest font size <h1>
Level 6 – h6 – smallest font size <h6>

Syntax: <hn align=‖LEFT | RIGHT | CENTER‖ > text

</hn> where n = 1,2,3,4,5,6
Attributes:
Align – LEFT | RIGHT | CENTER. It controls how heading is
aligned on the page. Default alignment is LEFT.
46
Downloaded from EnggTree.com
 EnggTree.com

Example:
<!DOCTYPE html>
<html>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>
Output:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

1. <p> tag:
Type: Container tag
Function: denotes a paragraph.
Syntax: <p align=‖ LEFT | RIGHT | CENTER‖> paragraph text
</p>
Attributes:
Align – LEFT | RIGHT | CENTER. Controls the alignment
of the text in the paragraph.
Example:
<p align=‖center ‖ title=‖Greetings ‖> Welcome</p>

2. <pre> tag: Type:

Container tag
Function: The PRE tag displays preformatted text in a fixed width
font. The PRE element displays all white spaces and line breaks
exactly as they appear inside the tags.
Syntax:
<pre cols=‖columns‖ WRAP> -- preformatted text -- </pre>

47

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE
Attributes:
Cols – specifies the maximum number of characters that fit ina line.
WRAP – turns on wrapping, so that all lines fit inside thebrowser.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
Welcome
To
HTML
</p>

<pre
>
Welcome
To
HTML

</
pre>
</
body
>
</
html
>
O
u
t
p
u
t
:
Welcome To HTML
Welcome
To
HTML
18.<span> tag: Type:
Container tag
Function: Generic tag for defining document block. Used for
applying style information.
Syntax:
<span style=‖style-information‖ align=‖LEFT|RIGHT|CENTER‖>
 Text
</span>
Example:
<span style=‖font-weight:bold; color:red;>
Welcome
To
HTML
</span>
48

Downloaded from EnggTree.com

 EnggTree.com
Output:
Welcome to HTML

2.6: HTML TABLES

 Tables are used for presenting data in tabular form i.e. to organizedata into
rows and columns.
 The fundamental building blocks of a table are cells, which can
contain either a data element or a heading for a column of data.
 Columns and rows will automatically size to contain their data.
 Individual table cells can span multiple rows or columns.
 Header and footer rows can be supplied.
HTML Table Tags:
Tag Name Meaning Tag Name Meaning
table Represents start of a tbody Defines the table
table body
caption Describes the table tr Represents a table
content row
thead Defines the header th Represents a column
section header
tfoot Defines the footer td Defines data in the
section cell

 Syntax of <table> tag:

<table align=‖LEFT|RIGHT|CENTER‖
border=‖thickness_in_pexels‖
background=‖Image_URL‖
bordercolor=‖color‖
bgcolor=‖color‖
height=‖pixels‖
width=‖pixels or %‖
cols=”number_of_columns‖
cellpadding=”pixels‖
cellspaceing=”pixels‖
frame=”outer_border_rendering”>
---------</table>

49

Downloaded from EnggTree.com

 EnggTree.com

Attributes of Table Tag

Attribute Meaning
Align Specifies table alignment. An have values: left,
right, and center
Border Specifies the thickness of the table border in
number of pixels
Background Specifies the URL of the background image
Bordercolor Specifies the color of the table border. color
names or hexadecimal color codes are allowed
Bgcolor Specifies the background color of the table. color
names or hexadecimal color codes are allowed
Height Specifies the height of the table in pixels
Width Specifies the width of the table in pixels
Cols Specifies the number of columns to be created in
the table
Cellpadding Specifies the amount of space in number of
pixels between the cell border and its content
Cellspacing Specifies the amount of space in number of
pixels between table cells.
frame Specifies whether a frame around the table
should be created or not

 Three Section of a table:

A table has three distinct sections:
1. head section
2. body section
3. foot section
 Head Section (or header cell) is defined with a <thead> element. It
contains header information such as column names.
 Body Section (or table body) is defined with a <tbody> element. It
contains the table’s primary data.
 Foot Section (or footer row) is defined with a <tfoot> element. It
contains the footer information. The table foot section must be above the
body section in the code, but the table foot displays atthe bottom of
the table.

50

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 th, tr and td elements:

1. <th> Element:
 <th> (table heading) element is used to define columns in thehead
section of a table.
 Most browsers center the text formatted by th element anddisplay
them in bold.
2. <tr> Element:
 Each <tr> (table row) element defines an individual table row.
 Synatx:
<tr align=‖LEFT|RIGHT|CENTER‖ bordercolor=‖color‖
bgcolor=‖color‖ height=‖pixels‖ width=‖pixels or %‖
valign=”TOP|BOTTOM|MIDDLE‖ >
------
</tr>

Attributes of tr tag:

Attribute Meaning
Align Specifies the horizontal alignment of the content of
all cells in this row. Can have values: left, right and
center. Default value is left.
Bordercolor Specifies the border color of all cells in this row. color
names or hexadecimal color codes are allowed
Bgcolor Specifies the background color of all cells in this row.
color names or hexadecimal color codes are allowed
Height Specifies height, in pixels, of all cells in this row
Width Specifies width, in pixels, of all cells in this row
valign Specifies the vertical alignment of the content of all
cells in this row. Can have values: top, bottom and
middle. Default value is middle.

51

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

3. <td> Element:

 Each <td> (table data) element defines an individual data cells

in each row.
 Each data cell contains individual piece of data.
 Synatx:
<td align=‖LEFT|RIGHT|CENTER‖ bordercolor=‖color‖
bgcolor=‖color‖ height=‖pixels‖ width=‖pixels or %‖
valign=”TOP|BOTTOM|MIDDLE‖
colspan= ‖no_of_columns ‖ rowspan= ‖no_of_rows ‖ >
data
</td>

Attribute Meaning
Align Specifies the horizontal alignment of the content of
all cells in this row. Can have values: left, right and
center. Default value is left.
Bordercolor Specifies the border color of all cells in this row. color
names or hexadecimal color codes are allowed
Bgcolor Specifies the background color of all cells in this row.
color names or hexadecimal color codes are allowed
Height Specifies height, in pixels, of all cells in this row
Width Specifies width, in pixels, of all cells in this row
valign Specifies the vertical alignment of the content of all
cells in this row. Can have values: top, bottom and
middle. Default value is middle.
Colspan Specifies the number of columns this cell must span
rowspan Specifies the number of rows this cell must span

52

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

Example:

<!DOCTYPE html>
<html>
<head>
<title>Simple Table Demo</title>
</head>
<body>
<table border="1" width="20%">
<caption><strong>Price of Fruits</strong></caption>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>pineapple</td>
<td>$2.00</td>
</tr>
<tr>
<td>Apple</td>

53

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

<td>$0.25</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Simple Table Demo</title>
</head>
<body>
<table border="1" width="20%">
<caption><strong>Price of Fruits</strong></caption>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>

</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Orange</td>
<td>$0.50</td>

</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>

</tr>
<tr>
<td>pineapple</td>
<td>$2.00</td>

</tr>
<tr>
<td>Apple</td>
54

Downloaded from EnggTree.com

 EnggTree.com
<td>$0.25</td>
</tr>
</tbody>
</table>
</body>
</html>

Rowspan & Colspan Attributes:

Rowspan – used to extend the row vertically.
Colspan – used to extend the column horizontally.

Year Subjects
Name
Branch TOC IP
Rowspan Colspan

<td rowspan=‖2‖>Name</td>
<td colspan=‖2‖>Subjects</td>
<td>Year</td><td>Branch</td>
<td>TOC</td><td>IP</td>

Example:
<html>
<head>
<title>Complex Table</title>
</head>
<body>
<table border="1" bgcolor="#FF9900">
<caption> Comparison of districts in Tamil nadu</caption>
<thead>
<tr>
<th rowspan="2"><img src="tamil-nadu-map.jpg" width="150"
height="150"></th>
<th colspan="3"><h1> District comparison in Tamil
nadu</h1></th>
</tr>
<tr>
<th>District</th>
<th>Population</th>

55

Downloaded from EnggTree.com

 EnggTree.com

<th>Growth</th>
</tr>
</thead>
<tbody align="center">
<tr>
<th>1</th>
<td>Chennai</td>
<td>464673</td>
<td>6.98 %</td>
</tr>
<tr>
<th>2</th>
<td>Coimbatore</td>
<td>3458045</td>
<td>18.56 %</td>
</tr>
<tr>
<th>3</th>
<td>Madurai</td>
<td>3038252</td>
<td>17.84 %</td>
</tr>
</tbody>
</table>
</body>
</html>

56

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

1.7: HTML IMAGES (<IMG> TAG)

 <img> tag is used to insert an image in the document.
 The <img> tag is empty, it contains attributes only, and does
not have a closing tag
 Syntax:
<img src=‖image_url‖ width=‖pixels‖ height=‖pixels‖
alt=‖text_description‖
border=‖thickness_in_pixels‖
align=‖TOP|MIDDLE|LEFT|RIGHT|BOTTOM
hspace=‖horizontal_space‖ vspace=‖vertical_space
usemap=‖map_name />
Where,
Src= Specifies the URL (web address) of the image.
Alt= specifies an alternate text for an image, if the image cannot be
displayed. If a browser cannot find
an image, it will display the alt text.
Width & Height = Optional attributes used to specify the image’s
width & height. If these attributes are omitted, the browser uses the
image’s actual width and height. Images are measured as pixels.
Border= used to specify the width of the border to display around
the image.
Hspace & vspace= controls the amount of white space left around
the image.
Usemap= used to point to an image-map. Image-map is an image
with clickable areas.

Example: (To display images)

<!DOCTYPE html>
<html>
<body>
<center><p>Demonstration of image tag</p>
<img src="flower1.jpg" alt="Sorry! Image not found" >
<br/>
<img src="flower2.jpg" alt="Sorry! Image not found" width="128"
height="128">

57

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

</cetner>
</body>
</html>

1.8: LINKS (<A> TAG)

 ―anchor‖ (<a>) is used for creating a clickable link called
hyperlink between the web pages.
 Hyperlink references (or links to) other resources such another
HTML document and images.
 When a user clicks a hyperlink, the browser tries to execute an
action associated with it.
 In HTML, both text and images can act as hyperlinks.
 Syntax:
<a href=”url” target=”frame_name”> hyperlink element </a>
Where,
Href- gives the URL of the web resource to be linked.

58

Downloaded from EnggTree.com

 EnggTree.com

CCS375-Web Technologies Unit – 1 V Semester CSE

Target – target frame into which the linked document should be
loaded.

Target Value Description

_blank Opens the linked document in a new window or tab
Opens the linked document in the same frame as it was
_self clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame

HTML Links - Colors and Icons

When you move the mouse cursor over a link, two things will
normally happen:
 The mouse arrow will turn into a little hand
 The color of the link element will change

By default, links will appear as this in all browsers:

 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

Hyperlinking to an E-mail Address:

 Anchors can link to e-mail addresses using mailto:URI.
 When someone click thids type of anchored link, most browser
launch default e-mail program (e.g. Microsoft Outlook Express)
to enable the user to write an e-mail message to the linked
address.

INTERNAL LINKING:
 Internal linking is a mechanism that enables the user to jump
between locations in the same document.
 Internal linking is useful for long documents that contain many
sections.

59

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 Clicking an internal linking enables users to find a section

without scrolling through the entire document.
Syntax:
1. To create hyperlink: Use ―id‖ attribute in any tag to create this
section as linked section.
<any-tag id=”anchor_name”> content </any-tag>

2. To point to the linked section: Use anchor name preceded with

# symbol in the href attribute of <a> tag
<a href=”#anchor_name” >
Example:
<HTML>
<a name="top"></a>
<HEAD><CENTER><h1>WEB DOCUMENT</h1></CENTER>
<TITLE>WEB DOCUMENT</TITLE>
</HEAD>
<hr size=4pt color="green">
<body bgcolor="gray">
<table bgcolor="orange" border=2 bordercolor="orange"
width="50%" align="center" >
<tr >
<td colspan="3" align="center"><h3>Topics</h3></td>
</tr>
<tr>
<th align="center" ><a href="#num">Numbers</a></th>
<th align="center" ><a href="#upper">Uppercase
Alphabets</a></th>
<th align="center" ><a href="#lower">Lowercase Alphabets</a></th>
</tr>
</table>
<hr color="orange">
<h1><a name="num"><font color="yellow">NUMBERS (1-
10)</font></a></h1>
<font size="5pt">
<pre>
1
2

60

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

3
4
5
6
7
8
9
10
</pre>
</font>
<center><a href="#top"> Go Up</a></center>
<hr color="orange">
<h1><a name="upper"><font color="yellow">UPPERCASE
ALPHABETS</font></a>
</h1>
<font size=5pt>
<pre>
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T

61

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

U
V
W
X
Y
Z
</pre>
</font>
<center><a href="#top"> Go Up</a></center>
<hr color="orange">
<h1><a name="lower">
<font color="yellow">LOWERCASE ALPHABETS</font></a></h1>
<font size=5pt>
<pre>
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w

62

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

x
y
z
</pre>
</font>
<center><a href="#top"> Go Up</a></center>
<hr color="orange">
</body>
</html>

1.9: HTML LISTS

 A list is a collection of one or more items.
 HTML supports three types of lists:
1. Unordered (bulleted) lists
2. Ordered (numbered) lists
3. Definition lists
1. Unordered Lists:
 An unordered list creates a bulleted list.
 An unordered list is created using the <ul> tag.
 Items in the list are created using the <li> tag and they are
displayed using bullets.
 Example:
<ul>
<li>C</li>
<li>C++</li>
<li>JAVA</li>
<li>HTML</li>
</ul>

Bullet Options:
Bullet Options Meaning Result
<ul> Default bullet shape is disc  One
 Two
<ul type=‖disc‖> Disc shaped bullets are used  One
 Two
<ul type=‖circle‖> Circle shaped bullets are used o One

63

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

o Two
<ul Square shaped bullets are used  One
type=‖square‖>  Two

2. Ordered Lists:

 An ordered list creates a numbered list.

 An ordered list is created using the <ol> tag.
 Items in the list are created using the <li> tag and they are
displayed using bullets.
 Example:
<ol> 1. C
<li>C</li> 2. C++
<li>C++</li> 3. JAVA
<li>JAVA</li> 4. HTML
<li>HTML</li>
</ol>

Numbering Options:
Numbering Numbering
Meaning Result Meaning Result
options options
Use
Use default
1. One <ol lowercase a. One
<ol> number
2. Two type=‖a‖> letters for b. Two
type
numbering
Use
Use default <ol lowercase
<ol 1. One d. One
number type=‖a‖ letters
type=‖1‖> 2. Two e. Two
type start=‖4‖> stating
from d
Use
Use small
<ol uppercase A. One <ol i. One
roman
type=‖A‖> letter for B. Two type=‖i‖> ii. Two
numbers
numbering
<ol Use default 3. One <ol type=‖i‖ Use small ii. One
type=‖3‖> number 4. Two start=‖2‖> roman iii. Two

64

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

starting numbers
form 3 starting
from ii
Use
Use
<ol uppercase
D. One <ol capital I. One
type=‖A‖ letters
E. Two type=‖I‖> roman II. Two
start=‖4‖> starting
numbers
from D

3. Definition List:
 A definition list is the one where list items consist of two parts:
o a term
o its description
 Definition List is created using <dl> tag.
 The term part and the definition part of each item are created
using <dt> (definition term) and <dd> (definition description)
tags respectively.
 Example:
<dl>
<dt> dl tag </dt>
<dd> it is the outermost tag of definition list</dd>
<dt> dt tag </dt>
<dd> Contains the item to be described</dd>
<dt> dd tag </dt>
<dd> Contains description of the item</dd>
<dd> Each term may have multiple descriptions</dd>
</dl>
dl tag
it is the outermost tag of definition
list
dt tag
Contains the item to be described
dd tag
Contains description of the item
Each term may have multiple
descriptions

65

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

 NESTED LISTS:
 Lists may be nested to represent hierarchical relationships.
 A web browser indents each nested list to indicate a hierarchical
relationship.
 Any of the three types of lists may be nested in another.
 Arbitrary levels of nesting is possible

Example: ( Three types of lists and Nested Lists):

<!DOCTYPE html>
<html>
<head>
<title> List Example</title>
</head>
<body bgcolor="violet">
<center>
<h1> ABC ENGINEERING COLLEGE</h1>
</center>
<hr color="blue">
<ul>
<li> U.G Courses
<ol>
<li> B.E - CSE </li> Inner List
<li> B.E - ECE </li>
</ol>
</li>
<li> P.G Courses
<ol>
Outer List
<li> M.E - CSE </li>
<li> M.E - SE </li>
<li> MBA </li> Inner List
<li> MCA </li>
</ol>
</li>
</ul>
<hr color="red">

66

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

<ul type="square">
<li>
<dl>
<dt> CSE </dt>
<dd> Computer Science and
</dl> Engineering</dd>
</li>

<li>
<dl>

<dt> ECE</dt>
<dd> Electronics and
Communication
Engineering</dd>
</dl>
</li>

<li>
<dl>
<dt> SE </dt>
<dd> Software Engineering</dd>
</dl>
</li>
</ul>
</body>
</html>
Output:

67
Downloaded from EnggTree.com
 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

1.10: HTML 5 CONTROL ELEMENTS

HTML Forms

 An HTML form us used to allow a user to input data on a webpage.

 Forms acts as the visible or front-end portion of interactive webpages.
 Forms hold interface components to gather data from users. User
enter information into form fields or controls and click abutton to
submit the data.
 The browser then packages the data, opens an HTTP connection
and sends the data to the server for processing.
Creating Forms:
Each HTML form has three main components:
[1] The form header
[2] One or more named input fields
[3] One or more action buttons

 <form> ELEMENT:
The <form> element is used to create a form.

Syntax:
<form name=‖form_name‖ accept=‖MIME _type‖
action=‖URL_of_the_Script‖
Method=‖GET|POST‖ target=‖frame_name‖ >
- Form elements --
</form>
Attributes:

Attribute Description
accept- charset Specifies the charset used in the
submitted form (default: the page
charset).
Specifies an address (url) where to submit the
action form (default: the submitting page).
Specifies if the browser should autocomplete the form
autocomplete (default: on).
Specifies the encoding of the submitted data (default:
enctype is url-encoded).

68
Downloaded from EnggTree.com
 EnggTree.com

Specifies the HTTP method used when submitting

method the form (default: GET).
Specifies a name used to identify the form (for
name DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
Specifies the target of the address in the action attribute
target
(default: _self).

Example:
<form name=‖form1‖ method=‖get‖
action="action_page.php">
----- form elements ----
</form>

 <input> ELEMENT:
 The <input> element is the most important form element.
 The <input> element has many variations, depending on the type
attribute.

 Here are the types used in this chapter:

Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of many choices)
submit Defines a submit button (for submitting the form)

1. INPUT TYPE: textfield:

 This control simply displays a box to input a single line text.
 <input type="text"> defines a one-line input field for text input.
 Default text can be included in a text field using value attribute.
 Syntax: <input type=”text” name=”name” value=””
size=” “ />
2. INPUT TYPE: password:
 This control simply creates an password field.
 <input type="password"> defines a password field in the form.
 The characters in a password field are masked (shown as
asterisks or circles).
 Syntax: <input type=”password” name=”pwd” value=””
size=” “ />
69

Downloaded from EnggTree.com

 EnggTree.com
Example:
<!DOCTYPE html>

<html>
<body>
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as
asterisks or circles).</p>
</body>
</html>

3. INPUT TYPE: submit:

 <input type="submit"> defines a button for submitting form
input to a form-handler.
 The form-handler is typically a server page with a script for
processing input data.
 The form-handler is specified in the form's action attribute:
 Syntax: <input type=”submit” name=”caption” />
Example:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
70

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

4. INPUT TYPE: radio:

 <input type="radio"> defines a radio button.

 Radio buttons are used to prevent users with a set of choices from
which they can choose only one of several options.
 Syntax: <input type=”radio” name=”Name” value=”value”
[CHECKED] /> option
 One or more radio buttons that all have the same value for
theirname attribute forms a radio button set.
 The browser will always display exactly one of the radio buttons as
selected button.
 CHECKED attribute is used to indicate which button in a set
should be checked initially.
 Example:
<form>
<input type="radio" name="gender" value="male" checked>Male
<br>
<input type="radio" name="gender" value="female">Female
</form>

5. INPUT TYPE: checkbox:

 <input type="checkbox"> defines a checkbox.
 Check boxes are used to provide users with several choices
from which they can select as many of the choices they want.
 Syntax: <input type=”checkbox” name=”Name”
value=”value” [CHECKED] /> option
 The information in the value attribute of the checkbox will be
returned to the web server if the user checks the corresponding
checkbox and submits the form.
71

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 CHECKED attribute is used to indicate which button in a set
should be checked initially.
 Example:
form>
<input type="checkbox" name="vehicle" value="Bike">I have a
bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

6. INPUT TYPE: button:

 <input type="button"> creates a button.
 Syntax: <input type=”button” name=”Name”
value=”caption” />
 Example:
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click
Me!">
</body>
</html>

 TEXTAREA ELEMENT:
 This control allows the user to enter multiple lines of data.
 It is generated on the web page using <textarea> and </textarea>
tag pair.
 Size of the textarea is specified usingthe two attributes rows and
cols.
72

Downloaded from EnggTree.com

 EnggTree.com

 Syntax: <textarea name=”text1” rows=”5” cols=”60”>

Please enter the text here
</textarea>

 SELECT ELEMENT:
 A menu is defined using ―select‖ element. It defines the drop-down
list.
 It is used to produce scrollable option menus.
 Syntax:
<select name=”Name” [size=”size”] [MULTIPLE] >
<option value=”value” [selected] > Option1
</option>
<option value=”value” [selected] > Option2
</option>
</select>
 Option element is used to define the options to select.
 [selected] attribute is used to specify which option should be
selected by default (predefined option).
 Example:
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

Example: Simple Form

<!DOCTYPE html>
<html>
<head>
<title>HTML FORM - SAMPLE FORM</title>
</head>
<body bgcolor="#FFFFCC">
<center>
<h1>PERSONAL INFORMATION SITE</h1>
73

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

<form method="post" action="">

<label> First Name: <input type="text" name="uname" />
</label>
<br />
<label> Password: <input type="password" name="pwd" />
</label>
<br />
<label> E-Mail id: <input type="email" name="email" />
</label>
<br />
<label> Phone Number: <input type="number" maxlength="10"
name="phone" /> </label>
<br />

<label> Gender:
<input type="radio" name="gender" />Male
<input type="radio" name="gender" />Female </label><br />
<label> D.O.B: <input type="date" name="bday" /> </label>
<br />

<label> Age: <input type="number" maxlength="3"

name="age" /> </label>
<br />

<label> Qualification:
<select>
<option value="be">B.E</option>
<option value="ba">B.A</option>
<option value="bcom">B.COM</option>
<option value="bba">B.B.A</option>
</select></label>
<br />

<label> Hobbies:
<input type="checkbox" name="c1" />Playing
<input type="checkbox" name="c2" />Singing
<input type="checkbox" name="c3" />Dancing </label> <br />

Downloaded 80
from EnggTree.com
 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

<label> Describe about Yourself:

<textarea> </textarea> </label><br /> <br/>
<input type="submit" value="Submit Data" />
</form>
</center>
</body>
</html>
Output

81
Downloaded from EnggTree.com
 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

 HTML5 FORM ELEMENTS

HTML5 added the following form elements:
 <datalist>
 <keygen>
 <output>

1. <datalist> Element:
 The <datalist> element specifies a list of pre-defined options for an
<input> element.
 Users will see a drop-down list of pre-defined options as they input
data.
 The list attribute of the <input> element, must refer to the id
attribute of the <datalist> element.
Example
An <input> element with pre-defined values in a <datalist>:
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet
Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

2. <keygen> Element:
 The purpose of the <keygen> element is to provide a secure way to
authenticate users.
 The <keygen> element specifies a key-pair generator field in a form.
 When the form is submitted, two keys are generated, one private
and one public.
 The private key is stored locally, and the public key is sent to the
server.
 The public key could be used to generate a client certificate to
authenticate the user in the future.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 Example:
<form action="action_page.php">
Username:
<br>
<input type="text" name="user">
<br><br>
Encryption:
<br>
<keygen name="security">
<br><br>
<input type="submit"> </form>

3. <output> Element:
 The <output> element represents the result of a calculation (like
one performed by a script).
 Example:
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

 HTML5 INPUT TYPES

HTML5 added several new input types:
 color
 date
 datetime
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

1. Input Type: number

The <input type="number"> is used for input fields that should contain
a numeric value.You can set restrictions on the numbers.
Depending on browser support, the restrictions can apply to the input
field.
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

Input Restrictions:
Here is a list of some common input restrictions (some are new in
HTML5):

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
Specifies the maximum number of character for an input
maxlength field
min Specifies the minimum value for an input field
Specifies a regular expression to check the input value
pattern against
Specifies that an input field is read only (cannot be
readonly changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
Example:
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10"
value="30">
</form>

2. Input Type: date

The <input type="date"> is used for input fields that should contain a
date. Depending on browser support, a date picker can show up in the
input field.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
3. Input Type: color
The <input type="color"> is used for input fields that should contain a
color. Depending on browser support, a color picker can show up in the
input field.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

4. Input Type: range

The <input type="range"> is used for input fields that should contain a
value within a range. Depending on browser support, the input field can
be displayed as a slider control.
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>

5. Input Type: month

The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input
field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

6. Input Type: week

The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input
field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE
7. Input Type: time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input
field.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>

8. Input Type: datetime

The <input type="datetime"> allows the user to select a date and time
(with time zone).
Example
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>

9. Input Type: email

The <input type="email"> is used for input fields that should contain an
e-mail address.
Depending on browser support, the e-mail address can be automatically
validated when submitted.
Some smartphones recognize the email type, and adds ".com" to the
keyboard to match email input.
Example
<form>
E-mail:
<input type="email" name="email">
</form>
10. Input Type: search
The <input type="search"> is used for search fields (a search field
behaves like a regular text field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
11. Input Type: tel
The <input type="tel"> is used for input fields that should contain a
telephone number.
The tel type is currently supported only in Safari 8.
Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>

12. Input Type: url

The <input type="url"> is used for input fields that should contain a
URL address.
Depending on browser support, the url field can be automatically
validated when submitted
Some smartphones recognize the url type, and adds ".com" to the
keyboard to match url input.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>

1.11: HTML 5 SEMANTIC ELEMENTS

What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser
and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.

Below is a list of some of the semantic elements in HTML.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

Tag Description

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc.

<footer> Defines a footer for a document or section

<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

HTML5 offers new semantic elements to define different parts of a web

page:
 <article>
 <aside>
 <figcaption>
 <figure>
 <footer>
 <header>
 <nav>
 <section>
 <time>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

Example:
<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>...</title>
</head>

<body>

<header role="banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>

<nav>

<ul>
<li><a href="http://www.tutorialspoint.com/html">HTML
Tutorial</a></li>
<li><a href="http://www.tutorialspoint.com/css">CSS
Tutorial</a></li>
<li><a
href="http://www.tutorialspoint.com/javascript">JavaScript
Tutorial</a></li>
</ul>

</nav>

<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE
<aside>
<p>This is aside part of the web page</p>
</aside>

<footer>
<p>Created by <a href="http://tutorialspoint.com/">Tutorials
Point</a></p>
</footer>

</body>
</html>

1.12: HTML Drag and Drop API

 In HTML, any element can be dragged and dropped.

 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 Events
There are number of events which are fired during various stages
of the drag and drop operation. These events are listed below −
S.No Events & Description
Dragstart
1
Fires when the user starts dragging of the object.

Downloaded from EnggTree.com

 Dragenter EnggTree.com
Fired when the mouse is first moved over the target element while
a drag is occurring. A listener for this event should indicate
2
whether a drop is allowed over this location. If there are no
listeners, or the listeners perform no operations, then a drop is not
allowed by default.
Dragover
This event is fired as the mouse is moved over an element when a
3
drag is occurring. Much of the time, the operation that occurs
during a listener will be the same as the dragenter event.
Dragleave
This event is fired when the mouse leaves an element while a drag
4
is occurring. Listeners should remove any highlighting or insertion
markers used for drop feedback.
Drag
5 Fires every time the mouse is moved while the object is being
dragged.
Drop
The drop event is fired on the element where the drop was
6 occurred at the end of the drag operation. A listener would be
responsible for retrieving the data being dragged and inserting it at
the drop location.
Dragend
7 Fires when the user releases the mouse button while dragging an
object.
The DataTransfer Object
 The event listener methods for all the drag and drop events
accept Event object which has a readonly attribute
called dataTransfer.
 The event.dataTransfer returns DataTransfer object associated with
the event as follows −
function EnterHandler(event)
{ DataTransfer dt = event.dataTransfer;
.............
}

 The DataTransfer object holds data about the drag and drop
operation. This data can be retrieved and set in terms of various
attributes associated with DataTransfer object as explained below –

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web Technologies Unit – 1 V Semester CSE

S.No DataTransfer attributes and their description

1 dataTransfer.dropEffect [ = value ]
Returns the kind of operation that is currently selected.
This attribute can be set, to change the selected operation.
The possible values are none, copy, link, and move.
2 dataTransfer.effectAllowed [ = value
Returns the kinds of operations that are to be allowed.
This attribute can be set, to change the allowed operations.
The possible values are none, copy, copyLink, copyMove, link, linkMove,
move, all and uninitialized.
3 dataTransfer.types
Returns a DOMStringList listing the formats that were set in the
dragstart event. In addition, if any files are being dragged, then one of
the types will be the string "Files".
4 dataTransfer.clearData ( [ format ] )
Removes the data of the specified formats. Removes all data if the
argument is omitted.
5 dataTransfer.setData(format, data)
Adds the specified data.
6 data = dataTransfer.getData(format)
Returns the specified data. If there is no such data, returns the empty
string.
7 dataTransfer.files
Returns a FileList of the files being dragged, if any.
The example below is a simple drag and drop example:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev)
{ ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

Downloaded from EnggTree.com

CCS375-Web Technologies EnUgngitT– V Semester CSE
</script> r1ee.com
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

</div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(

event)" width="336" height="69">

</body>
</html>

 Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to
true:
<img draggable="true">

 What to Drag - ondragstart and setData()

 Then, specify what should happen when the element is dragged.
 In the example above, the ondragstart attribute calls a function,
drag(event), that specifies what data to be dragged.
 The dataTransfer.setData() method sets the data type and the value of
the dragged data:
function drag(ev)
{ ev.dataTransfer.setData("text", ev.target.id);
}
 In this case, the data type is "text" and the value is the id of the
draggable element ("drag1").

 Where to Drop - ondragover

 The ondragover event specifies where the dragged data can be dropped.
 By default, data/elements cannot be dropped in other elements. To
allow a drop, we must prevent the default handling of the element.
 This is done by calling the event.preventDefault() method for the
ondragover event:
event.preventDefault()

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 Do the Drop - ondrop
 When the dragged data is dropped, a drop event occurs.
 In the example above, the ondrop attribute calls a function,
drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Code explained:
 Call preventDefault() to prevent the browser default handling of the
data (default is open as link on drop)
 Get the dragged data with the dataTransfer.getData() method. This
method will return any data that was set to the same type in the
setData() method
 The dragged data is the id of the dragged element ("drag1")
 Append the dragged element into the drop element

1.13: Audio – Video controls

<audio> element:
The HTML5 <audio> element specifies a standard way to embed audio in
a web page. To play an audio file in HTML, use the <audio> element:

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 The controls attribute adds audio controls, like play, pause, and
volume.
 Text between the <audio> and </audio> tags will display in
browsers that do not support the <audio> element.
 Multiple <source> elements can link to different audio files. The
browser will use the first recognized format.

<video> element:
The HTML5 <video> element specifies a standard way to embed a video in
a web page. To show a video in HTML, use the <video> element:

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>

 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 browser does not know the size
of the video. The effect will be that the page will change (or flicker)
while the video loads.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

 Text between the <video> and </video> tags will only display in
browsers that do not support the <video> element.
 Multiple <source> elements can link to different video files. The
browser will use the first recognized format.

HTML <video> Autoplay

To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Definition:
Cascading Style Sheet (CSS) is a W3C technology that allows document
authors to specify the presentation of elements on a web page (e.g fonts, spacing,
colors) separately from the structure of the document (section headers, body, links).
This separation ofstructure from presentation simplifies maintaining and modifying
a web page.

FEATURES OF CASCADING STYLE SHEETS:

1. CSS allows separation between the information contained in the document and its
presentation. Hence any change in the presentation can be made without disturbing
the information of the document.
2. Style Sheets allow users to decide the style of presentation. This presentation style
can be defined in a separate file. Thus the presentation can be made persistent.
3. CSS allows the developer to give the consistent appearance to all the elements of
the web page.
4. CSS allows us to improve the consistent look and feel of a web site.
5. CSS provides precise control over font size, color, background color and so on.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

CSS CORE SYNTAX:

A CSS style sheet consists of one or more style rules (called statements). The collection
of all such rules is called Ruleset.
 Each ruleset consists of two parts: 1. Selector string 2. Declaration block
 Declaration Block contains a list of declarations separated by semicolon (;)
 Selector String indicates the elements to which the rule should apply and each declaration
within the declaration block specifies a value for one style property of those elements.
 Syntax:
<style type=”text/css”>

</style>
TYPES OF SELECTOR STRING:

1. Type Selector:
 It is the simplest form of selector string which consists of the name of a single element.
 A rule can also apply to multiple elements types separating the elements by using comma (,)
 Example:
h1, p {background-color:purple}

2. Universal Selector:
 It is denoted by an asterisk (*).
 A rule denoted by universal selector can be applied for every possible element in
the document.
 Example:
* {background-color:purple; font-weight:bold}
3. Id Selector:
 A selector preceded by a number sign (#) is called an ID selector.
 It represents an id value rather than an element type name.
 A rule defined by the ID selector can be applied to the element that matches with the
id attribute value with the ID selector string.
 Example:
<style type=”text/css”>
#myid {background-color:green}
</style>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
<p id=”myid”>
This is an ID selector
</p>

4. Class Selector:
 A selector preceded by a period or dot (.) is called an Class selector.
 It represents a generic value rather than an element type name.
 A rule defined by the class selector can be applied to the element that matches with the class
attribute value with the Class selector string.
 Example:
<style type=”text/css”>
.myclass {background-color:red}
</style>
<p class=”myclass”>
This is an class selector
</p>

Note: Class selectors can also be prefixed by an element name which restricts the selector
toelements of the specified type.

Example: h1.RedText { color:red; font-size:14pt; }

<h1 class=”RedText”> India is my country </h1> // style applied

<h1> I am very lucky </h1> // no style applied

5. Pseudo classes:
 Using pseudo-classes we can specify special effects on the selectors.
 There are some pseudo classes which are more commonly used and those
are: Focus
Hover
hyperlink
 General form of pseudo class and pseudo element:

Selector:pseudo-class { declaration

}The anchor pseudo classes:

Selector Description
a:visited Any element with href corresponding to a URL that has been visited
recently by the user.
a:link Defined for any link that is unvisited.
a:active Defined for any element that is being
a:hover clicked.
When the mouse is moved over the link, this pseudo class is applied.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
(@) Rules:
 The @import rule is used to import one style sheet file into another.
 Syntax:
@import url(“filename.css”);

 This rule will first read the rules form the specified file “filename.css” before continuing
with the other rule in the style sheet.
 @import rule must appear at the beginning of the style sheet before any ruleset statements
and it must end with semicolon (;).

Example: All types of Selector Strings

Links.css

a:hover {font-size:200%}
a:active {color:yellow}
a:visited {color:green}
mystyle.css
@import url("links.css");
li { font-size: 14pt; line-height: 25pt }
* { font-family: verdana }
.unorder { background-color:yellow }
#order { background-color:violet }
dl dd {color:blue}
lists.html
<!DOCTYPE html>
<html>
<head>
<title> List Example</title>
</head>
<link href="mystyle.css" rel="stylesheet" type="text/css">
<body >
<center>
<h1 color="green"> ABC ENGINEERING COLLEGE</h1>
</center>
<hr color="blue">
<ul id="order">
<li> U.G Courses
<ol class="unorder">
<li> B.E - CSE </li>
<li> B.E - ECE </li>
</ol>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

</li>
<li> P.G Courses
<ol class="unorder">
<li> M.E - CSE </li>
<li> M.E - SE </li>
<li> MBA </li>
<li> MCA </li>
</ol>
</li>
</ul>
<hr color="red">
<ul type="square">
<li>
<dl>
<dt> <a href="">CSE </a></dt>

<dl>
</dl>
</li>
</dl>
<li> </li>
<dl> </ul>
</body>
</html>
</dl>
</li>
<li> <dd> Software Engineering</dd>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

1.15: TYPES OF STYLE SHEETS

To add CSS styles to our website, we can use three different ways to insert the CSS.
Different types of style sheets:
1. Internal / Embedded Stylesheet
2. External Stylesheet
3. Inline Stylesheet

1. Internal / Embedded CSS Stylesheet:

 Internal style sheets are placed inside the <head> section of a particular web page via the
style tag. <style type=”text/css”>….</style>
 These styles can be used only for the web page in which they are embedded.
 This makes it easy to apply styles like classes or id's in order to reuse the code.
 The downside of using an internal style sheet is that changes to the internal style sheet
only effect the page the code is inserted into.
Example:
<head>
<style type="text/css">
h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style>
</head>

2. External CSS Stylesheet:

 An External Stylesheet is a separate file which is then linked to the web page.
 The external style sheet is basically a text file with the extension .css
 So that whatever you change in the .css sheet, will effect every page in your website. This
prevents you from having to make many code changes in each page. This is for "global"
site changes.
 We must link the external style sheet to the web page to use the styles defined in that file.
 Example:

<head>

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

</head>

Inline CSS Styles:

 The inline style uses the HTML "style" attribute.
 This allows CSS properties on a "per tag" basis.
 Inline style cannot be reused at all.
 This is not recommended, as every CSS change has to be made in every tag that has the

Downloaded from EnggTree.com

 EnggTree.com
inline style applied to it.
 The Inline style is good for an individual CSS change that you do not use repeatedly
through the site.
 The following is an example of how the inline style is used.
<p style="color:red;font-size:18px">This is a paragraph!</p>
 This inline style will change the color of the paragraph to red and make the font size 18
pixels.

Example:
Style1.css

.heading
{
font-family: Arial, Helvetica, sans-serif;
background-color:violet;
color:blue;
}

Style_types.html
<!DOCTYPE html>
<html>
<head>
<title>Types of Style Sheets</title>
<style type="text/css">
h1 { font-weight:bold; font-size:12px; color:red }
</style>
<link href="style1.css" type="text/css" rel="stylesheet">
</head>
<body bgcolor="pink">
<center>
<h2>TYPES OF STYLE SHEETS</h2>
<hr>
<p style="background-color:yellow;text-decoration:underline">
This is Inline Style Sheet
</p>
<hr>
<h1> This is Embedded / Internal Style Sheet</h1>
<hr>
<h1 class="heading">This is External Style Sheet</h1>
<hr>
</center>
</body>
</html>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
Output:

1.16: Conflicting Styles: Rule cascading and Style Inheritance

RULE CASCADING:
Consider the following declarations:
* { font-weight: bold } – this rule applies to every element of te HTML document.

#p1, #p3 { background-color:aqua } - both the rules are applied to to an element with id
attribute value p3 and p1.
If multiple rules apply to an element and these rules provide declarations for different properties,
then all of the declarations are applied to the element.

What will happen if multiple declarations that all apply to a single property of a single
element are available?
In order to choose between multiple declarations, the browser applies Rule Cascading. It
is a multi-stage sorting process that selects a single declaration that will supply the property
value.

Stages of the sorting process:

1. Deciding which external and embedded style sheet apply to the document.
2. Associating an origin and weight with every declaration that applies to given
property. The origin of the declaration is one of the following:
Author: Property defined by the author of the document is chosen.
User Agent: Default style property defined by the browser for all HTML elements.
User: Allows users to provide a style sheet or to indicate style preferences that are treated
as style rules.
3. Once the origin and weight of all declarations applying to an element property have been

Downloaded from EnggTree.com

CCS375-Web echnologies EnUgngitT– V Semester CSE
r1ee.com
4. established, they are prioritized 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
5. If the top non-empty bin of the weight-origin sort contains multiple style declarations,
then sort these declarations according to their Specificity.
1. If a declaration is part of the value of a style attribute of the element, then it is given
a highest specificity value.
2. If the declaration is part of the rule set, then its specificity is determined by
the selectors of the rule set.
Highest to lowest specificity for selectors:
1. ID selectors
2. class and pseudo-class selectors
3. Descendent and type selector
4. Universal selectors
5. The final step is applied if two or more declarations still have equally high weight-origin
ranking and specificity even after the last sorting process.
1. If there is a declaration in the style attribute for the element, then it is used.
2. Otherwise, all of the style sheet rules are listed in the order in which they are
processed in a top-to-bottom reading of the document.
The declaration corresponding to the rule that appear down in the list is chosen.
Example:
Style2.css
p {color:blue }
style1.css
@import url(“style2.css”);
P {color:green }

Mypage.html
<html>
<head>
<style type=”text/css”>
P {color:red }
</style>
<link rel=”stylesheet” type=”text/css” href=”style1.css”>
<style type=”text/css”>
P {color: yellow}
</style>
</head>
In the above example, we find multiple declarations for the same property that all apply to the
same element.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
Apply Rule Cascading to choose the declaration. Since all the declarations are having same
weight-origin and specificity, the style rule sets are ordered as follows,

p {color:red }
p {color:blue
}
p {color:green }
p {color: yellow} This declaration is selected and the text will be
displayed in yellow color.
STYLE INHERITANCE:
 Rule Cascading is based on the structure of the style sheets.
 Inheritance is based on the tree structure of the document.
 If a value for a style option has not been specified for an element, the element will inherit
the style property form its parent.
 If the parent element does not specify the style rule, it inherits from the grand parent and
so on up to the top-level element (either <html> tag or the element with style property).
Inherited style can be overridden by declaring specific style to the child.

Example:

<!DOCTYPE html >

<html>
<head> <title>Rule Inheritance </title>
<style type="text/css">
body { font-weight:bold; color:red }
li {font-style:italic}
p {font-size:larger; color:green} // overridden rule
span {font-weight:normal; color:blue} // overridden rule
</style>
</head>
<body>

<ul> // li inherits bold font-weight from its parent (<body>) element

<li> List item outside and <span> Inside </span> a span.
// p inherits italization from li
<p> Embedded paragraph outside and <span> Inside </span> a span. </p>
</li>
</ul>
</body>
</html>

Downloaded from EnggTree.com

 EnggTree.com
Output:

1.17: CSS Backgrounds

CSS background properties are used to define the background effects of an element.

CSS background properties:

Property Description
Sets all the background properties in one declaration.
background Example:

p { background: #fffff url(“img”) no-repeat fixed right top }

Sets whether a background image is fixed or scrolls with the rest
background-attachment
of
the page. Values: fixed | scroll
Sets the background color of an element. Values:
With CSS, a color is most often specified by:
background-color  a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"
background-image Sets the background image for an element. Values: None | url(“”)
Sets the starting position of a background image.
background-position Values: left, right, top, bottom, center
Sets how a background image will be repeated.
background-repeat Values: repeat-x | repeat-y | norepeat.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Backgound</title>
<style type="text/css">

p{
background-color:#99FF99;
background-attachment:fixed;

Downloaded from EnggTree.com

 EnggTree.com
background-image:url(flower2.jpg);
background-position:right;
background-repeat:repeat-y;
height:200px }
div {
background:#FFFF99 url(flower1.jpg) center repeat-x scroll;
height:150px;

}
</style>
</head>
<body>
<center> <h1> CSS Backgorund Property</h1>
<p> This paragraph contains a beatiful background image. </p>
<div>ABCD EFG.... HIJK LMNOP... QRSTUVW.....UVW
XYZ.</div>
</body> </center>
</html>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

1.18: CSS Borders and Border Images

 CSS BORDER PROPERTIES:
 The CSS border properties allow you to specify the style, size, and color of an element's
border.
 The top, right, bottom, and left margin can be changed independently using separate
properties.
Border Style: The border-style property specifies what kind of border to display.
Border-style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-
width value
groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value inset:

Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value

Border Width: The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
Border Color:
The border-color property is used to set the color of the border. The color can be set by:
 name - specify a color name, like "red"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 Hex - specify a hex value, like "#ff0000"

The border-style property can have from one to four values.

 border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

 border-style: dotted solid double;

o top border is dotted
o right and left borders are solid
o bottom border is double

 border-style: dotted solid;

o top and bottom borders are dotted
o right and left borders are solid

 border-style: dotted;
o all four borders are dotted

Border - Shorthand property:

To shorten the code, it is also possible to specify all the individual border properties in one
property. This is called a shorthand property.
The border property is shorthand for the following individual border properties:
 border-width
 border-style (required)
 border-color

Example:
p{
border: 5px solid red;
}

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

Example [CSS Border Properties]:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}

p.round1 {
border: 2px solid red;
border-radius: 5px;
}

p.round2 {
border: 2px solid red;
border-radius: 8px;
}

p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>

<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>

<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
</body>
</html>

 CSS BORDER IMAGES:

The CSS border-image property allows us to specify an image to be used instead of

the normal border around an element.
The property has three parts:
1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched
 The border-image property takes the image and slices it into nine sections, like a tic-tac-
toe board. It then places the corners at the corners, and the middle sections are repeated
or stretched as you specify.
 Note: For border-image to work, the element also needs the border property set!
 Example:
<style>
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>

 Tip: The border-image property is actually a shorthand property for the following
properties:
o border-image-source,
o border-image-slice,
o border-image-width,

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
o border-image-outset and
o border-image-repeat

Border Image Properties

Property Description

border-image A shorthand property for setting all the border-image-* properties

border-image-source Specifies the path to the image to be used as a border

border-image-slice Specifies how to slice the border image

border-image-width Specifies the widths of the border image

border-image-outset Specifies the amount by which the border image area extends
beyond the border box

border-image-repeat Specifies whether the border image should be repeated, rounded or

stretched

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(grid.png) 20%
repeat; background-color:yellow
}

#borderimg2 {
border: 50px solid transparent;
padding: 15px;
border-image: url(rose.jpg) 20% repeat;
color:blue;
font-size:25px
}

#borderimg3 {

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
border: 10px solid transparent;
padding: 15px;
border-image: url(rose.jpg) 30% round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p id="borderimg1">This is the yellow background with Border Image</p>

<p id="borderimg2">border-image: url(rose.jpg) 20% round;</p>
<p id="borderimg3">border-image: url(rose.jpg) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do

not support the border-image property.</p>

</body>
</html>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies UnitCSS
1.19: – 1 Colors V Semester CSE

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

 CSS Color Names

In CSS, a color can be specified by using a predefined color name:

1. Tomato
2. Orange
3. DodgerBlue
4. MediumSeaGreen
5. Gray
6. SlateBlue
7. Violet
8. LightGray

 Setting Background Color:

Use background-color property to set the background color for any element

 Setting Text Color:

Use color property to set the color of element’s text.

 Setting Border Color:

Use border-color property to set the border color of an element.
Example:

CSS Color Values

1) RGB Colors
 An RGB color value represents RED, GREEN, and BLUE light sources.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 RGB Value
 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).

2) HEX Colors
 A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
BB (blue) hexadecimal integers specify the components of the color.

 HEX Value
 In CSS, a color can be specified using a hexadecimal value in the form:
#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).

3) HSL Colors
 HSL stands for hue, saturation, and lightness.
 HSL Value
 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
 Saturation
 Saturation can be described as the intensity of a color.
 100% is pure color, no shades of gray
 50% is 50% gray, but you can still see the color.
 0% is completely gray, you can no longer see the color.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 Lightness
 The lightness of a color can be described as how much light you want to give the color,
where 0% means no light (black), 50% means 50% light (neither dark nor light) 100%
means full lightness (white).

1.20: CSS Shadows

With CSS you can add shadow to text and to elements with the help of the following properties:
1. text-shadow
2. box-shadow

1. Text Shadow
 The CSS text-shadow property applies shadow to text.
 In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px).

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list of
shadows.
The following example shows a red and blue neon glow shadow:

2. box-shadow
 The CSS box-shadow property applies shadow to elements.
 In its simplest use, you only specify the horizontal shadow and the vertical
shadow.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

1.21: CSS Text and Font Properties

ALL CSS TEXT PROPERTIES:

Property Description
Sets the color of text. Values: HEX value (#ff0000), RGB value (rgb(255,0,0)),
color color name (“red”)
direction Specifies the text direction/writing direction. Values: ltr | rtl
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text. Values: center, justify
Specifies the decoration added to text. Values: none, overline, underline,
text-decoration line-through
text-indent Specifies the indentation of the first line in a text-block. Value: point in
pixel text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text. Values: uppercase, lowercase,
capitalize vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a
text

Example:
<!DOCTYPE html>
<html>
<head>
<title> CSS Text Properties</title>
<style type="text/css">

p.test1 {
color:green;
text-align:center;
text-decoration:underline;
text-indent::10pt;
text-shadow:red;
text-transform:capitalize;
direction:rtl;
letter-spacing:5px;
}

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

</style>
</head>
<body>
<center><h1>CSS Text Properties</h1></center>
<p class="test1">abcd efgh ijkl mnop qrst uvw xyz</p>
</body>
</html>

CSS3 TEXT PROPERTIES:

CSS3 contains several new text features.
 text-overflow
 word-wrap
 word-break

Text Overflow:
The CSS3 text-overflow property specifies how overflowed content that is not displayed
should be signaled to the user.

Word Wrapping:
The CSS3 word-wrap property allows long words to be able to be broken and wrap onto
the next line. If a word is too long to fit within an area, it expands outside.
Word Breaking:
The CSS3 word-break property specifies line breaking rules.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width: 140px;
border: 1px solid
#ff00ff; word-break:
keep-all;

p.test2 {
width: 140px;
border: 1px solid #00ff00;
word-break: break-all;
Downloaded from EnggTree.com
 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
}
p.test3 {
white-space:nowrap;
width: 140px;
border: 1px solid #0000ff;
overflow:hidden;
text-overflow:clip;
}
p.test4 {

width: 140px;
border: 1px solid
#f0f0f0; word-
wrap:break-word;
}
</style>
</head>
<body>

<p class="test1">This paragraph-contains some text. This line will-break-at-hyphens.</p>

<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
<p class="test3">This paragraph contains some text. The lines will be clipped.</p>
<p class="test4">This paragraph contains some text. The lines will break at any character.</p>
</p>

</body>
</html>

CSS FONT PROPERTIES:

CSS Font Families:

In CSS, there are two types of font family names:

 generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")

Generic family Font family Description

Times New Serif fonts have small lines at the ends on some
Serif
Roman characters
Georgia
Sans-serif Arial "Sans" means without - these fonts do not have the
lines at the ends of characters
Verdana
Downloaded from EnggTree.com
 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

Monospace Courier All monospace characters have the same width

New
Lucida Console

All CSS Font Properties:

Property Description

font Sets all the font properties in one declaration.

Example: p {font: italic bold 12pt “Helvetica”,Sans-serif}

font-family Specifies the font family for text.

Example:
p{
font-family: "Times New Roman", Times, serif;
}

font-size Sets the size of the font.

Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad
for accessibility reasons)
 Absolute size is useful when the physical size of the output is
known Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in
browsers h1 {
font-size: 40px;
}

font-style Specifies the font style for text.

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)
 Example:
p.italic {
font-style: italic;
}

font-variant Specifies whether or not a text should be displayed in a small-caps font.

font-weight Specifies the weight of a font.

Example:
<html>
Downloaded from EnggTree.com
 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
<head>
<title>CSS Font Properties</title>
<style type="text/css">

p{
font-size:50px;
font-variant:small-caps;
font-family:Arial;
font-weight:bold;
font-style:italic;
color:green;
}

h1 { font:italic small-caps normal 45px/150% Arial, Helvetica, sans-serif;

color:blue;
background-color:yellow;
}
</style>
</head>
<body>
<center> <p> This paragraph is designed by CSS font properties</p>
<h1> This heading is styled heading</h1>
</center>
</body>
</html>

CSS3 Web Fonts - The @font-face Rule:

 Web fonts allow Web designers to use fonts that are not installed on the user's computer.
 When you have found/bought the font you wish to use, just include the font file on your
web server, and it will be automatically downloaded to the user when needed.
 Your "own" fonts are defined within the CSS3 @font-face rule.
 Different Font Formats:
 TrueType Fonts (TTF)

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 OpenType Fonts (OTF)
 The Web Open Font Format (WOFF)
 The Web Open Font Format (WOFF 2.0)
 SVG Fonts/Shapes
 Embedded OpenType Fonts (EOT)

 In the CSS3 @font-face rule you must first define a name for the font (e.g. myFirstFont),
and then point to the font file.
 To use the font for an HTML element, refer to the name of the font (myFirstFont)
through the font-family property:

Example:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
font-family: myFirstFont;
}

<div>
This is an example for web fonts
</div>

1.22: CSS Transformation

CSS3 supports transform property. This transform property facilitates you to translate, rotate,
scale, and skews elements.
Transformation is an effect that is used to change shape, size and position.
There are two type of transformation i.e. 2D and 3D transformation supported in CSS3.

CSS Transform Properties

The following table lists all the 2D transform properties:
Property Description

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements. It allows you
to specify the location origin of the transform. By default, the origin is in
the center of the element.
For example, if you are using the transform: rotate property but want it to

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
rotate not from the center, but from the top left corner, you’d use the value
0% 0% or left top. For the bottom right corner, you would use 0% 100% or
right bottom, etc.
Example:
div {
transform-origin: left top;
transition: transform 1s;
}

div:hover {
transform: rotate(720deg);
}

CSS 2D Transforms
The CSS 2D transforms are used to re-change the structure of the element
as translate, rotate, scale and skew etc.

Following is a list of 2D transforms methods:

Function Description

matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values

translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-
axis

translateX(n) Defines a 2D translation, moving the element along the X-axis

translateY(n) Defines a 2D translation, moving the element along the Y-axis

scale(x,y) Defines a 2D scale transformation, changing the elements width and

height

scaleX(n) Defines a 2D scale transformation, changing the element's width

scaleY(n) Defines a 2D scale transformation, changing the element's height

rotate(angle) Defines a 2D rotation, the angle is specified in the parameter

skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis

skewX(angle) Defines a 2D skew transformation along the X-axis

skewY(angle) Defines a 2D skew transformation along the Y-axis

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

 The scale value allows you to increase or decrease the size of an element.
 For example, the value 2 would transform the size to be 2 times its original size. The
value 0.5 would transform the size to be half its original size.
 You can scale an element by setting parameters for the width (X-axis) or height (Y-
axis). For example, transform: scaleX(2).
 Or, use the scale() shorthand to scale both axes at the same time: transform: scale(2);.
Or define them independently of each other: transform: scale(2, 4);

<!DOCTYPE html>
<html>
<head>
<style>
.square {
background:
darkturquoise; border-
radius: 5px;
height: 100px;
margin: 100px;
width: 100px;
}
.square:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="square">
</div>
</body>
</html>

2. rotate
 With the rotate value, the element rotates clockwise or counterclockwise
by a specified number of degrees.
 A positive value, such as 90deg, rotates the element clockwise, while a
negative value, such as -90deg, rotates it counterclockwise.
 You can rotate more than a full rotation with numbers over than 360, such as
1080deg, for three full rotations.
<!DOCTYPE html>
<html>
<head>

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
<style>
.square {
background: red;
transition: all 3s;
height: 100px;
margin: 100px;
width: 100px;
}
.square:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="square">
</div>
</body>
</html>

3. Translate
 The translate value moves an element left/right and up/down. The
movement is based on the parameters given for the X (horizontal) Y
(vertical) axes.
 A positive X value moves the element to the right, while a negative X moves
the element to the left. A positive Y value moves the element downwards and a
negative Y value, upwards.
 In this example, the element will move 20 pixels to the right and 20 pixels
down.
<!DOCTYPE html>
<html>
<head>
<style>
.square2 {
background: #FA54DE;
transition: 2s;
height: 100px;
margin: 100px;
width: 100px;
position:absolute;

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
}

.square2:hover{
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div class="square2">
</div>
</body>
</html>

4. Skew
 With the skew value, the element skews (or tilts) one direction or the other
based on the values given for the X and Y axes.
 A positive X value tilts the element left, while a negative X value tilts it right.
 A positive Y value tilts the element down, and a negative Y value tilts is up. Or
use a shorthand to include both X and Y properties:

CSS syntax examples for skew

div {
transform: skewX(25deg);
transform: skewY(10deg);
transform: skew(25deg, 10deg);
}
div {
transition: transform 1s;
}

div:hover {
transform: skewX(-20px);
}

5. Matrix
 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())

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE

Example
div {
transform: matrix(1,2,3,4,5,6);
}

CSS 3D Transforms

CSS also supports 3D transformations.

Transform Properties
The following table lists all the 3D transform properties:

Property Description

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements

transform-style Specifies how nested elements are rendered in 3D space

perspective Specifies the perspective on how 3D elements are viewed

perspective-origin Specifies the bottom position of 3D elements

backface-visibility Defines whether or not an element should be visible when not facing the
screen

3D Transform Methods

Function Description

matrix3d Defines a 3D transformation, using a 4x4 matrix of 16 values

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate3d(x,y,z) Defines a 3D translation

translateX(x) Defines a 3D translation, using only the value for the X-axis

translateY(y) Defines a 3D translation, using only the value for the Y-axis

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
translateZ(z) Defines a 3D translation, using only the value for the Z-axis

scale3d(x,y,z) Defines a 3D scale transformation

scaleX(x) Defines a 3D scale transformation by giving a value for the X-

axis

scaleY(y) Defines a 3D scale transformation by giving a value for the Y-

axis

scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-

axis

rotate3d(x,y,z,angle) Defines a 3D rotation

rotateX(angle) Defines a 3D rotation along the X-axis

rotateY(angle) Defines a 3D rotation along the Y-axis

rotateZ(angle) Defines a 3D rotation along the Z-axis

perspective(n) Defines a perspective view for a 3D transformed element

1.23: CSS Transitions

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

Transition properties:

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function

The following table lists all the CSS transition properties:

Property Description Syntax

transition A shorthand property for setting the transition: property

four transition properties into a single duration
property timing-function delay|initial|
inherit;

transition- Specifies a delay (in seconds) for the transition-

delay transition effect delay: time|initial|inherit;

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
transition- Specifies how many seconds or transition-
duration milliseconds a transition effect takes to duration: time|initial|inherit;
complete

transition- Specifies the name of the CSS property transition-property: none|all|

property the transition effect is for property|initial|inherit;

transition- transition-timing-function:
timing- linear|ease|ease-in|ease-out|
Specifies the speed curve of the
function ease- in-out|step-start|step-
transition effect
end|steps(int,start|end)|cubic-
bezier(n,n,n,n)|initial|
inherit;

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

1. the CSS property you want to add an effect to

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

The following example shows a 100px * 100px red <div> element. The <div> element has also
specified a transition effect for the width property, with duration of 2 seconds:

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

The transition effect will start when the specified CSS property (width) changes value.
Now, let us specify a new value for the width property when a user mouses over the <div>
element:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Notice that when the cursor mouses out of the element, it will gradually change
back to its original style.

Specify the Speed Curve of the Transition

 The transition-timing-function property specifies the speed curve of the transition effect.
 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
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

<!DOCTYPE html>
<html>
<head>
<style>
div {

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

#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:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>

</body>
</html>

Delay the Transition Effect

 The transition-delay property specifies a delay (in seconds) for the transition effect.
 The following example has a 1 second delay before starting:

Example

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
div {
transition-delay: 1s;
}

Transition + Transformation

The following example adds a transition effect to the transformation:

Example
div {
transition: width 2s, height 2s, transform 2s;
}

More Transition Examples

The CSS transition properties can be specified one by one, like this:

Example
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

or by using the shorthand property transition:

Example
div {
transition: width 2s linear 1s;
}

1.24: CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to
another.

Animations consist of two components,

1. a style describing the CSS animation and

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
2. a set of keyframes that indicate the start and end states of the animation’s style, as well as
possible intermediate waypoints.

There are three key advantages to CSS animations over traditional script-driven animation
techniques:

 They’re easy to use for simple animations; you can create them without even having to
know JavaScript.
 The animations run well, even under moderate system load. Simple animations can often
perform poorly in JavaScript. The rendering engine can use frame-skipping and other
techniques to keep the performance as smooth as possible.
 Letting the browser control the animation sequence lets the browser optimize
performance and efficiency by, for example, reducing the update frequency of animations
running in tabs that aren't currently visible.

Configuring the animation

 To create a CSS animation sequence, you style the element you want to animate with the
animation property or its sub-properties.
 This lets you configure the timing, duration, and other details of how the animation
sequence should progress.
 This does not configure the actual appearance of the animation, which is done using the
@keyframes at-rule as described in Defining the animation sequence using keyframes
below.

The animation property is a shorthand property for:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

The sub-properties of the animation property are:

Value Description Syntax

animation- Specifies the name of the keyframe you animation-name: keyframename|none|initial|

name want to bind to the selector inherit;

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
animation- Specifies how many seconds or animation-duration: time|initial|inherit;
duration milliseconds an animation takes to
complete

animation- animation-timing-function: linear|ease|ease-

timing- in|ease-out|ease-in-out|step-start|step- end|
Specifies the speed curve of the animation
function steps(int,start|end)|cubic- bezier(n,n,n,n)|
initial|inherit;

animation- Specifies a delay before the animation animation-delay: time|initial|inherit;

delay will start

animation- animation-iteration-count: number|infinite|

Specifies how many times an animation
iteration- initial|inherit;
should be played
count

animation- animation-direction: normal|

Specifies whether or not the animation
direction reverse|alternate|alternate-
should play in reverse on alternate cycles
reverse|initial|inherit;

animation-fill- Specifies what values are applied by the animation-fill-mode: none|forwards|

mode animation outside the time it is executing backwards|both|initial|inherit;

animation- Specifies whether the animation is animation-play-state: paused|running|initial|

play-state running or paused inherit;

initial Sets this property to its default value. property: initial;

inherit Inherits this property from its parent property: inherit;

element.

Defining the animation sequence using keyframes

 Once you’ve configured the animation’s timing, you need to define the appearance of the
animation. This is done by establishing two or more keyframes using the @keyframes
at-rule.
o Each keyframe describes how the animated element should render at a given time
during the animation sequence.
 Since the timing of the animation is defined in the CSS style that configures the
animation, keyframes use a <percentage> to indicate the time during the animation
sequence at which they take place.
o 0% indicates the first moment of the animation sequence, while 100% indicates
the final state of the animation.
 Because these two times are so important, they have special aliases: from and to. Both are
optional.
o If from/0% or to/100% is not specified, the browser starts or finishes the
animation using the computed values of all attributes.

Downloaded from EnggTree.com

 EnggTree.com
CCS375-Web echnologies Unit – 1 V Semester CSE
 You can optionally include additional keyframes that
describe intermediate steps between the start and end of the
animation.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
w
i
d
t
h
:

1
0
0
p
x
;

h
e
i
g
h
t
:

1
0
0
p
x
;
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:

r
e
d
;

p
o
s
i
t
i
o
n
:

r
e
l
a
t
i
v
e
;

a
n
i
m
a
t
i
o
n
-
n
a
m
e
:
 e
x
a
m
p
l
e
;

a
n
i
m
a
t
i
o
n
-
d
u
r
a
t
i
o
n
:

4
s
;
animation-iteration-count:infinite;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-
color:yellow;
left:200px; top:0px;}
50% {background-
color:blue; left:200px;
top:200px;} 75%
{background-
color:green; left:0px;
top:200px;} 100%
{background-color:red;
left:0px; top:0px;}
}
<
/
s
t
y
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>

<p><b>Note:</b> This is a moving square animation</p>

<div></div>

</body>
</html>