Introduction to HTML 5
HTML 5 Mark-up language Specify the roles different parts of the document play Poor tool for layout (thus the need for CSS)
HTML Basics Three types of mark-up Elements Attributes Values
<h1>This is a heading</h1> Elements Comprises of A start tag Content End Tag E.g. <h1>This is a heading</h1>
<img src="mypicture.jpg" /> Attributes and Values Attributes contain information about the data specified by the attributes value. E.g. <img src="mypicture.jpg" />
Building a Simple HTML Document Any text, code - anything must be inserted between these two tags. The following is incorrect... This is my web site. Isn't this a wonderful bit of HTML.
Extending the Mark-up A typical HTML document, without any content will typically have the following elements… <html> <head> <title>Untitled Document</title> </head> <body> </body> </html> With the basic structure in place we may create headings, paragraphs etc…
Adding Content <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> Looks like….
History and Development Tim Berners-Lee late 1980’s early 1990’s HTML based on SGML (Standard Generalized Markup Language) SGML considered too complex Problems with early HTML Tags defined as part of the language You want a new tag? – you wait for language update Browser wars
Marquee Tag Only worked in Internet Explorer! Browser companies “at war” Pages may not work on certain browsers!
World Wide Web Consortium (W3C) Founded 1994 Advises on standards for HTML 1998 HTML was abandoned in favour of new version XHTML Strict and Transitional Need to take a look at XML first
XML (eXtensible Markup Language) Meta Language (data describing data) Used to build other languages Basic rules defined from which other rules are created XML not simply about the Web but has lots of applications
Media Centre Master Use it to scan your media library Downloads images and film data
The Data May be used in Local Media Player… Or in fact any application, including web sites
Separating Styling and Content Desktop App IMDB
Tags in XML Doesn’t define a large range of tags, so we don’t have to wait for a new version of the language The data from IMDB…
<?xml version="1.0" encoding="utf-8" standalone="yes"?> The XML Declaration <?xml version="1.0" encoding="utf-8" standalone="yes"?> Encoding – how is the data stored in the document? What does 46, 41, 44, 45 look like as text? UTF-8 tells us that the text is encoded using UCS Transformation Format – dominant character set for WWW ASCII UNICODE 65 Uppercase A 66 Uppercase B 67 Uppercase C 68 Uppercase D 69 Uppercase E 70 Uppercase F 41 Uppercase A 42 Uppercase B 43 Uppercase C 44 Uppercase D 45 Uppercase E 46 Uppercase F
Five Rules of XML 1. Tag names are case sensitive This is ok... 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>
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>
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> </Person> This is bad... <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 (eXtensible HyperText Markup Language) Based on XML Followed the same rules as XML XHTML - transitional, “relaxed version” XHTML – strict, “strict version”
The Doctype Take a look at this XHTML document…
HTML 5 Web developers wouldn’t play ball! Standards not widely adopted Browser support – patchy W3C faced competition from Apple, Opera & Mozilla Not multimedia friendly XHTML dumped in 2007
HTML 5 Document
Some new HTML 5 tags Generic Page Sections Multimedia Support <header>this is the header of my page</header> <nav>This is where the navigation will go</nav> <footer>This is the footer</footer> Multimedia Support <audio src="hungry.mp3" controls></audio> <video> <source src="zoetrope.mp4> </video>
In the Lab Create a simple HTML page HTML form Form Processor