11 html5 sharing st bonaventure college & high school 31 may 2012
TRANSCRIPT
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 <font> 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
http://dev.opera.com/articles/view/new-form-features-in-html5/
13
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
14
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>
15
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>
16
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>
17
Difficulties (3) – Concept of pixel What is a pixel?
100px is about 3cm on the screen
18
Thank you!