1. XML To this point, we’ve pretty much ignored or brushed over the use of xml What is xml? – xml is eXtensible Markup Language – it is a metalanguage for developing markup languages What is a markup language? – Markup languages are not so much programming languages like Java or Python but instead often us symbols by which we can interpret other symbols – In HTML, the symbols are tags which allow a browser to format the rest of the text, coupled with commands to load other files Thus, in a markup language, we differentiate between the markup (the tags) and the content – The interpretation of the markup is done by a program a web browser in html xml is a more generic markup language that can be used so that you can write your own software to interpret the xml markups (tags)

2. XML Components XML components are unicode characters, tags, attributes Tags consist of the type of tag and the element name – An element name might be or for instance – There are three types of tags Start tags as in End tags as in – these two sets of tags must be paired together Stand-alone tags (also known as empty-element tags) – as in Attributes along with their values provide specifiers for how a given tag should be handled or enacted – E.g., in, src, height, width and alt are attributes and we assign them values Some attributes are required for a tag, others are optional

3. XHTML 2.0 A lot of effort has gone into the definition of xhtml 1.0, which we have studied all semester – Xhtml differs from html in that it is extensible, so that it builds upon html The natural extension (or next generation) is xhtml 1.0 – You might recall from chapter 2, there are three types of xhtml 1.0: xhtml 1.0 transitional and xhtml 1.0 strict and xhtml 1.0 frameset so that there is no consensus regarding which version of xhtml should be used by web developers or implemented by web browsers However, people also continue to work on html (we are currently at html 4) so that the next release is html 5 Therefore, the question becomes: what version of html should be implemented in web browsers and which version of html should web developers use? – Prior to the start of this semester, the answer seemed to be to use xhtml 1.0 transitional followed by xhtml 2.0 when it is released – HOWEVER, W3C, the world wide web consortium who makes decisions on looks to recommend that web browsers should support html 5!

4. So What is HTML5? HTML5 is of course a new version of html – It is currently in draft form (the earliest draft was made available in January 2008) – It is not expected to be complete until after 2012 – However, parts of it are already available and being implemented in web browsers While W3C’s recommendation might look premature, it in fact allows current web developers to begin to incorporate already implemented components into their new websites While HTML5 overlaps XHTML 1.0, HTML5 supports new features not present in either XHTML 1.0 or any previous html version – Previously, some features have been available via 3 rd party software like Adobe Flash, but now being added to html itself will make the web development task easier and will require a web developer to use fewer tools

5. Changes in HTML 5 Block elements – replacements for and for generic locations such as and Functional elements – for standardized interfaces with multimedia elements like and Deprecating elements – handled solely in css these days:,,,, etc – frames:,, – Greater emphasis for scripting to handle behavior using the document object model – e.g., access form elements, change elements dynamically on a page

6. Attributes No Longer Supported In an attempt to move away from formatting via html to formatting via CSS, a number of attributes are no longer supported – align, valign, height, hspace – alink, vlink (used to indicate colors for active or visited links) – bgcolor, border, cellpadding, cellspacing – marginheight, marginwidth – frame, frameborder and others not listed here As stated on the previous slide, many tags have been deprecated entirely as well Notice that deprecated or “not supported” does not necessarily mean that they will not work, it depends on what the browser itself has implemented

7. New Tags – A section of a web page that has its own formatting For instance, if you are representing an on-line newspaper, this section is literally an article, formatted differently from the headlines, banner, and advertisements – Similar to an article, a section with its own formatting This section would be literally an “aside”, a section that is different from the flow and format of the rest of the page, – A section that represents an audio or video data stream This section has properties similar to the current and such as src, controls, autoplay and loop, also a new property: autobuffer

8. More New Tags – A browser button – like a button in a form, this allows the web designer to insert an input that triggers a programmed command (programmed via a scripting language or a call to an external web app) – A graphics object with height and width specifications, scripts can target the object to display into – Like bb, a button or box (checkbox, radio button) that the user can invoke to execute a script or program – Interactive list represented in a tree or linear (list) form – Drop down list (menu)

9. And More – Like article, a separately formatted section but in this case representing dialog – Separately formatted section with an optional caption that can be referenced from text and scripts,, – Like article and the others above, separately formatted sections the idea behind these separately formatted sections is to move away from using or all the time – A means to format all of … with some common formatting element(s) – Like dialog and article, used to highlight a section of text (marked text)

10. And A Few More – A region for output from a script associated with a form (this can be used in place of the readonly attribute of an input box) – For a progress bar,, – Ruby program annotations, text parenthesis and text components respectively – used to display ruby code, – These are ways to reference URLs for text or multimedia files – Precise date & time

11. Some Examples Images: Some legend for this figure Audio multimedia content Your browser does not support this content Notice here that the default controls will appear unless the browser does not support this form of multimedia and then replaces it with the text. Multimedia video will be the same except for the tags, Dialog example: King of Swamp Castle One day, lad, all of this will be yours Prince Herbert What, the curtains?

12. Scripted Media Example In this example, we combine javascript code in a script section with javascript events (onclick), a movie object which is defined in the tag, and form elements to control the movie object This code first creates a variable called movie and obtains an actual movie using the document.getElementById command The movie is called “movie” in the tag, so it assigns the variable movie to be that movie object The movie object is then passed messages: play, pause, currentTime (to reset the time) var movie=document.getElementById(“movie”); Movie Clip Play Pause Rewind

13. Current Support for HTML 5 Stylable elements (e.g.,,, etc) and the element are all supported by all current browsers except IE (support unknown for IE 9.0, not available in earlier versions) New tags are only currently supported in Opera (support unknown for IE 9.0) and are available in Firefox and Opera, audio is available in Safari but video is only partially supported in Safari, support unknown for IE 9.0, Chrome either does not yet support it or the support is not known Support vector graphics (svg) are supported on all except IE (support unknown)