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

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

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 Lesson design approach For HTML5, what should we teach?

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

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

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

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

9 L03 Using CSS generators CSS Typeset CSS 3.0 Maker

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

11 L05 Video generator Options Generated code Video preview

12 L06 Form features-in-html5/ features-in-html5/

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

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

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

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

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

18 Thank you!