Web Development Basics Lecture 4 HTML 5 Introduction
Web Development Basics Lecture 4 – HTML 5
Introduction § HTML 5 is the next major revision of the HTML standard § Currently under development § Started by the WHATWG in June 2004 § Accepted by W 3 C in 2007 § Current status: § Living Standard state at the WHATWG § Candidate Recommendation at W 3 C (2013) § W 3 C Recommendation would occur in the year 2022 or later (Ian Hickson (Google, Inc) editor of HTML 5)
Browser Support § The latest versions of Safari, Chrome, Firefox, Internet Explorer and Opera support some HTML 5 features. § Internet Explorer <= 8; DON’T support HTML 5! § Script to make IE <= 8 building a proper HTML 5 DOM <!--[if lt IE 9]> <script src="http: //html 5 shiv. googlecode. com/svn/trunk/html 5. js"> </script> <![endif]-->
HTML 4. 1 Cleaning § The following tags are not in HTML 5 § because their are presentational: § <basefont>, <big>, <center>, <font>, <blink>, <nobr>, <spacer>. Use CSS. § <marquee>, <multicol>. Use CSS 3. § <strike>. Use <del> or <s>. § <tt>. Marking keyboard input <kbd>; for variables <var>; for computer code <code>; and for computer output <samp>. § <u>(still valid but discouraged). Indicate emphasis <em>; marking up keywords <b>; and for reference purposes <mark>.
HTML 4. 1 Cleaning § because using them damages usability and accessibility: § <frame>, <frameset>, <noframes>. Either use <iframe> or <object> and CSS or use server-side includes. § not been used often, created confusion, or their function can be handled by other elements: § <acronym>. Created confusion. use <abbr> for abbreviations. § <applet> use <embed> or <object>. § <isindex> usage can be replaced by usage of <form> controls. § <dir> has been obsoleted in favor of <ul>.
HTML 4. 1 Cleaning § The following attributes are obsolete and must not be used: § presentational attributes are better handled by CSS: § alink, 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, h 1 – h 6, p, colgroup, tbody, td, tfoot, thead and tr. § frameborder, scrolling, marginheight and marginwidth attributes on iframe. § hspace and vspace attributes on img and object.
HTML 4. 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, thead and tr. § height, width attributes on hr, table, td, th, colgroup and pre. § nohref attribute on area. § Etc. http: //www. w 3. org/TR/html 5/obsolete. html#no n-conforming-features
Simplify § In HTML 4. 1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> <html> <head> <title>document's title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> your document's content goes here </body> </html>
Simplify § And now in HTML 5 <!doctype html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> your document's content goes here </body> </html>
Simplify § And with optional tags in HTML 5 <!doctype html> <meta charset="UTF-8"> <title>Example document</title> <p>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. w 3. org/TR/html 5/syntax. html#opti onal-tags
Better structure § <header> represents a group of introductory or navigational aids. § <footer> represents a footer for a section and can contain information about the author, copyright information, etc. § <section> represents a generic document or application section. It can be used together with the h 1, h 2, h 3, h 4, h 5 and h 6 elements to indicate the document structure.
Better structure § <article> represents an independent piece of content of a document, such as a blog entry or newspaper article. § <nav> represents a section of the document intended for navigation. § <figure> represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. Optionally can contain <figcaption> as caption. § <aside> represents a piece of content that is only slightly related to the rest of the page.
Multimedia § <audio> tag defines sound, such as music or other audio streams. <video> 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.
Multimedia – The WAR § Ogg (. ogg, . ogv, . oga) § Free and open container format § Theora video and Vorbis and Opus audio codecs § MP 4 (. mp 4, . mp 3) § Proprietary (MPEG LA) standard § Cisco makes a licensed H. 264 binary module available for free § H. 264 video and AAC and MP 3 audio codecs § H. 265 under standardization § Web. M (. webm) § royalty-free patent license § VP 8 and VP 9 video and Vorbis and Opus audio codecs
Multimedia § To provide alternative for audio and video, you can nest the <source> tag. § With attributes: src and optional media and type. § E. g. <audio controls loop> <source src="music/song. ogg" type="audio/ogg"> <source src="music/song. mp 3" type="audio/mpeg"> Sorry, your browser don't support audio! </audio> § Like for text and images, respect the copyright!
Multimedia § The <track> 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.
Multimedia <video src="my_movie. webm"> <track kind="subtitles" src="sub_en. vtt" srclang="en" label="English" default> <track kind="subtitles" src="sub_fr. vtt" srclang="fr" label="Français"> <track kind="subtitles" src="sub_de. vtt" srclang="de" label="Deutsch"> </video> § <track> is currently supported by Chrome, Opera and IE only.
Math. ML and SVG § <math> tag is use to insert math. ML elements. § http: //www. w 3. org/TR/Math. ML § <svg> tag to insert SVG graphics. § http: //www. w 3. org/TR/SVG <p>some math: <math> <mi>x</mi> <mo>=</mo> <msup><mi>y</mi> <mn>3</mn></msup> </math></p> <p>And svg: <svg height="200"> <circle r="50" cx="55" cy="55" fill="green" /> </svg></p>
More formatting § <mark> represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. § <meter> represents a measurement, such as disk usage. § <time> represents a date and/or time. § <wbr> represents a line break opportunity. § <ruby>, <rt> and <rp> allow for marking up ruby annotations. (Used in East Asia, to show the pronunciation of East Asian characters ( furigana ). )
Other new tags § <embed> is used for plugin content. § <progress> represents a completion of a task, such as downloading or when performing a series of expensive operations. § <canvas> is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. § <dialog> represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.
Other new tags § <output> represents some type of output, such as from a calculation done through scripting. § <details> represents additional information or controls which the user can obtain on demand. The <summary> provides its summary, legend, or caption.
Form § New tags for html form: § <datalist> together with the list attribute for <input> can be used to make comboboxes. § <keygen> represents control for key pair generation. § Attributes: keytype (e. g. rsa), challenge § New attributes for <input>: § type: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color. § autocomplete, min, max, multiple, pattern and step.
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.
Form § The <form> element has a novalidate attribute that can be used to disable form validation submission (i. e. the form can always be submitted). § The <input> and <button> elements have formaction, formenctype, formmethod, formnovalidate and formtarget as new attributes.
Other new attributes § reversed for <ol> indicates that the list order is descending. § The value attribute for the <li> element is no longer deprecated as it is not presentational. The same goes for the start attribute of the <ol> element. § The <script> has a new attribute called async that influences script loading and execution. § The <link> has a new attribute called sizes. It can be used in conjunction with the icon relationship.
Other new attributes § The <iframe> has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e. g. blog comments. § The <style> 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. w 3. org/TR/html 5 -diff/#newattributes
Events § New mouse events § ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop § onmousewheel, onscroll § Multimedia events § onplay, onplaying, onpause, onseeked, onseeking, onwaiting, onvolumechange, oncanplaythrough, onloadstart, onloadeddata, onloadedmetadata, etc.
Events § Window events § onoffline, ononline § onpagehide, onpageshow § onbeforeprint, onafterprint § Etc. § Form events § onformchange, onforminput, oninvalid, oncontextmenu
New API § API for playing of video and audio which can be used with the new <video> and <audio> 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/html 5/demodragdrop. html
New API § Geolocation API provides scripted access to geographical location information associated with the hosting device. § http: //code. google. com/p/geo-locationjavascript/ § An API that enables offline Web applications. § Good example: http: //diveintohtml 5. info/offline. html
Sources § http: //www. w 3. org/TR/html 5/ § http: //www. whatwg. org/specs/web-apps/currentwork/multipage § http: //en. wikipedia. org/wiki/Html 5 § http: //en. wikipedia. org/wiki/WHATWG § http: //dev. w 3. org/html 5/html 4 -differences § http: //www. w 3. org/TR/html 5/obsolete. html#non -conforming-features § http: //diveintohtml 5. info/ § http: //www. w 3 schools. com/html 5_intro. asp
- Slides: 31