and CSS3 with ASP.NET How to use HTML5 applications · x Use the HTML5 features that are supported by all of the modern browsers, especially the HTML5 semantic elements. But use the

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


The user interface for the Future Value application


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>


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>

</body>

</html>


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>


<label>Monthly investment:</label>

<asp:DropDownList ID="ddlMonthlyInvestment"

runat="server" CssClass="entry">

</asp:DropDownList><br />


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"


ControlToValidate="txtInterestRate"

Display="Dynamic"

ErrorMessage=

"Interest rate must range from 1 to 20."

MaximumValue="20" MinimumValue="1"

Type="Double">

</asp:RangeValidator><br />


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"


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


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>


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;

}


The external style sheet (cont.) /* the styles for classes */

.entry {

margin-left: 1em;


width: 10em;

}

.validator {

font-size: 95%;

color: red;

margin-left: 1em;

}

.button {

margin-top: 1em;

width: 10em;

}


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;

}


Common HTML elements

Element Type

h1 Block

h2 Block

p Block

img Block

form Block

a Inline

input Inline

label Inline

br


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">


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>


How to code an HTML comment 

How to code a character entity for a space <td> </td>


The primary HTML5 semantic elements

header

section

article

nav

aside

figure

footer


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>


The page displayed in a web browser


The div and span elements

div

span


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>


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>


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


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


The sequence in which styles are applied

Styles from an external style sheet

Embedded styles

Inline styles


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


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.


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>


Three rule sets with type selectors body {


width: 400px;

margin: 1em auto;

}

section {

border: 2px solid black;

padding: 1em;

}

p {

margin: .25em 0 .25em 3em;

}


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;

}


The elements displayed in a browser


Some of the styles in the external style sheet for the Future Value application

/* The styles for the elements */

body {


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;


}

label {

float: left;

width: 10em;

}


Some of the styles for the Future Value app (cont.) /* the styles for classes */

.entry {

margin-left: 1em;


width: 10em;

}

/* The styles for the server controls */

#ddlMonthlyInvestment {

width: 10.5em;

}

#lblFutureValue {

font-weight: bold;

margin-left: 1em;

}


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


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.


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;

}

Documents

and CSS3 with ASP.NET How to use HTML5 applications · x Use the HTML5 features that are supported by all of the modern browsers, especially the HTML5 semantic elements. But use the