Introduction to HTML5 & CSS3


Published on

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

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • HTML5 neatly solves this problem asfollows:
  • We’ve got that crummy page from before. Let’s fix it.
  • Introduction to HTML5 & CSS3

    1. 1. And I Do Believe in That ART!!....-by Tim Berner Lee
    2. 2. The best UI Platform yet…
    3. 3. 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
    4. 4. <applet><frameset><<TAGS>>
    5. 5. A Common Application PlatformFor Your Desktops, Tablets, Mobile!
    6. 6. •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
    7. 7. • 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
    8. 8. • 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 ??
    9. 9. 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
    10. 10. >HTML4 <!DOCTYPE><!DOCTYPE HTMLImpossible to remember?PUBLIC “-//W3C//DTD HTML 4.01Transitional//EN“”>
    11. 11. Acts like a actual Canvas on which you can draw!Manipulate pixels directly– Draw Lines , Rectangles,– Paths• Arcs• Curves
    12. 12. Multi-touch FeatureWorks withiPad/iPhone/iPod andWindows 7 with Chrome& Firefox
    13. 13. <video src="LittleWing.mp4“ type="video/mp4“>• Play video in the browser• Doesn’t need a plugin• Accessible through JavaScript
    14. 14. • Can store relationaldata locally in thebrowser• Especially useful foroffline apps
    15. 15. • 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
    16. 16. It’s All About Look & Style…..
    17. 17. 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…
    18. 18. 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
    19. 19. Separation of Content, Style &Behaviour?Let’s see that in actionContent + Style + Behavior
    20. 20. Applying a single style sheet tomultiple documentsFor Example:
    21. 21. So, How Does It Work?You create a stylesheet, thebrowserdownloads it,parses itMatcheselementson thepageAnd then it- StylesThem
    22. 22. •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
    23. 23. • Not really part of HTML5– But delivered in similar timeframeDivided All Rules & Specifications Into Modules!...
    24. 24. 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.
    25. 25. • 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
    26. 26. 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
    27. 27. Web-Browsers automatically includes such librarieswhile you are connected to the internet…
    28. 28. Websites using
    29. 29. CSS 3Questions?Questions?