Академический Документы
Профессиональный Документы
Культура Документы
Module 1
1
20480B Module Overview
The content in this module is HTML version-neutral, except for the content that explains DOCTYPEs.
The new features of HTML5 and CSS3 are described starting in module 2, and JavaScript is introduced in
module 3.
2
20480B Lesson 1: Overview of HTML
Much of the material in this lesson should be revision. Do not spend too much time on this material, but
use it to get a feel for how familiar the students are with HTML.
3
20480B The Structure of an HTML Page
1: Overview of HTML and CSS • All HTML pages have the same structure
• DOCTYPE declaration
• HTML section containing:
• Header
• Body
Do not spend too long on this topic. The important points to get across are that an HTML page should
include a DOCTYPE declaration to enable the browser to determine how to interpret the HTML markup in
the page, and if you are using HTML5 you simply need to specify a DOCTYPE of html.
Note the inclusion of <meta charset="utf-8"/> in the first 512 bytes of the code example to prevent a
security risk.
Note also that while including the HTML5 DOCTYPE is not mandatory, not doing so means the following:
Browsers don't recognize that the document is HTML5, and some browsers will ignore the new
elements.
4
20480B Tags, Elements, Attributes, and Content
1: Overview of HTML and CSS • HTML elements define the structure and semantics
of content on a web page
• Elements identify their content by surrounding it
with a start and an end tag
• Elements can be nested:
<p>
<strong>Elements</strong> consist of
<strong>content</strong> bookended by a
<em>start</em> tag and an <em>end</em> tag.
</p>
The global attributes from HTML4 are id, dir, title, lang, class, and style. HTML5 adds 15 more, including
accesskey, hidden, spellcheck, tabindex, and translate.
5
20480B Displaying Text in HTML
• With emphasis
To <strong>emphasize</strong> is to give extra weight to (a
communication); <em>"Her gesture emphasized her words"</em>
• In lists <ul>
<li>Notepad</li>
<li>Textmate</li>
<li>Visual Studio</li>
</ul>
Do not spend too long on this topic as much of it should be review for students. Simply highlight the
functionality and refer students to the W3C website (http://go.microsoft.com/fwlink/?LinkID=267709) if they
need detailed information.
6
20480B Displaying Images and Linking Documents in HTML
1: Overview of HTML and CSS • Use the <img> tag to display an image
• The src attribute specifies the URL of the image source:
The key point is to explain to students that links provide a means to connect pages and other content.
7
20480B Gathering User Input by Using Forms in HTML
1: Overview of HTML and CSS • The <form> element provides a mechanism for
obtaining user input
• The action attribute specifies where
the data will be sent
• The method attribute specifies how
the data will be sent
• Many different input types are
available
Keep this topic short. It is tempting to go into all the nuances of the different types of input available, but
save this discussion for module 4, which covers forms and validation in more detail.
8
20480B Demonstration: Creating a Simple Contact Form
1: Overview of HTML and CSS In this demonstration, you will see how to:
• Create an HTML Page
• Add Content to the Page
• Add a Form with Input Controls
• View the Page
A complete version of the ContactUs.html file is available in the ContactUs – Complete.html file, in the
E:\Mod01\Democode folder. If necessary, copy and paste the HTML markup from this file to save typing
during the demonstration.
Preparation Steps
2. Start the 20480B-SEA-DEV11 virtual machine if it is not already running, and log in as Student with
the password Pa$$w0rd
Demonstration Steps
1. On the Windows 8 Start screen, right-click outside of any tile, and in the task bar click All apps.
2. On the Windows 8 Start screen, in the Windows Accessories section, click Notepad.
3. Add the following basic HTML structure to the blank text file.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contact Us</title>
</head>
<body>
</body>
</html>
4. Save the file as E:\Mod01\Democode\ ContactUs.html.Add a Form with Input Controls
5. Add the following <form> element to the page beneath the text created previously.
</form>
6. Add the following <fieldset> element and submit button to the form (between the <form …> and
</form> tags).
<fieldset>
<legend>
</legend>
</fieldset>
7. Add the unordered list shown in the following code sample to the <fieldset> element below the
</legend> tag. This list contains input elements for the user's name, telephone number, email address,
and a message.
<ol>
<li>
<label>
<strong>Name</strong><br />
<input type="text"
name="UserName" />
</label>
</li>
<li>
<label>
Telephone<br />
<input type="text"
name="Phone" />
</label>
</li>
<li>
<label>
<input type="text"
name="Email" />
</label>
</li>
<li>
<label>
<strong>Message</strong><br />
<textarea name="Message"
</textarea>
</label>
</li>
</ol>
4. In the How do you want to open this type of file (.html)? dialog box, click Internet Explorer.
Note: If you do click Send, Internet Explorer will display the message This page can't be displayed. This
occurs because the URL that is specified as the action attribute for the form (support.aspx) does not exist.
1: Overview of HTML and CSS • HTML is static, but pages can use JavaScript to
add dynamic behavior
• Use the <script> element to specify the location
of the JavaScript code:
The purpose of this topic to describe the purpose of JavaScript and how to reference code from an HTML
page. Do not go into the details of the JavaScript language, as this subject is introduced in module 3.
13
20480B Lesson 2: Overview of CSS
As with lesson 1, much of the material in this lesson should be review. However, students are likely to be
less familiar with CSS than with HTML, so you may need to spend a little time to ensure that students
understand the principles of styling and how CSS works. In particular, emphasize the importance of
understanding cascading and inheritance in style sheets.
14
20480B Overview of CSS Syntax
1: Overview of HTML and CSS • All CSS rules have the same syntax:
selector {
property1:value;
property2:value;
..
propertyN:value;
}
• Comments are
/* Targets level 1 headings */
enclosed in /* … */ h1 {
delimiters font-size: 42px;
color: pink;
font-family: 'Segoe UI';
}
Make sure that students understand the basic CSS selector/rule syntax. Be prepared to give them further
examples if necessary.
15
20480B How CSS Selectors Work
1: Overview of HTML and CSS • There are three basic CSS selectors
• The element selector: h2{}
• The class selector: .myClass {}
• The id selector: #thisId {}
Be prepared to take extra time over this topic. The syntax of concatenated selectors and attribute selectors
can be confusing at first, so be prepared to give further examples.
16
20480B How HTML Inheritance and Cascading Styles Affect
Styling
1: Overview of HTML and CSS • HTML inheritance and the CSS cascade
mechanism govern how browsers apply style rules
Make sure that students understand that the same HTML element can be the target of multiple CSS
selectors. The cascade mechanism determines how the rules associated with these selectors are applied.
17
20480B Adding Styles to An HTML Page
This course places styles in a set of separate style sheets. The HTML pages in the lab application use
<link> elements to reference the style sheets.
18
20480B Lesson 3: Creating a Web Application by Using Visual
Studio 2012
This lesson covers the practical side of building and debugging web applications by using Visual Studio
2012 and the F12 Developer Tools in Internet Explorer 10. If time allows, share any personal hints and tips
that you may have about using these tools for performing these tasks with the students.
19
20480B Developing Web Applications by Using Visual Studio
2012
1: Overview of HTML and CSS • Visual Studio 2012 provides tools for:
• Creating a web application project, and adding folders
to structure the content
• Debugging JavaScript code, examining and modifying
variables, and viewing the call stack
• Deploying a web application to a web server or to the
cloud
Mention that IntelliSense® and snippets in the Visual Studio editors now fully support HTML5, WAI-ARIA,
CSS3, jQuery, and the DOM.
The demonstration in the next topic provides a platform for a more detailed discussion of the features of
Visual Studio 2012.
20
20480B Demonstration: Creating a Web Site by Using Visual
Studio 2012
1: Overview of HTML and CSS In this demonstration, you will see how to:
• Create a Web Site Project
• Add and Edit files in the Project
• Run the Web Application
• Modify the Live Application
This demonstration shows the essential tasks for creating, building, and running a web application.
Students should be familiar with the Visual Studio development environment (it is a course prerequisite),
but depending on the level of students' experience, feel free to point out any other features of Visual Studio
2012 that may be relevant to students' needs and questions during this demonstration.
Also, point out the shortcut keys on the various menu bars. For example, F5 to start debugging, F6 to build
the solution, Ctrl + Shift + A to add a new item to a web site project, and so on.
A complete, working version of the code for this demonstration called DemoWebSite - Complete is
available in the E:\Mod01\Democode folder.
Preparation Steps
2. Start the 20480B-SEA-DEV11 virtual machine if it is not already running, and log in as Student with
the password Pa$$w0rd
Note: This demonstration assumes that you have completed the previous demonstration, and that the file
ContactUs.html is available in the E:\Mod01\Democode folder.
Demonstration Steps
1. On the Windows 8 Start screen, click the Visual Studio 2012 tile.
2. In Visual Studio, on the File menu, point to New, and then click Web Site.
3. In the New Web Site dialog box, click ASP.NET Empty Web Site.
Note: It does not matter whether you select the Visual Basic or Visual C# templates in the left pane; the
templates for both languages enable you to create HTML5 web pages and implement functionality by using
JavaScript.
4. From the web location drop-down list, click File System, set the file path to
3. In the context menu, point to Add and then click Existing Item.
4. In the Add Existing Item dialog box, browse to E:\Mod01\Democode, click ContactUs.html, and
then click Add.
5. In the Solution Explorer window, right-click ContactUs.html, and then click Set As Start Page.
6. In the Solution Explorer window, right-click the DemoWebSite project, point to Add, and then click
New Folder
8. Right-click the styles folder, point to Add, and then click Add New Item
9. In the Add New Item - DemoWebSite dialog box, in the middle pane, click Style Sheet, in the
Name box, type ContactUsStyles.css, and then click Add.
Note: You can also use the Add New Item dialog box to create new JavaScript and HTML files and add
them to a project.
10. In the ContactUsStyles.css file, add the following style shown in bold:
body {
color: blue;
Note: Notice that the new CSS color picker appears when you specify the color property. You can use the
color picker to select a color and to generate the corresponding code for the color.
12. Add the following markup shown in bold to the <head> element of the page.
<head>
<title>Contact Us</title>
</head>
Note: HTML IntelliSense provides hints to help ensure that you enter valid HTML. The Pick URL wizard
enables you to quickly select a style sheet.
2. In the Debugging Not Enabled dialog box, click Modify the Web.config file to enable
debugging, and then click OK.
3. Verify that Internet Explorer starts running and displays ContactUs.html. The text for the page should
appear in blue.
4. In Internet Explorer, if the message Intranet settings are turned off by default appears, click
Don’t show this message again.
Note: You can enter some sample data, but do not click Send because the URL that is the target of the
h1 {
color: red;
5. Verify that the Name field changes to Full name, the Telephone field changes to Telephone
1: Overview of HTML and CSS The F12 Developer Tools enables developers to:
• Inspect and validate HTML and CSS
• Run and debug JavaScript code
• Profile page
load times
• View a page
as if it were
being viewed
in any version
of Internet
Explorer from
v7.0 onwards
If time allows, re-run the DemoWebSite application from the previous application and show the F12
Developer Tools in action. For example, show the HTML markup for the ContactUs form, use the HTML
tab to make a change to part of the text on the page, and then click Refresh in the HTML toolbar to update
the page displayed in Internet Explorer.
25
20480B Demonstration: Exploring the Contoso Conference
Application
1: Overview of HTML and CSS In this demonstration, you will learn how to open
the Contoso Conference application in Visual
Studio, and how to run the application.
1. Read the Lab Scenario to students and point out that they should read each scenario before
attempting the lab for a module.
2. Point out to students that the Exercise Scenario for each exercise contains a description of what they
will accomplish in the exercise, and is also essential reading.
3. Start Visual Studio, and open the ContosoConf.sln solution in the E:\Mod01\Labfiles\Starter\
folder.
4. In Solution Explorer, expand the ContosoConf project, and highlight the .htm files in the root folder
of the project; these files correspond to each of the web pages that students will be building in the
labs throughout the course.
5. Double-click index.htm to display the HTML markup for this page in the Code Editor window.
Explain that this is the Home page of the application, and it is the default page that users see when
they visit the website for the application.
6. At the bottom of the Design View window, click the Design tab. Explain that the layout shown in the
Design View window is the default styling of the page, and that the stylesheets that students create
as part of the application modify the way in which elements are presented.
7. In Solution Explorer, expand the styles folder. Point out that this folder contains the global style
sheets used by all pages throughout the application.
8. Expand the pages folder, and describe how each web page also has its own stylesheet containing
the styles that are pertinent to that page.
9. Double-click index.css to display the stylesheet in the Code Editor window. Scroll through this style
sheet and emphasize that this stylesheet contains the styles that will are used by the Home page
(index.htm).
10. In Solution Explorer, expand the scripts folder. Explain that this folder contains the global JavaScript
code files used throughout the application.
11. Expand the pages folder, and describe how most of the web pages also have their own code file
containing the JavaScript code specifically for that page.
12. Double-click video.js to display the JavaScript code in the Code Editor window. Scroll through this
file and explain that this is the code that handles the video player controls on the Home page.
13. On the Debug menu, click Start Without Debugging. Explain that this step saves changes that
might have been made to the HTML files, stylesheets, and JavaScript code files, and then starts the
web application running. It then moves to the Home page of the application and displays it by using
Internet Explorer.
Note: If the message Intranet settings are turned off by default appears, click Don’t show this
message again.
14. Point out that the web application runs by using a local instance of IIS Express on the virtual
15. Quickly visit each of the pages in the application by using the links in the navigation bar at the top of
Note: On the Location page, the message localhost wants to track your physical location will appear;
click Allow once. In the Enable Location Services dialog box, click Yes.
16. Explain that the first exercise of the lab provides more information about the purpose of each web
Preparation Steps
2. Start the 20480B-SEA-DEV11 virtual machine if it is not already running, and log on as Student with
the password Pa$$w0rd.
Logon Information
• Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1
• User Name: Student
• Password: Pa$$w0rd
Explain that the purpose of this lab is to enable students to examine the application that they will be
building, starting in the lab for module 2. Students should also use this lab to gain some familiarity with the
Visual Studio 2012 development environment that they will be using.
Depending on the level of the experience of students, the first exercise, "Exploring the Contoso
Conference Application" can either be performed by the students, conducted as a demonstration by the
instructor (by extending the demonstration that occurs immediately prior to this lab), or both.
In this exercise, you will run the Contoso Conference web application and examine each of the functions it
provides.
The Home page, which provides a brief overview of the conference, the speakers, and the sponsors.
The Home page also includes a video from the previous conference.
The About page, which provides more detail about the conference and the technologies that it
covers.
The Schedule page, which lists the conference sessions. The conference has two concurrent tracks,
and the sessions are organized by track. Some sessions are common to both tracks.
The Register page, which enables the user to provide their details and register for the conference.
The Location page, which provides information about the conference location and a map of the
venue.
The Live page, which enables an attendee to submit technical questions to the speakers running the
conference sessions. The page displays the answer from the speaker, together with questions (with
answers) posted by other conference attendees.
The Feedback page, which enables the user to rate conference sessions and speakers.
Instructor Note: This exercise is a guided walkthrough of the application; it reinforces the demonstration
presented in the module immediately prior to the lab.
In this exercise, you will examine the Visual Studio 2012 project for the Contoso Conference application.
You will see how the project is structured, and how the files and scripts for the project are organized into
folders. You will then run the application again, make some modifications to the HTML markup and CSS,
and view the results.
Instructor Note: The aim of this lab is to get students up to speed using Visual Studio 2012 with a web
application. Students will also gain some experience with using Visual Studio 2012 to edit the HTML
markup and CSS styling for a live application.
29
20480B Lab Scenario
30
20480B Module Review and Takeaways
Review Question(s)
Question
What are the four elements that define the basic structure of an HTML page?
Answer
The DOCTYPE declaration, and the <html>, <head>, and <body> elements.
Question
What is the best way to apply CSS rules to HTML elements that occur in several different pages?
( )Option 1: Include all rules for each element in the <style> attribute of the element.
( )Option 2: Include the rules for each page in a <style> element in the <head> element.
( )Option 3: Write the rules for the whole site in one or more style sheets and reference them by using a
<style> element in the <head> element of each page.
( )Option 4: Write the rules for the whole site in one or more style sheets and reference them by using a
<link> element in the <head> element of each page.
( )Option 5: Write the rules for the whole site in one or more style sheets and reference them by using a
<stylesheet> element in the <head> element of each page.
Answer
(√) Option 4: Write the rules for the whole site in one or more style sheets and reference them by using a
<link> element in the <head> element of each page.
31