View
28
Download
0
Category
Preview:
Citation preview
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 1
Chapter 3
How to use HTML5 and CSS3 with ASP.NET
applications
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 2
The user interface for the Future Value application
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 3
The HTML that’s generated for a new form <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 4
The HTML after it has been modified for this application
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chapter 3: Future Value</title>
<link href="Styles.css" rel="stylesheet">
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 5
The aspx code for the Future Value application <body>
<header>
<img id="logo" alt="Murach Logo"
src="Images/MurachLogo.jpg" />
</header>
<section>
<h1>401K Future Value Calculator</h1>
<form id="form1" runat="server">
<label>Monthly investment:</label>
<asp:DropDownList ID="ddlMonthlyInvestment"
runat="server" CssClass="entry">
</asp:DropDownList><br />
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 6
The aspx code for the Future Value app (cont.) <label>Annual interest rate:</label>
<asp:TextBox ID="txtInterestRate"
runat="server" CssClass="entry">6.0
</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server" CssClass="validator"
ErrorMessage="Interest rate is required."
ControlToValidate="txtInterestRate"
Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1"
runat="server" CssClass="validator"
ControlToValidate="txtInterestRate"
Display="Dynamic"
ErrorMessage=
"Interest rate must range from 1 to 20."
MaximumValue="20" MinimumValue="1"
Type="Double">
</asp:RangeValidator><br />
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 7
The aspx code for the Future Value app (cont.) <label>Number of years:</label>
<asp:TextBox ID="txtYears" runat="server"
CssClass="entry">10</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server" CssClass="validator"
ControlToValidate="txtYears"
Display="Dynamic"
ErrorMessage=
"Number of years is required.">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator2"
runat="server"
CssClass="validator"
ControlToValidate="txtYears"
Display="Dynamic"
ErrorMessage=
"Years must range from 1 to 45."
MaximumValue="45"
MinimumValue="1" Type="Integer">
</asp:RangeValidator><br />
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 8
The aspx code for the Future Value app (cont.) <label>Future value:</label>
<asp:Label ID="lblFutureValue"
runat="server" Text="">
</asp:Label><br />
<asp:Button ID="btnCalculate" runat="server"
Text="Calculate"
CssClass="button"
OnClick="btnCalculate_Click" />
<asp:Button ID="btnClear" runat="server"
Text="Clear"
CssClass="button" OnClick="btnClear_Click"
CausesValidation="False" />
</form>
</section>
</body>
</html>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 9
The external style sheet for the Future Value application
/* The styles for the elements */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
width: 550px;
margin: 0 auto;
padding: 10px;
background-color: white;
border: 2px solid #0000FF;
}
h1 {
font-size: 140%;
color: #0000FF;
padding: 0;
margin-bottom: .5em;
}
label {
float: left;
width: 10em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 10
The external style sheet (cont.) /* the styles for classes */
.entry {
margin-left: 1em;
margin-bottom: .5em;
width: 10em;
}
.validator {
font-size: 95%;
color: red;
margin-left: 1em;
}
.button {
margin-top: 1em;
width: 10em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 11
The external style sheet (cont.) /* The styles for the server controls */
#ddlMonthlyInvestment {
width: 10.5em;
}
#lblFutureValue {
font-weight: bold;
margin-left: 1em;
}
#btnClear {
margin-left: 1em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 12
Common HTML elements
Element Type
h1 Block
h2 Block
p Block
img Block
form Block
a Inline
input Inline
label Inline
br
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 13
How to code HTML elements
Two block elements with opening and closing tags
<h1>Halloween SuperStore</h1>
<p>Here is a list of links:</p>
Two self-closing tags
<br>
<img src="logo.gif" alt="Murach Logo">
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 14
How to code the attributes for HTML elements
How to code an opening tag with attributes
<a href="contact.html"
title="Click to Contact Us"
class="nav_link">
How to code a Boolean attribute
<input type="checkbox" name="mailList" checked>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 15
How to code an HTML comment <!-- The text in a comment is ignored -->
How to code a character entity for a space <td> </td>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 16
The primary HTML5 semantic elements
header
section
article
nav
aside
figure
footer
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 17
A page that’s structured with header, section, and footer elements
<body>
<header>
<h1>San Joaquin Valley Town Hall</h1>
</header>
<section>
<p>Welcome to San Joaquin Valley Town Hall. We
have some fascinating speakers for you this
season!</p>
</section>
<footer>
<p>© San Joaquin Valley Town Hall.</p>
</footer>
</body>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 18
The page displayed in a web browser
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 19
The div and span elements
div
span
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 20
The way div elements were used before HTML5 <div id="header">
<h1>San Joaquin Valley Town Hall</h1>
</div>
<div id="contents">
<p>Welcome to San Joaquin Valley Town Hall. We
have some fascinating speakers for you this
season!</p>
</div>
<div id="footer">
<p>© San Joaquin Valley Town Hall.</p>
</div>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 21
Span elements in the HTML for a JavaScript application
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1"
name="email_address1">
<span id="email_address1_error">*</span><br>
<label for="email_address2">Re-enter Email
Address:</label>
<input type="text" id="email_address2"
name="email_address2">
<span id="email_address2_error">*</span><br>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 22
Span elements generated by ASP.NET for two validators and a label control
<label>Number of years:</label>
<input name="txtYears" type="text" value="10"
id="txtYears" class="entry" />
<span id="RequiredFieldValidator2" class="validator"
style="display:none;">Number of years is
required.
</span>
<span id="RangeValidator2" class="validator"
style="display:none;">Years must range from 1 to
45.
</span><br />
<label>Future value:</label>
<span id="lblFutureValue"></span><br />
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 23
Three ways to provide styles
Use an external style sheet by coding a link element in the head section
<link rel="stylesheet" href="styles/main.css">
Embed the styles in the head section
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%;
}
h1 {
font-size: 250%;
}
</style>
Use the style attribute of an element to provide inline styles
<span style="color: red; font-size: 14pt;">Warning!
</span>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 24
The sequence in which styles are applied
Styles from an external style sheet
Embedded styles
Inline styles
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 25
A head element that includes two external style sheets
<head>
<title>The Halloween Store</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="order.css">
</head>
The sequence in which styles are applied
From the first external style sheet to the last
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 26
How to generate a link element for an external style sheet
To generate a link element in Source view, drag the style sheet
from the Solution Explorer into the head element for the page.
To generate a link element in Design view, choose the
FORMATAttach Style Sheet command and select the style
sheet from the Select Style Sheet dialog box.
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 27
HTML that can be selected by type, class, or id <body>
<section>
<h1 id="first_heading">The Speaker Lineup</h1>
<p class="blue">October 19: Jeffrey Toobin</p>
<p class="blue">November 16: Andrew Ross Sorkin
</p>
</section>
<footer>
<p class="blue right">Copyright SJV Town Hall</p>
</footer>
</body>
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 28
Three rule sets with type selectors body {
font-family: Arial, Helvetica, sans-serif;
width: 400px;
margin: 1em auto;
}
section {
border: 2px solid black;
padding: 1em;
}
p {
margin: .25em 0 .25em 3em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 29
Two rule sets with class selectors .blue {
color: blue;
}
.right {
text-align: right;
}
One rule set with an id selector #first_heading {
margin: 0 1em .25em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 30
The elements displayed in a browser
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 31
Some of the styles in the external style sheet for the Future Value application
/* The styles for the elements */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
width: 550px;
margin: 0 auto;
padding: 10px;
background-color: white;
border: 2px solid #0000FF;
}
h1 {
font-size: 140%;
color: #0000FF;
padding: 0;
margin-bottom: .5em;
}
label {
float: left;
width: 10em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 32
Some of the styles for the Future Value app (cont.) /* the styles for classes */
.entry {
margin-left: 1em;
margin-bottom: .5em;
width: 10em;
}
/* The styles for the server controls */
#ddlMonthlyInvestment {
width: 10.5em;
}
#lblFutureValue {
font-weight: bold;
margin-left: 1em;
}
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 33
The current browsers and their HTML5 ratings (perfect score is 500)
Browser Release HTML5 Test Rating
Google Chrome 27 463
Opera 12 419
Mozilla Firefox 22 410
Apple Safari 6 378
Internet Explorer 10 320
The web site for these ratings http://www.html5test.com
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 34
Guidelines for cross-browser compatibility
Test your web pages on all of the major browsers, including all of
the older versions of these browsers that are still commonly used.
Use the HTML5 features that are supported by all of the modern
browsers, especially the HTML5 semantic elements. But use the
two workarounds that follow so these applications will run on the
older browsers too.
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 35
The two workarounds for using the HTML5 semantic elements
The JavaScript shiv that lets older browsers know about the elements
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
The CSS rule set that sets the eight semantic elements to block elements
article, aside, figure, figcaption, footer, header, nav,
section {
display: block;
}
Recommended