Downloaded 275 times
Uploaded byIan Lintner
PPTX, PDF7,118 views
HTML5 & CSS3
HTML was first defined by Tim Berners-Lee in 1991 and has evolved through several versions. HTML5 and CSS3 are the next generation standards that will enhance the richness and interactivity of web content. HTML5 introduces new semantic tags and APIs for multimedia, geolocation, and offline storage. CSS3 includes features for rounded corners, drop shadows, columns, animations, and media queries for responsive design. While legacy browsers present challenges, HTML5 and CSS3 will improve the functionality of the mobile web and make the interface of the web comparable to native applications.
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5 & CSS3
Recently uploaded
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fcodedagentsdeck-251215155422-5497c599-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
HTML5 & CSS3
- 1.<title> HTML 5 & CSS 3</title>
- 2.HTML Pre-HistoryGeneral MarkupLanguage (GML) was developed at IBM in the 1960's by Charles F. Goldfarb:h1.Chapter 1: Introduction :p.GML supported hierarchical containers, such as :ol :li.Ordered lists (like this one), :li.Unordered lists, and :li.Definition lists :eol. as well as simple structures. :p.Markup minimization (later generalized and formalized in SGML), allowed the end-tags to be omitted for the "h1" and "p" elements.http://www.sgmlsource.com/history/roots.htm
- 3.HTML Pre-HistoryStandard GeneralizedMarkup Language (SGML) was derived from GML in the 1980's. SGML was the pre-cursor to both HTML and XML.SGML defined the user of angle brackets for tags. <example>
- 4.HTMLHyper Text MarkupLanguage (HTML) was first defined by Tim Berners-Lee in 1991Original HTML had 20 tags and displayed simple text with basic markup for formatting.
- 5.HTML 2, 3,and 4HTML 2 added many of the attributes we know today such as images, forms, input.HTML 3 added new tags that had been part of minor revisions. HTML 4 extended the number of tags. Currently most HTML is 4.01
- 7.CSS HistoryCSS 1was proposed in 1995 as a way to style documents. It contained descriptions for font, background and other style tags.CSS 2 is the version we currently use added positioning and other elements.
- 8.Web Usability ThenMid-Late1990's web forms started to show up with web applications.Late 1990's JavaScript added further interaction.2000's AJAX and Flash started to provide richer internet applications.
- 9.Web Usability NowIncreasedemphasis on making the web as rich an interface as native applications.The mobile web is the next frontier.Current Technologies are dated and are hindering growth.
- 10.HTML 5 andCSS3 to the RescueHTML5 and CSS3 are the next generation of markup that will drive the web.What is the difference between HTML4 and HTML 5?
- 11.Structure Tags<header> -Header <nav> - Navigation, Menu (Primary Navigation)<section> - Seperation Element <article> - Article Content<aside> - Sidebars, Widgets, Misc non primary content <footer> - Footer <header> and <footer> tags may be used multiple times. Example in Sections, and in the main page.
- 12.
- 13.New Inputs *tel (Telephone) * search * url* email* datetime* date* month* week* time* datetime-local* number * range (slider)* color
- 14.
- 15.Canvas<canvas> Create avirtual canvas for drawing graphics in the browser. Javascript can be used to control graphic rendering via the canvas.x,y coordinate system
- 16.
- 17.APIsDrag and Drop- Provides an API for Drap and Drop for JavaScriptGeolocation - Determine Location of The User via the BrowserOffline Storage - Browsers will support local storage. The API will be SQL like.
- 18.APIsHistory API -Access Browser history via JavaScript.<contenteditable> - Enables a Content Editing API Web Workers - Background Tasks for JavaScript
- 19.MultimediaNative Multimedia Support No Plugins Necessary<Video> - Native Video<Audio> - Native Audio
- 20.YouTube HTML5 BetaAvailablefor Chrome and Safari
- 21.Other Controls<Progress> Displaysprogress of a task or action completed.<meter> Displays measure of something.<Output> For output of calculation or output of a script.
- 22.
- 23.New Stylesborder-radius -Rounded Cornersborder-colors - Gradient Bordersbox-shadow - Drop Shadowstext-shadow - Text Drop Shadowsgradient - Gradient backgroundsresize - Resize an Elementbackground-size - resize backgroundbackground - supports multipe images
- 24.
- 25.SelectorsA Variety ofSelectors provide an interface to apply styles more precisely.An example would be selecting an nth child. Example: div:nth-child(3) {}
- 26.ColumnsMulti Column Layoutis now provided by CSS3
- 27.Animation and MotionAnimations- CSS3 allows for animations of stylesTransitions - Allows styles to change gradually color shiftsTransformations - 2D and 3D transformations, stretch, move, etc
- 28.
- 29.MiscMedia Queries -Provides for ways to specify styles based on viewport size.
- 30.When?HTML5 - CanidateStage in 2012CSS3 - Still in Working Draft
- 31.What about thatGorilla?IE 6 and other legacy browsers are preventing progress.IE9 has some HTML5 support.
- 32.Benefits of HTML5& CSS3Rich Interface elements not requiring third party plugins.Seperation of content and designEnhanced Mobile Support New Programming Interfaces
- 33.The Critics SayHTML5will not get rid of FlashHTML5 doesn't use XML SyntaxToo many tags / Tag Soup
- 34.The FutureCurrent mobilebrowser technology will be the next battle ground.HTML5 and CSS3 will even the odds with supporting more and more platforms.The web will no longer be a second class user interface.
- 35.