1st Lecture HTML 5

Introduction of
PREPARED BY: JOEL R.

HUBAHIB
CS3
Contents
O What is HTML?
O What is HTML5?
O How did HTML5 get started?
O History of HTML5
O Whats new in HTML5?
O Advantages of HTML5
O Difference of HTML5 with HTML4
O Web sites that using HTML5
O Browser Support
O HTML5 Tags
O References
What is HTML?
O A Web Page is created using a
languag+e
called,
Hypertext
Markup Language, better known
as HTML Code.
O HTML is
used to define the

structure and layout of a Web
page.
O HTML is
not a programming
language, it is a markup language
O File Extension :- .html or .htm
What is
O HTML 5 is the next version of Hyper Text
Markup Language(HTML4)
O It is developing by World Wide Web
consortium W3C and WHATWG.
O HTML5 will be the new standard for
HTML, XHTML, and the HTML DOM.
O The previous version of HTML came in
1999. The web has changed a lot since

then.
HTML5
Logo
How Did HTML5 Get

Started?
O HTML5 is a cooperation between the World Wide Web
Consortium (W3C) and the Web Hypertext Application

Technology Working Group (WHATWG).
O WHATWG was working with web forms and applications, and
O W3C was working with XHTML 2.0.
O In 2006, they decided to cooperate and create a new version of
HTML.
History of
O 1992
HTML is first defined
O 1993 HTML+ (some physical layout, fill-out forms, tables, math)
O 1994
HTML2.0 and HTML 3.0
O 1996 HTML 3.2
O 1997 HTML 4.0 (separates structure and presentation with
O 1999 HTML 4.01 (slight modifications only)
stylesheets)
O 2000
XHTML 1.0 (XML version of HTML 4.01)
O 2001 XHTML 1.1
O 2002 XHTML 2.0
O 2003 HTML 5 (to extend HTML 4's forms to provide many of the
features the XForms 1.0 introduced)
Whats New in
O New Doctype and Charset
O New Structure
O New Inline Elements
O New Dynamic Pages Support
O New Form Types
O New Elements
O Removes Some Elements
New Doctype and Charset

O You can use the HTML 5 doctype, which is very simple and
streamlined:
<!doctype html>
O The character set for HTML 5 is streamlined as well. It uses
UTF-8 and you define it with just one meta tag:

<meta charset="UTF-8">
New Structure
In general, Web pages have navigation, body content, and sidebar
content plus headers, footers, and other features. The tags for this
are:O<section>
O<header>
O<footer>
O<nav>
O<article>
O<aside>
O<figure>
New Inline elements and Dynamic

support
New Inline Elements
O<mark>
O<time>
O<meter>
O<progress>
New Dynamic Pages Support
OContext menus
Oasync attribute
O<details>
O<datagrid>
O<menu>
O<command>
New Form types and Other

elements
New Form Types
O HTML
O
O
O
O
O
O
O
O
O
O
5 supports all the

standard form input types, but it
adds a few more:
datetime
datetime-local
date
month
week
time
number
range
email
url
New Elements
O <canvas> - an element to give
you a drawing space in

JavaScript on your Web pages.
O <video> - add video
O <audio> - add sound to your Web
pages
Removes Some Elements

There are also some elements in
HTML 4 that will no longer be
supported by HTML 5.
Oacronym
Oapplet
Obasefont
Obig
Ocenter
Odir
Ofont
O frame
O frameset
O isindex
O noframes
O noscript
Os
O strike
O tt
Ou
To Quote or not to Quote

O HTML5 is not XHTML. You dont have to wrap your attributes in quotation
marks if you dont want to you.
<img src = DSC00624.jpg alt = About image />

OR
<img src = DSC00624.jpg alt = About image />
O Make up your own mind on this one. If you prefer a more structured
document, by all means, stick with the quotes.
Make your Content

Editable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul
contenteditable="true
">
<li> Gurpreet
Kaur(155) </li>
<li> Meeru Gupta
<li> Jyoti Batra
</li>
<li> Jaskiran Kaur
</li> </ul>
</body>
</html>
Email Inputs
<!DOCTYPE html>
<html lang="en">
<body>
<form action=""
method="get">
<label
for="email">Email:</label>
<input id="email"
name="email" type="email"
/>
<button type="submit">
Submit Form </button>
</form>
</body>
</html>
Video Format HTML tags

input
<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg"
width="320"
height="240"
controls="controls">
Your browser does not
support the video tag.
</video> </body>
</html>
Audio tag- input

<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>
New Tags in HTML5

Tag
Description
<article>New Defines an article
<aside>New Defines content aside from the
page content
<audio>New Defines sound content
<canvas>Ne Defines graphics
w
<command> Defines command button
New
<datalist>Ne Defines a dropdown list
w
<details>Ne Defines details of an element
w
<dialog>New Defines a dialog (conversation)
<embed>Ne Defines external interactive
w
content or plugin
<figure>New Defines a group of media
content, and their caption
<footer>New Defines a footer for a section or
page
<header>Ne Defines a header for a section or
w
page
<hgroup>Ne Defines information about a
<keygen>Ne Defines a generated key in a form

w
<mark>New Defines marked text
<meter>New Defines measurement within a
predefined range
<nav>New
Defines navigation links
<output>Ne Defines some types of output
w
<progress>N Defines progress of a task of any
ew
kind
<rp>New
Used in ruby annotations to define
what to show browsers that to not
support the ruby element.
<rt>New
Defines explanation to ruby
annotations.
<ruby>New Defines ruby annotations.
<section>Ne Defines a section
w
<source>Ne Defines media resources
w
<time>New Defines a date/time
<video>New Defines a video
O Mutuality
O Cleaner markup / Improved Code
O Improved Semantics
O Elegant forms
O Consistency
O Improved Accessibility
O Fulfill the need of Web application
O Offline Application cache
O Client-side database
O Geolocation support
Difference between HTML4 and

HTML5
HTML4
Elements like nav, header were
not present.
HTML5
It brought new element for web
structure like nav, header etc
Lack of rules of parsing, so it is

difficult to handle error.
Strictly parsing rules introduced

in html5 to handle the error.
No multimedia supported without Inbuilt multimedia element in

third party
html5 like Audio,video,convas
It was not available
It contains attributes like control

menu, spell check etc.
Web sites that using

HTML5
O YouTube uses HTML5
O Google wave, a collaboration tool from Google uses several
html5 tags.
O Only some of the browser only supports HTML5 features
currently.
Browser Support
O HTML5 is not yet an official standard, and no browsers have full HTML5
support.
O But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer)
continue to add new HTML5 features to their latest versions.

O Currently only Apples Safari is fully HTML 5 ready.
O Mozilla Firefox 3.5 supports the new coding but is not 100% compatible
References
O http://en.wikipedia.org/wiki/HTML
O http://www.w3.org
O http://www.whatwg.org
O http://www.w3schools.com

1st Lecture HTML 5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1st Lecture HTML 5

Uploaded by

Copyright:

Available Formats

Introduction of

PREPARED BY: JOEL R.

used to define the

O File Extension :- .html or .htm

O It is developing by World Wide Web

consortium W3C and WHATWG.

O HTML5 will be the new standard for

HTML, XHTML, and the HTML DOM.

O The previous version of HTML came in

1999. The web has changed a lot since

How Did HTML5 Get

Consortium (W3C) and the Web Hypertext Application

features the XForms 1.0 introduced)

New Doctype and Charset

UTF-8 and you define it with just one meta tag:

New Inline elements and Dynamic

New Form types and Other

5 supports all the

you a drawing space in

Removes Some Elements

To Quote or not to Quote

marks if you dont want to you.

<img src = DSC00624.jpg alt = About image />

document, by all means, stick with the quotes.

Make your Content

Video Format HTML tags

Audio tag- input

New Tags in HTML5

<keygen>Ne Defines a generated key in a form

Difference between HTML4 and

Lack of rules of parsing, so it is

Strictly parsing rules introduced

No multimedia supported without Inbuilt multimedia element in

It contains attributes like control

Web sites that using

continue to add new HTML5 features to their latest versions.

You might also like