1. The University of Adelaide HTML Basics: Getting your code to work Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS

2. The University of Adelaide Slide 1 HTML / CSS Hypertext Markup Language HTML 4.01 XHTML 1.0 HTML 5 Cascading Stylesheets CSS Level 1 CSS Level 2 CSS Level 3

3. The University of Adelaide Slide 2 html page / elements emphasised text

4. The University of Adelaide Slide 3 block and inline elements paragraph blockquote list cell row table a paragraph with some bold text and the abbr of a word. cell

5. The University of Adelaide Slide 4 tag attributes

6. The University of Adelaide Slide 5 style declarations selector {property: value;} p {font-family: verdana, arial, sans-serif;} li {font-size: 12px; font-color: red;}.news {font-size: smaller;} #introduction { text-align: centre; margin: 5px 10px 5px 10px; }

7. The University of Adelaide Slide 6 page structure header nav header section content article aside footer

8. The University of Adelaide Slide 7 hypertext links link A References (4.01) References (5) Load this file link A link B file.html heading

9. The University of Adelaide Slide 8 content types unordered list item list item 2 list item 3 1.ordered list item 2.list item 2 3.list item 3 term definition term definition paragraph blockquote horizontal rule ABC 1 2 3 form text input radio button checkbox

10. The University of Adelaide Slide 9 modifying text / entities The authors make the point 1 and it should be emphasised. © 2014 The University of Adelaide © 2014 The University of Adelaide café café inline modifications

11. The University of Adelaide Slide 10 the box model containing box px em % top right bottom left padding border margin

12. The University of Adelaide Slide 11 images (xhtml) resolution: 72 ppi @ 100% bmp, gif, png jpg/jpeg

13. The University of Adelaide Slide 12 multimedia in HTML 4.01 (& HTML5) & new in HTML5 multimedia in MyUni / MyMedia contact MyUni Support team, call Service Desk, x33000, 'option 3' multimedia in websites Web Team, Marketing & Communications

14. The University of Adelaide Slide 13 web accessibility Four key principles for accessibility: Perceived, Operable, Understandable, Robust WCAG 2.0 Web Content Accessibility Guidelines University websites need to comply with 'AA' level 2007 study by Dey Alexander Australian university website accessibility revisited Dey Alexander Consulting, 2 July 2007 http://www.deyalexander.com.au/publications/ausweb07/

15. The University of Adelaide Slide 14 checking your code Check in WYSIWYG and in code views As a developer test in browsers Check for accessibility issues Validate your HTML and CSS files

16. The University of Adelaide Slide 15 Summary Well structured and good looking web content doesn't have to be complicated. A basic and informed understanding of what HTML markup is and how it works will make it easier for you to prepare effective and accessible web content, while also giving you the skills to successfully troubleshoot problematic code in your pages.

17. The University of Adelaide Slide 16 Thank You © The University of Adelaide 2014