Html 5 and css 3

KARKHA.COM

WELCOME TO HTML 5 AND CSS 3 WORKSHOP
BY
KAMALAKANNAN . S
9789989552
https://www.facebook.com/sivkannan
@sivkannan77
Sundaresan - 9941131357
Chockalingam - 9543111174

09/09/12 Www.karkha.com 1

KARKHA.COM

● We Karkha.com is young and vibrant open source web
development startup. We rollout by January 2013.
● What we plan to do next four months
●Initially we conduct workshops
● Weekend courses on open source
● Goals
● To bridge the gap between industry required open source technical
skills
● Provide solutions and services for web and mobile application.


What is HTML5?
“HMTL5 is not a single thing or a monolithic
technology. It is a collection of features,
technologies, and APIs that brings the power of
the desktop and the vibrancy of multimedia
experience to the web—while amplifying the web’s
core strengths of interactivity and connectivity.”
- www.HTML5ROCKS.com
HTML5 = fifth revision of HTML + CSS3 + JS


HTML 5
● Can i start using HTML5 ?
● Do i need to relearn HTML 4 already i am
familiar with
● How to updgrade from HTML 4


HTML 5 features
● Offline / storage
● Realtime / communication
● File / Hardware Access
● Semantics & Markup
● Audio & Video
● 3D Graphics
● Presentation ( CSS3 )


Let experience
● Semantics & markup
● Presentation


Semantics & markup

More meaningful elements


Semantics & Markup
Earlier -
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
HTML 5 -
<!DOCTYPE html>


Semantics & markup
Earlier -
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">
HTML 5 -
<html lang="en">


Semantics & Markup
Earlier -
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

HTML 5 -
<meta charset="utf-8" />


Semantics & Markup
Earlier -
<link rel="stylesheet" href="style.css"
type="text/css" />

HTML 5 -
<link rel="stylesheet" href="style.css" />


Semantics & Markup
Earlier -
<link rel="alternate"
type="application/atom+xml"
title="My feed"
href="/feed/" />

HTML 5 -
NO change


Semantics & Markup
Earlier -
<link rel="shortcut icon" href="/favicon.ico">

HTML 5 -
<link rel=”shortcut icon” href=windows.ico
sizes="32x32 48x48"
type="image/vnd.microsoft.icon">


New HTML 5 Elements
How older browser understand new elements defined by HTML 5

All browsers render unknown elements inline, i.e. as if they had a display:inline
CSS rule.

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

http://www.html5doctor.com/html-5-reset-stylesheet/


New HTML 5 Elements
Internet explorer < 9 will not apply any style to unknown
elements
Internet explorer will insert the unknown elements as
empty node in dom
Children's of unknown elements will be treated as siblings
in Dom tree

http://remysharp.com/2009/01/07/html5-enabling-script/


HEADER
<header>
<hgroup>
<h1>My header</h1>
<p class="tagline">A tagline for this header.</p>
</hgroup>
…
</header>


Article
<article>
<header>
<h1>A heading for this post or article</h1>
</header>
<p>Lorem ipsum..</p>
</article>


Dates and Times
<time datetime="2009-10-22" pubdate>October 22, 2009</time>

There are three parts to a <time> element:

● A machine-readable timestamp
● Human-readable text content
● An optional pubdate flag

datetime="2009-10-22T13:59:47-04:00"


Navigation
<nav>
<ul>
<li><a href="#">home</a></li>
.....
</ul>
</nav>


Section and aside
<section>
...
</section>
The section element represents a generic section of a document or application. A section,
in this context, is a thematic grouping of content, typically with a heading.

<aside>
...
</aside>
The aside element represents a section of a page that consists of content that is
tangentially related to the content around the aside element, and which could be
considered separate from that content. Such sections are often represented as sidebars in
printed typography.


Section and aside


Footer
The HTML5 specification says, “A footer typically
contains information about its section such as who
wrote it, links to related documents, copyright data,
and the like.”

<footer>
....
</footer>


Placeholder Text
<form>
<input name="search" placeholder="Search with
keyword">
<input type="submit" value="Search">
</form>


Auto focus
<form>
<input name="search" placeholder="Search with
keyword" autofocus>
<input type="submit" value="Search">
</form>


HTML form elements
Field Type HTML Code Notes
checkbox <input type="checkbox"> can be toggled on or off
radio button <input type="radio"> can be grouped with other
inputs
password field <input type="password"> echos dots instead of
characters as you type
drop-down lists <select><option>…
file picker <input type="file"> pops up an “open file” dialog

submit button <input type="submit">
plain text <input type="text"> the type attribute can be
omitted


Email Address and url
<form>
<input type="email">
<input type="submit" value="Go">
</form>
<form>
<input type="url">
</form>


Form validation and required
<form novalidate>
<input type="email">
</form>
<form>
<input type="url" required>
</form>


Microdata
The HTML5 microdata is a way to label content to
describe a specific type of information—for example,
reviews, person information, or events. Each information
type describes a specific type of item, such as a person,
and event, or a review. For example, an event has the
properties venue, starting time, name, and category.

Microdata uses simple attributes in HTML tags (often
<span> or <div>) to assign brief and descriptive names to
items and properties.


Microdata
Without Microdate an HTML source
<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href="http://www.example.com">www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>


Microdata
With Microdate an HTML source
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span>
but people call me <span itemprop="nickname">Smithy</span>.
Here is my home page:
<a href="http://www.example.com" itemprop="url">www.example.com</a>
I live in Albuquerque, NM and work as an <span
itemprop="title">engineer</span>
at <span itemprop="affiliation">ACME Corp</span>.
</div>


Microdata
In the first line, itemscope indicates that the content in the <div> is an
item. itemtype="http://data-vocabulary.org/Person indicates that the item is
a Person.
Each property of the Person item is identified with the itemprop attribute.
For example, itemprop="name" describes the person's name.

Rich Snippets Testing Tools
http://www.google.com/webmasters/tools/richsnippets
Check that Google can correctly parse your structured data markup and
display it in search results.


Microdata


Presentation
● Background-size
#example1 {
background-size: auto;
}

#example2 {
background-size: 275px 125px;
}


Presentation
● Background-image mulitple images
#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png),
url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right
bottom, left top;
}


Presentation
RGBA (red green blue opacity)
Red, Green and Blue values between 0 and 255
Opacity or alpha value between 0 and 1
Example : background-color: rgba(215, 44, 44, 0.5);
Difference between Opacity and rgba is Opacity sets opacity
value to the element and its children. Whereas RGBA is alpha
or opacity applied to the color of the element, without affecting
the childrens.


Presentation
text-shadow: 2px 2px
2px #000;
This produces the
following text with a
shadow 2px right and
below of the text, which
blurs for 2px:


Presentation
Box-sizing decides the width of the box
whether to include the padding and border .
Content-box will not include the padding
and boder in width
Border-box will include the padding and
border in width
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;


Presentation
Resize allow element to resize,
normally using js we provide this to
textarea in our sites. Now css3 has
property to resize a element.
div.resize {
width: 100px;
height: 100px;
border: 1px solid;
resize: both;
overflow: auto;
}


Presentation
Substring Matching Attribute Selectors

[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
Example
http://www.css3.info/preview/attribute-selectors/

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/


Presentation
Media Queries
<link rel="stylesheet" type="text/css"
media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css"
media="print" href="serif.css">


Presentation
Media Queries
@media screen {
* { font-family: sans-serif }
}

@media screen and (min-width: 400px) and (max-width: 700px) { … }
This media query expresses that the style sheet is usable on devices
with viewport (the part of the screen/paper where the document is
rendered) widths between 400 and 700 pixels:


Presentation
Media Queries
This media query expresses that style sheet is usable on
screen and handheld devices if the width of the viewport is
greater than 20em.

@media handheld and (min-width: 20em),
screen and (min-width: 20em) { … }

The ‘em’ value is relative to the initial value of ‘font-size’.


Presentation
Column width
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;


Presentation
Column count
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid
black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid
black;


Presentation
CSS3 Transitions are a presentational effect which allow
property changes in CSS values, such as those that may
be defined to occur on :hover or :focus, to occur smoothly
over a specified duration – rather than happening
instantaneously as is the normal behaviour.

Transition effects can be applied to a wide variety of CSS
properties, including background-color, width, height,
opacity, and many more. Keep reading for further details of
supported properties.


Presentation

transition-property
transition-duration
transition-timing-function
Transition-delay

<transition> = <transition-property> <transition-duration> <transition-timing-function>
<transition-delay>
transition: background-color 3s linear 1s;
Try out - http://www.css3maker.com/css3-transition.html
Examples - http://media.24ways.org/2009/14/3/index.html
http://tympanus.net/Tutorials/BlurMenu/
http://leaverou.github.com/animatable/


Presentation
CSS3 Gradients
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-
stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /*
IE6-9 */

Try out CSS gradient here : http://www.colorzilla.com/gradient-editor/


Presentation

Firefox -moz-box-shadow:
Safari -webkit-box-shadow:
Opera -o-box-shadow:
IE -ms-box-shadow:


Question ?


More Reference
http://diveintohtml5.info
http://www.html5rocks.com
http://playground.html5rocks.com
http://developers.whatwg.org
http://beta.html5test.com
http://html5demos.com/
http://www.quirksmode.org
http://gsnedders.html5.org/outliner/
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
http://dev.w3.org/html5/md/
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035
http://remysharp.com/2009/01/07/html5-enabling-script/
http://www.css3maker.com/css-gradient.html
http://www.css3.info/preview/
http://css3generator.com/
http://www.w3.org/TR/css3-mediaqueries/
http://www.colorzilla.com/gradient-editor/


Get in touch

http://www.facebook.com/karkhadotcom
Karkha.com@gmail.com
@karkhadotcom
Phone:9789989552


Html 5 and css 3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Html 5 and css 3

Ähnlich wie Html 5 and css 3 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html 5 and css 3

Hinweis der Redaktion