05 RD PoSD Tutorial_xhtml_to_html5_2016
- 1. Principles of Systems Development Week 5 Tutorial: From XHTML to HTML5, Creating HTML 4.01 pages Richard Dron Technical Innovation Officer e: [email protected] t: twitter.com/seniorenrico
- 2. Hi … it’s me, Richard, again … 2 • University Technical Innovation Officer – one part of my role is to help in the development of students’ technical skills in the digital area. • Originally from IS project management background, implementing solutions for Retail and hospitality companies • Worked as a freelance consultant and IS project manager – various digital projects for large and small companies including web development
- 3. PoSD Aims 3 • To introduce key principles relating to the development of robust, reusable and appropriate information systems • To introduce the Systems Development Lifecycle • To introduce the principles of Systems Analysis • To develop understanding of contemporary development environments • To provide an introduction to the development of web-based software artefacts and their integration with existing popular web-based systems such as blogging, micro-blogging and other contemporary social media
- 4. PoSD Learning Outcomes 4 Knowledge and Understanding • Recognise key technologies underlying social network technologies • Analyse and identify the key elements of an information system • Create an interactive website/business media presence • Understand the relationship of an information system to the wider business context in which it is deployed • Develop code in a web-based context including user interaction
- 5. PoSD Learning Outcomes 5 Transferable/Key Skills and other attributes Develop key professional skills, including: • Self management / time management skills • Communication • Learn and develop high professional standards • Use information technology: • Process and present information using common applications • Review the appropriate use of Information Technology • Develop communication skills: • Read and respond to written material • Produce written material • Use a range of different technologies to communicate and collaborate In virtual spaces
- 6. Quiz about … what you already know 6 HTML Recap! Open Chrome or Firefox at, or use your phone: http://b.socrative.com Enter room: SOCMED Quiz = HTML Quiz
- 7. Week 5 Introduction 7 • HTML4 Recap • XHTML – what is it? • XHTML – the differences • HTML5 Intro
- 8. Quick Exercise - Multi browser Test 8 • Visit http://browsershots.org/ • Enter your PoSD site URL • http://teaching.mysalford. biz/bns286 • Scroll to bottom deselect all • Select Windows • Hit Submit • We’ll come back to here later on
- 9. HTML4 Recap - Structural Markup 9 <html lang=“en-gb”> <head> ..WHAT GOES HERE?.. </head> <body> <div id=“header”><h1>Header</h1></div> <div id=“menu”><ul><li>Navigation</li></ul></div> <div id=“content”><h2>Content</h2><p>Detail</p></div > <div id=“footer”><p>Footer</p></div> </body> </html>
- 10. HTML4 Recap - Doctype and Charset 10 HTML 4.01: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Careful when copy-pasting this from Microsoft to Notepad – the quotation marks are not standard font
- 11. 5 minutes of fun … 11 Go to http://markup.roppychop.com/
- 12. XHMTL 12
- 13. Defining XHTML 13 • Stands for Extensible Hyper-Text Mark-Up Language. • Is a stricter version of HTML, thus aiming to replace HTML. • Is actually HTML defined as an XML (EXtensible Mark-Up Language) application. • Is a W3C (World Wide Web Consortium) Recommendation. • Now superseded by HTML5
- 14. Differences between HTML & XHTML 14 • XHTML elements must be properly nested. • XHTML elements must always be closed. • XHTML elements must be in lowercase. These things are GOOD PRACTICE and you should follow these rules with HTML4.01
- 15. Good Practice: Structure 15 • Structural Markup: • Sections with • Headings, Paragraphs & Lists • Headers – H1, H2, H3, … H6 • Paragraphs – P • Lists – UL, LI – OL, LI – DL, DT, DD • Linear Structure Heading1 Paragraph Heading2 Paragraph Heading3 Paragraph • List item • List item • List item Heading3 Paragraph
- 16. Good Practice: Testing 16 • Test it in as many browsers as you can, on Mac and Linux as well as on Windows • Test your site on tablets • Test your site on smartphones
- 17. Quick Exercise - Mobile Testing 17 • Try it on your own phone! https://www.google.co.uk/webm asters/tools/mobile-friendly/
- 18. Quick Exercise - Multi browser Test 18 • Results • View your site in 3 browser versions, spot any differences?
- 19. HTML5 19
- 20. XHTML > HTML 5 20 Web Hypertext Application Technology Working Group (WHATWG) • June 2004: Opera and Mozilla set up the mailing list • HTML5 — Web Applications 1.0 & Web Forms 2.0 • October 2006: Reinventing HTML — Tim Berners-Lee • May 2007: W3C HTML Working Group • January 2008: HTML 5 – ?: Last Call Working Draft – 2012?: Candidate Recommendation – 2022?: Proposed Recommendation
- 21. You don’t get rid of HTML4 standards – you just improve upon them! 21
- 22. It’s easy for web developers to upgrade their websites to HTML 5 22 Step 1: change the doctype at the top of the page. OLD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> NEW: <!DOCTYPE html>
- 24. Why do Web Developers love HTML 5 ? 24 Better organization of page content and code <header> <nav> <main> <section> <article> <aside> <footer>
- 25. HTML5 is a Collection of Features 25 • HTML5 is not an “all or nothing” capability. • The HTML5 features available to end users depend on what browser and what version of that browser they are using. •Users: How well does your browser support html5? Keep your browser updated so that as they add new feature support you will have access to these new features!
- 26. Who will see your cool new HTML 5 features? 26 Changing the Doctype will not break your existing website People using OLDER browsers that don’t support the new HTML5 features will simply miss out on viewing the website the way others do.
- 27. Validation 27 • Validation – validate at Strict HTML4 to get into good habits then convert to HTML5 • DOCTYPE – declare the DTD before <html> – <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • Character Encoding – Latin Western • Good clean strict code = 90% accessible – Make sure your code validates correctly to HTML4 strict. Then turn it into HTML5 – Use of < /> self-closing tags for XHTML unnecessary
- 28. Practical Exercise - Update your PoSD site 28 • Edit your home page • FTP the file <html><head> <title>My first webpage</title></head><body> <div id=“header”><h1>My first webpage</h1></div> <div id=“nav”><ul><li><a href=“#”>Item 1</a></li> <li>Item 2</li><li>Item 3</li></ul></div> <div id=“content”><h1>Lorem Ipsum Dolor</h1> <p>….lorem…</p> <p>….ipsum…</p> <p>….dolor…</p> </div> <div id=“footer”><p>Terms and Conditions</p></div> </body> </html>
- 29. Practical Exercises - Validate 29 http://validator.w3.org/
- 30. Practical Exercises – Speed Test 30 https://developers.google.com/speed/pagespeed /insights/