• Save
Introduction to HTML5 & CSS3
Upcoming SlideShare
Loading in...5

Introduction to HTML5 & CSS3



PPT contains a lot many no, of animated sequences so download it before you begin watching it...

PPT contains a lot many no, of animated sequences so download it before you begin watching it...



Total Views
Views on SlideShare
Embed Views



2 Embeds 89

http://g4gauravblogger.blogspot.in 60
http://g4gauravblogger.blogspot.com 29



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • HTML5 neatly solves this problem asfollows:
  • We’ve got that crummy page from before. Let’s fix it.

Introduction to HTML5 & CSS3 Introduction to HTML5 & CSS3 Presentation Transcript

  • And I Do Believe in That ART!!....-by Tim Berner Lee
  • The best UI Platform yet…
  • HTML is the “Mother Tongue" of your browser!!Hypertext Markup Language (HTML) is the mainMark-Up Language for creating Web Pages andother information that can be displayed in aWeb Browser
  • <applet><frameset><<TAGS>>
  • A Common Application PlatformFor Your Desktops, Tablets, Mobile!
  • •Windows Phone 7/8•Blackberry 5+•Symbian 5•Android•iOSWhy 5??Cross-platform:Supported by most of the Web-Browsers(Except IE)The same code works on PC, Mac,Linux
  • • 1990 HTML first mentioned – Tim Berners-Lee – HTML Tags• 1993 HTML• 1993 HTML 2 draft• 1995 HTML 2• 1995 HTML 3 draft• 1997 HTML 3.2• 1997 HTML 4• 1999 HTML 4.01• 2008 HTML5 draft• September 2011 featured complete W3C certified HTML5• HTML5 is expected to be finalised by 2016Past, Present, Future Of
  • • Simplified and Loose Syntax• New Elements and Attributes• Embedded Media• Canvas• GeoLocation APIs• Offline Storage• Drag and DropGives you the tools and resources to improve yourapplication…What’s New In ??
  • New input types<input type="search"> search boxes<input type="number"> spinboxes<input type="range"> sliders<input type="color"> color pickers<input type="tel"> telephone numbers<input type="url"> web addresses<input type="email"> email addresses<input type="date"> calendar date pickers<input type="month"> months<input type="week"> weeks<input type="time"> timestamps<input type="datetime"> precise, absolute date+time stamps<input type="datetime-local"> local dates and times
  • >HTML4 <!DOCTYPE><!DOCTYPE HTMLImpossible to remember?PUBLIC “-//W3C//DTD HTML 4.01Transitional//EN“http://www.w3.org/TR/html4/loose.dtd”>
  • Acts like a actual Canvas on which you can draw!Manipulate pixels directly– Draw Lines , Rectangles,– Paths• Arcs• Curves
  • Multi-touch FeatureWorks withiPad/iPhone/iPod andWindows 7 with Chrome& Firefox
  • <video src="LittleWing.mp4“ type="video/mp4“>• Play video in the browser• Doesn’t need a plugin• Accessible through JavaScript
  • • Can store relationaldata locally in thebrowser• Especially useful foroffline apps
  • • New features should be based on HTML, CSS, DOM, andJavaScript• Reduce the need for external Plugins (like Flash)• Better Error handling• More markup to replace scripting• HTML5 should be device independent
  • It’s All About Look & Style…..
  • Cascading Style Sheets (CSS) is a Client Side ScriptingLanguage used for describing the presentationsemantics (the look and formatting) of a documentwritten in any Mark-Up Language…
  • Why To Use CSS?Give you more control over layoutUse styles with JavaScriptMake it easy to create a commonformat for all the Web pagesThe Separation of Style, Content andBehavior
  • Separation of Content, Style &Behaviour?Let’s see that in actionContent + Style + Behavior
  • Applying a single style sheet tomultiple documentsFor Example:
  • So, How Does It Work?You create a stylesheet, thebrowserdownloads it,parses itMatcheselementson thepageAnd then it- StylesThem
  • •Cascading Style Sheets were formally described intwo specifications from W3C: CSS1 and CSS2.-Describes a simple formatting model mostlyfor screen-based presentations.Past, Present, Future Of•Then came the CSS3, which is a maturation to CSS2.1
  • • Not really part of HTML5– But delivered in similar timeframeDivided All Rules & Specifications Into Modules!...
  • While in the previous version everything was a large singlespecification defining different features, CSS3 is divided intoseveral documents which are called modules.Every single module has new capabilities, without hurting thecompatibility of the previous stable release.
  • • CSS3 Modules include:– Borders (border-radius, box-shadow)– Backgrounds (multiple backgrounds)– Color (HSL colors, HSLA colors, opacity, RGBA colors)– Transformations(Rotate, Resize…etc)– Animation (Fade In/Fade Out)– Also:– media queries– multi-column layout– Web fonts
  • Conclusions• Let the web browser developers do all thehard work• Applications have never been more easy• Great features at a great price• Develop without the need for bulky IDEs
  • Web-Browsers automatically includes such librarieswhile you are connected to the internet…
  • Websites usinghttp://lostworldsfairs.com/http://www.soul-reaper.com/http://www.thewildernessdowntown.com/http://beta.theexpressiveweb.com/
  • CSS 3Questions?Questions?