Scribd
Upload
182 views

10953A HTML5 Programming Companion Content

Student Companion Content

Uploaded by

ginglle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
182 views

10953A HTML5 Programming Companion Content

Student Companion Content

Uploaded by

ginglle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 91

O F F I C I A L M I C R O S O F T L E A R N I N G P R O D U C T

10953A
HTML5 Programming
Companion Content
2 HTML5 Programming

Information in this document, including URL and other Internet Web site references, is subject to change
without notice. Unless otherwise noted, the example companies, organizations, products, domain names,
e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with
any real company, organization, product, domain name, e-mail address, logo, person, place or event is
intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the
user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in
or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical,
photocopying, recording, or otherwise), or for any purpose, without the express written permission of
Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property
rights covering subject matter in this document. Except as expressly provided in any written license
agreement from Microsoft, the furnishing of this document does not give you any license to these
patents, trademarks, copyrights, or other intellectual property.

The names of manufacturers, products, or URLs are provided for informational purposes only and
Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding
these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a
manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links
may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not
responsible for the contents of any linked site or any link contained in a linked site, or any changes or
updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission
received from any linked site. Microsoft is providing these links to you only as a convenience, and the
inclusion of any link does not imply endorsement of Microsoft of the site or the products contained
therein.
© 2012 Microsoft Corporation. All rights reserved.

Microsoft, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the
United States and/or other countries.
All other trademarks are property of their respective owners.

Product Number: 10953A

Released: 04/2012
HTML5 Programming 3
4 HTML5 Programming
HTML5 Programming 5
6 HTML5 Programming
HTML5 Programming 7

Module 1
Introduction to HTML5 Development
Contents:
Lesson 1: Overview of HTML 8

Lesson 2: What’s New in HTML5? 12

Lesson 3: Introduction to JavaScript 14

Lesson 4: Introduction to jQuery 17


8 HTML5 Programming

Lesson 1
Overview of HTML
Contents:
Detailed Demonstration Steps 9

Additional Reading 11
HTML5 Programming 9

Detailed Demonstration Steps


Demonstration: Creating an HTML Document
Detailed demonstration steps
1. Log on to the virtual machine, named SEA-DEV as Admin, with the password, Pa$$w0rd.

2. Open a Notepad.exe (On the Windows Start menu, click Run, type notepad and then click OK).

3. Add the following doctype element:

<!DOCTYPE html>

4. Add the HTML element under the doctype element.

<!DOCTYPE html>
<html>
</html>

5. Create the head and body elements inside the HTML element.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

6. Add a title to the head element and some content to the body element.

<!DOCTYPE html>
<html>
<head>
<title>Your first HTML document</title>
</head>
<body>
<p>Hello HTML!</p>
</body>
</html>

7. Save the file as an HTML file.

8. Run the saved file by double-clicking it, and show the students the completed webpage.

Demonstration: Creating an HTML Document


Detailed demonstration steps
1. Log on to the virtual machine named SEA-DEV as Admin, with the password Pa$$w0rd

2. Open Visual Studio 2010.

3. Create a new C# ASP.NET Empty Web Application.

4. Create an HTML file.

5. In the HTML file’s body element, add the following elements.


10 HTML5 Programming

<div>This is a division.</div>
<div> This is another division</div>
<span>This is a span</span>
<span>This is another span</span>
<p>This is a paragraph</p>
<a href="http://www.microsoft.com">A link to Microsoft site</a>
<table border="1">
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<ul>
<li>item1</li>
<li>item2</li>
</ul>

6. Save the file as an HTML file.

7. Run the saved file and show the students the completed webpage.

Demonstration: Creating Forms by Using HTML


Detailed demonstration steps
1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. Open Visual Studio 2010.

3. Create a new C# ASP .NET Empty Web Application.

4. Create an HTML file.

5. In the HTML file’s body element, add the following element.

<form action="#" method="GET">


<fieldset>
<legend>Client Info:</legend>
<label for="txtName">Name: </label><input type="text" id="txtName"
name="txtName" /><br />
<label for="txtAddress">Address: </label><input type="text" id="txtAddress"
name="txtAddress" /><br/>
<input type="submit" value="Submit" name="btnSubmit" name="btnSubmit" />
</fieldset>
</form>

6. Save the file as an HTML file.

7. Run the saved file and show the students the completed webpage.
HTML5 Programming 11

Additional Reading
The HTML Document
• Languages

• Encoding
12 HTML5 Programming

Lesson 2
What’s New in HTML5?
Contents:
Detailed Demonstration Steps 13
HTML5 Programming 13

Detailed Demonstration Steps


Demonstration: Common Styles
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file

3. In the HTML file, add the following HTML content to the body element:

<h1>The Header</h1>
<div id="content">The Content</div>
<div class="footer">The Footer</div>

4. In the HTML file, add a style element inside the head element before the head element’s closing tag.

<style type="text/css">
h1
{
font-family: Arial sans-serif;
font-size: 36px;
text-decoration: underline;
color: brown;
text-align: center;
}
#content
{
background-color: brown;
color: white;
font-weight: bold;
height: 200px;
}
.footer
{
font-size: 0.6em;
color: gray;
text-align: right;
}
</style>

5. Save the HTML file.

6. Run the saved file and show the students the completed webpage.
14 HTML5 Programming

Lesson 3
Introduction to JavaScript
Contents:
Detailed Demonstration Steps 15
HTML5 Programming 15

Detailed Demonstration Steps


Demonstration: Using the Console
Detailed demonstration steps
1. Open Internet Explorer.

2. Press F12 to open the Internet Explorer Developer Tools.

3. If the developer tools opens in a separate window, instead of in a pane at the lowermost part of the
browser window, click the Pin button at the upper-right part of the window.

4. Click the Console tab.


5. Next to the >> symbol, enter the following code and then press Enter to show an alert message.

alert("Hello");

6. Observe the popup and then click OK to close it.

7. Enter the following line of code to print the type string of a number.

typeof 42;

8. Observe the result of the expression (“number”) printed in the console.

9. Enter the following line to declare and assign a new variable called message.

var message = "Hello";

10. Enter the following line to display the value of the message variable.

message;

11. Observe the value of the variable displayed in the console.

12. Enter the following line to show the value of the variable in an alert.

alert(message);

13. Click OK to close the alert.

Demonstration: Using the Console


Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.


3. In the HTML file, add HTML content to the body element.

<h1>The Header</h1>
<div id="content">The Content</div>

4. In the HTML file, add a script element inside the head element before the head element’s closing
tag.
16 HTML5 Programming

<script type="text/javascript">
function contentLoaded() {
var content = document.getElementById("content");
content.textContent = "This content was modified using JavaScript.";
}

document.addEventListener("DOMContentLoaded", contentLoaded, false);


</script>

5. Save the HTML file.

6. Run the saved file and show the students the completed webpage containing the text modified using
JavaScript.
HTML5 Programming 17

Lesson 4
Introduction to jQuery
Contents:
Detailed Demonstration Steps 18
18 HTML5 Programming

Detailed Demonstration Steps


Demonstration: How to Get Started with jQuery
Detailed demonstration steps
1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. In Visual Studio 2010, create a new ASP.NET Empty Web Application called HellojQuery.

3. Add a new HTML file called HellojQuery.

4. Add a new JavaScript file called HellojQuery.

5. Add the jquery-1.5.1.js and jquery-1.5.1-vsdoc.js files from D:\Mod01\Democode\Assets.

6. In the HTML file, add the following script tags inside the head element.

<head>
<title>Hello jQuery</title>
<script src="jquery-1.5.1.js"></script>
<script src="HellojQuery.js"></script>
</head>

7. Drag the vsdoc file into the surface of the opened HellojQuery.js file to create the statement and
inform the students that you have added IntelliSense for jQuery by doing that.

/// <reference path="jquery-1.5.1-vsdoc.js" />

8. Add the following code in the HellojQuery.js file to demonstrate the wiring of the ready event.

$(document).ready(function() {
alert("Hello jQuery ready function");
});

9. Set the HellojQuery.html as the startup page.

10. Run the application.

Demonstration: How to Get Started with jQuery

Detailed demonstration steps


1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. Open the previous HellojQuery web application.


3. In the HellojQuery HTML file, in the body element, add a div with an id of main.

<div id="main">
</div>

4. In the main div, add the following code.

<ul id="ulOfItems">
<li>item 1</li>
<li class="red">item 2</li>
<li id="item3">item 3</li>
</ul>
<br />
HTML5 Programming 19

<div>Hello jQuery</div>
<div id="result"></div>

This creates the page markup containing an unordered list and two divs.

5. In the HellojQuery.js file, add the following code.

var resultDiv;
$(document).ready(function () {
resultDiv = $("#result");
$("li").each(function () {
resultDiv.text(resultDiv.text() + " " + this.tagName);
});

$("#item3").each(function () {
resultDiv.text(resultDiv.text() + " " + this.id);
});

$(".red").each(function () {
resultDiv.text(resultDiv.text() + " " + this.tagName);
});

$("ul#ulOfItems").each(function () {
resultDiv.text(resultDiv.text() + " " + this.id);
});
});

Write to the result div, all tag names of the selected list items, the id of the selected item3, the tag name li
once for the list item with the red class name, and the id of the unordered list, ulOfItems, retrieved by the
precise selector.

6. Run the webpage in the browser to show the results.

Demonstration: How to Get Started with jQuery


Detailed demonstration steps
1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. Open the previous HellojQuery web application.

3. Add the following button at the end of the HellojQuery.html file.

<input type="button" id="btnEach" value="Each Function Example" />


<br />

4. Add the following JavaScript code in the HellojQuery.js file inside the ready handler:.

$("#btnEach").click(function () {
$("div").each(function (i) {
alert(i + "=" + $(this).text());
});
});

The code wires a click event to the input with the button type. When the button is clicked, an alert is
shown for each div in the page with the div index and the div text.

5. Run the webpage in the browser.


6. Click the button to run each functionality.
20 HTML5 Programming

7. Add the following paragraph and buttons to the HellojQuery.html file.

<p></p>
<input type="button" id="btnCreateParagraph" value="Create Paragraph Data" /><br
/>
<input type="button" id="btnAppendToUl" value="Append Two List Items Using
appendTo" />

8. Add the following JavaScript code in the HellojQuery.js file inside the ready handler:.

$("#btnCreateParagraph").click(function () {
$("p").html("<div>Hello jQuery!</div>");
});

$("#btnAppendToUl").click(function () {
$("<li />").html("last").appendTo("ul");
$("<li />").html("new first").prependTo("ul");
});

The code wires two click event handlers to the buttons. The first handler adds a new div element with the
“Hello jQuery!” text to the paragraph element. The second event handler creates two list items that are
added as the first and last list items in the unordered list in the HTML.

9. Run the webpage in the browser.

10. Click the buttons to run their functionality.


HTML5 Programming 21

Module 2
Creating Page Structure and Navigation
Contents:
Lesson 1: HTML5 Structural Elements 22

Lesson 2: Navigation and Menus 27

Module Reviews and Takeaways 30


22 HTML5 Programming

Lesson 1
HTML5 Structural Elements
Contents:
Detailed Demonstration Steps 23

Additional Reading 26
HTML5 Programming 23

Detailed Demonstration Steps


Demonstration: The New Structural Elements
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<header>
<h1>Page Title</h1>
<nav>
<ul>
<li>navigation 1</li>
<li>navigation 1</li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>Article content</p>
</article>
</section>
<footer>
<p>Copyright 2011 Microsoft</p>
</footer>
</body>

4. Save the file as an HTML file


5. Run the saved file and show the students the completed web page

Demonstration: The New Structural Elements


Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
This is<mark>marked</mark> text <p>Your test score in the test was <meter
value="70" min="0" max="100" low="54" high="100" optimum="100">70</meter></p>
<p>Downloaded: <progress value="16" max="48">33%</progress> of the content</p>
<p>Output: <input type="text" value="1" /> + <input type="text" value="3" /> =
<output>4</output></p>
<p>The time is now: <time>2011-11-12T14:54Z</time></p>
</body>

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page
24 HTML5 Programming

Demonstration: The New Structural Elements


Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<header>
<h1>
Something Important Happened Somewhere</h1>
<nav>
<!-- Site Navigation -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/entertainment">Entertainment</a></li>
<li><a href="/politics">Politics</a></li>
<li><a href="/sports">Sports</a></li>
</ul>
</nav>
</header>
<article>
<header>
<p>
Table of Contents</p>
<nav>
<ul>
<li><a href="#summary">Summary</a></li>
<li><a href="#details">The Details</a></li>
<li><a href="#sources">Sources</a></li>
</ul>
</nav>
</header>
<section>
<header>
<h2>
Somebody did Something Vital Yesterday</h2>
</header>
<p>
This is the summary of the article.</p>
</section>
<section>
The main content of the article would be here.
</section>
<section>
<header>
<h2>
Sources</h2>
</header>
<ul>
<!-- a link menu that is not wrapped in a nav element -->
<li><a href="http://www.example.com/link1">A Well Known
Source</a></li>
</ul>
</section>
</article>
</body>

4. Save the file as an HTML file


HTML5 Programming 25

5. Run the saved file and show the students the completed web page
26 HTML5 Programming

Additional Reading
Other New Elements
• HTML5 Specifications
HTML5 Programming 27

Lesson 2
Navigation and Menus
Contents:
Detailed Demonstration Steps 28
28 HTML5 Programming

Detailed Demonstration Steps


Demonstration: The nav Element
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<header>
<h1>
Something Important Happened Somewhere</h1>
<nav>
<!-- Site Navigation -->
<ul>
<li><a href="/">Home</a></li>
<li><a href="/entertainment">Entertainment</a></li>
<li><a href="/politics">Politics</a></li>
<li><a href="/sports">Sports</a></li>
</ul>
</nav>
</header>
<article>
<header>
<p>
Table of Contents</p>
<nav>
<ul>
<li><a href="#summary">Summary</a></li>
<li><a href="#details">The Details</a></li>
<li><a href="#sources">Sources</a></li>
</ul>
</nav>
</header>
<section>
<header>
<h2>
Somebody did Something Vital Yesterday</h2>
</header>
<p>
This is the summary of the article.</p>
</section>
<section>
The main content of the article would be here.
</section>
<section>
<header>
<h2>
Sources</h2>
</header>
<ul>
<!-- a link menu that is not wrapped in a nav element -->
<li><a href="http://www.example.com/link1">A Well Known
Source</a></li>
</ul>
</section>
</article>
</body>
HTML5 Programming 29

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page
30 HTML5 Programming

Module Reviews and Takeaways


Review questions
Question: Why should developers migrate from HTML4 elements to HTML5 elements?

Answer: The new elements in HTML5 help achieve the following:

• Better accessibility

• Better searchability

• Support for internationalization

• Better interoperability

Real-World Issues and Scenarios


The migration from HTML4 to HTML5 should not be done without thinking. This is a very complicated
task that may break the appearance of the webpage if not done carefully.

Tools
Visual Studio 2010
HTML5 Programming 31

Module 3
Creating Form Input and Validation
Contents:
Lesson 1: Working with Input Types 32

Lesson 2: Using Form Attributes 35

Lesson 3: Validation 37

Lesson 4: Using Browser Detection, Feature Detection, and Modernizr 39

Module Reviews and Takeaways 43


32 HTML5 Programming

Lesson 1
Working with Input Types
Contents:
Detailed Demonstration Steps 33
HTML5 Programming 33

Detailed Demonstration Steps


Demonstration: Date Pickers
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<form>
<label for="dpBirthDate">Date: </label><input type="date" name="dpBirthDate"
value="2011-12-19" /><br/>
<label for="dpCCExpiration">Month: </label><input type="month"
name="dpCCExpiration" value="2011-12" /><br/>
<label for="dpArrivalWeek">Week: </label><input type="week"
name="dpArrivalWeek" value="2011-W16" /><br/>
<label for="dpDepartureTime">Time: </label><input type="time"
name="dpDepartureTime" value="17:39:57" /><br/>
<label for="dpBirthDate">Datetime: </label><input type="datetime"
name="dpBirthDate" value="2011-12-31T23:59:60Z" /><br/>
<label for="dpBirthDate">Datetime-local: </label><input type="datetime-local"
name="dpBirthDate" value="2011-12-19T16:39:57" /><br/>
</form>
</body>

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

Demonstration: Date Pickers

Detailed demonstration steps


1. In the HTML file’s body element after the last </br> element, add the following elements:

<label for="txtEmail">Email: </label><input type="email" name="txtEmail"


value="[email protected]" /><br/>
<label for="txtUrl">Url: </label><input type="url" name="txtUrl"
value="http://www.microsoft.com" /><br/>
<label for="txtPhoneNumber">Telephone: </label><input type="tel"
name="txtPhoneNumber" /><br/>
<label for="txtSearch">Search: </label><input type="search" name="txtSearch"
/><br/>

2. Save the file as an HTML file

3. Run the saved file and show the students the completed web page

Demonstration: Date Pickers


Detailed demonstration steps
1. In the HTML file’s body element after the last </br> element, add the following elements:

<label for="txtAge">Number: </label><input type="number" name="txtAge" min="0"


max="120" /><br/>
34 HTML5 Programming

<label for="txtAge">Range: </label><input type="range" name="txtAge" min="0"


max="120" /><br/><label for="txtCarColor">Color: </label><input type="color"
name="txtCarColor" /><br/>

2. Save the file as an HTML file

3. Run the saved file and show the students the completed web page
HTML5 Programming 35

Lesson 2
Using Form Attributes
Contents:
Detailed Demonstration Steps 36
36 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Using Form Attributes
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<form>
<input type="text" placeholder="Enter your full name" name="FullName"
autofocus="autofocus" autocomplete="on" />
<input type="password" placeholder="Type your password" name="Password" />
<input type="number" placeholder="Enter your age" name="Age" />
<input type="text" name="country" list="countries" />
<datalist id="countries">
<option value="Canada" />
<option value="England" />
<option value="France" />
<option value="Germany" />
<option value="Japan" />
<option value="Russia" />
<option value="United States" />
</datalist>
<input type="file" name="photos" multiple="multiple" />
</form>

<section id="products" hidden="hidden">


<header>
<h1>Products Screen</h1>
</header>
This screen displays the company's products.
</section>
</body>

4. Save the file as an HTML file


5. Run the saved file and show the students the completed web page
HTML5 Programming 37

Lesson 3
Validation
Contents:
Detailed Demonstration Steps 38
38 HTML5 Programming

Detailed Demonstration Steps


Demonstration: General Validation Attributes
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<form>
<input type="text" name="username" required="required" />
<label> Zip Code: <input type="text" pattern="\d{5}" name=”zip” /></label>
<input type="text" name="address" maxlength="10" />
<input type="submit" name="submit" value="Submit The Form" />
</form>
</body>

4. Save the file as an HTML file


5. Run the saved file and show the students the completed web page
HTML5 Programming 39

Lesson 4
Using Browser Detection, Feature Detection, and
Modernizr
Contents:
Question and Answers 40

Detailed Demonstration Steps 41

Additional Reading 42
40 HTML5 Programming

Question and Answers


Feature Detection
Question: Why is feature detection preferable to browser detection?

Answer: Feature detection makes no assumptions. Using this technique will reveal whether a
feature exists. On the other hand, browser detection makes the assumption that you
succeeded in detecting the browser, although knowing the browser does not always mean
that you know the value of each feature.

Using HTML5 Polyfills


Question: Why should you use polyfills?

Answer: Polyfills help to introduce HTML5 features or elements to browsers that do not
support them. This helps to create the same behavior, markup, and user experience across
most of the browsers.
HTML5 Programming 41

Detailed Demonstration Steps


Demonstration: Modernizr
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. Add the modernizr-1.7.js file from D:\Mod03\Democode\Assets.

4. In the html file add the following script tag inside the head element:

<head>
<title>Hello Modernizr</title>
<script src="modernizr-1.7.js"></script>
</head>

5. Add an empty script tag at the end of the body tag:

<body>
<script type=”text/javascript”></script>
</body>

6. In the empty script tag, add the following code:

if (Modernizr.canvas)
{
alert(‘canvas is available’);
}
if (Modernizr.video)
{
alert(‘video is available’);
}
if (Modernizr.audio)
{
alert(‘audio is available’);
}

7. Save the file as an HTML file


8. Run the saved file and show the students the completed web page
42 HTML5 Programming

Additional Reading
Browser Detection
• Conditional Comments
HTML5 Programming 43

Module Reviews and Takeaways


Review questions
Question: How can you use HTML5 today, when there are browsers that do not support
some of its features?

Answer: There are many strategies to apply HTML5 features today. One strategy is feature
detection (and in particular, the Modernizr JavaScript library), which enables you to detect
features, and reacts if these do not exist in the browser. You can also use polyfills to meet
your requirements.
44 HTML5 Programming

Module 4
Laying Out and Styling Webpages
Contents:
Lesson 1: Creating Layouts 45

Lesson 2: Advanced CSS by Using CSS3 48

Module Reviews and Takeaways 52


HTML5 Programming 45

Lesson 1
Creating Layouts
Contents:
Detailed Demonstration Steps 46

Additional Reading 47
46 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Using HTML5 Structural Elements for Layout
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file’s body element add the following elements:

<body>
<div>
<header><h1>Page Title</h1></header>
<div>
<menu style=" width:200px;float:left;"> Menu</menu>
<section style="width:400px;float:left;">Page Content</section>
</div>
<footer style="clear:both;">Footer</footer>
</div>
</body>

4. Save the file as an HTML file.

5. Run the saved file and show the students the completed webpage.
HTML5 Programming 47

Additional Reading
Using CSS3 for Layout
• CSS3 Template Layout

• CSS3 Multi-Coulmn
48 HTML5 Programming

Lesson 2
Advanced CSS by Using CSS3
Contents:
Detailed Demonstration Steps 49

Additional Reading 51
HTML5 Programming 49

Detailed Demonstration Steps


Demonstration: Transformations
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<div id="element"></div>

4. In the HTML file’s head element add the following style tag:

<style type="text/css">
#element
{
position: absolute;
left: 50px;
top: 50px;
height: 20px;
width: 20px;
background-color: Red;
-ms-transform: rotate(30deg) scale(1.5, 2);
}
</style>

5. Save the file as an HTML file

6. Run the saved file and show the students the completed web page

Demonstration: Media Queries

Detailed demonstration steps


1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<div id="element">This element has a border. When the screen’s width is less than
400 pixels the border is removed</div>

4. In the HTML file’s head element add the following style tag:

<style type="text/css">
#element
{
border: solid 1px black;
}
@media screen and (max-width:400px)
{
#element
{
border: none;
}
50 HTML5 Programming

}
</style>

5. Save the file as an HTML file

6. Run the saved file and show the students the completed web page.

7. Change the screen’s width to show the students the media query effect
HTML5 Programming 51

Additional Reading
Selectors
• CSS3 Selectors

Animations
• CSS3 Animations

Media Queries
• CSS3 Media Queries
52 HTML5 Programming

Module Reviews and Takeaways


Review questions
Question: What are the basic considerations for creating layouts?

Answer: The basic considerations include aspects such as space and white space, using
images and graphics, working with text width, and element placement and position.
HTML5 Programming 53

Module 5
Getting Started with Graphics and Multimedia Elements
Contents:
Lesson 1: Canvas Basics 54

Lesson 2: Video/Audio Formats and Codecs 59

Lesson 3: Controlling Multimedia with JavaScript 61

Module Reviews and Takeaways 63


54 HTML5 Programming

Lesson 1
Canvas Basics
Contents:
Detailed Demonstration Steps 55
HTML5 Programming 55

Detailed Demonstration Steps


Demonstration: Canvas with Fallback Content
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add a canvas element with fallback content inside the body element.

<canvas id="canvas">
<div>Your browser does not support the canvas element.</div>
</canvas>

4. In the HTML file, add a style element inside the head element before the head element’s closing tag.

<style type="text/css">
canvas { border: solid 1px green; }
div { background-color: orange; }
</style>

5. Save the file.

6. Run the saved file.

Demonstration: Drawing Shapes

Detailed demonstration steps


1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.


3. In the HTML file, add a canvas element inside the body element.

<canvas id="canvas">
</canvas>

4. In the HTML file, add a script element inside the head element before the head element’s closing
tag.

<head>
...
<script type="text/javascript">
</script>
</head>

5. Inside the script element, call the new draw function after the page finishes loading, and retrieve the
canvas context before starting to draw.

<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
}

document.addEventListener("DOMContentLoaded", draw, false);


56 HTML5 Programming

</script>

6. At the end of the draw function, add the following code to draw a filled rectangle.

function draw() {
...
var context = canvas.getContext("2d");

context.fillRect(20, 30, 100, 40);


}

7. Save the HTML file.

8. Run the saved file and show the students the filled rectangle drawn on the canvas.

9. At the end of the draw function, add the following code to draw the circumference of a circle.

function draw() {
...

context.arc(70, 110, 30, 0, 2 * Math.PI, true);


context.stroke();
}

10. Save the HTML file.

11. Run the saved file and show the students the circle drawn on the canvas.

12. At the end of the draw function, add the following code to draw part of a rectangle inside a clipping
region defined by a circle.

function draw() {
...

context.beginPath();
context.moveTo(260, 75);
context.arc(230, 75, 30, 0, 2 * Math.PI, true);
context.clip();

context.beginPath();
context.rect(180, 55, 100, 40);
context.fill();
}

13. Save the HTML file.

14. Run the saved file and show the students the partially filled circle drawn on the canvas.

Demonstration: Applying Styles


Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add a canvas element inside the body element.

<canvas id="canvas">
</canvas>
HTML5 Programming 57

4. In the HTML file, add a script element with a draw function inside the head element, before the
head element’s closing tag.

<head>
...
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
}

document.addEventListener("DOMContentLoaded", draw, false);


</script>
</head>

5. At the end of the draw function, draw a rectangle with a radial gradient and three color stops.

<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var gradient = context.createLinearGradient(0, 0, 300, 150);


gradient.addColorStop(0.1, "blue");
gradient.addColorStop(0.4, "green");
gradient.addColorStop(0.7, "yellow");
context.fillStyle = gradient;

context.beginPath();
context.arc(50, 75, 45, 0.5 * Math.PI, 1.5 * Math.PI);
context.fill();
context.beginPath();
context.rect(50, 30, 200, 90);
context.fill();
context.beginPath();
context.arc(250, 75, 45, 0.5 * Math.PI, 1.5 * Math.PI, true);
context.fill();
}

document.addEventListener("DOMContentLoaded", draw, false);


</script>

6. Save the HTML file.

7. Run the saved file and show the students the completed webpage.

Demonstration: Drawing and Transforming Text


Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file


3. In the HTML file, add a canvas element inside the body element.

<canvas id="canvas">
</canvas>

4. In the HTML file, add a script element with a draw function inside the head element, before the
head element’s closing tag.
58 HTML5 Programming

<head>
...
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
}

document.addEventListener("DOMContentLoaded", draw, false);


</script>
</head>

5. At the end of the draw function, draw a circle skewed to look like an ellipse and translated to the
center of the canvas.

<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.translate(canvas.width / 2, canvas.height / 2);


context.scale(4, 2); // enlarge the grid and stretch it horizontally
context.arc(0, 0, 30, 0, 2 * Math.PI); // draw a circle skewed by the scale
method to look like an ellipse
context.fillStyle = "orange";
context.fill();
}

document.addEventListener("DOMContentLoaded", draw, false);


</script>

6. At the end of the draw function, draw text and rotate it.

<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

...
context.rotate(Math.PI); // turn upside down
context.font = "bold 9px Arial";
context.fillStyle = "blue";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("upside down", 0, 0); // draw the text "upside down" upside
down
}

document.addEventListener("DOMContentLoaded", draw, false);


</script>

7. Save the HTML file.

8. Run the saved file and show the students the completed webpage.
HTML5 Programming 59

Lesson 2
Video/Audio Formats and Codecs
Contents:
Detailed Demonstration Steps 60
60 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Playing Video
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Add the file, D:\Mod05\Democode\Assets\trailer.m4v, to the web application by copying or


dragging the file to the new project’s folder in Solution Explorer.

3. Create an HTML file.

4. In the HTML file, add a video element with built-in controls supporting automatic playback and
looping inside the body element.

<video src="trailer.m4v" width="400" autoplay="autoplay" loop="loop"


controls="controls">
</video>

5. Save the HTML file.

6. Run the saved file and show the students the completed webpage.
HTML5 Programming 61

Lesson 3
Controlling Multimedia with JavaScript
Contents:
Detailed Demonstration Steps 62
62 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Controlling Video Playback
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Add the file, D:\Mod05\Democode\Assets\trailer.m4v, to the web application by copying or


dragging the file to the new project folder in Solution Explorer.

3. Create an HTML file.

4. In the HTML file, add a video element with the id attribute and automatic playback inside the body
element.

<video id="video" src="trailer.m4v" autoplay="autoplay" width="400">


</video>

5. Inside the head element, before the closing tag, add a script element that pauses and plays the
video.

<script type="text/javascript">
function toggleVideoPlayback() {
var video = document.getElementById("video");
if(video.paused) video.play();
else video.pause();
}

function contentLoaded() {
document.getElementById("video").addEventListener("click",
toggleVideoPlayback, false);
}

document.addEventListener("DOMContentLoaded", contentLoaded, false);


</script>

6. Save the HTML file.


7. Run the saved file, and show the students how the video is paused and resumed when it is clicked.
HTML5 Programming 63

Module Reviews and Takeaways


Review questions
Question: When using JavaScript to control video playback, what considerations affect
whether a video element should be used alone, or played on a canvas?

Answer: The primary considerations are the level of complexity of the application, support
for accessibility, and development speed.
64 HTML5 Programming

Module 6
Creating Advanced Graphics
Contents:
Lesson 1: Drawing with SVG 65

Lesson 2: Animation 68
HTML5 Programming 65

Lesson 1
Drawing with SVG
Contents:
Detailed Demonstration Steps 66

Additional Reading 67
66 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Drawing Shapes
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add an svg element with the correct version and schema inside the body element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">


</svg>

4. In the svg element, add a rect element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">


<rect x="20" y="30" width="150" height="40" rx="5" ry="5" fill="orange" />
</svg>

5. Before the svg element’s closing tag, add a circle element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">


...
<circle cx="250" cy="50" r="40" fill="blue" />
</svg>

6. Before the svg element’s closing tag, add a path element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">


...
<path d="M 20,200 C 20,100 170,100 170,200 S 320,300 320,200" fill="red"
stroke="green" stroke-width="3" />
</svg>

7. Before the svg element’s closing tag, add a text element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">


...
<text x="160" y="130" font-family="Arial" font-size="36" fill="black"
stroke="gray" stroke-width="2">Hello SVG</text>
</svg>

8. Save the HTML file.

9. Run the saved file and show the students the completed webpage.
HTML5 Programming 67

Additional Reading
Working with Shapes
• Attributes

Working with Filters


• Filters
68 HTML5 Programming

Lesson 2
Animation
Contents:
Detailed Demonstration Steps 69
HTML5 Programming 69

Detailed Demonstration Steps


Demonstration: Drawing SVG Animations by Using Markup
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add an svg element with a blue circle containing various animations, inside the
body element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">


<circle cx="50" cy="50" r="40" fill="blue">
<animate attributeName="fill" to="yellow" begin="click" dur="5" fill="freeze"
/>
<animate attributeName="cx" to="200" begin="click" dur="5" fill="freeze" />
<animate attributeName="cy" to="150" begin="click" dur="5" fill="freeze" />
<animate attributeName="r" to="80" begin="click" dur="5" fill="freeze" />
</circle>
</svg>

4. Save the HTML file.

5. Run the saved file and show the students how clicking the blue circle triggers the animations.
70 HTML5 Programming

Module 7
Using Client-Side Storage
Contents:
Lesson 1: Web Storage vs. Cookies 71

Lesson 2: Web Storage API 73

Module Reviews and Takeaways 77


HTML5 Programming 71

Lesson 1
Web Storage vs. Cookies
Contents:
Additional Reading 72
72 HTML5 Programming

Additional Reading
IndexedDB
• IndexedDB
HTML5 Programming 73

Lesson 2
Web Storage API
Contents:
Detailed Demonstration Steps 74

Additional Reading 76
74 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Web Storage Functions and Attribute
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<form id="form1">
<p>
You have viewed this page <span id="counter"></span> times.
</p>
</form>
</body>

4. In the HTML file’s head element add the following script tag:

<script type="text/javascript">
function setCounter() {
if (!localStorage.getItem('numberOfPageLoads')) {
localStorage.setItem('numberOfPageLoads', 0);
}
localStorage.setItem('numberOfPageLoads',
parseInt(localStorage.getItem('numberOfPageLoads')) + 1);
document.getElementById('counter').innerHTML =
localStorage.getItem('numberOfPageLoads');
}

window.addEventListener("load", setCounter, false);


</script>

5. Save the file as an HTML file


6. In Solution Explorer, click on project with the right mouse button

7. Click on the Set As Startup Page menu item

8. Run the project by pressing CTRL+F5 and show the students the completed web page

Demonstration: Web Storage Functions and Attribute


Detailed demonstration steps
1. In the HTML file’s head element add the following script statement at the end of the script tag:

function logEventProperties(e) {
console.log(e.key);
console.log(e.oldValue);
console.log(e.newValue);
console.log(e.url);
console.log(e.storageArea);
}

window.addEventListener("storage", logEventProperties, false);


HTML5 Programming 75

2. Save the file as an HTML file

3. In Solution Explorer, click on project with the right mouse button

4. Click on the Set As Startup Project menu item

5. Run the project by pressing CTRL+F5 and show the students the completed web page
76 HTML5 Programming

Additional Reading
Security and Privacy Considerations
• Web Storage Security and Privacy
HTML5 Programming 77

Module Reviews and Takeaways


Review questions
Question: Why is it so important to have client-side storage capabilities?

Answer: Client-side storage capabilities can help increase the performance of websites and
applications, reduce network latency by minimizing server calls, and help scale up the site or
application.
78 HTML5 Programming

Module 8
Using Advanced HTML5 JavaScript APIs
Contents:
Lesson 1: Using the Drag-and-Drop API 79

Lesson 2: File API 83

Lesson 3: Geolocation API 86


HTML5 Programming 79

Lesson 1
Using the Drag-and-Drop API
Contents:
Detailed Demonstration Steps 80

Additional Reading 82
80 HTML5 Programming

Detailed Demonstration Steps


Demonstration: Using the Drag-and-Drop API
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<div id="draggableDiv" draggable="true" style="width:150px;
height:150px;border: solid 1px black;">The div can be dragged</div>
<div id="dropDiv" dropzone="copy" style="width:300px; height:300px; padding-
top:50px; border: solid 2px black;">a dropzone</div>
</body>

4. In the HTML file’s head element add the following script tag:

<script type="text/javascript">
function wireDragEvents() {
var div = document.getElementById('draggableDiv');
div.addEventListener('dragstart', handleDragStart, false);

var div = document.getElementById('dropDiv');


div.addEventListener('drop', handleDrop, false);
div.addEventListener('dragover', handleDragOver, false);
}

function handleDragStart(ev) {
console.log('handling drag start event');
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData("text", "stored text");
}

function handleDrop(ev) {
if (ev.stopPropagation) ev.stopPropagation();
console.log('handling drop event');
var data = ev.dataTransfer.getData("text");
console.log(data);
return false;
}

function handleDragOver(ev) {
if (ev.preventDefault) ev.preventDefault();
console.log('handling drag over event');
ev.dataTransfer.dropEffect = "copy";
return false;
}

window.addEventListener("DOMContentLoaded", wireDragEvents, false);


</script>

5. Save the file as an HTML file

6. In Solution Explorer, click on file with the right mouse button

7. Click on the Set As Startup Page menu item


8. Run the project by pressing CTRL+F5 and show the students the completed web page
HTML5 Programming 81

9. Drag the first div and drop it inside the second div

10. Show to the students the Visual Studio console view


82 HTML5 Programming

Additional Reading
Dragging Events
• Drag and Drop

dataTransfer Object
• Data Transfer

• Drag and Drop Specifications


HTML5 Programming 83

Lesson 2
File API
Contents:
Detailed Demonstration Steps 84

Additional Reading 85
84 HTML5 Programming

Detailed Demonstration Steps


Demonstration: File API
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>
<input type="file" id="file" name="file" multiple />
</body>

4. In the HTML file’s head element add the following script tag:

<script type="text/javascript">
function handleSelectedFiles(e) {
var files = e.target.files;

for (var i = 0; i < files.length; i++) {


var reader = new FileReader();

reader.onload = (function (theFile) {


return function (e) {
console.log(e.target.result);
};
})(files[i]);

// Read the file as a text.


reader.readAsText(files[i]);
}
}

function contentLoaded() {
document.getElementById('file').addEventListener('change',
handleSelectedFiles, false);
}

window.addEventListener("DOMContentLoaded", contentLoaded, false);


</script>

5. Save the file as an HTML file

6. In Solution Explorer, click on file with the right mouse button


7. Click on the Set As Startup Page menu item

8. Run the project by pressing CTRL+F5 and show the students the completed web page

9. Press the Browse button and pick any text file to see the result of the reading in the Visual Studio’s
console view
HTML5 Programming 85

Additional Reading
Security Considerations
• File API Security
86 HTML5 Programming

Lesson 3
Geolocation API
Contents:
Detailed Demonstration Steps 87
HTML5 Programming 87

Detailed Demonstration Steps


Demonstration: Geolocation API
Detailed demonstration steps
1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s head element add the following script tag:

<script type=”text/javascript”>
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{
enableHighAccuracy: true,
maximumAge: 1000,
timeout:500
});

function successCallback(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
}

function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "Permissions denied by the user ";
break;
case error.POSITION_UNAVAILABLE:
message = "The current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "timeout occurred ";
break;
}
console.log(message);
}
</script>

4. Save the file as an HTML file

5. In Solution Explorer, click on file with the right mouse button

6. Click on the Set As Startup Page menu item

7. Run the project by pressing CTRL+F5 and show the students the completed web page

8. You should press the Allow Once button that is popped up by the browser
88 HTML5 Programming

Module 9
Using WebMatrix and Other Developer Tools
Contents:
Lesson 2: ASP.NET MVC 3 and Razor 89
HTML5 Programming 89

Lesson 2
ASP.NET MVC 3 and Razor
Contents:
Additional Reading 90
90 HTML5 Programming

Additional Reading
Design Patterns and Rationale for Using the ASP.NET MVC 3 Framework
• ASP.NET Webforms

• A loosely coupled system is a system whose components are minimally dependent on other
components in the system. This usually makes it easy to modify or replace components in a
predictable, isolated manner without affecting the rest of the system.
HTML5 Programming 91

Send Us Your Feedback


You can search the Microsoft Knowledge Base for known issues at Microsoft Help and Support before
submitting feedback. Search using either the course number and revision, or the course title.

Note Not all training products will have a Knowledge Base article – if that is the case,
please ask your instructor whether or not there are existing error log entries.

Courseware Feedback
Send all courseware feedback to [email protected]. We truly appreciate your time and effort.
We review every e-mail received and forward the information on to the appropriate team. Unfortunately,
because of volume, we are unable to provide a response but we may use your feedback to improve your
future experience with Microsoft Learning products.

Reporting Errors
When providing feedback, include the training product name and number in the subject line of your e-
mail. When you provide comments or report bugs, please include the following:

1. Document or CD part number


1. Page number or location

2. Complete description of the error or suggested change

Please provide any details that are necessary to help us verify the issue.

Important All errors and suggestions are evaluated, but only those that are validated are
added to the product Knowledge Base article.

You might also like