Web Technology 1-1 Web Site Basics

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

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 What is Web Technology?

 Web technology is a technology that acts as an interface between web client and
web server. It includes markup languages, programming interfaces, online
presentation tools, Java applets, video editing tools and so on.
 The commonly used client side scripting languages are HTML, JavaScript, CSS,
XML and so on.
 The commonly used server side technologies are ASP, JSP, Java Servlets, PHP and so
on.

1 . 1 . 1 Concept of Internet

Definition : Internet is global system in which millions of computers are

connected together. It is basically a network of networks.

 Using internet many people can share resources and can communicate with each
other. To have internet service one must go to the service providers. That
means your computer must be connected to the Internet Service Providers (ISP)
through phone-line modem or DSL.
Web Technology 1-2 Web Site Basics
 There are some privately owned internet service providers from which we can
hire the internet services.

1.1.2 Concept of World Wide Web

Definition : World Wide Web (WWW) is collections of software and
corresponding protocols used to access the resources over the network.

 The world wide web is a information system in which various documents

containing information are interlinked together. User can access this
information or write the information via computers. This information is
typically stored on the web pages and through web browsers we can access
these web pages.
 The web pages may contain the information in the form of text, audio, video,
images and graphics. We can navigate between the web pages using hyperlinks.

1.1.3 Internet or WWW?

 The term internet and WWW is often used interchangeably, but these are two different
terms.

 The internet is collection of computers and other devices (such as printers,

scanners etc.) connected together whereas World Wide Web (WWW) is
collection of software and corresponding protocols used to access the resources
over the network.
 The world wide web contains huge amount of documents, images and other
resources which can be accessed using the hyperlinks.
 Thus people use internet through the Web.
Web Technology 1-3 Web Site Basics

1.3 HTTP Request and Response Message

AU : June-09, May-12, 13,14, Dec.-12, 13, Marks 8

 The basic feature of HTTP protocol is that it follows the request response model.
 The client makes a request for desired web page by giving the URL in the address
bar. This request is submitted to the web server and then web server gives the
response to the web browser by returning the required web page.

1. HTTP Request Message Structure

The basic structure of request message is given by following general form -

<Start line>

<Header fields>

<Blank Line>

<Message Body>

<start Line>

The start line consists of three parts which are separated by a single space.

These parts are -

i) Request method ii) Request-URI iii) HTTP version

(i) Request Method : Various methods used for making the request are enlisted in
the following table
HTTP Description
method

GET The GET method is used to retrieve information from a

specified URI and is assumed to be a safe, repeatable operation
by browsers.

POST The POST method is used to request the server for desired web
page and the request made is accepted as a new subordinate of
the resource identified.

HEAD The meta-information contained in the HTTP headers in

response to a HEAD request should be similar to the
information sent in response to a GET reque

PUT This method uploads a representation of the specified resource.

DELETE This method is useful in deleting the specified resource.

(ii) Request-URI:

 The Uniform Resource Identifier (URI) is a string used to identify the names
or resources on the Internet.
 The URI is a combination of URL and URN.

 The URL stands for Uniform Resource Locator and URN stands for
Uniform Resource Name.
 The web address denotes the URL and specific name of the place or a
person or itemdenotes the URN.

 If the URI is written in the form of http: then it is both an URI and URL but
there are some other URI which can also be used as URL.

For example
 URL Intended server

ftp://ftp.mywebsite.com/index.txt File can be located on FTP server

telnet://mywebsite.org Telnet server

mailto:[email protected] Mail box

http://www.mywebsite.com Web server

(iii) HTTP Version : The first HTTP version was HTTP/0.9 but the official version of
HTTP was HTTP/1.1
<Header Field> and <Message Body>

 The host header filed is associated with the http request.

 The header fields are in the form of field name and field value.

 Thus typical structure of http request is given be following example -

Fig. 1.3.1 HTTP request message structure

2. HTTP Response Message Structure

<Status line>

<Header fields>

<Blank Line>

<Message Body>

The basic structure of response message is given by following general form -

<Status Line>

Status line is similar to the start line in the request message. It consists of three fields.

HTTP Status reason

version code phrase

The HTTP version denotes the HTTP version such as HTTP/1.1. The status code is
a numeric code indicating the type of response. The reason phrase is in the text string
form and presents the information about the status code.

For example -

Following table explains some commonly used status codes.

 Status Reason Descripti
code phrase on

200 OK This is a standard response for successful request.

201 Created It shows that the request is fulfilled and a new

resource is being created.

202 Accepted When the request is accepted for processing but is

not processed yet is denoted by this status code.

301 Moved The URI for requested resource is moved at

permanently some another location.

401 Unauthorized The requested resource is protected by some

password and the user has not provided any
password.

403 Forbidden The requested resource is present on the server but

the server is not able to respond it.

404 Not Found The requested resource is not present currently but
may be available in future.

500 Internal It is a generic error message that appears due

Server to software internal failure.
Error

<Header Fields>

The header field in response message is similar to that of request message.

<Message Body>

The message body consists of response

message.
For example
HTTP/1.1 200 OK
Date: Sat, 30 Mar 2019 07:59:01 GMT
Server: Apache/2.0.50 (Unix) mod_perl/1.99_10
Perl/v5.8.4 mod_ssl/2.0.50 OpenSSL/0.9.7d DAV/2
PHP/4.3.8
Last-Modified: Mon, 23 Feb 2009 08:32:41 GMT
Accept-Ranges: bytes
Content-Length: 2010
Content-Type: text/html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>...</html>

The response header fields are enlisted in following table

Header field Description

Date It represents the date and time at which the response is generated.

Server The name of the server which is responding

Last- The date and time at which the response is last modified.
Modified

Accept- It specifies the unit which is used by the client to accept the range

ranges request. For example if there is a large document and only a

single web page is currently needed then this specifies the
Accept-range.
1.4 Features of HTTP Protocol

1. It is a communication protocol used between web browser and web server.

2. This protocol is based on request-response messaging. That means client makes

the request of desired web page and then the server responds it by sending the
requested resource.
3. It is a stateless protocol. That means HTTP protocol can not remember the
previous user’s information nor it remembers the number of times the user has
visited particular website.
4. The request-response message consists of plain text in fairly readable form.

5. The HTTP protocol has a cache control. This is an advanced feature of HTTP.
Most of the web browsers automatically store(Cache) the recently visited web
pages. This is very useful feature because if the user requests the same web page
that has been visited already then it can be displayed from the cache memory
instead of requesting the web server and bringing it from there.

1.5 Web Clients AU : Dec.-11, Marks 8

 Web client is a kind of software that runs on the clients machine.

 This software sends the HTTP request to the server and then processes the HTTP
response.

 Various forms of web client software are -

o Web browsers

o Browsers running on mobile phones

o Software robots which crawl on the web for retrieving the information

o User agents which assists the user in browsing the web.

 Web browser is a kind of software which is basically used to use resources on the
web.
 Over the networks, two computers communicate with each other. In this
communication, when request is made by one computer then that computer is
called a client and when the request gets served by another computer then that
computer is called server. Thus exchange of information takes place via Client-
Server communication.
 When user wants some web document then he makes the request for it using the web
browser.

 The browsers are the programs that are running on the clients’ machines. The
request then gets served by the server and the requested page is then returned to
the client. It is getting displayed to the client on the web browser.

 The commonly used web browsers are (i) Internet explorer (ii) Mozilla Firefox
(iii) Netscape Navigator (iv) Opera (v) Google Chrome (vi) Safari.

 Web browser supports variety of protocols but the most commonly used protocol
on the web browser is Hyper Text Transfer Protocol(HTTP). This protocol is
typically used when browser communicates with the server.
1.5.1 Functions Defined by Web Browser

Various functions of web browser are -

1. Reformats the URL and send a valid HTTP request.

2. When user gives the address of particular web site it is in the form of domain
name. The web browser coverts the DNS to corresponding IP address.
3. The web browser establishes a TCP connection with the Web browser while
processing the user’s request.
4. The web browsers send the HTTP request to the web server.

5. The web server processes the HTTP request sent by the web browser and returns
the desired web page to the client machine. The web browser on the client’s
machine displays this web page in appropriate format.

1.5.2 URL

 The Uniform Resource Locator (URL) is unique address for the file that has to be
accessed over the internet.
 When we want to access some website we enter it’s URL in the address bar of the web
browser.

 For example if we want to access www.google.com then we must specify its

URL

 in the address bar as shown

  However any other file such as some text file or image file or some HTML file can
also be specified. The URL contains name of the protocol such as http://

 The protocol identifier and the resource name are separated by a colon and two
forward slashes. The syntax of writing URL is as given below,
protocol://username@hostname/path/filename

 Sometimes instead of domain name servers IP addresses can also be use. For example,

http://192.168.0.1

 But use of IP address as URL is not preferred because human can not remember
numbers veryeasily but they can remember names easily.

Absolute and Relative URL

 The absolute URL is a URL which directly point to a file. It exactly specifies
exact location of a file or directory on the internet. Each absolute URL is unique.
For example - http://www.vtubooks.com/home.aspx
 The relative URL points to the file or a directory in relation to the present
directory. For example
 Consider the absolute address which refers an image mother.jpg

http://www.mywebsite.com/myphotos/mother.jpg

 For the above given absolute address the relative address will be -

../myphotos/mother.jpg

 That means from the current URL the directory myphotos will be searched for
the image mother.jpg. The two peroids .. instruct the server to move up one
directory which is the root directory, then enter myphotos directory (/myphotos)
and finally point at mother.jpg. Thus using relative URL writing of long path
name can be avoided.
 1.6 Web Server AU : May-10,12,13 , Marks 12

 Web server is a special type of server to which the web browser submits the
request of web page which is desired by the client.
 There are some popularly used web servers such as Apache and IIS from Microsoft.

Functions of web server

Various functions of web server are -

1. The web servers accepts the requests from the web browsers.

2. The user request is processed by the web server.

3. The web servers respond to the users by providing the services which they
demand for over the web browsers.
4. The web servers serve the web based applications.

5. The DNS translate the domain names into the IP addresses.

6. The servers verify given address exists, find necessary files ,run appropriate
scripts exchange cookies if necessary and returns back to the browser.
7. Some servers actively participate in session handling techniques.

Following are some differences between Apache and IIS servers

Sr. No. Apache web server IIS web server

1. Apache web server is useful IIS web server is used on Windows

on both Unix based systems platform.
and on Windows
platform.

2. It is an open source product. It is a vendor specific product

and can be used on windows
products only.
 1.7 Client, Sever and Communication

In this architecture, there are 3 components.

1) Client PC or Web client

2) An application server or web server

3) A database server.
Working
Step 1 : The client PC or web client submits the request for desired web page to
the web server.

Step 2 : The work of server is distributed among application server and database
servers.

Application server possess the required communication functions.

Step 3 : The data required by this business logic is present on database server. The
required data is returned to application servers

Step 4 : The web server or application server prepares the response page and

sends it to the web client.

Fig. 1.7.1 Client Server Communication

Advantages :

1. High performance and persistent objects take part in communication.

2. This architecture is scalable. That means it can support increased number of users
and resources.
3. High degree of flexibility in deployment platform and configurations.

4. Code/data reusability can be achieved.

5. Improved data integrity

6. Improved security as clients can not directly access the database.

7. The maintenance and modifications can be done effectively without disturbing

other modules in the architecture.

Disadvantages :

1. The complexity gets increased.

2. Cost for network maintenance and deployment is increased.

Web Technology 2 - 16 HTML

2.1 Markup Languages : XHTML AU : Dec.-11, Marks 4

 XHTML stands for EXtensible HyperText Markup Language

 The XHTML syntax rules are specified by the file xhtml11.dtd file. Hence
specify the name ofthis file at the beginning of XHTML script.

Difference between HTML and XHTML

Sr. HTML XHTML

No.

1 The HTML tags are case The XHTML is case sensitive and all the tags in
. insensitive. Hence <body> or XHTML document must be written in lower
<BODY> or <Body> are case.
treated as one and the same.

2 We can omit the closing tags For every tag there must be a closing tag.
. sometimes in HTML Some browsers get confused if the closing tag is
document. not given. There are two ways by which we can
mention the closing tags
<a href =”TajMahal.html”>
</a> or
<a href=”Tajmahal.html”/>

3 In HTML the attribute In every XHTML document the attribute

. values it not always values must be quoted.
necessary to quote the
attribute values.

4 In HTML there are some In every XHTML the attribute values

. implicit attribute values. must be specified explicitly.

Web Technology 2 - 17 HTML

5 In HTML even if we do not In XHTML document the nesting rules

. follow the nesting rules must be strictly followed. These nesting
strictly it does not cause rules are-
much difference. A form element can not contain another
formelement.
An anchor element does not contain another
formelement.
List element can not be nested in the list
elements.
If there are two nested elements then the
inner element must be enclosed first before
closing the outer element.

Text elements can not be directly nested in form

elements.

2.2 Introduction to HTML

 HTML stands for HyperText Markup Language. Hypertext is simply a piece of

text that works as a link.
 Markup Language is language of writing layout information within documents.

 Basically an HTML document is a plain text file.

 It contains rich text. The rich text means text with tags.

 HTML is not a case sensitive language.

 Any HTML program can be written in simple Notepad or WordPad text editors.
The extension to this program should be either html or htm.
 This program then can be opened in some web browser and the corresponding
web page can be viewed. Let us create our first web page using HTML.
Web Technology 2 - 18 HTML

HTML Document

<html>
<head>
<title>My webpage</title>
</head>
<body>
This is my first Web Page!!!
</body>
</html>

2.3 HTML Syntax and Semantics

 An XHTML document consists of three main parts :

<head> section

<body> section.
Web Technology 2 - 19 HTML

 The basic document structure is :

<html>
<head>
<title>...</title>
</head>
<body>
…
…
…
</body>
</html>

2.4 Some Fundamental HTML Elements AU : Dec.-13, Marks 8

 In all HTML/XHTML documents the root element is <html> which has two
children : head and body.
 Any text contained within the head element does not appear directly in the
client area of web browser. The head element is used for providing
certain information to web browser. The
 <title> element is used to give title to the web page. Note that this title does
not appear in client area. Rather it appears at the top of web browser.
 The <body> element contains the
information which is to be displayed
in the client area of web browser.
 Web Technology 2 - 20 HTML

 The body element can contain

several fundamental elements such
as <p>, <h1>, <div>,<a>, <hr>,
<br> and so on. The elements within
the body part is for deciding the
layout of your
web page.
Basic HTML Tags

Tag Meaning

<h1> </h1> Header Tags

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

<p> This tag used to create a paragraph.

<pre> This tag is used to preserve the white spaces and lines in the
text.

<div> This tag is used to make division of sections in the XHTML

document.

<br/> This tag is used for line breaking

<b> </b> Displays the text in bold

Web Technology 2 - 21 HTML

<i> </i> Displays the text in italics

<strong </strong> Displays the text in bold

<strike> </strike> Displays the text with strike

<font size=”” color=”” set the font, size and color of the text in the web page
face=””></font>

2.5 Tables AU : Dec.-13, May-12, Marks 8

 HTML allows us to create tables on the web pages.

 The biggest advantage of using tables on the web pages is that the information
gets arranged systematically.

 The table is a matrix of rows and columns and the area formed due to intersection
of a row and a column is called cell.

2.5.1 Basic Table Tag

TAG MEANING

<table>…….</table> Defines a table

<caption>….</caption> Defines a table caption

<th>…….</th> Table column heading

<tr>……..</tr> Defines a row in a table

<td>……</td> Defines a cell in a table

Web Technology 2 - 22 HTML
Web Technology 2 - 23 HTML

2.5.2 Rowspan and Colspan

 Sometimes we may require adding sub-columns or sub-rows to categorize

the information properly. In such a situation colspan and rowspan can be
used.
 The rowspan is used to extend the row vertically and colspan is used to
extend the column horizontally. For example –
Web Technology 2 - 24 HTML

2.5.3 HTML Table - Cell Padding

 Cell padding is the space between the cell edges and the cell content.

 By default the padding is set to 0.

2.5.4 HTML Table - Cell Spacing

• Cell spacing is the space between each cell.
• By default the space is set to 2 pixels.
Web Technology 2 - 25 HTML
Example : Write HTML code which includes table, Hyperlink, character formatting
ordered and unordered list to display your resume.

Sol. : resume.html

<html>
<head>
<title>RESUME APPLICATION</title>
</head>
<body>
<center><h2>RESUME</h2></center>
<a href="my_photo.jpg">PHOTO</a>
<br/><br/>
<strong>Name: </strong> Mr.Sachin Patil<br/>
<strong>Address: </strong> D10,SunEmpire,SunCityRd,Pune<br/>
<strong>Sex: </strong>Male<br/>
<strong>Phone: </strong>9229229221<br/>
<strong>Email: </strong>[email protected]
<br/><br/>
<strong>Educational Qualification:</strong>
<table border=2>
<tr>
<th>Examination</th>
<th>Year Of Passing</th>
<th>Board/University</th>
<th>Marks obtained</th>
</tr>
<tr>
Web Technology 2 - 26 HTML
<td>S.S.C</td><td>1991</td><td>Pune</td><td>93%</td>
</tr>
<tr>
<td>H.S.C</td><td>1993</td><td>Pune</td><td>90%</td>
</tr>
<tr>
<td>B.E.(Computer)</td><td>1997</td><td>Pune</td><td>72%</td>
</tr>
<tr>
<td>M.Tech(Computer)</td><td>2001</td><td>IIT(Kanpur)</td><td>A grade</td>
</tr>
</table>
<strong>
<br/><br/>
Programming Languages known:
</strong>
<ul>
<li>Cobol
<li>C
<li>C++
<li>Visual C++
<li>Visual Basic
<li>Java
</ul>

<br/><br/>
 Web Technology 2 - 27 HTML
<div align=left>Date:</div>
<div align=right>Place:</div>
<br/>
<div align=left>Signature</div>
</body>
</html>

Output

2.6 IMAGES
Images can improve the design and the appearance of a web page.

HTML Images Syntax

<img src=”url_of_image_file” width=”width_in_pixels” height=”height_in_pixels”

alt=”text_description” border=”thickness_in_pixels” align=”top|middle|bottom|left|right”
hspace=”horizontal_spacing_in_pixels” vsapce=”vertical_spacing_in_pixels”
>
 Web Technology 2 - 28 HTML

Example

<img src=”img.jpg” width=”500” height=”600” alt=”image” border=”5” align=”center”

vspace=”50” hspace=”50”>

ATTRIBUTES

src="url" The src attribute specifies the URL (web address) of the image

alt=" " The alt attribute provides an alternate text for an image, if the user for some
reason cannot view it

width=”” This attribute to specify the width and height of an image.

height=””

Border=”” Specifies an image border

Web Technology 2 - 29 HTML

2.7 Link AU : Dec.-08, 09, Marks 2

 There is a common practice to specify the web link in the web page. The link acts
as a pointer to some web page or some resource.
 Use of hyperlink in the web page allows that page to link logically with other page.

<a href=”file /file location to be redirected” target=””> some text </a>

<a>…</a> <a> means beginning of the web link and </a> means end of the web
link.

href=”” href specifies the target of the link.

Target=”” If we want to get that link opened in another window we can

mention _target property values may be: _self/_blank

2.8 Lists AU : Dec.-11, May-11, Marks 8

 List is nothing but the collections of items or elements. There are two types of
lists - unordered lists and ordered lists.

 The unordered list is useful for simply listing the items but if we want
the items in some specific sequence then the ordered lists are used
 Web Technology 2 - 30 HTML

2.8.1 Unordered List

▫ Used for simply listing the items.

▫ Starts with <ul> tag. Each list item starts with <li> tag.

TAG MEANING

<ul>…..</ul> Beginning and end of unordered list

<li>…..</li> Displays bulleted list of items

<ul type=“circle”> Displays circular bullets

<ul type=“disc”> Displays solid round bullets

<ul type=“square”> Displays squared bullets

 Web Technology 2 - 31 HTML

2.8.2 Ordered List

The ordered list is a list of items which must follows some specific sequence. We
can number the text using <ol> tag. Following table shows various styles by which the
list can be numbered.

Tags Meaning

<ol> and </ol> Beginning and end of the numbered list

<li> and </li> Displays the numbered text on separate line.

<ol type=“A”> Displays the list in following manner A,B,C..

<ol type=“i”> Displays the list in following manner i,ii,iii…

<ol type=“I”> Displays the list in following manner I,II,III…

<ol type=“1”> Displays the list in following manner 1,2,3…

Web Technology 2 - 32 HTML

2.9 Frames AU : May-13, 14, Dec.-09, Marks 16

 HTML frames allow us to present documents in multiple views.

 Using multiple views we can keep certain information visible and at the same
time other views are scrolled or replaced.
 For example, within the same window, one frame
can display a company information, a second frame
can be a navigation menu and a third frame may
display selected document that can be scrolled
through or replaced by navigating in the second
frame.
 Various frames can be set in one browser window .

 To set the frames in the browser window we use frame set.

2.10 Forms AU : May-09, Dec.-12, Marks 16

 Form is a typical layout on the web page by which a user can interact with
the web page.

 An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

 Typical component of forms are text, text area, checkboxes, radio

buttons and push buttons.

 HTML allows us to place these form components on the web page

and send the desired information to the destination server.
 All these form contents appear in the <form> tag. The form has an
attribute action which gets executed when user clicks a button on the
form.

Various attributes of form are –

 Attribute Description

Action It specifies the url where the form should be submitted.

Method It specifies the HTTP methods such as GET, POST

Name This attribute denotes the name of the form.

Target It specifies the target of the address in the action attribute.

Let us learn various form components with the help of simple HTML
documents.

ELEMETS MEANING

<form>….. </form> to create an HTML form

<input type="text"> Displays a single-line text input field

<input type="button"> Displays a clickable button

<input type="submit"> Displays a submit button (for submitting the form)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many

choices)

<input type="radio"> Displays a radio button (for selecting one of many choices)

<textarea cols=“” Displays a multi-line text input field

rows=“”>
LABEL

TEXT BOX

SUBMIT-BUTTON
BUTTON

CHECKBOX
RADIO BUTTON

DROP-DOWN LIST
2.11 HTML 5.0

 The objective of this markup language version was - i) to

provide support for latest multimedia and ii) to make the script
readable and consistently understood by the developer.

 The HTML5 adds many new syntactic features. It includes the

elements such as <video>,<audio> and <canvas> elements.

 It also has integration of Scalable Vector

Graphics(SVG)contents and MathML for mathematical Formula.

2.11.1 Features of HTML 5.0

1. The XHTML doctype is just impossible to memorize

(!DOCTYPE html PUBLIC "…). Hence a new HTML doctype is
<!DOCTYPE html>
2. There are new graphic elements such as <canvas> and <svg> in HTML5.0

3. The support for multimedia elements such as <audio> and <video>

4. It has support for <header>, <footer>, <article>, and <section>

5. It has support for new form controls such as number, date, time, calendar,
and range.

6. It has a rich set of Application Programming Interface(API) for

geolocations, HTML Drag and Drop, Local Storage, Application cache
and so on.
2.11.2 Difference between HTML and HTML5

Sr. HTML HTML5

No.

1. The DOCTYPE declaration is much longer The DOCTYPE declaration is simple

such as <!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1
1.dtd">

2. <audio> and <video> tags are not supported. <audio> and <video> tags are
supported for playing audio and
video files.

3. Finding out geographic location is The HTML5 supports the API for
impossible using HTML identifying the geographic
location.

4. It supports the tag such as <applet>, <big>, The tags that are removed from

<center>, <font>, <frame>, <strike> HTML5 are

<applet>, <big>, <center>, <font>,

<frame>, <strike>

5. Does not allow JavaScript to run in It allows JavaScript to run in

browser. JavaScript runs in same thread as background.
browser interface.

6. There is no support for <canvas> The <canvas> tag is for 2D drawing.

7. It needs external plugins such as flash. The need for external plugin is
reduced.
2.12 HTML New Tag Elements –semantic elements

Tags (Elements) Description

<article> Represents an independent piece of content of a document, such as a

blog entry or newspaper article

<aside > Represents a piece of content that is only slightly related to the rest of
the page.

<audio> Defines an audio file.

<canvas> This is used for rendering dynamic bitmap graphics on the fly, such as
graphs or games.

<details> Represents additional information or controls which the user can obtain
on demand

<embed> Defines external interactive content or plugin.

<figure> Represents a piece of self-contained flow content, typically referenced
as a single unit from the main flow of the document.
<footer> Represents a footer for a section and can contain information about the
author, copyright information, et cetera.
<header> Represents a group of introductory or navigational aids.

<nav> Represents a section of the document intended for navigation.

<progress> Represents a completion of a task, such as downloading or when

performing a series of expensive operations.

<section> Represents a generic document or application section

<time> Represents a date and/or time.

<video> Defines a video file.

2.12.1 SEMANTIC ELEMENTS
o Semantics is the study of the meanings of words and phrases in a
language.
o Semantic elements = elements with a meaning.
2.12.2 What are Semantic Elements?

 A semantic element clearly describes its meaning to both the browser

and thedeveloper.
 Examples of non-semantic elements: <div> and <span> - Tells nothing
about itscontent.
Examples of semantic elements: <form>, <table>, and <article>
2.12.3 Why Semantic Elements?
 With HTML4, developers used their own id/class names to style
elements: header, top, bottom, footer, menu, navigation, main,
container, content, article, sidebar, topnav, etc.
 This made it impossible for search engines to identify the
correct web page content.
 With the new HTML5 elements (<header> <footer> <nav>
<section> <article>), this will become easier.

2.12.4 Semantic Elements in HTML5

 Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer">to indicate navigation, header,
and footer.
 HTML5 offers new semantic elements to define different parts
of a web page:
2.12.5 HTML5 <section> Element
 The <section> element defines a section in adocument.
 According to W3C's HTML5 documentation: "A section is a
thematic grouping of content, typicallywith a heading."
 A home page could normally be split into sections for introduction,
content, and contact information.
<section>
<h1>WWF</h1>
<p>The World Wide Fund (WWF) is. .. </p>
</section>

2.12.6.HTML5 <article> Element

 The <article> element specifies independent, self-contained content.
 An article should make sense on its own, and it should be possible to
read it independently from the rest of the web site.
 Examples of where an <article> element can be used:
 Forum post

 Blog post

 Newspaper article

<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of
our planet's natural environment,
</article>
2.12.7.HTML5 <header> Element
 The <header> element specifies a header for a document or section.
 The <header> element should be used as a container for introductory
content.
 The following example defines a header for an article:

Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of
our planet's natural environment, and build a
future in which humans live in harmony with
nature.</p>
</article>
2.12.8 HTML5 <footer> Element
 The <footer> element specifies a footer for a document or section.
 A <footer> element should contain information about its containing element.
 A footer typically contains the author of the document, copyright
information, linksto terms of use, contact information, etc.
 Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information:
<a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
2.12.9 HTML5 <nav> Element
 The <nav> element defines a set of navigation links.
Example
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
2.12.10 HTML5 <aside> Element
 The <aside> element defines some content aside from the
content it is placed in (like a sidebar).
 The <aside> content should be related to the surrounding content.
Example
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
</aside>
2.12.11 HTML5 <figure> and <figcaption> Elements
 The purpose of a figure caption is to add a visual explanation to an
image.
 In HTML5, an image and a caption can be grouped together in a
<figure> element:
Example
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

2.13 HTML5 DRAG AND DROP

 Drag and Drop (DnD) is powerful User Interface concept which

makes it easy to copy, reorder and deletion of items with the help of
mouse clicks.
 This allows the user to click and hold the mouse button down over an
element, drag it to another location, and release the mouse button to
drop the element there.

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()

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));
}

2.14 HTML Audio Element

 The <audio> tag is used to embed sound content in a document, such as

music or other audio streams.

 The <audio> tag contains one or more <source> tags with different audio
sources. The browser will choose the first source it supports.

 The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

 There are three supported audio formats in HTML: MP3, WAV, and
OGG.

Attributes

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a

 play/pause button etc)

loop Loop Specifies that the audio will start over again, every time it is
finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio should be
metadata loaded when the page loads
none

src URL Specifies the URL of the audio file

<html>

<body>

<p>Click on the play button to play a sound:</p>

<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>
2.15 HTML Video Element

 The <video> tag is used to embed video content in a document, such as a

movie clip or other video streams.

 The <video> tag contains one or more <source> tags with different video
sources. The browser will choose the first source it supports.

 The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.

 There are three supported video formats in HTML: MP4, WebM, and
OGG.

Attribute Value Description

autoplay autoplay Specifies that the video will start playing as soon as it is
ready

controls controls Specifies that video controls should be displayed (such as a

play/pause button etc).
 height pixels Sets the height of the video player

loop loop Specifies that the video will start over again, every time it is
finished

muted muted Specifies that the audio output of the video should be muted

src URL Specifies the URL of the video file

width pixels Sets the width of the video player

<html>

<body>

<h1>The video element</h1>

<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>
Web Technology 3 - 53 CSS

3.1 Introduction to Cascading Stylesheet

 The CSS stands for Cascading Style Sheet.

 The Cascading Style Sheet is a markup language used in the web document
for presentation purpose.
 The primary intension of CSS was to separate out the web content from the web
presentation.

 Various elements such as text, font and color are used in CSS for presentation
purpose. Thus CSS specification can be applied to bring the styles in the web
document.

3.2 Features

 By combining CSS with the html document, considerable amount of flexibility

into the content submission can be achieved.
 Similarly, separating out the style from actual contents help in managing large-
scale complex sites. Thus CSS facilitates publication of content in multiple
presentation formats.
 If CSS is used, effectively then global style sheet can be applied to a web
document. This helps in maintaining the consistency in the web document.
 If a small change needs to be done in the style of web content, then CSS
makes it more convenient.
 All above mentioned advantages of CSS show the need for it in web development

CSS 3.0

 The CSS3 is a latest version of CSS.

 It is completely backward compatible with older version of CSS.

 It support for selectors, box model, Background and borders, Text effects,
Web Technology 3 - 54 CSS
animations, Multiple column layout, 3D transformations and so on.

3.3 Core Syntax

 The style specification is specified differently for each different level. For instance :

 For inline cascading style sheets the style appears in side the tag for defining the value.
<p style="font-size: 30pt ;font-family:Script">

 For the document cascading style sheet the style specification appear as the
content of a style element within the header of a document.

 The type attribute tells the browser that what it is reading is text which is
affected by the Cascading Style Sheet. The type specification is necessary
because there is one more specification used in JavaScript.

 The External style sheet makes use of style specification in the same manner as
in document cascading style sheet.
The most commonly used CSS properties are enlisted in the following table -

Property Type Property

Fonts font
font-family
font-size
font-style
font-weight
Web Technology 3 - 55 CSS
font-face

Text letter-spacing

line-height

text-align
text-decoration

text-indent

Color and background Background

background-color

background-image

background-position

background-repeat
color

Borders border

border-color

border-width

border-style

border-top
border-top-color

border-top-width

Spacing Padding
padding-bottom,
padding-left,
padding-right,
padding-top
 Web Technology 3 - 56 CSS
margin
margin-bottom,
margin-left,
margin-right,
margin-top

3.4 Selectors
• Simple Selector
• Universal Selector
• Grouping Selector
• Class selector
• Id selector
3.4.1 Simple selector
 Web Technology 3 - 57 CSS
3.4.2 Universal selector

3.4.3 Grouping Selector

 Web Technology 3 - 58 CSS
3.4.4 Class selector

3.4.5 Id selector
 Web Technology 3 - 59 CSS
3.5 Style Sheet and HTML

There are three levels of cascading style sheets -

 Inline style sheet

 Document level style sheet/ Internal Style Sheet

 External level style sheet

3.5.1 Inline Style Sheet

The inline cascading style sheet is a kind of style sheet in which the styles can
be applied to HTML tags. This tag can be applied using following rule -
Tag
{
property: value
}

For example :

<p style="font-family: Arial;color:red" >

HTML Document [InlineStyle.html]

<html>
<body>
<p>This is simple text</p>
<p style="font-size: 30pt ;font-family:Arial">This text is different </p>
<p style="font-size: 40pt ;color:red">This text is colored.</p>
</body>
</html>
 Web Technology 3 - 60 CSS
Output

3.5.2 Document Level Style Sheet / Internal Style Sheet

 This type style sheet appears only in the head section and in the body section
newly defined Selector tags are used with the actual contents.
 The most important thing while writing document level style sheet is that we
should mention the style type="text/css" in the head section. By this the
browser will come to know that the program is making use of cascading style
sheet.

HTML Document [internal.html]

 Web Technology 3 - 61 CSS

3.5.3 External Stylesheet

 Sometimes we need to apply particular style to more than one web documents in
such cases external style sheets can be used.
 The central idea in this type of style sheet is that the desired style is stored in
one .css file. And the name of that file has to be mentioned in our web pages.
 Then the styles defined in .css file will be applied to all these web pages.

 Here is a sample program in which external style sheet is used.

Script Explanation

When we want to link the external style sheet then we have to use <link> tag
which is to be written in the head section.
 link tells the browser some file must be linked to the page.

 rel=stylesheet tells the browser that this hyperlink is a style sheet.

 href=" " denotes the path name of style sheet file.

 type="text/css" tells the browser that what it is reading is text which is affected
by the cascading style sheet.
Web Technology 3 - 62 CSS

3.6 Style Rule Cascading and Inheritance

3.6.1 Style Rule Cascading

 When there are two or more values for the same property then conflict occurs.
 When two rules from the same cascade layer , the one that is defined last in the
stylesheet is the one that will be used.
Web Technology 3 - 63 CSS
3.6.2 Inheritance
 In an HTML document, the tags have parent-child relationships. For example,
<title> tag is always inside the <head> tag, so the <head> tag is the parent of the
<title> tag. Similarly <p> tag is defined inside the <body> tag. Then <body>
becomes parent of <p> tag.
 In cascading style sheets, inheritance is based on tree structure of the document itself.

 An element inherits the value for its properties by checking the parent element. If
the parent has the value for the property demanded by the child then this property
value can be inherited. If the parent down not have this value, then its parent
(i.e. grandparent) is checked. If this parent has no such property value then its
parent is checked. This process is continued until a root element is obtained.
 Thus the search will be made in upward direction from the parent of the element
to the root of the tree or to the <html> tag of the document.

 Inheritance can be defined as a concept in which child always inherits the

properties of parent tag along with its own properties.

 Following is an HML document in which inheritance is demonstrated.

HTML Document

<html>
<head>
<title>Inheritance Demo</title>
<style type="text/css">
 Web Technology 3 - 64 CSS
p
{
font-family:Arial;
color:blue;
background-color:yellow;
}
strong
{
font-size:24px;
}
</style>
</head>
<body>
<center>
<p>This is a blue text <strong>with</strong> yellow background</p>
</center>
</body>
</html>
Output
Web Technology 3 - 65 CSS

3.7 Text Properties

The font properties can be setting different types of fonts, styles and sizes.

CSS PROPERTIES

font-family font-family:Arial;

font-size font-size:10pt;

font-style font-style:italic

font-weight font-weight:bold

font-variant font-variant:small-caps

text-decoration text-decoration:underline

text-align text-align :right

<html>

<head>

<style type="text/css">

font-family:Courier New;

font-style:italic;
font-weight:bold;
font-size:28pt;
text-decoration:underline
text-align :right
}

</style>
 Web Technology 3 - 66 CSS
</head>

<body>

<p >I Love my Country!!!</p>

</body>

</html>

3.8 CSS –BACKGROUND PROPERTY

CSS Background properties

CSS Background properties define the background effects of an element.

1. The Background properties allow you to control the background color of

an element,

(a) set an image as the background

(b) Repeat a background image vertically or horizontally

(c) Position an image on a page.

Property Description Values

background A shorthand property for setting all background-color
background properties in one background-image
declaration background-repeat
background-attachment
background-position
Scroll/ fixed
background- Sets whether a background image is
attachment fixed or scrolls with the rest of the page
background-color Sets the background color of an Color name
element
 Web Technology 3 - 67 CSS
url
background-image Sets an image as the background
none
Top-left/top–center/
background-position Sets the start ing posit ion of a
top –right-center /
background image
left-center/right-bottom/
left-bottom/ center-bottom/
right/ x-% y-%
x-pos y-pos

background-repeat Sets if/how a background image will Repeat/repeat-x

be repeated /repeat-y/no-repeat

BACKGROUND-COLOR
BACKGROUND-IMAGE

BACKGROUND-REPEAT
Web Technology L - 69 Web Technology Laboratory

BACKGROUND-ATTACHMENT

3.9 Borders

There is a property called border-style which controls the element’s content border.

border-style border-style:dotted

border-top-style:solid;

border-right-style:solid;

border-bottom-style:dashed;

border-left-style:dotted; OR

border-style:solid solid dashed dotted

border-width border-width:3px;

border-color border-color:red;
Web Technology L - 70 Web Technology Laboratory

HTML Document[BorderStyle.html]

<!DOCTYPE html >

<html >

<head>

<title>A Border Style Demo</title>

<style type="text/css">

h4.none {border-style:none}

h4.dotted {border-style:dotted}
h4.dashed{border-style:dashed}
h4.solid {border-style:solid}
h4.double {border-style:double}
h4.groove{border-style:groove}
h4.ridge {border-style:ridge}
h4.inset {border-style:inset}
h4.outset{border-style:outset}
h4.hidden {border-style:hidden}
</style>

</head>

<body>

<h4 class="none">This text has no border</h4>

<h4 class="dotted">This text has a dotted border.</h4>

<h4 class="dashed">This text has dashed border.</h4>

<h4 class="hidden">This text has hidden border.</h4>

<h4 class="double">This text has double border.</h4>

<h4 class="solid">This text has solid border.</h4>

<h4 class="groove">This text has groove border.</h4>

<h4 class="ridge">This text has ridge border.</h4>

<h4 class="inset">This text has inset border.</h4>

</body>

</html>

Output
Web Technology L - 71 Web Technology Laboratory

HTML Document[BorderColor.html]

<html>

<head>

<title>Colored Border Demo</title>

<style type="text/css">

h4
{

border-style:solid;

border-width:3px;

border-color:red;
}

</style>

</head>

<body>

<h4 >Red Border</h4>

Web Technology L - 72 Web Technology Laboratory

</body>

</html>

3.10 Margins

Margin means the space between the content and its neighbouring content.
There can be top margin, bottom margin, left margin and right margin. Hence
various properties of margins are margin-top, margin-bottom, margin-left and
margin-right. The values of these properties can be given in px and in.

HTML Document[MarginDemo.html]

<!DOCTYPE html>

<html>

<head>

<style
type="text/css">

p
{

border-style:solid;

margin-top:80px;

margin-bottom:60px;

margin-left:30px;

margin-right:70px;
}

</style>

</head>

<body>

<p>Text</p>

</body>

</html>
Web Technology L - 73 Web Technology Laboratory

Output

3.11 Padding
Padding means the space between the contents and its border. Various
properties of padding are padding-left, padding-right, padding-top and padding
bottom. These values can also be given in px or in in.

HTML Document[PaddingDemo.html]
<html>
<head>
<style
type="text/css">
p
{
border-style:solid;
padding-top:70px;
padding-bottom:50px;
padding-left:120px;
padding-right:60px;
}
</style>
</head>
<body>
<p>My Text</p>

</body>
</html>
Web Technology L - 74 Web Technology Laboratory

3.12 Color Properties

Using color property we can set the foreground color and using background-
color the background color can be set. The use of these properties is shown in
XHTML document.

HTML Document [colorProperties.html]

<html>

<head>

<style>

h1
{

font-
family:Arial;
color:green;
background-color:yellow;

</style>

</head>

<body>

<center>

<h1>This is a green text with yellow background</h1>

</center>

</body>

</html>

CSS3 Colors

CSS supports color names, hexadecimal and RGB colors.

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha
channel - which specifies the opacity for a color.
Web Technology L - 75 Web Technology Laboratory

An RGBA color value is specified with:

rgba(red, green, blue, alpha).

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully
opaque)

rgba(255, 0, 0, 0.2);

rgba(255, 0, 0, 0.4);

rgba(255, 0, 0, 0.6);

rgba(255, 0, 0, 0.8);

HSL Colors

HSL stands for Hue, Saturation and

Lightness. An HSL color value is specified
with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):

● 0 (or 360) is red

● 120 is green

● 240 is blue

2. Saturation is a percentage value: 100% is the full color.

3. Lightness is also a percentage; 0% is dark (black) and 100% is
white. hsl(0, 100%, 30%);

hsl(0, 100%, 50%);

hsl(0, 100%, 70%);

hsl(0, 100%, 90%);

example.html

<html>

<head>

<style>

#p1 {background-color:rgba(255,0,0,0.3);}

#p2 {background-color:rgba(0,255,0,0.3);}
Web Technology L - 76 Web Technology Laboratory

#p3 {background-color:hsl(120,100%,25%);}

#p4 {background-color:hsl(120,60%,70%);}

</style>

</head>

<body>

<p>RGBA colors:</p>

<p id=”p1">Red</p>

<p id=”p2">Green</p>

<p>HSL colors:</p>

<p id=”p3">dark green</p>

<p id=”p4">pastel green</p>

</body>

</html>

3.13 CSS Border

CSS3 allows to create following types border

1. box-shadow 3. border-image

Let us discuss them along with the necessary

illustrations.

3.13.1 The box shadow

The box-shadow property represents the shadows around the border. For example-

box-shadow : 10x 20x 5x black

Horizontal shadow Verticle Shadow blur distance Color of shadow

Web Technology L - 77 Web Technology Laboratory

Following script represents this property

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 20px 5px blue;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>

3.12.2 The border-image

The border-image property is for setting the image as a border. Following

example illustrates the idea
<!DOCTYPE html>
<html>
Web Technology L - 78 Web Technology Laboratory

<head>
<style>
div {
background-color: pink;
border: 20px solid transparent;
border-image-source: url('flower.png');
border-image-slice: 20;
border-image-repeat: repeat;

}
</style>
</head>
<body>
<div>
This design has a image border
</div>
</body>

</html>

CSS3 border-image Property

● The CSS3 border-image property allows you to specify an image to be used

instead of the normal border around an element.

● The border-image property has three parts:

1. The image to use as the border

2. Where to slice the image

Web Technology L - 79 Web Technology Laboratory

3. Define whether the middle sections should be repeated or stretched

#borderimg {
border: 10px solid transparent;
padding: 15px;

border-image: url(border.png) 30 round;

}

• Here, the middle sections of the image are repeated to create the border:

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

3.13 CSS3 Text Effects

In this section we will discuss various text effects mainly used in CSS3.

1. Text Shadow Effect

The CSS3 allows to incorporate many advanced text effects in the web design.
Out of which the text shadow effect is very commonly used.
Web Technology L - 80 Web Technology Laboratory

The text-shadow property can be as given below -

text-shadow: horizontal_shadow vertical_shadow blur_distance

color_of_shadow

Let us now understand how to apply and experience this text style.

<html>
<head>

<style>

h2 {
text-shadow: -5px 15px 3px gray;
}
</style>
</head>
<body>

<h2>Catch me If you can...</h2>

</body>
</html>
Web Technology L - 81 Web Technology Laboratory

Box Shadows

Boxshadow.html

<!DOCTYPE html>

<html>

<head>

<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}

</style>

</head>

<body>

<div>This is a div element with a box-shadow</div> </br>

</body>

</html>
3.14 CSS3 Animations

What are CSS3 Animations?

 An animation lets an element gradually change from one style to another.

We can change as many CSS properties as many times we want.

 Here we must specify the keyframes for the animation.

The @keyframes Rule

 When you specify CSS styles inside the @keyframes rule, the animation
will gradually change from the current style to the new style at certain
times.
Web Technology L - 82 Web Technology Laboratory

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

 To get an animation to work, you must bind the animation to an element. The
following example binds the “example” animation to the <div> element.

 The animation will lasts for 4 seconds, and it will gradually

change the background-color of the <div> element from “red” to
“yellow”:
CSS3 Animation Properties

Property Description

@keyframes Specifies the animation code

Animation A shorthand property for setting all the animation
properties (except animation-play-state and animation-
fill-mode)
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should play in
reverse direction or alternate cycles
animation-duration Specifies how many seconds or milliseconds an
animation takes to complete one cycle

animation-fill-mode Specifies a style for the element when the animation is

not playing (when it is finished, or when it has a
delay)
animation-iteration-count Specifies the number of times an animation should
be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation
Web Technology L - 83 Web Technology Laboratory

Example 1:

@keyframes example
{
from {background-color: red;}
to {background-color: yellow;}
}

Div
{
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Example 2 :

@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Div
{
width: 100px;
height: 100px;
background-color: red; animation-name: example; animation-
duration: 4s;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: reverse;
}

3.15 CSS3 Transitions and Transformation

● CSS3 transitions allows you to change property values smoothly (from one
value to another), over a given duration.

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

● the CSS property you want to add an effect to

● the duration of the effect

Web Technology L - 84 Web Technology Laboratory

● Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.

Property Description

Transition A shorthand property for setting the four

transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a
transition effect takes to complete

transition-property Specifies the name of the CSS property the transition

effect is for

transition-timing-function Specifies the speed curve of the transition effect

Web Technology L - 85 Web Technology Laboratory

transition-timing-function

 ease - specifies a transition effect with a slow start, then fast, then end slowly
(this is default)

 linear - specifies a transition effect with the same speed from start to end

 ease-in - specifies a transition effect with a slow start

 ease-out - specifies a transition effect with a slow end

 ease-in-out - specifies a transition effect with a slow start and end

transition-delay

 The transition-delay property specifies a delay (in seconds) for the

transition effect.
Web Technology L - 86 Web Technology Laboratory

CSS3 Transforms

● CSS3 transforms allow you to translate, rotate, scale, and skew elements.

● A transformation is an effect that lets an element change shape, size and

position.

Value Description

translate(x,y) Defines a 2D translation

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

scale(x,y) Defines a 2D scale transformation

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

axis

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

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

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

Web Technology L - 87 Web Technology Laboratory

axis

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