Вы находитесь на странице: 1из 31

20480B

1: Overview of HTML and CSS


Microsoft Official Course
®

Module 1

Overview of HTML and CSS

1
20480B Module Overview

1: Overview of HTML and CSS • Overview of HTML


• Overview of CSS
• Creating a Web Application by Using Visual Studio
2012

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

1: Overview of HTML and CSS • The Structure of an HTML Page


• Tags, Elements, Attributes, and Content
• Displaying Text in HTML
• Displaying Images and Linking Documents in
HTML
• Gathering User Input by Using Forms in HTML
• Demonstration: Creating a Simple Contact Form
• Attaching Scripts to an HTML Page

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

• Each version of HTML has its own DOCTYPE


• The browser uses the DOCTYPE declaration to determine
how to interpret the HTML markup
• For HTML5 pages, specify a DOCTYPE of html

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.

 Browsers start working in quirks mode.

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>

• Use attributes to provide additional information


about the content of an element

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

1: Overview of HTML and CSS Text in HTML can be marked up:


• As headings and paragraphs
<h1>An Introduction to HTML</h1>
<p>In this module, we look at the history of HTML and CSS.</p>
<h2>In the Beginning</h2>
<p>WorldWideWeb was created by Sir Tim Berners-Lee at CERN. </p>

• 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:

<img src="logo.jpg" alt="My Web site logo" height="100" width="100" />

• Use the <a> tag to define a link


• The href attribute specifies the target of the link:

<a href="default.html" alt="Home Page">Home</a>

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

1. Start the MSL-TMG1 virtual machine if it is not already running.

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

Create an HTML Page

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

(More notes on the next slide) 9


20480B Text Continuation Page

1: Overview of HTML and CSS

5. Add the following <form> element to the page beneath the text created previously.

<form method="Post" action="support.aspx">

</form>

6. Add the following <fieldset> element and submit button to the form (between the <form …> and

</form> tags).

<fieldset>

<legend>

Your Details and Enquiry

</legend>

</fieldset>

<input type="submit" value="Send" />

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>

(More notes on the next slide) 10


20480B Text Continuation Page

1: Overview of HTML and CSS

<li>

<label>

Telephone<br />

<input type="text"

name="Phone" />

</label>

</li>

<li>

<label>

Email Address<br />

<input type="text"

name="Email" />

</label>

</li>

<li>

<label>

<strong>Message</strong><br />

<textarea name="Message"

cols="30" rows="10">Add your message here

</textarea>

</label>

</li>

(More notes on the next slide) 11


20480B Text Continuation Page

1: Overview of HTML and CSS

</ol>

8. Save the file and close Notepad.

View the Page

1. In the Windows taskbar, click the File Explorer icon.

2. Browse to the folder E:\Mod01\Democode.

3. Double-click ContactUs.html to display the page in Internet Explorer.

4. In the How do you want to open this type of file (.html)? dialog box, click Internet Explorer.

5. Enter some sample data, but do not click Send.

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.

(More notes on the next slide) 12


20480B Attaching Scripts to an HTML Page

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:

<script type="text/javascript" src="alertme.js"></script>

• The order of <script> elements is important


• Make sure objects and functions are in scope before
they are used
• Use the <noscript> element to alert users with
browsers that have scripting disabled.

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

1: Overview of HTML and CSS • Overview of CSS Syntax


• How CSS Selectors Work
• How HTML Inheritance and Cascading Styles
Affect Styling
• Adding Styles to An HTML Page

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 {}

• CSS selectors can be combined to create more


specific rules
• The wildcard * selector returns the set of all
elements
• Use […] to refine selectors based on attribute
values

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

• HTML inheritance determines which style


properties an element inherits from its parent

• The cascade mechanism determines how style


properties are applied when conflicting rules apply
to the same element

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

1: Overview of HTML and CSS • Use an element's style


<p style="color:blue;">
attribute to define styles some text </p>
specific to that element:

• Use the <style> element in <style type="text/css">


the <head> to include p { color: blue; }
</style>
styles specific to a page:

• Use the <link> element to reference an external


style sheet:
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen">

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

1: Overview of HTML and CSS • Developing Web Applications by Using Visual


Studio 2012
• Demonstration: Creating a Web Site by Using
Visual Studio 2012
• Using the Internet Explorer F12 Developer Tools
• Demonstration: Exploring the Contoso Conference
Application

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

• Visual Studio 2012 features include:


• Full support for HTML5
• IntelliSense for JavaScript code
• Support for CSS3 properties and values
• CSS color picker

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

1. Start the MSL-TMG1 virtual machine if it is not already running.

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

Create a Web Site Project

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.

(More notes on the next slide) 21


20480B Text Continuation Page

1: Overview of HTML and CSS

4. From the web location drop-down list, click File System, set the file path to

E:\Mod01\Democode\DemoWebSite, and then click OK.

5. On the File menu, click Save DemoWebSite.

Add and Edit Files in the Project

1. In Visual Studio, click Solution Explorer.

2. In the Solution Explorer window, right-click the DemoWebSite project.

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

7. Change the name of the folder to styles.

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 {

font-family: 'Times New Roman';

color: blue;

(More notes on the next slide) 22


20480B Text Continuation Page

1: Overview of HTML and CSS

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.

11. In the Solution Explorer window, double-click ContactUs.html.

12. Add the following markup shown in bold to the <head> element of the page.

<head>

<meta charset="UTF-8" />

<title>Contact Us</title>

<link href="styles/ContactUsStyles.css" rel="stylesheet" type="text/css" />

</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.

13. On the File menu, click Save All.

Run the Web Application

1. In Visual Studio, on the Debug menu, click Start Debugging.

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

(More notes on the next slide) 23


20480B Text Continuation Page

1: Overview of HTML and CSS

form is not available.

5. Leave Internet Explorer running and return to Visual Studio 2012.

Modify the Live Application

1. In the ContactUs.html file, make the following modifications:

a. Change <strong>Name</strong> to <strong>Full name</strong>.

b. Change Telephone to Telephone number.

2. In the ContactUsStyles.css file, add the following style:

h1 {

font-family: 'Copperplate Gothic';

color: red;

3. On the File menu, click Save All.

4. Return to Internet Explorer and press F5 to refresh the display.

5. Verify that the Name field changes to Full name, the Telephone field changes to Telephone

number, and that the style of the heading has changed.

6. Return to Visual Studio 2012.

7. On the Debug menu, click Stop Debugging.

(More notes on the next slide) 24


20480B Using the Internet Explorer F12 Developer Tools

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.

(More notes on the next slide) 26


20480B Text Continuation Page

1: Overview of HTML and CSS

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

machine; highlight the URL in the address bar of Internet Explorer.

15. Quickly visit each of the pages in the application by using the links in the navigation bar at the top of

the web page.

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

page in the application.

17. Close Internet Explorer.

Preparation Steps

1. Start the MSL-TMG1 virtual machine if it is not already running.

2. Start the 20480B-SEA-DEV11 virtual machine if it is not already running, and log on as Student with
the password Pa$$w0rd.

(More notes on the next slide) 27


20480B Lab: Exploring the Contoso Conference Application

1: Overview of HTML and CSS • Exercise 1: Exploring the Contoso Conference


Application
• Exercise 2: Examining and Modifying the Contoso
Conference Application

Logon Information
• Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1
• User Name: Student
• Password: Pa$$w0rd

Estimated Time: 30 minutes

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.

Exercise 1: Exploring the Contoso Conference Application

In this exercise, you will run the Contoso Conference web application and examine each of the functions it
provides.

The Contoso Conference web application contains the following pages:

 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.

Exercise 2: Examining and Modifying the Contoso Conference Application

(More notes on the next slide) 28


20480B Text Continuation Page

1: Overview of HTML and CSS

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

• ContosoConf is an annual technical conference that


1: Overview of HTML and CSS describes the latest tools and techniques for building
HTML5 web applications. The conference organizers
have created a web site to support the conference,
using the same technologies that the conference
showcases.

• You are a developer that creates web sites by using


HTML, CSS, and JavaScript, and you have been given
access to the code for the web site for the latest
conference. You decide to take a look at this web
application to see how it works, and how the developer
has used Visual Studio 2012 to create it.

30
20480B Module Review and Takeaways

1: Overview of HTML and CSS • Review Question(s)

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

Вам также может понравиться