180 likes | 234 Views
HTML5 sharing. St Bonaventure College & High School 31 May 2012. 1. Outline. Students’ prior knowledge Lesson design approach HTML5 topics Difficulties. Prior knowledge. Form 2 students have learnt HTML4 (Four lessons) Know the basic HTML structure Know the usage of basic tags
E N D
HTML5 sharing St Bonaventure College & High School 31 May 2012 1
Outline • Students’ prior knowledge • Lesson design approach • HTML5 topics • Difficulties
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
Lesson design approach • For HTML5, what should we teach?
A web site consists of… • Five multimedia elements: • Text / Graphic / Video / Audio / Animation • Links / Layout / Navigation bar / Form
L01 Introduction to HTML5 • A WYSIWYG editor like Dreamweaver? • Basic function is limited. Need $ for advanced functions • Not user friendly
HTML5 • Text / Video / Layout / Navigation bar / Form • Editor: Notepad
L02 Text formatting • The <font> tag is not supported in HTML5. • Use CSS to define fonts.
L03 Using CSS generators • CSS Typeset • CSS 3.0 Maker
L04 Scoring web site (Phase 1) Header Navigation bar Content (video & form) Footer
L05 Video generator Video preview Options Generated code
L06 Form • http://dev.opera.com/articles/view/new-form-features-in-html5/
Difficulties (1) – using CSS • External Style Sheet <link rel="stylesheet" type="text/css" href="mystyle.css" /> • Inline Styles <p style="color:sienna;margin-left:20px">This is a paragraph.</p> • Internal Style Sheet
Difficulties (1) – using CSS • Internal Style Sheet <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style></head>
Difficulties (2) – id v.s. class <!DOCTYPE html><html><head><title>Title of the document</title> <style> .classname { color: #DB2E2E; font-size: 20px; font-style: italic; } </style></head><body><div class=“classname”>Good morning</div></body></html>
Difficulties (2) – id v.s. class <!DOCTYPE html><html><head><title>Title of the document</title> <style> #idname { color: #DB2E2E; font-size: 20px; font-style: italic; } </style></head><body><div id=“idname”>Good morning</div></body></html>
Difficulties (3) – Concept of pixel • What is a pixel? • 100px is about 3cm on the screen