1. 11 HTML5 sharing St Bonaventure College & High School 31 May 2012

2. 2 Outline Students’ prior knowledge Lesson design approach HTML5 topics Difficulties

3. 3 Prior knowledge Form 2 students have learnt HTML4 (Four lessons)  Know the basic HTML structure  Know the usage of basic tags  Know the tags should “start first, end last”  Able to build a website with Notepad

4. 4 Lesson design approach For HTML5, what should we teach?

5. 5 A web site consists of… Five multimedia elements:  Text / Graphic / Video / Audio / Animation Links / Layout / Navigation bar / Form

6. 6 L01 Introduction to HTML5 A WYSIWYG editor like Dreamweaver? Basic function is limited. Need $ for advanced functions Not user friendly

7. 7 HTML5 Text / Video / Layout / Navigation bar / Form Editor: Notepad

8. 8 L02 Text formatting The tag is not supported in HTML5. Use CSS to define fonts.

9. 9 L03 Using CSS generators CSS Typeset CSS 3.0 Maker

10. 10 L04 Scoring web site (Phase 1) Header Navigation bar Footer Content (video & form)

11. 11 L05 Video generator Options Generated code Video preview

12. 12 L06 Form http://dev.opera.com/articles/view/new-form- features-in-html5/ http://dev.opera.com/articles/view/new-form- features-in-html5/

13. 13 Difficulties (1) – using CSS External Style Sheet Inline Styles This is a paragraph. Internal Style Sheet

14. 14 Difficulties (1) – using CSS Internal Style Sheet hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

15. 15 Difficulties (2) – id v.s. class Title of the document.classname { color: #DB2E2E; font-size: 20px; font-style: italic; } Good morning

16. 16 Difficulties (2) – id v.s. class Title of the document #idname { color: #DB2E2E; font-size: 20px; font-style: italic; } Good morning

17. 17 Difficulties (3) – Concept of pixel What is a pixel? 100px is about 3cm on the screen

18. 18 Thank you!