Downloaded 144 times
Uploaded byJacob Nelson
Html5 and-css3-overview
The document discusses various aspects of HTML5 including its history, new elements, offline storage capabilities, and responsive web design. It provides information on HTML, CSS, JavaScript and how they make up the three layers of web design. It also summarizes the roles of different standards organizations and differences between HTML5 and the HTML living standard.
Html5 and-css3-overview
- 1. tSsdf Thursday, January 19,2017 JACOB NELSON Software Architect
- 2. Thursday, January 19,2017 Three Layers of Web Design Structure, Style, Behavior
- 3. Thursday, January 19,2017 Structure HTML Presentation CSS Behavior Javascript
- 4. What is HTML? HypertextMarkup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages. Thursday, January 19, 2017
- 5. What is HTML? HTMLdocuments consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as "<body>", and an end tag, such as "</body>". Thursday, January 19, 2017
- 6. History of HTML •1989 - Tim Berners-Lee invented www • 1991 - Tim Berners-Lee invented HTML • 1993 - Dave Raggett drafted HTML+ • 1993 - The first web browser, Mosaic, was introduced. • 1994 - Netscape browser, based on Mosaic, was introduced. • 1994 – W3C was formed Thursday, January 19, 2017
- 7. History of HTML •1995 - HTML 2.0 was first published by W3C. • 1997 - HTML 3.0 was first published by W3C. • 1999 - HTML 4.01 was first published by W3C. • 2000 – XHTML 1.0 was published by W3C. • 2008 – WHATWG published HTML5 First Public Draft • 2014 - HTML5 was published by W3C. • 2016 - HTML5.1 was published by W3C. Thursday, January 19, 2017
- 8. Standards Organizations –W3C W3C (World Wide Web Consortium) The W3C is the source for most of the recommendations that concern web developers. They produce recommendations for the implementation of such technologies as HTML, the Document Object Model, and Cascading Style Sheets. Thursday, January 19, 2017
- 9. W3C is nota standards body. Instead, the W3C organizes groups of experts in web-related fields. These groups produce recommendations on how to implement web technology. Although the W3C does not have any enforcement power over how their recommendations are implemented, most of their recommendations are taken as de facto standards. W3C wanted to develop a definitive HTML5 and XHTML standard. Thursday, January 19, 2017 Standards Organizations – W3C W3C (World Wide Web Consortium)
- 10. Standards Organizations –WHATWG Web Hypertext Application Technology Working Group (WHATWG) The WHATWG was formed in response to the slow development of World Wide Web Consortium (W3C) Web standards and W3C's decision to abandon HTML in favor of XML- based technologies. WHATWG wanted to develop HTML as a "Living Standard". A living standard is always updated and improved. New features can be added, but old functionality cannot be removed. Thursday, January 19, 2017
- 11. HTML5 vs HTMLLiving Standard The WHATWG version of the specification was renamed at the beginning of 2011 to HTML dropping the 5 at the end of the name. Then, it was further renamed into HTML living standard to specify that it’ll be in constant development and will no longer referred by using a version number. Thursday, January 19, 2017
- 12. HTML5 vs HTMLLiving Standard On the contrary, the W3C’s specifications still use version numbers. the last stable version is 5, thus HTML5. As a consequence of this step, the consortium is now actively developing the new version of the standard known as HTML5.1. In HTML5.1 some elements and attributes that didn’t find their place in HTML5 are being discussed such as the dialog element and the new input types of month and week. Thursday, January 19, 2017
- 13. HTML5 vs HTMLLiving Standard Stated by, David Baron from Mozilla Thursday, January 19, 2017 When the W3C’s and WHATWG’s HTML specifications differ, we tend to follow the WHATWG one.
- 14. What is HTML5? HTML5is the latest version of Hypertext Markup Language, the code that describes web pages. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen. Thursday, January 19, 2017
- 15. Browser Support forHTML5 Thursday, January 19, 2017
- 16. basic HTML document <!DOCTYPEhtml> <html lang="en"> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment --> </body> </html> Thursday, January 19, 2017
- 17. <!DOCTYPE html> • <!DOCTYPEhtml> goes at the top of every HTML5 page. • The HTML5 word <!DOCTYPE html> means "this page is written in HTML5" as opposed to, say HTML 4.01. • it's better than what they had before. Here's an example of one common type of XHTML: Thursday, January 19, 2017 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 18. Example Explained The <html>element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph Thursday, January 19, 2017
- 19. The New Elementsof HTML5 The most basic new elements of HTML5 make it easier to lay out web pages and to debug your code or others'. It also makes it easier for automated services to scan the web and understand the importance of different page components. Thursday, January 19, 2017
- 20. The New Elementsof HTML5 For page layout and key features, there are now specific elements such as: • <header> and <footer> • <nav> for all the kinds of menus • <aside> for sidebars or nearby related content • <article> where content goes such as a blog post • <section> similar to <div> but more content-oriented • <audio> and <video> tags to have native browsers manage playback of each. No more plugins and security updates for this • <canvas> specifically for letting you draw graphics on using a separate scripting language • <embed> to place external content or applications into the page Thursday, January 19, 2017
- 21. The New Elementsof HTML5 Here's a nice visual outline of these by Smashing Magazine: Thursday, January 19, 2017
- 22. Cascading Style Sheets(CSS) Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS3 is a latest standard of CSS earlier versions(CSS2). Thursday, January 19, 2017
- 23. Style Sheet A stylesheetis a set of rules defining how an HTML element will be presented in the browser. These rules are targeted to specific elements in HTML document Thursday, January 19, 2017
- 24. The Cascade The cascadepart of CSS is a set of rules for resolving conflicts with multiple CSS rules applied to the same elements. For example, if there are two rules defining the color or your h1 elements, the rule that comes last in the cascade order will trump the other. Thursday, January 19, 2017
- 25. Browser Style Sheet UnstyledHTML elements are displayed by a browser according to rules devised by the software developer. For example, text marked up as an <h1> is often displayed as 24-point, bold in the typeface Times New Roman. Default styles also affect the space around elements. Thursday, January 19, 2017
- 26. External Style Sheet Withan external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: Thursday, January 19, 2017
- 27. External Style Sheet Theexternal style sheet file must be saved with a .css extension. Thursday, January 19, 2017 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- 28. Internal Style Sheet Aninternal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page: Thursday, January 19, 2017 <head> <style> h1 { color: maroon; margin-left: 40px; } </style> </head>
- 29. Inline Style An inlinestyle may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Thursday, January 19, 2017 <header style="color:blue;padding-left:20px;">This is a heading.</header>
- 30. Thursday, January 19,2017 Browser stylesheet Linked (external) stylesheet Embedded (internal) stylesheet Inline (internal) Styles HighImportanceLowImportance
- 31. CSS Rules Thursday, January19, 2017
- 32. CSS Selectors • Selectorsare used to target which HTML to style. Properties and values are used to set the style rules. • There are three kinds of selectors: Thursday, January 19, 2017
- 33. CSS Selectors -Tag • TagAn HTML tag such as h1 or p. HTML tag selector: HTML tag selector CSS: Thursday, January 19, 2017 <p>Sample paragraph.</p> p { color: red; font-size: 200%; }
- 34. CSS Selectors -Class • A class attribute of one or more elements. Referenced in CSS with a “.” before it. Class selector HTML: HTML class selector CSS: Thursday, January 19, 2017 <p class="warning">This is a paragraph with a class="warning".</p> .warning { background-color: #ffc; }
- 35. CSS Selectors -Id • An id attribute of a unique element, should only be used once. Referenced in CSS with a “#” before it. Id selector HTML: HTML Id selector CSS: Thursday, January 19, 2017 <h1 id="site-title">Sample Blog Title</h1> #site-title { font-size: 3em; }
- 36. Web Form 2.0 •Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4. • The forms features in HTML5 provide a better experience for users by making forms more consistent across different web sites and giving immediate feedback to the user about data entry. Thursday, January 19, 2017
- 37. Web Form 2.0 •They also provide this experience to users who have scripting disabled in their browser. Thursday, January 19, 2017
- 38. Web Form 2.0– Input Types • url - For entering a URL. It must start with a valid URI scheme, for example http://, ftp:// or mailto:. • tel - For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern. • email - For entering email addresses, and hints that the @ should be shown on the keyboard by default. Thursday, January 19, 2017
- 39. Web Form 2.0– Input Types • search - A text input field styled in a way that is consistent with the platform's search field. • number - For numeric input, can be any rational integer or float value. • range - For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control. Thursday, January 19, 2017
- 40. Web Form 2.0– Input Types • datetime-local - For entering a date and time value where the time zone provided is the local time zone. • date - For entering a date (only) with no time zone provided. • time - For entering a time (only) with no time zone provided. • week - For entering a week (only) with no time zone provided. Thursday, January 19, 2017
- 41. Web Form 2.0– Input Types • month - For entering a month (only) with no time zone provided. • color - For picking a color. Thursday, January 19, 2017
- 42. Web Form 2.0– Attributes • placeholder • autofocus • autocomplete • required • pattern • novalidate • formnovalidate • list • multiple • form • formaction • formenctype • formmethod • formtarget Thursday, January 19, 2017
- 43. <audio> The HTML <audio>element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio Thursday, January 19, 2017
- 44. <audio> example Basic usage Audioelement with source element Thursday, January 19, 2017 <audio src="sample/sample.mp3" controls autoplay loop> This feature is not supported. please upgrade your browser. </audio> <audio controls="controls"> Your browser does not support the <code>audio</code> element. <source src="foo.wav" type="audio/wav"> </audio>
- 45. <audio> - supportedformats Thursday, January 19, 2017
- 46. <video> The HTML <video>element is used to embed video content in a document. It may contain one or more video sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/video Thursday, January 19, 2017
- 47. <video> example Basic usage Videoelement with source element Thursday, January 19, 2017 <video src="sample/sample.mov" controls autoplay loop> This feature is not supported. please upgrade your browser. </video> <video id="sampleMovie" width="640" height="360" controls> <source src="HTML5Sample_H264.mov" /> <source src="HTML5Sample_Ogg.ogv" /> <source src="HTML5Sample_WebM.webm" /> </video>
- 48. <video> - supportedformats Thursday, January 19, 2017
- 49. Offline Storage • Apartfrom new elements in HTML5, this new web technology offers us Offline Storage. • Offline Storage allows us to save data in the user’s browser and makes our web apps or games work without a connection. Thursday, January 19, 2017
- 50. Offline Storage -sessionStorage • sessionStorage is a form of storage that stores data temporarily in the browser. • The data in sessionStorage is set in key and value pairing. • The data set by sessionStorage is – exclusive to the browser window or tab. – still be there, unless we erase it intentionally or we quit the browser. Thursday, January 19, 2017
- 51. Offline Storage -localStorage • localStorage is a form of storage that stores data in the browser. • The data in localStorage is set in key and value pairing. • unlike sessionStorage, localStorage data is persistent. – the data will remain in the browser as long as we do not intentionally remove it. Thursday, January 19, 2017
- 52. <summary><details> • It seemslike every Web site needs to have an expanding/collapsing block of text. • While this is easy enough to do with JavaScript, the <details> tag makes it even easier. It does exactly what we've all been doing for years now: makes a simple block that expands and collapses the content when the header is clicked. • The <details> tag is supported only by Google Chrome and Opera browsers, as of today. Thursday, January 19, 2017
- 53. Responsive Web Design(RWD) • RWD is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. • RWD is achieved using a mix of fluid grids and layouts, flexible images and an intelligent use of CSS media queries. Thursday, January 19, 2017
- 54. RWD - Advantages •The same HTML is served to all devices, using CSS (which determines the layout of webpage) to change the appearance of the page. • Rather than creating a separate site and corresponding codebase for wide-screen monitors, desktops, laptops, tablets and phones of all sizes, a single codebase can support users with differently sized viewports. Thursday, January 19, 2017
- 55. RWD - Advantages •In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone. • Responsive design relies on proportion-based grids to rearrange content and design elements. • The use of a single codebase can make development faster, compared to developing 3 or 4 distinct sites, and makes maintenance easier over time, as one set of code and content needs to be updated rather than 3 or 4. Thursday, January 19, 2017
- 56. Media Query • The@media query is the key ingredient that, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Thursday, January 19, 2017
- 57. How to useMedia Query CSS External Call CSS Direct Call Thursday, January 19, 2017 <link rel=”stylesheet” media=”screen and (min-width:320px) and (max- width:480px) “href=”css/yourstylesheet.css” /> @media screen and (min-width:320px) and (max-width:480px){ /* Insert your styles here */ }
- 58. <canvas> A whiteboard whereyour pen/eraser is Javascript Thursday, January 19, 2017
- 59. <canvas> - supportedcontexts • 2d - representing a two-dimensional rendering context. • webgl - representing a three-dimensional rendering context. This context is only available on browsers that implement WebGl version 1 (OpenGL ES 2.0). • webgl2 - representing a three-dimensional rendering context. This context is only available on browsers that implement WebGl version 2 (OpenGL ES 3.0). • Bitmaprenderer - provides functionality to replace the content of the canvas with a given ImageBitmap. Thursday, January 19, 2017
- 60. <canvas> - Howto Clear? When any element on the canvas needs to change (move, erase, etc), the standard method is to completely erase the canvas and redraw the canvas with the elements in their new positions (or not redraw the elements if they are erased). That's because canvas does not "remember" where it drew any individual element and therefore cannot individually move or erase any element. Thursday, January 19, 2017
- 61. <canvas> - Howto Clear? Thursday, January 19, 2017 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height);
- 62. References • http://www.w3schools.com/html5/ • http://htmldog.com/reference/htmltags/ •https://www.smashingmagazine.com/wp-content/uploads/images/html5- cheat-sheet/html5-cheat-sheet.pdf • http://html5demos.com/ • http://www.cssbasics.com/ • http://css3test.com/ • http://cssmediaqueries.com/ Thursday, January 19, 2017
- 63. CODE IS POETRY Thursday,January 19, 2017