1. Web Development Basics Lecture 4 – HTML 5

2. Introduction  HTML 5 is the next major revision of the HTML standard  Currently under development  Started by the WHATWG in June 2004  Accepted by W3C in 2007  Current status:  Living Standard state at the WHATWG  Candidate Recommendation at W3C (2013)  W3C Recommendation would occur in the year 2022 or later (Ian Hickson (Google, Inc) editor of HTML5)

3. Browser Support  The latest versions of Safari, Chrome, Firefox, Internet Explorer and Opera support some HTML5 features.  Internet Explorer <= 8; DON’T support HTML5!  Script to make IE <= 8 building a proper HTML5 DOM

4. HTML4.1 Cleaning  The following tags are not in HTML 5  because their are presentational: ,,,,,,. Use CSS. ,. Use CSS 3. . Use or. . Marking keyboard input ; for variables ; for computer code ; and for computer output.  (still valid but discouraged). Indicate emphasis ; marking up keywords ; and for reference purposes.

5. HTML4.1 Cleaning  because using them damages usability and accessibility: ,,. Either use or and CSS or use server-side includes.  not been used often, created confusion, or their function can be handled by other elements: . Created confusion. use for abbreviations.  use or.  usage can be replaced by usage of controls.  has been obsoleted in favor of.

6. HTML4.1 Cleaning  The following attributes are obsolete and must not be used:  presentational attributes are better handled by CSS:  alink, link, text, vlink, background attributes on body.  bgcolor attribute on table, tr, td, th and body.  align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1 – h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.  frameborder, scrolling, marginheight and marginwidth attributes on iframe.  hspace and vspace attributes on img and object.

7. HTML4.1 Cleaning  noshade, size attributes on hr.  compact, type attributes on li, ol and ul.  border, frame, rules, cellpadding and cellspacing attributes on table.  nowrap attribute on td and th.  valign attribute on col, colgroup, tbody, td, tfoot, th, thead and tr.  height, width attributes on hr, table, td, th, col, colgroup and pre.  nohref attribute on area.  Etc. http://www.w3.org/TR/html5/obsolete.html#no n-conforming-features http://www.w3.org/TR/html5/obsolete.html#no n-conforming-features

8. Simplify  In HTML4.1 document's title your document's content goes here

9. Simplify  And now in HTML5 Example document your document's content goes here

10. Simplify  And with optional tags in HTML5 Example document your document's content goes here  Omitting a tag does not mean it is not present; it is implied, but it is still there.  Be careful, you must follow strict rules  http://www.w3.org/TR/html5/syntax.html#opti onal-tags http://www.w3.org/TR/html5/syntax.html#opti onal-tags

11. Better structure  represents a group of introductory or navigational aids.  represents a footer for a section and can contain information about the author, copyright information, etc.  represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5 and h6 elements to indicate the document structure.

12. Better structure  represents an independent piece of content of a document, such as a blog entry or newspaper article.  represents a section of the document intended for navigation.  represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. Optionally can contain as caption.  represents a piece of content that is only slightly related to the rest of the page.

13. Multimedia  tag defines sound, such as music or other audio streams. tag defines video, such as a movie clip or other video streams.  Attributes:  src The URL of the audio/video to be play.  autoplay start playing as soon as it is loaded.  controls shows the controls (e.g. play/pause button).  loop start over again every time it is finished.  preload (none, auto, metadata) when/what to load.  muted mute the sound.  height, width set size only for video.  mediagroup to link multiple media elements together.  poster show an image only for video.

14. Multimedia – The WAR  Ogg (.ogg,.ogv,.oga)  Free and open container format  Theora video and Vorbis and Opus audio codecs  MP4 (.mp4,.mp3)  Proprietary (MPEG LA) standard  Cisco makes a licensed H.264 binary module available for free  H.264 video and AAC and MP3 audio codecs  H.265 under standardization  WebM (.webm)  royalty-free patent license  VP8 and VP9 video and Vorbis and Opus audio codecs

15. Multimedia  To provide alternative for audio and video, you can nest the tag.  With attributes: src and optional media and type.  E.g. Sorry, your browser don't support audio!  Like for text and images, respect the copyright!

16. Multimedia  The tag allows to specify explicit external timed text tracks for media elements.  Attributes:  kind (subtitles (default), captions, chapters, descriptions, metadata) specifies the kind of text track.  src gives the address of the text track data.  srclang gives the language of the text track data.  label gives a user-readable title for the track.  default specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.

17. Multimedia  is currently supported by Chrome, Opera and IE only.

18. MathML and SVG  tag is use to insert mathML elements.  http://www.w3.org/TR/MathML http://www.w3.org/TR/MathML  tag to insert SVG graphics.  http://www.w3.org/TR/SVG http://www.w3.org/TR/SVG some math: x = y 3 And svg:

19. More formatting  represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.  represents a measurement, such as disk usage.  represents a date and/or time.  represents a line break opportunity. , and allow for marking up ruby annotations. (Used in East Asia, to show the pronunciation of East Asian characters (furigana).)

20. Other new tags  is used for plugin content.  represents a completion of a task, such as downloading or when performing a series of expensive operations.  is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.  represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.

21. Other new tags  represents some type of output, such as from a calculation done through scripting.  represents additional information or controls which the user can obtain on demand. The provides its summary, legend, or caption.

22. Form  New tags for html form:  together with the list attribute for can be used to make comboboxes.  represents control for key pair generation.  Attributes: keytype (e.g. rsa), challenge  New attributes for :  type: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color.  autocomplete, min, max, multiple, pattern and step.

23. Form  New attributes  autofocus provides a declarative way to focus a form control during page load.  placeholder represents a hint intended to aid the user with data entry.  form for controls to be associated with a form. I.e. elements can now be placed anywhere on a page.  required indicates that the user has to fill in a value in order to submit the form.

24. Form  The element has a novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted).  The and elements have formaction, formenctype, formmethod, formnovalidate and formtarget as new attributes.

25. Other new attributes  reversed for indicates that the list order is descending.  The value attribute for the element is no longer deprecated as it is not presentational. The same goes for the start attribute of the element.  The has a new attribute called async that influences script loading and execution.  The has a new attribute called sizes. It can be used in conjunction with the icon relationship.

26. Other new attributes  The has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e.g. blog comments.  The has a new scoped attribute which can be used to enable scoped style sheets.  The contenteditable attribute indicates that the element is an editable area.  The draggable attribute can be used together with the new drag & drop API.  more… http://www.w3.org/TR/html5-diff/#new- attributeshttp://www.w3.org/TR/html5-diff/#new- attributes

27. Events  New mouse events  ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop  onmousewheel, onscroll  Multimedia events  onplay, onplaying, onpause, onseeked, onseeking, onwaiting, onvolumechange, oncanplay, oncanplaythrough, onloadstart, onloadeddata, onloadedmetadata, etc.

28. Events  Window events  onoffline, ononline  onpagehide, onpageshow  onbeforeprint, onafterprint  Etc.  Form events  onformchange, onforminput, oninput, oninvalid, oncontextmenu

29. New API  API for playing of video and audio which can be used with the new and elements.  An API that allows a Web application to register itself for certain protocols or media types.  Editing API in combination with a new global contenteditable attribute.  API that exposes the history and allows pages to add to it to prevent breaking the back button.  Drag & drop API in combination with a draggable attribute.  http://ljouanneau.com/lab/html5/demodragdrop.html http://ljouanneau.com/lab/html5/demodragdrop.html

30. New API  Geolocation API provides scripted access to geographical location information associated with the hosting device.  http://code.google.com/p/geo-location- javascript/ http://code.google.com/p/geo-location- javascript/  An API that enables offline Web applications.  Good example: http://diveintohtml5.info/offline.html http://diveintohtml5.info/offline.html

31. Sources  http://www.w3.org/TR/html5/ http://www.w3.org/TR/html5/  http://www.whatwg.org/specs/web- apps/current-work/multipage http://www.whatwg.org/specs/web- apps/current-work/multipage  http://en.wikipedia.org/wiki/Html5 http://en.wikipedia.org/wiki/Html5  http://en.wikipedia.org/wiki/WHATWG http://en.wikipedia.org/wiki/WHATWG  http://dev.w3.org/html5/html4-differences http://dev.w3.org/html5/html4-differences  http://www.w3.org/TR/html5/obsolete.html#non -conforming-features http://www.w3.org/TR/html5/obsolete.html#non -conforming-features  http://diveintohtml5.info/ http://diveintohtml5.info/  http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/html/html5_intro.asp