Report file on Web technology(html5 and css3)

A
Seminar Report
On
“ Web Technology(HTML5 and CSS3)”

By
Sachin Kumar(1023910021)

Submitted to the Department
of
Computer Science And Engineering
in partial fulfillment of the requirements
for the degree of
Bachelor of Technology
in
Computer Science And Engineering

ISWARCHAND VIDYA SAGAR INSTITUTE OF TECHNOLOGY
AKBARPUR, MATHURA
(AFFILIATED TO G.B. TECHNICAL UNIVERSITY, LUCKNOW)
April, 2013

DECLARATION

I hereby declare that this submission is my own work and that to the best of our knowledge and belief, it
contains no material previously published or written by another person nor material which to a substantial
extent has been accepted for the award of any other degree or diploma of the university or other institute
of higher learning, except where due acknowledgement has been made in the text.

Signature:
Name : Sachin Kumar
Roll No. : 1023910021
Date :

2

CERTIFICATE

This is to be certify that seminar Report entitled “Web Technology(HTML5 and CSS3)” which
is submitted by Sachin Kumar in partial fulfillment of the requirement for the reward of degree
of B.Tech in Stream Of Computer Science & engineering of U.P. Technical University, is a
record of the candidate‘s own work carried out by then under my supervision. The matter
embodied in this thesis is original and has not been submitted for the reward of any other degree.

Date:

Supervisor:
Signature:
Mr . Abhishek Agrawal
Computer Science(CSE)

3

ACKNOWLEDGEMENT

It gives us a great sense of pleasure to present the report of the B. Tech Seminar undertaken during B.
Tech. Third Year. i owe special debt of gratitude to Mr. Abhishek Agrawal, Department of Computer
Science & Engineering, Ishwarchand Vidya Sagar Institute of Technology, Mathura for his constant
support and guidance throughout the course of our work. His sincerity, thoroughness and perseverance
have been a constant source of inspiration for us. It is only his cognizant efforts that our endeavors have
seen light of the day.
I also do not like to miss the opportunity to acknowledge the contribution of all faculty members of the
department for their kind assistance and cooperation during the development of our project. Last but not
the least, we acknowledge our friends for their contribution in the completion of the project.

Signature:
Name : Sachin Kumar
Roll No.:1023910021
Date :

4

Abstract
Today‘s rich Web applications use a mix of Java Script and asynchronous
communication with the application server.This mechanism is also known as Ajax:
Asynchronous JavaScript and XML. The intent of Ajax is to exchange small pieces of data
between the browser and the application server, and in doing so, use partial page refresh instead
of reloading the entire Web page.

AJAX (Asynchronous JavaScript and XML) is a powerful Web development model for
browser-based Web applications. Technologies that form the AJAX model, such as XML,
JavaScript, HTTP, and XHTML, are individually widely used and well known. However, AJAX
combines these technologies to let Web pages retrieve small amounts of data from the server
without having to reload the entire page. This capability makes Web pages more interactive and
lets them behave like local applications.

Web 2.0 enabled by the Ajax architecture has given rise to a new level of user
interactivity through web browsers. Many new and extremely popular Web applications have
been introduced such as Google Maps, Google Docs, Flickr, and so on. Ajax Toolkits such as
Dojo allow web developers to build Web 2.0 applications quickly and with little effort.
Unfortunately, the accessibility support in most toolkits and Ajax applications overall is lacking.
WAI-ARIA markup for live regions presents a solution to making these applications accessible.
A popular application that uses Ajax technology is Google Maps. The goal of this project is to
develop an extension of Google Maps which includes viewing 360-degree ground-based
panorama images. The project includes development of a client-side Ajax engine and user
interface in JavaScript, and development of a back-end java servlet that serves panorama data
and images.

5

Index
Contents

Page No.

1. Web Technology

06

2. Markup Languages And Style Sheets

10

3. HTML5

15

4. CSS3

21

References

6

Chapter 1
Web Technology

Introduction
Web servers and web browsers are communicating client-server computer programs for
distributing documents and information, generally called web data, over the Internet. Web
data are marked up in the HTML language for presentation and interaction with people in
web browsers. Each web server uses an IP address or domain name as well as a port number
for its identification. People use web browsers to send data requests to web servers with the
HTTP protocol, and the web servers running on server computers either retrieve the
requested data from local disks or generate the data on-the-fly, mark up the data in HTML,
and send the resulting HTML files back to the web browsers to render. Apache, Tomcat and
IIS are popular web server programs, and IE and Firefox are popular web browsers.
The term Web 2.0 was coined in 1999 to describe web sites that use technology beyond the
static pages of earlier web sites. It is closely associated with Tim O'Reilly because of the
O'Reilly Media Web 2.0 conference which was held in late 2004. Although Web 2.0 suggests
a new version of the World Wide Web, it does not refer to an update to any technical
specification, but rather to cumulative changes in the ways software developers and endusers use the Web.
The word technology refers to the making, modification, usage, and knowledge of tools,
machines, techniques, crafts, systems, and methods of organization, in order to solve a
problem, improve a preexisting solution to a problem, achieve a goal, handle an applied
input/output relation or perform a specific function. It can also refer to the collection of such
tools, including machinery, modifications, arrangements and procedures. Technologies
significantly affect human as well as other animal species' ability to control and adapt to their
natural environments. The term can either be applied generally or to specific areas: examples
include construction technology, medical technology, and information technology.

7

History Of Web













The term "Web 2.0" was first used in January 1999 by Darcy DiNucci, a consultant on
electronic information design (information architecture). In her article, "Fragmented Future",
DiNucci writes:
The Web we know now, which loads into a browser window in essentially static screenfuls,
is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to
appear, and we are just starting to see how that embryo might develop. The Web will be
understood not as screenfuls of text and graphics but as a transport mechanism, the ether
through which interactivity happens. It will appear on your computer screen, on your TV set
your car dashboard your cell phone hand-held game machines maybe even your microwave
oven.
Writing when Palm Inc. was introducing its first web-capable personal digital assistant,
supporting web access with WAP, DiNucci saw the web "fragmenting" into a future that
extended far beyond the browser/PC combination it was identified with. Her vision of the
web's future focused on how the basic information structure and hyperlinking mechanism
introduced by HTTP would be used by a variety of devices and platforms. As such, her use
of the "2.0" designation refers to a next version of the web that does not directly relate to the
term's current use.
The term Web 2.0 did not resurface until 2002. These authors focus on the concepts currently
associated with the term where, as Scott Dietzen puts it, "the Web becomes a universal,
standards-based integration platform". John Robb wrote: "What is Web 2.0? It is a system
that breaks with the old model of centralized Web sites and moves the power of the
Web/Internet to the desktop."
In 2004, the term began its rise in popularity when O'Reilly Media and MediaLive hosted the
first Web 2.0 conference. In their opening remarks, John Battelle and Tim O'Reilly outlined
their definition of the "Web as Platform", where software applications are built upon the Web
as opposed to upon the desktop. The unique aspect of this migration, they argued, is that
"customers are building your business for you". They argued that the activities of users
generating content (in the form of ideas, text, videos, or pictures) could be "harnessed" to
create value. O'Reilly and Battelle contrasted Web 2.0 with what they called "Web 1.0".
They associated Web 1.0 with the business models of Netscape and the Encyclopædia
Britannica Online. For example,
Netscape framed "the web as platform" in terms of the old software paradigm: their flagship
product was the web browser, a desktop application, and their strategy was to use their
dominance in the browser market to establish a market for high-priced server products.
Control over standards for displaying content and applications in the browser would, in
theory, give Netscape the kind of market power enjoyed by Microsoft in the PC market.
Much like the "horseless carriage" framed the automobile as an extension of the familiar,
Netscape promoted a "webtop" to replace the desktop, and planned to populate that webtop
with information updates and applets pushed to the webtop by information providers who
would purchase Netscape servers.
In short, Netscape focused on creating software, updating it on occasion, and distributing it to
the end users. O'Reilly contrasted this with Google, a company that did not at the time focus
on producing software, such as a browser, but instead on providing a service based on data
8





such as the links Web page authors make between sites. Google exploits this user-generated
content to offer Web search based on reputation through its "PageRank" algorithm. Unlike
software, which undergoes scheduled releases, such services are constantly updated, a
process called "the perpetual beta". A similar difference can be seen between the
Encyclopædia Britannica Online and Wikipedia: while the Britannica relies upon experts to
create articles and releases them periodically in publications, Wikipedia relies on trust in
anonymous users to constantly and quickly build content. Wikipedia is not based on expertise
but rather an adaptation of the open source software adage "given enough eyeballs, all bugs
are shallow", and it produces and updates articles constantly. O'Reilly's Web 2.0 conferences
have been held every year since 2004, attracting entrepreneurs, large companies, and
technology reporters.
The term Web 2.0 was initially championed by bloggers and by technology journalists,
culminating in the 2006 TIME magazine Person of The Year (You). That is, TIME selected
the masses of users who were participating in content creation on social networks, blogs,
wikis, and media sharing sites. In the cover story, Lev Grossman explains:
It's a story about community and collaboration on a scale never seen before. It's about the
cosmic compendium of knowledge Wikipedia and the million-channel people's network
YouTube and the online metropolis MySpace. It's about the many wresting power from the
few and helping one another for nothing and how that will not only change the world but also
change the way the world changes.

9

Technology
The word technology refers to the making, modification, usage, and knowledge of tools,
machines, techniques, crafts, systems, and methods of organization, in order to solve a problem,
improve a preexisting solution to a problem, achieve a goal, handle an applied input/output
relation or perform a specific function. It can also refer to the collection of such tools, including
machinery, modifications, arrangements and procedures. Technologies significantly affect
human as well as other animal species' ability to control and adapt to their natural environments.
The term can either be applied generally or to specific areas: examples include construction
technology, medical technology, and information technology.
Technology has affected society and its surroundings in a number of ways. In many societies,
technology has helped develop more advanced economies (including today's global economy)
and has allowed the rise of a leisure class. Many technological processes produce unwanted byproducts, known as pollution, and deplete natural resources, to the detriment of the Earth and its
environment. Various implementations of technology influence the values of a society and new
technology often raises new ethical questions. Examples include the rise of the notion of
efficiency in terms of human productivity, a term originally applied only to machines, and the
challenge of traditional norms.
According to above information technology means the making of new things, modifications in
things and something that changes human efforts in daily life that is known as technology.
In upcoming chapters we will discuss about New technologies in web standards like Html and
Css.

10

Chapter 2
Markup Languages And Style Sheets

Introduction
A (document) markup language is a modern system for annotating a document in a way that
is syntactically distinguishable from the text. The idea and terminology evolved from the
"marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written
with a blue pencil on authors' manuscripts. Examples are typesetting instructions such as
those found in troff, TeX and LaTeX, or structural markers such as XML tags. Markup
instructs the software displaying the text to carry out appropriate actions, but is omitted from
the version of the text that is displayed to users. Some markup languages, such as HTML,
have pre-defined presentation semantics, meaning that their specification prescribes how the
structured data are to be presented; others, such as XML, do not.
A widely used markup language is Hyper Text Markup Language (HTML), one of the
document formats of the World Wide Web. HTML, which is an instance of SGML (though,
strictly, it does not comply with all the rules of SGML), follows many of the markup
conventions used in the publishing industry in the communication of printed work between
authors, editors, and printers. A web style sheet is a form of separation of presentation and
content for web design in which the markup (i.e., HTML or XHTML) of a webpage contains
the page's semantic content and structure, but does not define its visual layout (style).
Instead, the style is defined in an external style sheet file using a style sheet language such as
CSS or XSLT. This design approach is identified as a "separation" because it largely
supersedes the antecedent methodology in which a page's markup defined both style and
structure.

11

HTML(Markup Language)
Hyper Text Markup Language (HTML) is the main markup language for creating web pages and
other information that can be displayed in a web browser. HTML is written in the form of HTML
elements consisting of tags enclosed in angle brackets (like <html>), within the web page
content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags,
known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag,
the second tag is the end tag (they are also called opening tags and closing tags). In between
these tags web designers can add text, tags, comments and other types of text-based content.The
purpose of a web browser is to read HTML documents and compose them into visible or audible
web pages. The browser does not display the HTML tags, but uses the tags to interpret the
content of the page.HTML elements form the building blocks of all websites. HTML allows
images and objects to be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as
JavaScript which affect the behavior of HTML web pages.Web browsers can also refer to
Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The
W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over
explicit presentational HTML markup.

History(HTML)









In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents.
In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. The first
publicly available description of HTML was a document called "HTML Tags", first
mentioned on the Internet by Berners-Lee in late 1991.
Berners-Lee considered HTML to be an application of SGML. It was formally defined as
such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the
first proposal for an HTML specification: "Hypertext Markup Language (HTML)" InternetDraft by Berners-Lee and Dan Connolly, which included an SGML Document Type
Definition to define the grammar.
After the HTML and HTML+ drafts expired in early 1994, the IETF created an HTML
Working Group, which in 1995 completed "HTML 2.0", the first HTML specification
intended to be treated as a standard against which future implementations should be
based.Further development under the auspices of the IETF was stalled by competing
interests. Since 1996, the HTML specifications have been maintained, with input from
commercial software vendors, by the World Wide Web Consortium (W3C).[12] However, in
2000, HTML also became an international standard (ISO/IEC 15445:2000). HTML 4.01 was
published in late 1999, with further errata published through 2001.
In 2004 development began on HTML5 in the Web Hypertext Application Technology
Working Group (WHATWG), which became a joint deliverable with the W3C in 2008.
12

CSS(Cascading Style Sheet)
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
semantics (the look and formatting) of a document written in a markup language. Its most
common application is to style web pages written in HTML and XHTML, but the language can
also be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is
designed primarily to enable the separation of document content (written in HTML or a similar
markup language) from document presentation, including elements such as the layout, colors,
and fonts. This separation can improve content accessibility, provide more flexibility and control
in the specification of presentation characteristics, enable multiple pages to share formatting, and
reduce complexity and repetition in the structural content (such as by allowing for tableless web
design). CSS can also allow the same markup page to be presented in different styles for
different rendering methods, such as on-screen, in print, by voice (when read out by a speechbased browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow
the web page to display differently depending on the screen size or device on which it is being
viewed. While the author of a document typically links that document to a CSS style sheet,
readers can use a different style sheet, perhaps one on their own computer, to override the one
the author has specified. CSS specifies a priority scheme to determine which style rules apply if
more than one rule matches against a particular element. In this so-called cascade, priorities or
weights are calculated and assigned to rules, so that the results are predictable. The CSS
specifications are maintained by the World Wide Web Consortium (W3C).

History(CSS)










Style sheets have existed in one form or another since the beginnings of SGML in the 1980s.
Cascading Style Sheets were developed as a means for creating a consistent approach to
providing style information for web documents.
To improve web presentation capabilities, nine different style sheet languages were proposed
to the World Wide Web Consortium's (W3C) www-style mailing list.
Of the nine proposals, two were chosen as the foundation for what became CSS: Cascading
HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). CHSS, a
language that has some resemblance to today's CSS, was proposed by Håkon Wium Lie in
October 1994.
Lie's proposal was presented at the "Mosaic and the Web" conference (later called WWW2)
in Chicago, Illinois in 1994, and again with Bert Bos in 1995.Development of HTML, CSS,
and the DOM had all been taking place in one group, the HTML Editorial Review Board
(ERB). Early in 1997, the ERB was split into three working groups: HTML Working group,
chaired by Dan Connolly of W3C; DOM Working group, chaired by Lauren Wood of
SoftQuad; and CSS Working group, chaired by Chris Lilley of W3C.
The CSS Working Group began tackling issues that had not been addressed with CSS level 1,
resulting in the creation of CSS level 2 on November 4, 1997.
It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was
started in 1998, is still under development as of 2009.
13



In 2005 the CSS Working Groups decided to enforce the requirements for standards more
strictly. This meant that already published standards like CSS 2.1, CSS 3 Selectors and
CSS 3 Text were pulled back from Candidate Recommendation to Working Draft level.

14

Chapter 3 (HTML5)
Features









New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications

Introduction
HTML5 is a markup language for structuring and presenting content for the World Wide
Web(Web Pages) and is a core technology of the Internet. It is the fifth version of the
HTML(Hyper Text Markup Language) standard. Its core aims have been to improve the
language with support for the latest multimedia while keeping it easily readable by humans
and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5
is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.
Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to
the observation that the HTML and XHTML in common use on the World Wide Web are a
mixture of features introduced by various specifications, along with those introduced by
software products such as web browsers, those established by common practice, and the
many syntax errors in existing web documents. It is also an attempt to define a single markup
language that can be written in either HTML or XHTML syntax. It includes detailed
processing models to encourage more interoperable implementations; it extends, improves
and rationalises the markup available for documents, and introduces markup and application
programming interfaces (APIs) for complex web applications. For the same reasons, HTML5
is also a potential candidate for cross-platform mobile applications. Many features of
HTML5 have been built with the consideration of being able to run on low-powered devices
such as smartphones and tablets. In December 2011, research firm Strategy Analytics
forecast sales of HTML5 compatible phones will top 1 billion in 2013.
In particular, HTML5 adds many new syntactic features. These include the new <video>,
<audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG)
content (that replaces the uses of generic <object> tags) and MathML for mathematical
formulas. These features are designed to make it easy to include and handle multimedia and
graphical content on the web without having to resort to proprietary plugins and APIs. Other
new elements, such as <section>, <article>, <header> and <nav>, are designed to enrich
the semantic content of documents. New attributes have been introduced for the same
purpose, while some elements and attributes have been removed. Some elements, such as
<a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and
Document Object Model (DOM) are no longer afterthoughts, but are fundamental parts of the
HTML5 specification. HTML5 also defines in some detail the required processing for invalid
15

documents so that syntax errors will be treated uniformly by all conforming browsers and
other user agents.

Why HTML?




In previous version HTML have some limitations. To cover them a new version of HTML
was introduced that was known as HTML5.
There are many features in HTML5 which will attract us in coming future.
Now HTML5 have some benefits, some of them are:-

1. Accessibility
HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The
new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>,
<aside>, etc. allow screen readers to easily access content. Before, your screen readers had no
way to determine what a given <div> was even if you assigned it an ID or Class. With new
semantic tags screen readers can better examine the HTML document and create a better
experience for those who use them.
ARIA is a W3C spec that is mainly used to assign specific ―roles‖ to elements in an HTML
document – essentially creating important landmarks on the page: header, footer, navigation or
article, via role attributes. This has been well overlooked and widely under-used mostly due to
the fact that it wasn‘t valid, however, HTML5 will validate these attributes. Also, HTML5 will
have built in roles that can‘t be over-ridden making assigning roles a no brainer. For a more in
depth discussion on HTML5 and ARIA please visit the WAI.

2. Video and Audio Support
Forget about Flash Player and other third party media players, make your videos and audio truly
accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly
has always been pretty much a nightmare, you had to use the <embed> and <object> tags and
assign a huge list of parameters just to get the thing visible and working correctly. Your media
tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and
audio tags basically treat them as images; <video src=‖url‖/>. But what about all those
parameters like height, width and autoplay? No worries my good man, just define those attributes
in the tag just like any other HTML element: <video src=‖url‖ width=‖640px‖ height=‖380px‖
autoplay/>.

3. Doctype
<!DOCTYPE html>
Yup that‘s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more
cutting and pasting some long unreadable line of code and no more dirty head tags filled with
doctype attributes. You can simply and easily type it out and be happy. The really great thing
about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded
IE6.

4. Cleaner Code
16

If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you.
HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily
separate meaning from style and content.
With HTML5 you can finally cure your ―divitis‖ and ―classitis‖ by using semantic and HTML
headers to describe your content. Previously you would generally just use div‘s for every block
of content than drop an id or class on it to describe its content but with the new <section>,
<article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup
cleaner as well as keep your CSS better organized and happier.

5. Smarter Storage
One of the coolest things about HTML5 is the new local storage feature. It‘s a little bit of a cross
between regular old cookies and a client-side database. It‘s better than cookies because it allows
for storage across multiple windows, it has better security and performance and data will persist
even after the browser is closed. Because it‘s essentially a client side data base you don‘t have to
worry about the user deleting cookies and it is been adopted by all the popular browsers.Local
storage is great for many things, but it‘s one of HTML5 tools that are making web apps possible
without third party plugins. Being able to store data in the user‘s browser allows you to easily
create those app features like: storing user information, the ability to cache data, and the ability
to load the user‘s previous application state.

6. Better Intraction
Awe, we all want better interactions, we all want a more dynamic website that responds to the
user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>,
the drawing HTML5 tag that allows you to do most (if not more) interactive and animated
possibilities than the previous rich internet application platforms like Flash.
Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better
user experience and a beefier, more dynamic web application — here‘s a quick list of native
APIs:
 Drag and Drop (DnD)
 Offline storage database
 Browser history management
 document editing
 Timed media playback

7. Game Development
Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a
great, mobile friendly way to develop fun, interactive games. If you‘ve built Flash games before,
you‘ll love building HTML5 games.

17

8. Cross Browser Support

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera)
and the HTML5 doctype was created so that all browsers, even the really old and annoying ones,
er, IE6 can use it. But just because old browsers recognize the doctype that doesn‘t mean they
can use all the new HTML5 tags and goodies.

9. Mobile, Mobile, Mobile
Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as
designing and constructing for their smaller touch screen displays — hence the popularity of
Responsive Design.

There are some great meta tags that also allow you to optimize for mobile:




Viewport: allows you to define viewport widths and zoom settings
Full screen browsing: IOS specific values that allow Apple devices to display in full
screen mode
Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the
home screen of an IOS and Android mobile device

10. It’s The Future, GET WITH IT
The number one reason why you should start using HTML5 today is this: it‘s the future, start
using it now so you don‘t get left behind. HTML5 is not going anywhere and as more and more
elements get adopted more and more companies will start to develop in HTML5. HTML5 is
essentially just HTML, it‘s not scary, it‘s not anything you really need to figure out or relearn —
if you‘re developing XHTML strict right now you are already developing in HTML5 so why not
take full advantage of it‘s current capability?
You really don‘t have any excuses not to adopt HTML5 and begin your new love affair with it.
Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other
benefits and fun features I haven‘t even really jumped into yet, but that is the great thing about it,
you can just start using it right now and not even change the way you design. So, start using it
right now, whether you are just simplifying and making your markup more semantic OR you are
gonna build some sick new mobile game that will take over the world — who knows, maybe you
can start selling stuffed animal versions of your gaming characters too.

18

New Tags In HTML5
S.no

Tag

Use

1

<article>

Specifies an article

2

<aside>

3

<audio>

Specifies content aside from the page
content
Specifies sound content

4

<bdi>

5

<canvas>

6

<command>

7

<data>

8

<datagrid>

9

<datalist>

10

<details>

11

<embedded>

12

<eventsource>

13

<figcaption>

14

<figure>

15

<footer>

16

<header>

17

<hgroup>

18

<keygen>

19

<mark>

20

<meter>

21

<nav>

22

<progress>

23

<ruby>

24

<rp>

25

<rt>

26

<section>

For bi-directional text formatting
Define graphics
Specifies a command
Allows for machine-readable data to be
provided
Allows for an interactive representation of
tree, list, or tabular data
Specifies an "autocomplete" dropdown list
Specifies details of an element
Specifies external application or interactive
content
Specifies a target for events sent by a server
Specifies caption for the figure element.
Specifies a group of media content, and their
caption
Specifies a footer for a section or page
Specifies a group of introductory or
navigational aids, including hgroup
elements
Specifies a header for a section or page
Generates a key pair
Specifies marked text
Specifies measurement within a predefined
range
Specifies navigation links
Specifies progress of a task of any kind
Specifies a ruby annotation (used in East
Asian typography)
Used for the benefit of browsers that don't
support ruby annotations
Specifies the ruby text component of a ruby
annotation.
Specifies a section
19

27
28

<summary>

29

<time>

30

<track>

31

<video>

32

Specifies media resources
Specifies a summary / caption for the
<details> element
Specifies a date/time
Specifies a text track for media such as video
and audio
Specifies a video
Specifies a line break opportunity for very
long words and strings of text with no
spaces.

<source>

<wbr>

20

HTML5 VS. HTML4

HTML4
Developed in 1990.
It has loose syntax. Like <p> etc.
It used common structures.

HTML5
Introduced in 2011 and Still developing.
Has not loose syntax.
HTML5 is developed keeping in mind the
usage of modern websites. New tags have been
added: ‗header‘ for headings; ‗nav‘ for website
navigation block; ‗footer‘ for bottom lines in
web page; ‗section‘, ‗article‘ or ‗aside‘ for
particular sections such as blogs, etc.
HTML5 is attempting to solve this, so that
browser developers can standardize and save
time and money. It is also more flexible to
handle inaccurate syntax, and it specifies the
rules related to the parsing and lexing.

HTML4 supports what is called ‗tag soup‘, this
is, the ability to write malformed code and
have it corrected into a valid document. But the
problem is that rules for doing this aren‘t
written anywhere, so developers just have to
test malformed documents in various browsers
(especially Internet Explorer) to handle any
errors. Also, HTML4 lacks rules for parsing,
which makes it more difficult to handle errors.
HTML4 is the markup language used for HTML5 is not yet an official standard, all
writing websites worldwide, and it is supported major browsers (Safari, Chrome, Firefox,
Opera, Internet Explorer) support most of its
by all web browsers.
features.
HTML4 needed external software, like Flash, HTML5 can embed video on web-pages
without using any special software. It is also
to play videos and multimedia content.
said to be capable of playing video games (8bit) on the browser itself.

21

HTML5 VS. FLASH
While HTML5 is often compared to Flash, the two technologies are very different. Both include
features for playing audio and video within web pages, and for using Scalable Vector Graphics.
HTML5 on its own cannot be used for animation and interactivity - it must be supplemented with
CSS3 or Javascript. There are many Flash capabilities that have no direct counterpart in HTML5.
See Comparison of HTML5 and Flash.
Although HTML5 has been well known among web developers for years, it became the topic of
mainstream media around April 2010 after Apple Inc's then-CEO Steve Jobs issued a public
letter titled "Thoughts on Flash" where he concludes that "[Adobe] Flash is no longer necessary
to watch video or consume any kind of web content" and that "new open standards created in the
mobile era, such as HTML5, will win". This sparked a debate in web development circles where
some suggested that while HTML5 provides enhanced functionality, developers must consider
the varying browser support of the different parts of the standard as well as other functionality
differences between HTML5 and Flash.In early November 2011 Adobe announced that it will
discontinue development of Flash for mobile devices and reorient its efforts in developing tools
utilizing HTML 5.
HTML5 can be used as an alternative to Adobe Flash. Both include features for playing audio
and video within web pages, and integrated vector graphics are possible with both.
"HTML5" in this article sometimes refers not just to the HTML5 specification, which does not
itself define ways to do animation and interactivity within web pages, but to HTML5 and related
standards like JavaScript or CSS 3. Animation using JavaScript is also possible with HTML 4.

Usage statistics(FLASH)
Flash Player usage statistics according to Adobe:





85% of the most-visited web sites use Flash,
75% of web video is viewed using the Flash Player,
98% of enterprises rely on the Flash Player, and
70% of web games are made in Flash.

22

Usage statistics(HTML5)
Now a days HTML5 slowly-slowly covers flash market. According to drupal.org use of HTML5
in web projects day by day. This statement depend on the survey of drupal.org which was started
from july 2010 and still running onwards.

23

Advantages and Disadvantages of HTML5
 Advantages
Basically HTML5 has it‘s many new syntactical features, which include the <video>, <audio>,
and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it
will be very easy to integrate multimedia and graphical content to web without using flash and
third party plugins.
Some of advantages are
 Mutuality
Due to usability purpose the web sites made by developers are highly interactive nowadays and
for this developers need to include fluid animations, stream video, play music and Social
Network sites like Facebook and Twitter into the websites. Till now they have only the option to
integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume
so much time to develop and even the complexity of web application also increased. But now
with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts
and animation and many other rich content without using any plugins and third party programs
as the functionality is built into the browser.
 Consistency
As websites adopt the new HTML5 elements we will see more greater consistency in terms of
the HTML used to code a web page on one site compared to another. This will make it more
easier for designers and developers to immediately understand how a web page is structured.
 Client-Side Database
While cookies have been used to track unique user data for years, they have serious
disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request
header. This can end up having a measurable impact on response time. So a best practice is to
reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two
different storage in HTML5) in place of cookies. It is not a permanent database, but enables you
to store structured data, temporarily.
 Geolocation
With help of Geolocation any one can find out where you are in the world and sharing that
information with people. There is different ways to figure out where you are — your IP address,
your wireless network connection, which cell tower your phone is talking to, or dedicated GPS
hardware that calculates latitude and longitude from information sent by satellites in the sky. But
The new HTML5 geolocation APIs make location, whether generated via GPS or other methods,
directly available to any HTML5-compatible browser-based application.

24

 Disadvantages
All we are using HTML5 today, but the reality is that there's a few problems that prevent the
language from use in modern websites.
Some of them are
 Browser Support
The main problem with HTML5's acceptance is that only modern browsers support it. By
modern, I mean almost everything except for Internet Explorer. The new version...IE9 offers
excellent support, but as of this writing it's not quite out of beta. Even if it were, the majority of
people will still use older versions of IE for quite some time. There are things you can do to
make the language play nice with older browsers, but none of them are perfect.
 The Language is a Spec
Another problem is that although parts of the language are very stable, the language itself is
considered a work in progress, so technically, any of the elements could change at any time. The
language is not expected to be completed for several years, which complicates things further.
Thankfully, a lot of the language is considered stable and ready to use. I think it's such a great
move forward, that you should develop a Graceful Degradation approach to writing your HTML.
That simply means writing HTML that will work with older browsers, but will offer users with
more modern browsers an enhanced experience.
 Media Licensing Issue
Another ugly fact about HTML5 is that because of licensing issues, rich media has to be
compressed in multiple formats in order to be compatible with most browsers. So you'll probably
use something like mp3 audio for webkit browsers (safari, chrome), and ogg for Mozilla
(Firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be
resolved soon.

25

Chapter4
(CSS3)





Latest Standard for
Cascading Style Sheet.
New ways for fantastic design.
Added new modules.
Completely backwards compatible.

Introduction











Very briefly, CSS stands for ‗Cascading
Style Sheets‘ and is a mark-up language for altering and giving style to a website or elements
within a website. The 3 represents the next generation/version of style sheet language.
It is very important to learn that while it is fun to learn and play with CSS3, it is still not yet
fully supported in current browsers. This means that if you are to incorporate CSS3 in a live
website, it would be a good idea to make sure there is fallback code for the browsers that are
struggling to support it.
CSS3 is short form for Cascading Style Sheet Version 3. Earlier there was version 2(CSS2).
CSS3 added some new features. CSS3 is completely backwards compatible, so you will not
have to change existing designs. Browsers will always support CSS2. CSS3 offers a huge
variety of new ways to create an impact with your designs, with quite a few important
changes.
Using CSS3 keyframe animations, developers can create smooth, maintainable animations
that perform relatively well and that don‘t require reams of scripting. It‘s just another way
that CSS3 is helping to solve a real-world problem in an elegant manner.
CSS3 is a sprawling specification that attempts to modularize CSS and both extend and
improve on previous CSS versions.
Web professionals looking to make a determination of what to pay attention to in the future
of CSS3 are likely put off by the list of various components found at
www.w3.org/style/css/current-work#css3.

26

Why CSS3?




In previous version CSS have some limitations. To cover them a new version of CSS was
introduced that was known as CSS3.
There are many features in CSS3 which will attract us in coming future.
Now CSS3 have some benefits, some of them are:-

1. CSS3 Borders
CSS3 contain following border properties:




border-radius
box-shadow
border-image

With CSS3, you can create rounded borders, add
shadow to boxes, and use an image as a border without using a design program, like Photoshop.
The CSS3 border-radius property allows web
developers to easily utilise rounder corners in their design elements, without the need for corner
images or the use of multiple div tags, and is perhaps one of the most talked about aspects of
CSS3.
Since first being announced in 2005 the border-radius property has come to enjoy widespread
browser support (although with some discrepancies) and, with relative ease of use, web
developers have been quick to make the most of this emerging technology.

2. CSS3 Text Effects
CSS3 contain following background properties:



background-size
background-origin

CSS3 contains several new background properties, which allow greater control of the
background element. CSS3 allows web designers to specify multiple background images for
box elements, using nothing more than a simple comma-separated list. The property adds
new functionality to CSS allowing designers to specify the size of background images using
either lengths, percentages, or by using one of two keywords; contain or cover.

27

3. CSS3 Text Effects
CSS3 contain following Text Effect properties:
 text-shadow
 word-wrap
The new CSS3 properties give developers a wonderful chance to enhance their designs in a way
that‘s quick and easy, yet visually impressive. To give a website a visually impressive look,
designers put emphasis on neat and stylish typography. For years designers have depended on
Photoshop, but CSS3 is a revolution with easy-to-create text effects. Almost all of the major
browsers now support most of the CSS3 features so that‘s another reason for mastering the new
techniques.

4. CSS3 Fonts
Before CSS3, web designers had to use fonts that were already installed on the user's computer.
With CSS3, web designers can use whatever font he/she likes. When you have found/bought the
font you wish to use, include the font file on your web server, and it will be automatically
downloaded to the user when needed.


Your "own" fonts are defined in the CSS3 @font-face rule.

5. CSS3 2D Transforms
A transform is an effect that lets an element change shape, size and position.
CSS3 contain following 2D Transforms properties:
 translate()
 rotate()
 scale()
 skew()
 matrix()

6. CSS3 3D Transforms
CSS3 allows you to format your elements using 3D transforms.
CSS3 contain following 3D transforms properties:



rotateX()
rotateY()

7. CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash
animations or Java Scripts.
28

8. CSS3 Animations
With CSS3, we can create animations, which can replace animated images, Flash animations,
and Java Scripts in many web pages

New Property and Rules in CSS3
S.No
Property
1

border-radius

2

border-image

3

border-shadow

4

Background-size

5

Background-orizin

6
7

Text-shadow
Word-wrap

8

@font-face

9

Translate( )

10

Rotate( )

11

Scale( )

12

Skew( )

13

Matrix( )

14

rotateX( )

15

RotateY( )

16

Transition

17

@keyframes

18

Animation

Use
the border-radius property is used to create rounded
corners.
border-image property you can use an image to create
a border.
the box-shadow property is used to add shadow to
boxes.
The background-size property specifies the size of
the background image.
The background-origin property specifies the
positioning area of the background images.
the text-shadow property applies shadow to text.
the word-wrap property allows you to force the text
to wrap.
Your "own" fonts are defined in the CSS3 @fontface rule.
With the translate() method, the element moves from
its current position, depending on the parameters
given for the left (X-axis) and the top (Y-axis)
position.
With the rotate() method, the element rotates
clockwise at a given degree. Negative values are
allowed and rotates the element counter-clockwise.
With the scale() method, the element increases or
decreases the size, depending on the parameters
given for the width (X-axis) and the height (Y-axis).
With the skew() method, the element turns in a given
angle, depending on the parameters given for the
horizontal (X-axis) and the vertical (Y-axis) lines.
The matrix() method combines all of the 2D
transform methods into one.
With the rotateX() method, the element rotates
around its X-axis at a given degree.
With the rotateY() method, the element rotates
around its Y-axis at a given degree.
CSS3 transitions are effects that let an element
gradually change from one style to another.
The @keyframes rule is where the animation is
created. Specify a CSS style inside the @keyframes
rule and the animation will gradually change from the
current style to the new style.
animation is created in the @keyframe, bind it to a
selector, otherwise the animation will have no effect.

29

Browser Comptability
CSS3 is not yet a W3C standard, but the major browsers support many of the new properties.
The browser support for some properties are given below.

Some Browsers which don’t compatible with css?
For those browsers we fix bug. For some famous browsers which are given below
Browser Name







Bug Fix/Hacks

Mozilla FirefoxGoogle ChromeOpera MiniRockmaltInternet ExplorerSafari-

-moz-webkit-0-k-ms-webkit-

30

Why and How To Use Fix Bugs?
For a while now, here on Smashing Magazine, we have taken notice of how many designers are
reluctant to embrace the new technologies such as CSS3 because of the lack of full crossbrowser support for this technology. Many designers are complaining about the numerous ways
how the lack of cross-browser compatibility is effectively holding us back and tying our hands
— keeping us from completely being able to shine and show off the full scope of our abilities in
our work. Many are holding on to the notion that once this push is made, we will wake to a
whole new Web — full of exciting opportunities just waiting on the other side. But on the other
hand many features are there in css3 which forced us to use css3 now. But only one disadvantage
(ie. Cross browser compatibility) stops us. But for only one disadvantage we don‘t stop using
this. So for coming up on cross browser compatibility we use Fix Bugs. Those browser those
don‘t have Accepted property then we use adding bug in front of property in css3 rules.
For ex.
If we want to use Border radius in any web page, or it‘s a property of CSS3 which is not still w3c
standard. So if in case any browser like Mozilla firefox don‘t support this property then we use
fix bugs in property.
Simple syntax:{
Border-radius:10px;
}
Fix bugs syntax:- (for Mozilla Firefox)
{
-moz-radius:10px;
}
If in case Code first is not run in Mozilla firefox than we use second code that will surely
execute.Css3 is a upcoming standard for the Cascading Style Sheet and covering lot of fun that‘s
why we can not wait for w3c to launched fully version that‘s why we found many new tricks to
use css3. Fix Bugs/Hacks is one of them.

31

CSS VS CSS3










We believe in the power, speed and ―update-ability‖ of CSS3. Not having to load background
images as structural enhancements (such as PNGs for rounded corners and gradients) can
save time in production (i.e. billable hours) and loading (i.e. page speed). At company,
we‘ve happily been using CSS3 on client websites for over a year now, and we find that
implementing many of these properties right now is the most sensible way to build websites.
Which is better than CSS.
CSS3 is an advanced version of CSS. It is still under development mode but many browsers
have started supporting it long back. Newer versions of Mozilla, Chrome, Opera support
CSS3 with some modifications in the code for each one of them. For using css3 in browsers
we should use some modifications in code. While using CSS we don‘t have to use
Modifications in code.
In the mid- to late nineties and into the early part of this century, most web designers and
developers were using a feature of HTML called tables to maintain the ―look‖ or their
websites, and the result was that HTML files were often very large and hard to maintain.
With CSS, however, developers could keep design and data separate, which made for clean,
easy to maintain HTML and faster load times, since the file sizes were smaller.
CSS3 promises similar results by offering features that could only be accomplished through
the use of images by using traditional CSS.
The border-radius property is an excellent example. While CSS allows developers to add a
border to box elements, developers had to create an image that matched exactly the size and
shape of the CSS box in order to get the look of rounded corners. The creation of these
images increases development time, and calling these images from the server means slower
load times for users and higher server strain.
One drawback of using CSS3 is that while the latest releases for all the major browsers
support CSS3, many users do not use the current release. Site owners opting for CSS3 design
should take care to ensure that while adding flare, they do not create a ―broken‖ site for users
without CSS3 support.

32

Advantages and Disadvantages of CSS3
ADVANTAGES
Using style sheets
Long before the development of the concept of Cascading Style Sheets to refer to CSS3 colors,
fonts, backgrounds, borders, etc. the HTML-markup was used. But with the introduction of
Cascading Style it became possible to ask in a separate style sheet, causing users to have easy
and convenient tool. Related to this the another advantage of CSS3 – it is easier to make
changes: You can modify individual modules, which after testing are integrated with the overall
system.
Differentiation and isolation
The concept of CSS3 allows you to separate presentation from structure. For example, before
heading to indicate the center of the page in Arial bold blue color the HTML-markup was used
like this:
<h2 align="center">
<font color="blue" size="+6" face="Arial">
<i> Usage of CSS </ i>
</ Font>
</ H2>
Layout multiple columns
Module is based on multiple columns (Multi-Column Module)/ It is an important function of
CSS3, which allows to place text in multiple columns. The advantage for users is that while
reading the text in multiple columns you do not need to scroll up and down and side to side, the
text is easy to read, it is not too short lines and, above all, everything can be placed on the same
page that layout makes a convenient and economical.
Flexibility in use
The concept of cascading style sheets allows you to attach information to CSS-style in a separate
document or as an attachment within a HTML-document. You can also import multiple style
sheets anywhere. Users can specify an alternative style sheets, choosing between them as needed.

33

DISADVANTAGES
Browser Support
Different browsers will render CSS3 layout differently as a result of browser bug or lack of
support for CSS3 features if CSS3 "hacks" was not implemented in browser.
It‘s the main disadvantage of css3. CSS3 still not providing the browser support. For covering
over it we have use some modifications and some hacks, because w3c still not fully launched
CSS3. It‘s sill developing that‘s the biggest disadvantages of it.

34

REFERENCES
http://www.w3schools.com/css3
http://www.css3.info
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3.org/Style/CSS/current-work.en.html
https://www.w3schools.com/html/html5_intro.asp
http://www.html5rocks.com

35

Report file on Web technology(html5 and css3)

Recommended

More Related Content

What's hot (20)

Similar to Report file on Web technology(html5 and css3) (20)

Recently uploaded (20)

Report file on Web technology(html5 and css3)