Advanced HTML5 and CSS3 for Responsive Web Design Course by High School Technology Services Myhsts.Org What’S Up, HTML5?
Total Page:16
File Type:pdf, Size:1020Kb
Advanced HTML5 and CSS3 for Responsive Web Design Course By High School Technology Services myhsts.org What’s Up, HTML5? By High School Technology Services myhsts.org Overview of HTML5 HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts: ▪ It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows more diverse and powerful Web sites and applications. ▪ The most interesting new HTML5 elements are: ▪ New semantic elements like <header>, <footer>, <article>, and <section>. ▪ New attributes of form elements like number, date, time, calendar, and range. ▪ New graphic elements: <svg> and <canvas>. ▪ New multimedia elements: <audio> and <video>. Changes in HTML5 ▪Some Tags That Have Been Redefined with New HTML5 Standards:<strike> <b> <i> <u> <small> ▪Deprecated items - http://w3c.github.io/html/obsolete.html Meet the APIs ▪ Semantics: allowing you to describe more precisely what your content is. ▪ Connectivity: allowing you to communicate with the server in new and innovative ways. ▪ Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently. ▪ Multimedia: making video and audio first-class citizens in the Open Web. ▪ 2D/3D graphics and effects: allowing a much more diverse range of presentation options. ▪ Performance and integration: providing greater speed optimization and better usage of computer hardware. ▪ Device access: allowing for the usage of various input and output devices. ▪ Styling: letting authors write more sophisticated themes. <audio> and <video>Elements <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. ▪ Attributes – ▪ autoplay - A Boolean attribute: if specified (even if the value is "false"!), the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. ▪ controls - If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. ▪ muted - A Boolean attribute which indicates whether the audio will be initially silenced. Its default value is false. ▪ src - The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the <source> element within the audio block to specify the audio to embed. ▪ volume - The playback volume, in the range 0.0 (silent) to 1.0 (loudest). <audio> and <video>Elements <audio> E.g. – Basic <audio src=http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg autoplay> Your browser does not support the <code>audio</code> element. </audio> With Source Element <audio controls="controls"> Your browser does not support the <code>audio</code> element. <source src="foo.wav" type="audio/wav"> </audio> <audio> and <video>Elements <video> - The HTML <video> element is used to embed video content in documents. Attributes – ▪ autoplay - A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. ▪ controls - If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. ▪ loop - A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start. ▪ muted - A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played. <audio> and <video>Elements <video> Attributes (contd.) – ▪ poster - A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is shown as the poster frame. ▪ src - The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. <audio> and <video>Elements <video> E.g. – <video src="videofile.webm" autoplay poster="posterimage.jpg"> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="videofile.webm">download it</a> and watch it with your favorite video player! </video> Canvas Canvas ▪ Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size. ▪ Pixel based (Dynamic .png) ▪ Single HTML element.(Inspect element in Developer tool. You can see only canvas tag) ▪ Modified through script only ▪ Event model/user interaction is granular (x,y) ▪ Performance is better with smaller surface, a larger number of objects (>10k), or both Final Word Basically HTML5 has it’s many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to the web without using flash and third party plugins. There are also another new elements like <section>, <article>, <header> and <nav> which enrich the semantic value of the document. Other major advantages of HTML5 are described below. ▪ Cleaner markup / Improved Code - HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements. ▪ Improved Semantics - Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized. Final Word ▪ Elegant forms - HTML5 enables designer to use more fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose. ▪ Consistency - As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured. ▪ Improved Accessibility - Different technologies can elaborate on the features with the help of HTML5, as they can Immediately make more detailed understanding of the structure of a page by take a look at HTML5 elements it has. ▪ And many more.. Looking Forward In the next session we will dive deep into the above stated APIs. We’ll cover - ▪ New HTML5 elements ▪ New form input types ▪ HTML5 video ▪ The canvas element Thank You. By High School Technology Services myhsts.org.