Page 1 of 11

MOAC MTA 98-375: HTML5

Application Development
Fundamentals

Classroom Lab Setup Guide

GETTING STARTED
The Microsoft Technology Associate (MTA) 98-375: HTML5 Application
Development Fundamentals exam in the Microsoft Official Academic Course
(MOAC) series includes a textbook with samples exercises. While students do
not need to complete the exercises on their computer to pass the MTA exams,
completing these exercises at a computer will enhance students learning. The
exercises in the lab manual are designed either for classroom use under the
supervision of an instructor or lab aide. In an academic setting, the computer lab
might be used by a variety of classes each day, so you must plan your setup
procedure accordingly. For example, consider automating the classroom setup
procedure by creating images of the instructor and student workstations and
installing them each day.

LAB CONFIGURATION
This course should be taught in a lab containing networked computers where
students can develop their skills through hands-on experience with an HTML
editor and/or a development tool such as Microsoft Visual Studio Express and a
variety of Web browsers.
The lab configuration consists of:
A single Web server with student access to individual folders
A single instructor computer running Microsoft Windows 7
Professional or Ultimate, and Windows 8 in a dual-boot configuration
or Windows 8 in a virtual machine
Note: At the time this guide was written, the latest version of Internet
Explorer 10 ran only in Windows 8 Release Preview; Windows 8
wasnt yet available. The preview version of Internet Explorer 10 for
Windows 7 did not include updates and therefore lacked support for
several elements, properties, and attributes covered in the textbook.
Student lab computers running Windows 7 Professional or Ultimate
It is essential that both the instructor and student computers have access to the
Internet. Many of the hands-on samples and exercises require access to the
Internet. In addition, besides allowing http/https, students and the instructor will
also need FTP connections to a Web server for a few exercises.
The following are suggested naming conventions for the lab computers:
 Page 2 of 11

Web server name: WebServer01

Instructor computer name: Instructor01
Student computer names: Studentxx, where xx is a unique number
assigned to each computer
Note
For the purposes of this lab, all server and workstation passwords, for user accounts and other purposes,
will be set to Pa$$w0rd. This is obviously not a secure practice in a real world situation, and instructors
should remind students of this at the outset.

Instructor Computer Requirements

The instructors computer requires the following hardware and software:

Hardware Requirements
Minimum: 1 gigahertz (GHz) or faster 32-bit (x86) or 64-bit (x64)
processor
Minimum: 1 gigabyte (GB) RAM (32-bit) or 2 GB RAM (64-bit)
Recommended: 160 GB available hard disk space
DVD drive
USB port
Microsoft DirectX 9 graphics device with WDDM 1.0 or higher driver
Touch screen that supports multitouch; must be able to display
1024x768 at a minimum
Keyboard
Mouse
Network interface adapter
Internet access

Software Requirements
All of the software listed below is required for this course:
Microsoft Windows 7 Professional or Ultimate
Microsoft Windows 8 in a dual-boot configuration with Windows 7, or
Windows 8 running in a virtual machine
Note: All tools run in Windows 7; however, some lab exercises require
Internet Explorer 10, which is available only in Windows 8 as of this
writing.
The latest editions or versions of the following Web browsers:
o Microsoft Internet Explorer 9
o Microsoft Internet Explorer 10 (installs with Windows 8; will
be available for Windows 7 in 2013)
o Mozilla Firefox
o Opera
o Google Chrome
o Apple Safari
 Page 3 of 11

Microsoft Visual Studio Express

KompoZer or a similar HTML editor

Student Computer Requirements

Each student server requires the following hardware and software:

Hardware Requirements
Minimum: 1 gigahertz (GHz) or faster 32-bit (x86) or 64-bit (x64)
processor
Minimum: 1 gigabyte (GB) RAM (32-bit) or 2 GB RAM (64-bit)
Recommended: 160 GB available hard disk space
DVD drive
USB port
Microsoft DirectX 9 graphics device with WDDM 1.0 or higher driver
Monitor/display:
o Recommended: Touch screen that supports multitouch; must
be able to display 1024x768 at a minimum
o Minimum: Super VGA (1024x768) display
Keyboard
Mouse
Network interface adapter
Internet access

Software Requirements
All of the software listed below is required for the course:
Microsoft Windows 7 Professional or Ultimate in a dual-boot
configuration with Windows 8, or Windows 8 running in a virtual
machine
Note: All tools run in Windows 7; however, some lab exercises require
the Internet Explorer 10, which is available only in Windows 8 as of
this writing. When this guide was written, the latest version of Internet
Explorer 10 ran only in Windows 8 Release Preview; Windows 8
wasnt yet available. The preview version of Internet Explorer 10 for
Windows 7 did not include updates and therefore lacked support for
several elements, properties, and attributes covered in the textbook.
The latest editions or versions of the following Web browsers:
o Microsoft Internet Explorer 9
o Microsoft Internet Explorer 10 (installs with Windows 8; you
may install in Windows 7 when a download for Windows 7
becomes available)
o Mozilla Firefox
o Opera
o Google Chrome
o Apple Safari
 Page 4 of 11

Microsoft Visual Studio Express for Web

KompoZer or a similar HTML editor
Note
This list includes both 32-bit and 64-bit versions of the software products, where available. If all of your
workstations use the same processor platform, you need download one of the versions.

Internet Access Requirements

Students will need access to the following Web sites:

General
Bing: http://www.bing.com
Microsoft: http://www.microsoft.com

Lesson 1
Downloads for Metro style app development:
http://msdn.microsoft.com/en-US/windows/apps/br229516
Beginner Developer Learning Center: http://msdn.microsoft.com/en-
us/beginner/default.aspx
HTML/CSS for Metro style apps: http://msdn.microsoft.com/en-
US/library/windows/apps/br229576
Microsoft Developer Network: http://msdn.microsoft.com/en-
us/default.aspx
W3C HTML5 standard: http://www.w3.org/TR/html5/
W3Schools.com HTML5 tutorials:
http://www.w3schools.com/html5/default.asp
Microsoft Visual Studio:
http://www.microsoft.com/visualstudio/eng/products/visual-studio-
overview
HTML, CSS, and JavaScript features and differences:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx
Developer Code Samples:
http://code.msdn.microsoft.com/site/search?f[0].Type=Technology&f[0
].Value=HTML5
App packages and deployment: http://msdn.microsoft.com/en-
us/library/windows/apps/hh464929.aspx
Storing and retrieving state efficiently: http://msdn.microsoft.com/en-
us/library/windows/apps/Hh781225.aspx
Touch interaction design: http://msdn.microsoft.com/en-
us/library/windows/apps/hh465415
W3C Touch Events version 2 specification:
http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
Responding to user interaction: http://msdn.microsoft.com/en-
us/library/windows/apps/hh700412.aspx
W3C Markup Validation Service: http://validator.w3.org/
W3C link checker: http://validator.w3.org/checklink
W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/
 Page 5 of 11

App submission checklist: http://msdn.microsoft.com/en-

us/library/windows/apps/hh694062.aspx

Lesson 2
A list of entities supported in HTML5: http://dev.w3.org/html5/html-
author/charref
W3C Markup Validation Service: http://validator.w3.org
Learn HTML5 in 5 Minutes!: http://msdn.microsoft.com/en-
us/hh549253
W3C HTML elements:
http://dev.w3.org/html5/markup/elements.html#elements
W3C HTML5, displaying images on Web pages:
http://www.w3.org/TR/2011/WD-html5-20110525/embedded-content-
1.html#the-img-element
W3C image maps:
http://www.w3.org/TR/html401/struct/objects.html#h-13.6
Microsoft HTML5 Graphics: http://msdn.microsoft.com/en-
us/library/gg589511(v=VS.85).aspx
HTMLCenter: http://www.htmlcenter.com/blog/rgb-color-chart/
W3C SVG attribute index: http://www.w3.org/TR/SVG/attindex.html
SVG (Microsoft): http://msdn.microsoft.com/en-
us/library/gg589525(v=vs.85).aspx
How To Choose Between SVG and Canvas:
http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
HTML5 Video: http://www.w3schools.com/html5/html5_video.asp
FlashKit: http://flashkit.com
Public Domain Sherpa: http://www.publicdomainsherpa.com/public-
domain-recordings.html
Add audio and video to your webpage: http://msdn.microsoft.com/en-
us/library/ie/hh771805(v=vs.85).aspx

Lesson 3
HTML global attributes: http://dev.w3.org/html5/markup/global-
attributes.html
When can I use: http://caniuse.com
The HTML5 Test: http://html5test.com
W3C Markup Validation Service: http://validator.w3.org
Learn HTML5 in 5 Minutes!: http://msdn.microsoft.com/en-
us/hh549253
W3C HTML elements:
http://dev.w3.org/html5/markup/elements.html#elements
HTML Color Names:
http://www.w3schools.com/html/html_colornames.asp
W3C HTML5 input element: http://www.w3.org/TR/2011/WD-html5-
20110525/the-input-element.html#the-input-element
 Page 6 of 11

Lesson 4
CSS Color Names:
http://www.w3schools.com/cssref/css_colornames.asp
Cascading Style Sheets: http://msdn.microsoft.com/en-
us/library/ms531205(v=vs.85).aspx
CSS Tutorial: http://www.w3schools.com/css/default.asp
W3schools.com CSS display Property:
http://www.w3schools.com/cssref/pr_class_display.asp
CSS float: http://www.w3schools.com/css/css_float.asp
CSS Positioning: http://www.w3schools.com/css/css_positioning.asp
CSS position property:
http://www.w3schools.com/cssref/pr_class_position.asp
CSS overflow property:
http://www.w3schools.com/cssref/pr_pos_overflow.asp

Lesson 5
New York Times Web site: www.nytimes.com
W3C CSS Flexible Box Layout Module: http://www.w3.org/TR/css3-
flexbox/
Flexin: http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html
[no longer valid]
CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

Lesson 6
CSS3 regions: Rich page layout with HTML and CSS3:
http://www.adobe.com/devnet/html5/articles/css3-regions.html
CSS: http://msdn.microsoft.com/en-
us/library/hh673536(v=VS.85).aspx
CSS Regions Module Level 3: http://dev.w3.org/csswg/css6-regions/
CSS Regions test drive:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-
on_regions.htm (Note: This page may require Internet Explorer 10 for
proper rendering.)
CSS Regions Module Level 3, Multi-column regions section:
http://dev.w3.org/csswg/css3-regions/#multi-column-regions
CSS3 multi-column Properties:
http://www.w3schools.com/cssref/default.asp#multicol
HTML Language Code Reference:
http://www.w3schools.com/tags/ref_language_codes.asp
W3C CSS Text Level 3, Hyphenation section:
http://dev.w3.org/csswg/css3-text/#hyphenation
Hyphenation: http://msdn.microsoft.com/en-
us/library/ie/hh673547(v=vs.85).aspx
CSS Exclusions and Shapes Module Level 3:
http://dev.w3.org/csswg/css3-exclusions/
Exclusions: http://msdn.microsoft.com/en-
us/library/ie/hh673558(v=vs.85).aspx
 Page 7 of 11

Lesson 7
Hands-on: border-radius:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-
on_border-radius.htm
CSS Image Values and Replaced Content Module Level 3, repeating
gradients section: http://dev.w3.org/csswg/css3-images/#repeating-
gradients
Explore new ideas in website design and layout:
http://msdn.microsoft.com/en-us/library/ie/hh771815(v=vs.85).aspx
CSS Color Module Level 3: http://www.w3.org/TR/css3-color/
WOFF specification: http://www.w3.org/TR/WOFF/
Fonts on the Web: http://www.w3.org/Fonts/
WOFF Frequently Asked Questions: http://www.w3.org/Fonts/WOFF-
FAQ.html

Lesson 8
JavaScript Tutorial: http://www.w3schools.com/js/default.asp

Lesson 9
Animations and Transitions: http://msdn.microsoft.com/en-
us/library/windows/desktop/aa511285.aspx
Animating your UI (Windows Store apps using JavaScript and HTML):
http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx
A Beginners Guide to Using the Application Cache:
http://www.html5rocks.com/en/tutorials/appcache/beginner/

Lesson 10
Touch Events version 2 specification:
https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
WHATWG: http://developers.whatwg.org/
Geolocation: http://bit.ly/IZ7Lut
12 Cool HTML5 Geolocation Ideas: http://msdn.microsoft.com/en-
us/magazine/hh563893.aspx
WebSockets: http://msdn.microsoft.com/en-
us/library/ie/hh673567(v=vs.85).aspx
Windows API Reference for Windows Store apps:
http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx
HTML5 Web Storage: http://msdn.microsoft.com/en-
us/library/windows/apps/hh779848.aspx
Quickstart: detecting location using HTML5:
http://msdn.microsoft.com/en-us/library/windows/apps/hh452746.aspx
Quickstart: Responding to user movement with the accelerometer:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465265.aspx
Quickstart: capturing a photo or video using the camera dialog:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465152.aspx
Creating Windows Runtime Components:
http://msdn.microsoft.com/en-us/library/windows/apps/hh441572.aspx
 Page 8 of 11

SERVER SETUP INSTRUCTIONS

Before you begin, do the following:
Read this entire document.
Make sure you have the installation media for Microsoft Windows
Server 2008 R2.

Installing the Lab Server

Using the following setup procedure, install Windows Server 2008 R2 on
Server01. This procedure assumes that you are performing a clean installation of
the Windows Server 2008 R2, and that, if you have downloaded an image file,
you have already burned it to a DVD .
Warning
By performing the following setup instructions, your computers hard disks will be repartitioned and
reformatted. You will lose all existing data on these systems.

1. Turn the computer on and insert the Windows Server 2008 R2

installation DVD into the drive.
2. Press any key, if necessary, to boot from the DVD. The Setup
program loads, and the Install Windows window appears.
3. Modify the Language to install, Time and currency format, and
Keyboard or input method settings, if necessary, and click Next.
4. Click Install Now. The Select the operating system you want to
install page appears.
5. Select Windows Server 2008 R2 (Full Installation) and click Next.
The Please read the license terms page appears.
6. Select the I accept the license terms checkbox and click Next. The
Which type of installation do you want? page appears.
7. Click Custom (advanced). The Where do you want to install
Windows? page appears.
Note
If there are existing partitions on the computers hard disk, select each one in turn and delete it before
proceeding.

8. Select Disk 0 Unallocated Space and click Next. The Installing

Windows page appears, indicating the progress of the Setup program
as it installs the operating system. After the installation completes
and the computer restarts, a message appears stating that The users
password must be changed before logging on the first time.
9. Click OK. A Windows logon screen appears.
10. In the New password and Confirm Password text boxes, type
Pa$$w0rd and click the right-arrow button. A message appears,
stating that Your password has been changed.
11. Click OK. The logon process completes and the Initial Configuration
Tasks window appears.
Once the installation process is finished, you must complete the following tasks
to configure the server.
 Page 9 of 11

Completing Initial Server Configuration Tasks

Complete the following configuration tasks before you install Active Directory
Domain Services or any other roles on the server.

Configuring Date and Time Settings

1. In the Initial Configuration Tasks window, click Set time zone. The
Date and Time dialog box appears.
2. If the time and/or date shown in the dialog box are not correct, click
Change date and time and, in the Date and Time Settings dialog box,
set the correct date and time and click OK.
3. If the time zone is not correct for your location, click Change time
zone and, in the Time Zone Settings dialog box, set the correct time
zone and click OK.

Naming the Server

1. In the Initial Configuration Tasks window, click Provide computer
name and domain. The System Properties sheet appears.
2. Click Change. The Computer Name/Domain Changes dialog box
appears.
3. In the Computer name text box, type Server01 and click OK.
4. A Computer Name/Domain Changes message box appears, stating
that you must restart the computer.
5. Click OK.
6. Click Close to close the System Properties dialog box. A Microsoft
Windows message box appears, instructing you again to restart the
computer.
7. Click Restart Now. The system restarts.

Configuring TCP/IP Settings

During the initial setup, the classroom needs to have an IP address range
that will give the students access to the Internet. The classroom will also
need to have a DHCP mechanism such as a wireless router or a DHCP
server to hand out addresses.
The Overview of Lesson Exercises provides further configuration instructions
for specific lessons.

OVERVIEW OF LESSON EXERCISES

The following notes explain requirements for each lesson:

Lesson 1
Microsoft Internet Explorer 9 was used to show examples in Lesson 1. The
authors used Visual Studio 11 Express Beta for Web to create most samples in
the textbook. Microsoft Visual Studio 12 and Visual Studio 12 Express were not
available when the book was being written.
 Page 10 of 11

Lesson 2
Internet Explorer 9 was used to test and show all of the examples in Lesson 2.
Its suggested that you provide examples of the audio and video elements at
the end of this lesson, so you should find suitable audio and video files prior to
class.

Lesson 3
Internet Explorer 9 was used for most examples in Lesson 3. Mozilla Firefox
was used to show placeholders in the Create a Simple Web Form exercise and
validation error messages in the Understanding Validation section. Internet
Explorer 9 does not support the placeholder or required attributes of the
input element; you could use Internet Explorer 10 to demonstrate these
attributes. If an element or attribute doesnt display in Internet Explorer 9, you
can use the When Can I Use Web page at caniuse.com, which lists many
HTML5 elements and attributes and indicates which Web browsers support
them.

Lesson 4
There are no specific notes for Chapter 4.

Lesson 5
When the textbook was written, Internet Explorer 9 supported some flexbox
properties and attributes but did not display grid layouts. Google Chrome
displayed flexboxes most reliably, and was used to display the flex-wrap,
flex-flow, and flex-order examples in the book. Internet Explorer 10
provided some support for grid layouts. You can use the When Can I Use Web
page at caniuse.com, which lists many CSS3 properties and indicates which
Web browsers support them.
The CSS Flexible Box Layout Module and the CSS3 Grid Layout specifications
have been undergoing significant changes. You should browse the CSS Flexible
Box Layout Module Web page at http://www.w3.org/TR/css3-flexbox/ and the
CSS3 Grid Layout Web page at http://www.w3.org/TR/css3-grid-layout/ before
teaching this lesson.

Lesson 6
The CSS Regions specification is a work in progress and has not been widely
adopted by browser vendors. As of this writing, Internet Explorer 9 does not
support CSS Regions; Internet Explorer 10 provides some support for CSS
Regions using the -ms-flow-from construct. Chrome partially supports CSS
Regions with the -webkit- prefix, but you must first enable the feature in the
browsers Properties dialog box per the CSS Regions exercise in the textbook.
Consult the When Can I Use Web page at caniuse.com to check the status of
Web browser support.
Because of support issues for hyphenation in Internet Explorer 9 and 10, the
examples in the book were tested using the Firefox Web browser.
The CSS Exclusions specification is preliminary as of this writing. The authors
were not able to reliably display a CSS Exclusion in any of the major Web
browsers. The Microsoft Exclusions Web site states that the properties and
 Page 11 of 11

syntax defined in the CSS Exclusions specification might not correspond exactly
to those described in this topic. As development on the specification continues,
this might change.

Lesson 7
Internet Explorer 9 was used to show about half of the examples in Lesson 7. A
Webkit browser was used to show perspective, transition, animation, and SVG
examples, which didnt render properly in Internet Explorer 9 or 10.

Lesson 8
There are no specific notes for Chapter 4.

Lesson 9
Internet Explorer 9 was used to show most of the examples in Lesson 9. The
authors used the Mozilla Firefox browser to show the local file access example;
you can also use Internet Explorer 10 to display the feature.
To enable students to send and receive data using XMLHttpRequest requires
a dynamic Web server and server-side programming. The Access Data exercise
in the Sending and Receiving Data section of the textbook does not require
Web server access.
For the AppCache exercise, you must first configure the Web server with the
correct MIME type, which is text/cache-manifest. In addition, the preferred file
extension for manifest files is .appcache.
Cookies can only be enabled for Web pages accessed through the network, not
locally. You must first set up the Web server with folders unique to each user.
Students should have read and write access to their folder. They will use a file
transfer program to upload an HTML file to the Web server to test cookies.

Lesson 10
Internet Explorer 9 was used to show most of the examples in Lesson 10. The
authors used the Mozilla Firefox browser to show Web Worker and WebSocket
examples; Internet Explorer browsers do not support these APIs as of this
writing.