Introduction to HTML 5 HTML 5 Markup language

HTML 5 Mark-up language Specify the roles different parts of the document play Poor

HTML Basics Three types of mark-up Elements Attributes Values

Elements Comprises of A start tag Content End Tag E. g. <h 1>This is

Attributes and Values Attributes contain information about the data specified by the attributes value.

Building a Simple HTML Document <html> </html> Any text, code - anything must be

Extending the Mark-up A typical HTML document, without any content will typically have the

Adding Content <html> <head> <title>This is my page. </title> </head> <body> <h 1>Welcome to

History and Development Tim Berners-Lee late 1980’s early 1990’s HTML based on SGML (Standard

Marquee Tag Only worked in Internet Explorer! Browser companies “at war” Pages may not

World Wide Web Consortium (W 3 C) Founded 1994 Advises on standards for HTML

XML (e. Xtensible Markup Language) Meta Language (data describing data) Used to build other

Media Centre Master Use it to scan your media library Downloads images and film

The Data May be used in Local Media Player… Or in fact any application,

Separating Styling and Content IMDB Desktop App

Tags in XML Doesn’t define a large range of tags, so we don’t have

The XML Declaration <? xml version="1. 0" encoding="utf-8" standalone="yes"? > Encoding – how is

Five Rules of XML 1. Tag names are case sensitive This is ok. .

1. Tag names are case sensitive This is ok. . . <Local. Title>28 Days

2. Every opening tag must have a closing tag This is good. . .

3. A nested tag pair cannot overlap another tag This is good. . .

4. Attribute values must appear within quotes Good. . . <Film. Detail Title="28 Days

5. Every document must have a root element

XHTML (e. Xtensible Hyper. Text Markup Language) Based on XML Followed the same rules

The Doctype Take a look at this XHTML document…

HTML 5 Web developers wouldn’t play ball! Standards not widely adopted Browser support –

Some new HTML 5 tags Generic Page Sections <header>this is the header of my

In the Lab Create a simple HTML page HTML form Form Processor

Slides: 29

Download presentation

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

Elements Comprises of A start tag Content End Tag E. g. <h 1>This is a heading</h 1>

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 <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.

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> </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> <h 1>Welcome to my Site</h 1> The main text of the document goes here. </body> <html> 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 (W 3 C) 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 (e. Xtensible 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 IMDB Desktop App

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…

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? ASCII UNICODE 65 66 67 68 69 70 41 42 43 44 45 46 Uppercase A Uppercase B Uppercase C Uppercase D Uppercase E Uppercase F UTF-8 tells us that the text is encoded using UCS Transformation Format – dominant character set for WWW

Five Rules of XML 1. Tag names are case sensitive This is ok. . . <Local. Title>28 Days Later</Local. Title> This is not. . . <Local. Title>28 Days Later</Localtitle> These are two different tags <localtitle>28 Days Later</localtitle> <Local. Title>28 Days Later</Local. Title>

1. Tag names are case sensitive This is ok. . . <Local. Title>28 Days Later</Local. Title> This is not. . . <Local. Title>28 Days Later</Localtitle> These are two different tags <localtitle>28 Days Later</localtitle> <Local. Title>28 Days Later</Local. Title>

2. Every opening tag must have a closing tag This is good. . . <Local. Title>28 Days Later</Local. Title> This is bad. . . <Local. Title>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. . . <Persons> <Person> <Name>Alex Palmer</Name> <Type>Actor</Type> <Role>Activist</Person> </Role>

4. Attribute values must appear within quotes Good. . . <Film. Detail Title="28 Days Later" IMDBrating="7. 6" Production. Year="2002"> Bad. . . <Film. Detail Title=28 Days Later IMDBrating=7. 6 Production. Year=2002>

5. Every document must have a root element

XHTML (e. Xtensible Hyper. Text 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 W 3 C faced competition from Apple, Opera & Mozilla Not multimedia friendly XHTML dumped in 2007

HTML 5 Document

Some new HTML 5 tags Generic Page Sections <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. mp 3" controls></audio> <video> <source src="zoetrope. mp 4> </video>

In the Lab Create a simple HTML page HTML form Form Processor