1 / 29

Introduction to HTML 5

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.

mbunce
Download Presentation

Introduction to HTML 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Elements • Comprises of • A start tag • Content • End Tag • E.g. <h1>This is a heading</h1>

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

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

  18. Five Rules of 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>

  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> <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... <Persons> <Person> <Name>Alex Palmer</Name> <Type>Actor</Type> <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 <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

More Related