1 / 18

HTML5 Lesson Design for Form 2 Students at St. Bonaventure College

Outline of lesson approach including topics such as multimedia elements, text formatting, CSS usage, and website building basics. Challenges and solutions for teaching HTML5 effectively. Planning for class sessions to enhance students' understanding.

carolkelly
Download Presentation

HTML5 Lesson Design for Form 2 Students at St. Bonaventure College

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 Content (video & form) Footer

  11. L05 Video generator Video preview Options Generated code

  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!

More Related