1 / 17

Understanding HTML5: Features, Benefits, and Design Principles for Modern Web Development

HTML5 represents the evolution of web standards, replacing obsolete elements from HTML 4.01 and establishing a new benchmark for HTML, XHTML, and the HTML DOM. Designed with principles of compatibility, utility, and interoperability, HTML5 enhances real-world browser behavior while ensuring backward compatibility. Key benefits include lenient syntax, improved error handling, and new features arising from HTML, CSS, DOM, and JavaScript. HTML5 also introduces standardized methods for embedding audio and video, eliminating the need for plugins. Learn about its practical applications and design philosophies to improve your web development skills.

rio
Télécharger la présentation

Understanding HTML5: Features, Benefits, and Design Principles for Modern Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 (HyperText Markup Language) Lab 223 潘建廷 chp32324@hotmail.com 何偉聖administratorEx@hotmail.com

  2. Introduce • Today, some elements in HTML 4.01 (1999)are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5. • HTML5 is the next generation of HTML. • HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. • HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

  3. Goals • Document real-world browser behaviour • Document and standardise useful extensions • Develop practical new features • Ensure backwards compatibility • Define robust error handling

  4. Design Principles • Foundation of Design and Development • Organised into 3 Categories • Compatibility • Utility • Interoperability

  5. Design Principles: Compatibility • Support Existing Content • Degrade Gracefully • Don't Reinvent the Wheel • Pave the Cow paths • Evolution, not Revolution

  6. Design Principles: Utility • Solve Real Problems • Priority of Constituencies • Media Independence • Universal Access • Support World Languages • Secure By Design • Separation of Concerns

  7. Design Principles: Interoperability • Well-Defined Behaviour • Avoid Needless Complexity • Handle Errors

  8. Benefits of HTML • Backwards compatible with legacy UAs • Author familiarity • Lenient and forgiving syntax • Convenient shorthand syntax • Can omit some tags and attribute values

  9. Benefits of XHTML • Strict XML Syntax • Integrate directly with other XML vocabularies • SVG, MathML • Use XML Processing

  10. Document Representations • HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.

  11. HTML5 were established • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins(like Flash) • Better error handling • More markup to replace scripting • HTML5 should be device independent • The development process should be visible to the public

  12. Video • Ogg = Ogg files with Theora video codec and Vorbis audio codec • WebM = WebM files with VP8 video codec and Vorbis audio codec • MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec

  13. Video H.264 support in the “Big-5”

  14. Video --via HTML5 Example • The video element allows multiple source elements. Source elements can • link to different video files. • The browser will use the first recognized format

  15. Video – UI controls

  16. Audio • Until now, there has never been a standard for playing audio on a web page. • Today, most audio are played through a plugin (like flash). However, not all • browsers have the same plugins. • HTML5 specifies a standard way to include audio, with the audio element. • The audio element can play sound files, or an audio stream.

  17. Web Storage • HTML5 offers two new objects for storing data on the client: • localStorage - stores data with no time limit • sessionStorage - stores data for one session

More Related