6 for 5... Six lesson class for HTML5
- Posted: Nov 09, 2011 at 6:00AM
- 18,545 views
HTML5 is all the rage and it sometimes feels like everyone is talking about it.Yet what if you're just starting down that road? What if you'd just like to learn a little about HTML5? Or maybe you'd like to teach others a bit about HTML5?
HTML 5 coupled with CSS is emerging as the new hot development language. I am delighted to announce that we have created six complete lessons that cover the most interesting and dynamic new features of HTML 5 that are ready to drop into a web development or intro programming course. Each lesson comes with instructor PowerPoint slides, a complete reading assignment with hands-on examples, including the files and assets to use in each assignment. A single lesson has enough content for a 75-100 minute class session, and the hands-on examples are great for either a lab session or homework assignment.
The six lessons are:
Lesson 1 – Defining HTML 5
Lesson 2 – Fundamentals of HTML 5, XHTML, and CSS
Lesson 3 – Introduction to CSS Layout
Lesson 4 – Using HTML 5 Markup
Lesson 5 – Working with Canvas
Lesson 6 – HTML 5 Multi-Media and Drag and Drop
This content is available to faculty (and students/hobbyist/pros) at no charge and can be downloaded from here: http://www.mis-laboratory.com/faculty/
So what are we talking here? Well we've got the materials for the instructor, students and all the supporting files/examples too. Here's a WinDirStat snap;
To give you a feel for the curriculum, here's Lesson 1 from the curriculum outline;
Lesson 1: Defining HTML5
Learning Objectives: In this lesson, students learn the features and capabilities that are part of the HTML5 specification and related technologies. Students will be able to understand the difference between HTML5 syntax and HTML 4.0 and/or XHTML 1.0 syntax. Additionally, students will be able to identify the key features of HTML5, including the new HTML5 elements, multimedia elements, the Canvas element, web forms and more. Another objective is that students have the ability to distinguish between the features that are technically part of the HTML5 specification and those that are related technologies; such as Geolocation, Drag and Drop and CSS3.
- The benefits of HTML5
- Key features
- New markup and layout elements
- The <video>, <audio>, and <canvas> elements
- Web forms
- Revised elements based on HTML 4.0
- An overview of HTML5 APIs and supporting technologies
- Web Workers
- Web storage
- CSS3 animations and transitions
- CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners
- @font-face web fonts 25
- HTML5 is still a work in progress
- Browser Support
- Where HTML5 is being used today
And here's the summary of the other lessons;
Lesson 2: Fundamentals of HTML, XHTML, and CSS
Learning Objectives: In this lesson, students learn the fundamentals of HTML, XHTML and CSS in order to understand the foundations of creating the style and structure of their web pages. Students learn how to use document types (DOCTYPE) to help them validate their web pages and for use as a troubleshooting tool. Additionally, students build a simple web page in order to understand how to add images, create hyperlinks and work with both internal and external style sheets.
Lesson 3: Introduction to CSS Layout
Learning Objectives: In this lesson, students learn the fundamentals of creating a two column, fixed-width layout using HTML and CSS. Students learn the function of a CSS “reset” file and how to add it to their pages. The core concepts of CSS layout are covered in this lesson. This includes the use of the <div> element, as well as the CSS float and clear properties, to create columns on the page.
Lesson 4: Using HTML5 Markup
Learning Objectives: In this lesson, students learn how to use the new HTML5 elements for layout purposes. All of the major new sectioning elements are covered as well as a review of HTML 4 tags that have been revised for HTML5. Students will learn how to convert a pre-existing web page that uses HTML 4 elements into an HTML5 page by replacing <div> elements with the new HTML5 elements. Additionally, working with HTML5 form elements and adding multimedia with the HTML5 video and audio elements is covered.
Lesson 5: Working with Canvas
Lesson 6: HTML5 Drag and Drop
Learning Objectives: In this lesson, students learn how to use Drag and Drop, an API related to the HTML5 specification. Specifically, students will learn how to create a basic shopping cart interface using drag and drop objects.
Here's a snap of the Lesson 1 deck;
The 22 page Instructor Guide;
And the 19 page Lesson 1 student materials;
In short, we're talking a pretty complete HTML5 course. If you're a teacher, trainer, student, professional dev, hobbyist, just someone who wants to learn or teach HTML5, this free resource needs one thing... You!
Here’s a few more links you might find interesting: