Punjab College Technical Education Report HTML5

Punjab College Of Technical
Education

Report
On
HTML 5

1. Introduction
HTML stands for Hyper Text Markup Language is the predominant markup language for web pages.
HTML elements are the basic building-blocks of WebPages. 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 normally come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is
the end tag. In between these tags web designers can add text, tables, and images.

The purpose of a web browser is to read HTML documents and compose them into visual 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 in languages such as JavaScript which affect the behavior of HTML
WebPages.

2. History
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. Berners-Lee specified HTML and wrote the browser and
server software in the last part of 1990. In that year Berners-Lee and CERN data systems engineer Robert
Cailliau collaborated on a joint request for funding but the project was not formally adopted by CERN. In
his personal notes from 1990 he lists "some of the many areas in which hypertext is used" and puts an
encyclopedia first.

The first publicly available description of HTML was a document called HTML Tags, first mentioned on
the Internet by Berners-Lee in late 1991. It describes 20 elements comprising the initial, relatively simple
design of HTML. Except for the hyperlink tag these were strongly influenced by SGML guide, an in-
house SGML based documentation format at CERN. Thirteen of these elements still exist in HTML 4.

3. Markup
HTML markup consists of several key components, including elements and their attributes, character-
based data types, character references and entity references. Another important component is
the document type declaration, which triggers standards mode rendering.

<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>

</body>
</html>
3.1. Elements
HTML documents are composed entirely of HTML elements that, in their most general form have three
components: a pair of tags, a "start tag" and "end tag"; some attributes within the start tag; and finally, any
textual and graphical content between the start and end tags, perhaps including other nested elements.
The HTML element is everything between and including the start and end tags. Each tag is enclosed in
angle brackets.

3.2. Attributes
Most of the attributes of an element are name-value pairs, separated by "=" and written within the start tag
of an element after the element's name. The value may be enclosed in single or double quotes, although
values consisting of certain characters can be left unquoted in HTML Leaving attribute values unquoted is
considered unsafe. In contrast with name-value pair attributes, there are some attributes that affect the
element simply by their presence in the start tag of the element, like the is map attribute for
the image element.

3.3. Data types
HTML defines several data types for element content, such as script data and style sheet data, and a
plethora of types for attribute values, including IDs, names, URIs, numbers, units of length, languages,
media descriptors, colors, character encodings, dates and times, and so on. All of these data types are
specializations of character data.

4. Versions
i> November 24, 1995

 HTML 2.0 was published as IETF RFC 1866. Supplemental RFCs added capabilities

ii> January 1997

 HTML 3.2 was published as a W3C Recommendation. It was the first version developed and
standardized exclusively by the W3C, as the IETF had closed its HTML Working Group in
September 1996

iii> April 1998

 HTML 4.0was reissued with minor edits without incrementing the version number.

iv> January 2008

 HTML5 was published as a Working Draft (link) by the W3C.

5. HTML 5
HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology
of the Internet. It is the fifth revision of the HTML standard and as of August 2011 is still under
development. 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 HTML4, but XHTML1
and DOM2HTML particularly JavaScript as well.

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new
standard in 2004, when the World Wide Web Consortium(W3C) was focusing future developments
on XHTML 2.0, and HTML 4.01 had not been updated since 2000. In 2009, the W3C allowed the
XHTML 2.0 Working Group's charter to expire, and decided not to renew it. W3C and WHATWG are
currently working together on the development of HTML5.

Even though HTML5 has been well known among web developers for years, it became the topic of
mainstream media in April 2010 after Apple Inc's CEO Steve Jobs issued a public letter titled "Thoughts
on Flash" where he concludes that with the development of HTML5, Adobe Flash is no longer necessary
to watch video or consume any kind of web content. 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.

6. Logo
On 18 January 2011, the W3C introduced a logo to represent the use of or interest in HTML5. Unlike
other badges previously issued by the W3C, it does not imply validity or conformance to a certain
standard. As of 1 April 2011, this logo is official. When initially presenting it to the public, the W3C
announced the HTML5 logo as a "general-purpose visual identity for a broad set of open web
technologies, including HTML5, CSS, SVG, WOFF, and others". Some web standard advocates,
including The Web Standards Project, criticized that definition of "HTML5" as an umbrella term,
pointing out the blurring of terminology and the potential for miscommunication. Three days later, the
W3C responded to community feedback and changed the logo's definition, dropping the enumeration of
related technologies. The W3C then said the logo "represents HTML5, the cornerstone for modern Web
applications"

.

7. Markup
HTML5 introduces a number of new elements and attributes that reflect typical usage on
modern websites. Some of them are semantic replacements for common uses of generic block (<div>)
and inline (<span>) elements, for example <nav> (website navigation block), <footer>
or <audio> and <video> instead of<object>. Some deprecated elements from HTML 4.01 have been
dropped, including purely presentational elements such as <font> and <center>, whose effects are
achieved using Cascading. There is also a renewed emphasis on the importance of DOM scripting (e.g.,
JavaScript) in Web behavior.

The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however,
been designed to be backward compatible with common parsing of older versions of HTML. It comes
with a new introductory line that looks like an SGML document type declaration, <!DOCTYPE html>,
which triggers the standards-compliant rendering mode. As of 5 January 2009, HTML5 also
includes Web Forms 2.0, a previously separate WHATWG specification.

8. Features
In addition to specifying markup HTML5 provides some new features along with its previous features.
The new features provided by HTML5 are given below.

8.1. CANVAS

HTML5 defines the <canvas> element as “a resolution-dependent bitmap canvas that can be used for
rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page
where you can use JavaScript to draw anything you want. HTML5 defines a set of functions the
canvas API for drawing shapes, defining paths, creating gradients, and applying transformations.

8.2. Video
HTML5 defines a new element called <video> for embedding video in your web pages. Embedding video
used to be impossible without third-party plugins such as Apple QuickTime or Adobe Flash.

The <video> element is designed to be usable without any detection scripts. You can specify multiple
video files, and browsers that support HTML5 video will choose one based on what video formats they
support.

Browsers that don’t support HTML5 video will ignore the <video> element completely, but you can use
this to your advantage and tell them to play video through a third-party plugin instead. Kroc Camen has
designed a solution called Video for Everybody! that uses HTML5video where available, but falls back to
QuickTime or Flash in older browsers. This solution uses no JavaScript whatsoever, and it works in
virtually every browser, including mobile browsers.

8.3. Local storage

HTML5 storage provides a way for web sites to store information on your computer and retrieve it
later. The concept is similar to cookies, but it’s designed for larger quantities of information.

Cookies are limited in size, and your browser sends them back to the web server every time it requests a
new page which takes extra time and precious bandwidth. HTML5 storage stays on your computer, and
web sites can access it with JavaScript after the page is loaded.

8.4. WEB WORKERS

Web Workers provide a standard way for browsers to run JavaScript in the background. With web
workers, you can spawn multiple “threads” that all run at the same time, more or less. These
“background threads” can do complex mathematical calculations, make network requests, or access local
storage while the main web page responds to the user scrolling, clicking, or typing.

8.5. Offline Web Applications

Reading static web pages offline is easy: connect to the Internet, load a web page, disconnect from the
Internet, drive to a secluded cabin, and read the web page at your leisure. But what about web
applications like Gmail or Google Docs? Thanks to HTML5, anyone (not just Google!) can build a web
application that works offline.

Offline web applications start out as online web applications. The first time you visit an offline-enabled
web site, the web server tells your browser which files it needs in order to work offline. These files can be
anything — HTML, JavaScript, images, even videos. Once your browser downloads all the necessary
files, you can revisit the web site even if you’re not connected to the Internet. Your browser will notice
that you’re offline and use the files it has already downloaded. When you get back online, any changes
you’ve made can be uploaded to the remote web server.

8.6. GEOLOCATION
Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information
with people you trust. There is more than one way 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.

Geolocation support is being added to browsers right now, along with support for new HTML5 features.

8.7. MICRODATA

Microdata is a standardized way to provide additional semantics in your web pages. For example, you can
use microdata to declare that a photograph is available under a specific Creative Commons license. As
you’ll see in the distributed extensibility chapter, you can use microdata to mark up an “About Me” page.
Browsers, browser extensions, and search engines can convert your HTML5microdata markup into

a vCard, a standard format for sharing contact information. You can also define your own microdata
vocabularies.

The HTML5 microdata standard includes both HTML markup and a set of DOM functions. There’s no
harm in including microdata markup in your web pages. It’s nothing more than a few well-placed
attributes, and search engines that don’t understand the microdata attributes will just ignore them. But if
you need to access or manipulate microdata through the DOM, you’ll need to check whether the browser
supports the microdata DOM API

9. Difference Between HTML4 And HTML5

HTML4 HTML5

Elements like nav, header were not present. It brought new element for web structure like
nav, header etc
It was lack of rules of parsing so it is difficult Strictly parsing rules introduced in html5 so
to handle error. handle the error.
No multimedia supported without third party It inbuilt multimedia element in html5 like
Audio, video, convas.
It contains attributes like control menu, spell
These controls were not present check etc.

10. Websites using HTML5

 YouTube uses HTML5, www.youtube.com/html5
 Google wave, a collaboration tool from Google uses several html5 tags
 Only some of the browser only supports HTML5 features currently

Punjab College Technical Education Report HTML5

Punjab College Technical Education Report HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Punjab College Technical Education Report HTML5

Similar to Punjab College Technical Education Report HTML5 (20)

Recently uploaded

Recently uploaded (20)

Punjab College Technical Education Report HTML5