This presentation cannot be viewed in your browser.

For the best experience please use the latest Chrome, Safari or Firefox browser.

A glance into HTML5 and CSS3

Suresh Alse

Overview

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.


A cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) produced HTML5.


HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.

Under HTML5's "umbrella"



Basic HTML5 spec

The Doctype

For XHTML1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For HTML4 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For HTML5
<!doctype html>

The html element

In XHTML-based syntax, you’d be required to include an xmlns attribute. In HTML5 it is not required
<html lang="en">
// your html code
</html>

The head

To specify character encoding.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

In HTML5:
<meta charset="utf-8">

The script and link tags

In XHTML:
<script type="text/javascript" src="script.js"> </script>

In HTML5
<script src="script.js"> </script>

In XHTML:
<link href="impress.css" type="text/css" rel="stylesheet" />

In HTML5:
<link href="impress.css" rel="stylesheet" />

Closing tags

In XHTML it is required to close tags like img, link, br, hr, input even though they do now contain child elements.
In HTML5 it is optional. In HTML5 both of the following are valid.
<input type="text">
<input type="text" />

HTML5 Forms

Overview

The "placeholder" Attribute
It allows a short hint to be displayed inside the form element
<input type="text" placeholder="Enter here" >

The "readonly" Attribute
<input type="text" value="readonly" readonly >

The "multiple" Attribute
If present, indicates that multiple values can be entered in a form control. Unlike in older HTML, In HTML5, it can be added to email and file input as well
<input type="file" multiple >
The "required" and "pattern" Attributes
The Boolean "required" attribute tells the browser to only submit the form if the field in question is filled out correctly.
<input type="text" required>

With the help of "pattern" attribute it is possible to set some rules on the input. Here is an example which takes in inputs with more than 6 characters. \S refers to “any nonwhitespace character,” and {6,} means “at least six times.”

<input type="text" required pattern="\S{6,}">

New Form Input Types
New Form Input Types

New Tags
Video and Audio
The "video" tag
<video src="video.webm" width="475" height="280" controls></video>

The "audio" tag
<audio src="popeye.mp3" controls></audio>

The figure and figcaption Elements
<figure>
<img src="umbrella.png">
<figcaption>A Beautiful umbrella</figcaption>
</figure>

A Beautiful umbrella

"mark" tag
<mark> is used to highlight text.

What else?

CSS3
"border-radius" property
It is possible to make the borders round in CSS3
-moz-border-radius: 25px;
border-radius: 25px;

-moz-border-radius: 50%;
border-radius: 50%;
Drop Shadow and text shadow
This property can be used to give shadows to objects.
box-shadow: [horizontal-offset] [vertical-offset] [blur-distance] [spread-distance] [color];

2px 5px 0px 0px


2px 5px 5px 0px


2px 5px 5px 3px


text-shadow: [horizontal-offset] [vertical-offset] [blur-distance] [color];

3px 3px 1px
Linear Gradient
Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis.
background-image: linear-gradient( ... );

Inside those parentheses, you specify the direction of the gradient, and then provide some color stops. For example:
background-image: linear-gradient(270deg, #FFF 0%, #000 100%);

The following have gradient with axes 0deg, 90deg, 180deg, 270deg respectively.
Radial Gradient
background-image: radial-gradient(center, #FFF, #000);
background-image: radial-gradient(30px 30px, #FFF, #000);

Translation
Translation functions allow you to move elements left, right, up, or down
-webkit-transform: translate(45px,-45px);
-moz-transform: translate(45px,-45px);
-ms-transform: translate(45px,-45px);
-o-transform: translate(45px,-45px);
transform: translate(45px,-45px);

Hover here

Scale
The scale(x,y) function scales an element by the defined factors horizontally and vertically, respectively.
transform: scale(1.5,0.25);
Hover here
Rotation
The rotate() function rotates an element around the point of origin (as with scale, by default this is the element’s center) clockwise, by a specified angle value.
transform: rotate(10deg)

Combining transformations
It is possible to combine transformations by listing them after the other
transform: rotate(10deg) translateX(100px) scale(1.5);
Hover here
Skew
The skew(x,y) function specifies a skew along the X and Y axes.
transform: skew(15deg, 4deg);

Skewed Text

transition-duration
The transition-duration property sets how long the transition will take. You can specify this either in seconds (s) or milliseconds (ms).
transition-duration: 0.2s;

transition-delay
It introduces a delay before the animation begins. Normally, a transition begins immediately, so the default is 0.
transition-delay: 250ms;
What else?

Thank You


http://alseambusher.github.com/html5-css3-tutorial/

Use a spacebar or arrow keys to navigate