HTML5 & CSS3

Graceful Degradation and Progressive

Enhancement
(Or: Say “Good Bye!” to Flash and Photoshop)

07/12/21 ataul haque 07611 1

 
What is HTML5

History of HTML

Difference of HTML5 with HTML4 and
XHTML

New features in HTML5

Web applications currently using HTML5

07/12/21 ataul haque 07611 2

  HTML 5 is the next version of Hyper Text
Markup Language
 It is developing by World Wide Web
consortium W3C.
 It is a joint venture of apple and adobe.
 Html5 is a challenge to microsoft’s
Silverlight

07/12/21 ataul haque 07611 3

  In parallel with XHTML W3C worked on different
language that is not compatible to HTML and XHTML
1.0,known as XHTML2
 HTML5 was first started by Mozilla, Apple, and Opera
under a group called the WHATWG(Web Hypertext
Application Technology Working Group). In 2006
W3C showed an interest in HTML5 and in 2007 they
created a working group to work in HTML5 project.
HTML5 is still under development.

07/12/21 ataul haque 07611 4

07/12/21 ataul haque 07611 5
 Web is the commonly used medium to share and
network each other globally. So technologies used
in web are common and platform independent. But
to give more features the companies are using their
own technologies.
To give back the openness and platform
independence, W3C is developing HTML5

07/12/21 ataul haque 07611 6

  HTML5 introduces new elements and its attributes like
<audio> ,<video>. The above attributes are common
to all the media elements
 The new content model concepts (replacing HTML4's
block and inline concepts)
 HTML 5 allows MathML and SVG elements to be
inside a document

New elements are introduced for a better structure.
For eg: section,article,aside,Hggroup etc

ataul haque 07611

07/12/21 7
  Other new elements in HTML5 are
video,audio,embed,mark,progress,meter,time,ruby,rt,rp,can
vas,command,details,datalist etc
 There are several new global attributes. They are
contentedittable, contextmenu, draggable, hidden, spell
check etc
 Some elements are missing for HTML5,they are
 big,center,font,u,s,strike etc. These effects can be
better handled by CSS
 frames, frameset, noframes etc. Their usage affected
usability and accessibility for the end user in a
negative way
 acronym, applet, isindex, dir. Their usage creates
confusion. So they avoided

ataul haque 07611

07/12/21 8
  Some attributes are not allowed in HTML5:-Most of the
styling attributes are removed from the HTML5. User can
use CSS for that purpose. Examples of removed attributes
are given below.
align attribute on caption, iframe, img, input, object, legend, table,
hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot,
th, thead and tr
background attribute on body.
Bgcolor attribute on table, tr, td, th and body.
Border attribute on table and object.
Cellpadding and cellspacing attributes on table

07/12/21 ataul haque 07611 9

07/12/21 ataul haque 07611 10
 Another application of html5.

07/12/21 ataul haque 07611 11

 New Tags
• datatemplate • nav
• Article
• embed • nest

• Aside • event-source • progress

• figure • source
• footer • output
• Audio
• header • time

• Canvas • mark • video

• meter

• Command
07/12/21 ataul haque 07611 12
07/12/21 ataul haque 07611 13
 <header>
<nav>
<article>

<aside>

<footer>

07/12/21 ataul haque 07611 14

 <time>

<figure>

<legend> <meter>

07/12/21 ataul haque 07611 15

 Canvas Examples: Graphs
• PlotKit
• http://www.liquidx.net/plotkit/
• JavaScript library
• Draws graphs from any
data source, such as a
table

07/12/21 ataul haque 07611 16

 Canvas Examples: Applications
• Yahoo! Pipes
• http://pipes.yahoo.com/
• Interactive, drag and drop
interface

07/12/21 ataul haque 07611 17

 Canvas Examples: Applications
• CanvasPaint
• http://canvaspaint.org/
• Clone of MS Paint built
with Canvas
• Could be used to build a
Shared Whiteboard
application

07/12/21 ataul haque 07611 18

 Canvas Examples: Games
• Canvex
• http://canvex.lazyilluminati.com/
• Experimental First-Person
Shooter Game
• 3D Graphics

07/12/21 ataul haque 07611 19

 Video and Audio
• Videos have become very
popular
• Currently difficult to
embed videos in HTML
• Flash has become the de
facto standard
• Adding native support to
browsers

07/12/21 ataul haque 07611 20

 Using Video

• <video src="movie.ogg"
id="video">...</video>
• <button onclick="video.play();">
Play
</button>
07/12/21 ataul haque 07611 21
 New features in HTML5
 API's for multimedia by using video and audio tags
 API that allow offline web applications
 Drag and drop API
 API that exposes the history and allows pages to add to it to
prevent breaking the back button
 An API that allows a Web application to register itself for
certain protocols or media types
 Editing API in combination with a new global contenteditable
attribute
 HTML Microdata
 HTML canvas 2D context
 HTML5 web messaging

07/12/21 ataul haque 07611 22

 Form Controls: Dates and Times

• <input type="datetime">
• <input type="date">
• <input type="time">
• And more…

07/12/21 ataul haque 07611 23

 Form Controls: Numbers

• <input type="number">
• <input type="range">

07/12/21 ataul haque 07611 24

 Form Controls: Email and URIs

• <input type="email">
• <input type="url">

07/12/21 ataul haque 07611 25

 Web sites that 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


07/12/21 ataul haque 07611 26

 Reference

Will HTML 5 Restandardize the Web? By steven j
Nicholas

http://wikipedia.com/

http://htmlrocks.com/

http://scirus.com/

http://miteducation.com/

07/12/21 ataul haque 07611 27

07/12/21 ataul haque 07611
28