Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML 5
2
HTML 5 Mark-up language Specify the roles different parts of the document play Poor tool for layout (thus the need for CSS)
3
HTML Basics Three types of mark-up Elements Attributes Values
4
<h1>This is a heading</h1>
Elements Comprises of A start tag Content End Tag E.g. <h1>This is a heading</h1>
5
<img src="mypicture.jpg" />
Attributes and Values Attributes contain information about the data specified by the attributes value. E.g. <img src="mypicture.jpg" />
6
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.
7
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…
8
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….
9
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
10
Marquee Tag Only worked in Internet Explorer!
Browser companies “at war” Pages may not work on certain browsers!
11
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
12
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
13
Media Centre Master Use it to scan your media library
Downloads images and film data
14
The Data May be used in Local Media Player…
Or in fact any application, including web sites
15
Separating Styling and Content
Desktop App IMDB
16
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…
17
<?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 (Unicode Transformation Format) tells us how the text is encoded 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
18
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>
19
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>
20
2. Every opening tag must have a closing tag
This is good... <LocalTitle>28 Days Later</LocalTitle> This is bad... <LocalTitle>28 Days Later
21
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>
22
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>
23
5. Every document must have a root element
24
XHTML (eXtensible HyperText Markup Language)
Based on XML Followed the same rules as XML XHTML - transitional, “relaxed version” XHTML – strict, “strict version”
25
The Doctype Take a look at this XHTML document…
26
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
27
HTML 5 Document
28
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>
29
In the Lab Create a simple HTML page HTML form Form Processor
Similar presentations
