HTML 5 sharing St Bonaventure College High School
HTML 5 sharing St Bonaventure College & High School 31 May 2012 1
Outline n n Students’ prior knowledge Lesson design approach HTML 5 topics Difficulties 2
Prior knowledge n Form 2 students have learnt HTML 4 (Four lessons) q q 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 3
Lesson design approach n For HTML 5, what should we teach? 4
A web site consists of… n Five multimedia elements: q n Text / Graphic / Video / Audio / Animation Links / Layout / Navigation bar / Form 5
L 01 Introduction to HTML 5 n A WYSIWYG editor like Dreamweaver? • Basic function is limited. Need $ for advanced functions • Not user friendly 6
HTML 5 n Text / Video / Layout / Navigation bar / Form n Editor: Notepad 7
L 02 Text formatting n The <font> tag is not supported in HTML 5. n Use CSS to define fonts. 8
L 03 Using CSS generators n CSS Typeset n CSS 3. 0 Maker 9
L 04 Scoring web site (Phase 1) Header Navigation bar Content (video & form) Footer 10
L 05 Video generator Options Video preview Generated code 11
L 06 Form n http: //dev. opera. com/articles/view/new-formfeatures-in-html 5/ 12
Difficulties (1) – using CSS n External Style Sheet <link rel="stylesheet" type="text/css" href="mystyle. css" /> n Inline Styles <p style="color: sienna; margin-left: 20 px">This is a paragraph. </p> n Internal Style Sheet 13
Difficulties (1) – using CSS n Internal Style Sheet <head> <style type="text/css"> hr {color: sienna; } p {margin-left: 20 px; } body {background-image: url("images/back 40. gif"); } </style> </head> 14
Difficulties (2) – id v. s. class <!DOCTYPE html> <head> <title>Title of the document</title> <style>. classname { color: #DB 2 E 2 E; font-size: 20 px; font-style: italic; } </style> </head> <body> <div class=“classname”>Good morning</div> </body> </html> 15
Difficulties (2) – id v. s. class <!DOCTYPE html> <head> <title>Title of the document</title> <style> #idname { color: #DB 2 E 2 E; font-size: 20 px; font-style: italic; } </style> </head> <body> <div id=“idname”>Good morning</div> </body> </html> 16
Difficulties (3) – Concept of pixel n What is a pixel? n 100 px is about 3 cm on the screen 17
Thank you! 18
- Slides: 18
