What's so great about HTML5.
New Schematic Tags in HTML5.
New Vs Old Tags.
Audio & Video Tags.
Linear & Radial Gradients in CSS3.
Animation in CSS3.
HTML5 is the latest version of Hypertext Markup
Language, the code that describes web pages. It's
actually three kinds of code: HTML, which provides
the structure; Cascading Style Sheets (CSS), which
makes things happen
WHAT'S SO GREAT ABOUT HTML5?
HTML5 has been designed to deliver almost everything
you'd want to do online without requiring additional
software such as browser plugins. It does everything
from animation to apps, music to movies, and can also
be used to build incredibly complicated applications that
run in your browser.
There's more. HTML5 isn't proprietary, so you don't
need to pay royalties to use it. It's also cross-platform,
which means it doesn't care whether you're using a
tablet or a smartphone, a netbook, notebook or
ultrabook or a Smart TV: if your browser supports
HTML5, it should work flawlessly. Inevitably, it's a bit
more complicated than that. More about that in a
Element Level Purpose
<article> <Block> Independent content such as a blog post or article.
<aside> <Block> Content Slightly related to primary content on page.
<figure> <Block> Grouping stand-alone content, such as video or
<figcaption> <Text> For use with <figure>, (optionally) used to provide
<footer> <Block> Providing author, copyright data etc.
<header> <Block> Introductory heading, could include navigation.
<hgroup> <Block> For grouping <h1> to <h6>
<nav> <Block> Navigation – typically site level.
<mark> <Text> Text to be referenced or highlited.
<section> <Block> Grouping of content usually with a heading, similar to
<time> <Text> For date and/or time representation.
Background: -webkit-gradient(radial, center center, 0,
center center, 460, from(#1A82F7), to(#2F2727))
SVG: Scalable Vector Graphics.
We can create rectangle & Circle using SVG.
<svg width=“500” height=“300”>
<rect x=“” y=“” width=“” height=“”
fill=“” stroke=“” stroke-width=“”/>
Click Here For Results
<svg width="500" height="300">
<circle cx="300" cy="70" r="40"
stroke-width="2" fill="red" />
Click Here For Results.
The HTML5 <canvas> element is used to draw
graphics, on the fly, via scripting (usually
The <canvas> element is only a container for
graphics. You must use a script to actually draw the
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
Your browser does not support the HTML5
Click Here For Demo
Click Here For more Canvas Examples
-webkit-transition( property time, )
For Chrome and Safari
-moz-transition( property time,)
-o-transition( property time,)
Learn Complete Web Designing Online
Learn HTML5 Online
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.