Introduction to HTML (5) HTML is a mark-up language, in that it specifies the roles the different parts of the document are to play. For example you may specify which section of a document is a top level heading, which sections are paragraphs. e.g. HTML is a poor tool when it comes to specifying the layout of the document for this we will use Cascading Style Sheets (CSS). HTML Basics HTML has three types of mark-up: Elements Attributes Values Elements An element comprises: Start Tag Content End tag <h1>this is a heading</h1> Attributes and Values Attributes contain information about the data specified by the attributes value. e.g. 1
<img src="mypicture.jpg" /> 2
Building a Simple HTML Document The first element that we shall look at is the element that defines the start and end of the HTML document. <html> </html> Any text, code - anything must be inserted between these two tags. The following is incorrect... This is my web site. <html> </html> Isn't this a wonderful bit of HTML. 3
A typical HTML document, without any content will typically have the following elements. <html> <head> <title>untitled Document</title> </head> <body> </body> </html> Once the document structure has been defined, we may start specifying which sections are headings, paragraphs etc 4
The following HTML specifies a top level heading via the tag h1. <html> <head> <title>this is my page.</title> </head> <body> <h1>welcome to my Site</h1> The main text of the document goes here. </body> <html> Which when viewed in the browser would look like this... History and Development In the late 1980 early 90s Tim Berners-Lee working in Switzerland devised the first specification for HTML based on SGML. Part of the driving force for this was the feeling that SGML was too complicated to easily share scientific documents across the internet. 5
A simple HTML document has the following format... When displayed in the browser the following page is seen... Notice how we use tags to mark up the document (in this case for bold, italics and underlined). There are however a few problems with the early version of HTML. 1. The tags were defined as part of the language specification. If we wanted to add a new feature to HTML then a new version of the language had to be created. 2. Different browsers added new features to the language in order to compete. A good example of this is the marquee tag. In the following document we have created a marquee tag... 6
The effect that you get is a section of text that moves from one side of the page to the other... Although we can debate on how effective this feature is the big problem is that it only worked in Internet Explorer. This was a ploy by Microsoft to drive other companies out of the market by having more cool features than them. Other companies did the same also in an effort to push Internet Explorer out of the game. These browser wars resulted in multiple versions of HTML appearing specific to different browsers. This created the possibility that you could navigate to a page and sections of the HTML in that page may not work when viewed in your browser of choice. In the light of this need for standards Tim Berners-Lee founded the World Wide Web Consortium (W3C) in 1994. The W3C s purpose is to devise standards and software related to the World Wide Web. Sometime around 1998 they decided that there was no point extending HTML any further and would concentrate on a few other strands. XHTML Strict and Transitional The idea was that a much tighter specification for mark-up would be devised based on XML. XML XML is a meta-language meaning that it contains data used to describe data. As a result XML may be used to define other mark-up languages. XML provides a set of rules and a basic structure and from this other document formats may be devised. In fact XML is really nothing to do with the web. XML may be used in many other non web related contexts. To give you some idea of an application of XML we will look at a few different programs that make use of XML to identify details of a film. 7
We will look at a program called Media Centre Master and how it integrates with Internet Movie Database and Windows Media Centre. Media Centre Master Media Centre Master is a free program that may be used to manage films saved as DivX files. The program allows the creation of scan folders into which you place your DivX file in a folder named as the title of the film. For example... When Media Centre Master is run it looks in this folder and tries to identify the film. It does this by communicating with Internet Movie Database (IMDB), sending it the name of the film. IMDB looks in its database of films and sends back details of the film as an XML file. (The program also downloads a set of rather nice jpegs for use as backdrops) The XML file when used in Windows Media Centre provides the basis for the film s information page... 8
The same XML data and Jpegs may be used in any application that is able to read XML data and is not restricted to platform or device. Separation of Content and Styling It is also worth drawing a distinction here between styling and content. In this example no web pages are involved. The data arrives from IMDB as a data file that contains no information about how that document should be styled. This means that if we want to view the same data via the browser we may apply different styling. 9
What we are seeing here is the data has been separated from the presentation of the data making it a much more versatile and valuable entity in its own right. Tags in XML Unlike HTML, XML doesn t define a large range of tags. This means that if we want to create a new tag in XML we don t need to wait for a new version of the language. If we inspect the XML data that we downloaded from IMDB we see the following text file... The XML Declaration The top line of the file reads as follows... <?xml version="1.0" encoding="utf-8" standalone="yes"?> This line is not mandatory but it contains some important data about the XML. 10
We will concentrate on the two attributes XML Version Encoding (standalone="yes" means that this file doesn t rely on a DTD) XML Version The first thing it tells us is the version of XML. There are two options here 1.0 or 1.1. XML 1.1 isn t very widely used so we are only interested in XML 1.0. (We may have to worry about XML 2.0 at some point but not yet.) Encoding The encoding is an important consideration in making sure that the file is read correctly. As you are probably aware everything we see on a computer is internally represented as binary data. When it comes to representing text data we normally associate a numeric value with the letter from the character set. For example the ASCII character set uses the following codes to represent the letters A to F 65 Uppercase A 66 Uppercase B 67 Uppercase C 68 Uppercase D 69 Uppercase E 70 Uppercase F In UNICODE (Another system for representing characters we use the following codes to represent A to F) 41 Uppercase A 42 Uppercase B 43 Uppercase C 44 Uppercase D 45 Uppercase E 46 Uppercase F So if our application received the following character codes... 46, 41, 44, 45 11
We need to know which character set the data is encoded in before we can convert the numeric codes back to letters. UTF-8 tells us that the text is encoded using UCS Transformation Format 8-bit (UCS stands for Universal Character Set) which means that we know how to convert the codes to letters at both ends. UTF-8 has become the dominant character set for the World Wide Web. Five Rules of XML Now that we have seen some XML code we need to think about some of the rules for formatting XML 1. Tag names are case sensitive This is ok... <LocalTitle>28 Days Later</LocalTitle> This is not... <LocalTitle>28 Days Later</Localtitle> These are two different tags <localtitle>28 Days Later</localtitle> <LocalTitle>28 Days Later</LocalTitle> 2. Every opening tag must have a closing tag This is good... <LocalTitle>28 Days Later</LocalTitle> This is bad... <LocalTitle>28 Days Later 3. A nested tag pair cannot overlap another tag This is good... <Persons> <Person> <Name>Alex Palmer</Name> <Type>Actor</Type> <Role>Activist</Role> 12
</Person> This is bad... <Persons> <Person> <Name>Alex Palmer</Name> <Type>Actor</Type> <Role>Activist</Person> </Role> 4. Attribute values must appear within quotes Good... <FilmDetail Title="28 Days Later" IMDBrating="7.6" ProductionYear="2002"> Bad... <FilmDetail Title=28 Days Later IMDBrating=7.6 ProductionYear=2002> 5. Every document must have a root element XHTML XML allows us to create new tags and in fact define our own mark-up languages. One example of this is XHTML (extensible HyperText Markup Language) 13
XHTML is an important step in standardising HTML. The X in XHTML indicates that it is based on XML. This ability of XML to define other languages is one of its core strengths. XHTML followed many of the rules for XML but came in two versions. XHTML - transitional, which had a slightly more relaxed attitude to the syntax and validation XHTML strict - which tightly followed the XHTML standards and syntax If we look at an XHTML file we see the following... Notice at the top of the file the DOCTYPE. This section of the XHML file points to a file at http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd This Document Type Definition contains a set of rules that define what are allowable tags in an XHTML file (in this case transitional XHTML a kind of half way house between HTML and strict XHTML) HTML 5 The W3C hoped that we would all be good boys and girls would adopt the strict version and eventually we would have a world wide web consisting of perfectly validated sites all following the tight syntax of XHTML strict. Unfortunately the standards were not widely adopted and many people and browsers refused to adopt the new standard. Some people went back to HTML 4 or stopped at XHTML transitional. Some browsers simply didn t implement the support for XHTML. In spite of this the W3C pressed on with XHTML 2.0. 14
To make matters worse for the W3C in 2004 a separate group including Apple, Opera and Mozilla devised an extension to HTML called Web Forms 2.0. There were also additional problems with XHTML. If you wanted to add any significant multimedia to your site you had to rely on third party plug-ins such as Adobe s flash for animation and Apple s QuickTime for video. The problem being that the HTML didn t support either of these features at all. These issues went on for some time with the XHTML standards not really being adopted and a parallel project running in competition when in 2006 the W3C changed their mind and around 2007 pretty much abandoned XHTML in favor of HTML 5. The Structure of HTML 5 As seen above a simple HTML document has the following format... The following is a blank HTML 5 document Compared with XHTML you will notice that the doc type (at the top is much simpler). This line of code must be present to tell the browser to translate the page as an HTML 5 document and not HTML or XHTML. The simpler doc type is one clue as to the 15
direction taken with HTML 5 the idea is to make it a bit simpler for non technical people to use. Some of the New HTML 5 Elements You should at this point be aware of how a document may be marked up in HTML. With HTML 5 a set of new tags have been introduced that make planning the structure of the document easier. In 2004 the designers of HTML 5 looked at how people were structuring their web sites and noted that many people were using certain styles quite frequently. The decision was taken to make these styles part of the mark-up in the language. We now have the option of marking up the document using the built in tags rather than creating our own styles like so <header>this is the header of my page</header> <nav>this is where the navigation will go</nav> <footer>this is the footer</footer> Rather than creating styles to manage this structure we simply need to redefine these tags to apply styling to the document. Multimedia Support Audio The following mark up allows us to add audio directly to the page mark-up. <audio src="hungry.mp3" controls></audio> When you view the page in the browser you should be presented with a set of controls allowing you to play the file Video As with the audio file a similar mark-up may be used. 16
Supported video format for HTML 5 are currently Thora OGG MP4 WEBM Free open source CODEC Normally the video equivalent of MP3 Mozilla, Opera, Adobe & Google s own format 17