Slide 1 - webdev-bit
advertisement
Chapter 5
A crash course in HTML
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 1
Objectives
Applied
Use inline styles or the Span element to format all or part of an
element.
Use the Visual Studio features to create a table, and modify the
HTML code that’s generated so the table looks the way you want
it to.
Given an external style sheet, apply its styles to the forms of an
application.
Given the specifications for the styles used by an application,
create an external style sheet that defines those styles.
Use the Apply Styles and CSS Properties windows to apply and
work with any of the styles that are available to a form.
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 2
Objectives (continued)
Knowledge
Describe the use of the CodeFile attribute in the Page directive for
an HTML document.
Describe the use of any of these elements: H1, H2, H3, P, Br, B, I,
or U.
Describe the use of the Anchor (A) element.
Describe the difference between using an inline style for an
element and using an inline style within a Span element.
Describe the difference between using inline styles and using an
internal or external style sheet.
Describe the use of regular classes, pseudo-classes, and dynamic
pseudo-classes in internal or external style sheets.
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 3
Objectives (continued)
Describe the use of the Table, Tr, and Td elements as well as
some of the common attributes of each of these elements.
Explain why tables are commonly used to control the layout of
web pages.
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 4
Three HTML elements with start tags, content,
and end tags
<title>Murach's Halloween Superstore</title>
<h1>About Us</h1>
<b>Choose a product:</b>
Two elements that have no content or end tags
A red line appears below.<br /><Style="color:Red" />
A comment
<!-- This text will be ignored. -->
A line that has three consecutive spaces
Last name:&nbsp;&nbsp;&nbsp;Wilson
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 5
A web page in Source view with a completion list
displayed
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 6
Some common web server controls and how
they’re rendered
Name
Label
TextBox
Button
ImageButton
LinkButton
HyperLink
ListBox
DropDownList
Image
Murach’s ASP.NET 3.5/C#, C5
HTML element
<span>
<input>
<input>
<input>
<a>
<a>
<select>
<select>
<img>
© 2008, Mike Murach & Associates, Inc.
Slide 7
The aspx code for four web server controls
<asp:Label ID="lblName" runat="server" Font-Bold="True"
Font-Size="Larger"
Text="Murach Books"></asp:Label>
<asp:TextBox ID="txtSearch" runat="server"
Width="248px"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server"
Text="Search" />
<asp:ListBox ID="lstBooks" runat="server">
<asp:ListItem Value="ACS8">
ASP.NET 3.5 with C# 2008</asp:ListItem>
<asp:ListItem Value="CS08">
C# 2008</asp:ListItem>
<asp:ListItem Value="SQL5">
SQL Server 2005</asp:ListItem>
</asp:ListBox>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 8
How the four web server controls are rendered in
HTML
<span id="lblName" style="font-size:Larger;fontweight:bold;">Murach Books</span>
<input name="txtSearch" type="text" id="txtSearch"
style="width:248px;"/>
<input type="submit" name="btnSearch" value="Search"
id="btnSearch" />
<select size="4" name="lstBooks" id="lstBooks">
<option value="ACS8">
ASP.NET 3.5 with C# 2008</option>
<option value="CS08">
C# 2008</option>
<option value="SQL5">
SQL Server 2005</option>
</select>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 9
The HTML generated for a new ASP.NET web
page
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Cart.aspx.cs" Inherits="Cart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 10
A typical Page directive
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Cart.aspx.cs" Inherits="Cart" %>
Common attributes of the Page directive
Language
AutoEventWireup
CodeFile
Inherits
Trace
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 11
A typical Doctype declaration
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 12
Basic HTML formatting elements
Element
H1
H2
H3
Start tag
<h1>
<h2>
<h3>
End tag
</h1>
</h2>
</h3>
P
Br
<p>
<br />
</p>
Standard paragraph
Line break
B
I
<b>
<i>
</b>
</i>
Bold
Italic
Murach’s ASP.NET 3.5/C#, C5
Description
Level-1 heading
Level-2 heading
Level-3 heading
© 2008, Mike Murach & Associates, Inc.
Slide 13
HTML that uses some basic formatting elements
<h2>The P element</h2>
<p>The P element marks a standard paragraph. Note that
the web browser determines where the individual lines
within the paragraph will break.</p>
<h2>The Br element</h2>
In contrast, the Br element lets you force a<br />
line break wherever you wish.
<h2>The B and I elements</h2>
This is <b>bold</b>. This is <i>italic</i>.
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 14
The HTML viewed in a browser window
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 15
Examples of Anchor elements
An anchor element that uses a relative URL
<a href="Login/Register.aspx">Register as a new user</a>
An anchor element that uses an absolute URL
<a href="http://www.murach.com/Index.aspx">View Murach's
web site</a>
The Anchor elements viewed in a browser
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 16
Common properties of the Style attribute
Font-family
Font-size
Font-weight
Background-color
Color
Text-align
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 17
HTML that uses inline styles
<h1 style="font-weight: bold; font-size: 16pt;
color: White; font-family: Arial, Sans-Serif;
background-color: Blue">The Halloween Store</h1>
<h2 style="font-size: 14pt; font-style: italic;
font-family: Times New Roman, Serif">
The Halloween Store</h2>
<p style="font-size: 10pt; font-family: Courier New,
Monospace; text-align: left">
This text is left-justified and mono-spaced.</p>
<p style="font-size: 10pt; font-family: Courier New,
Monospace; text-align: center">
This text is centered and mono-spaced.</p>
<p style="font-size: 10pt; font-family: Courier New,
Monospace; text-align: right">
This text is right-justified and mono-spaced.</p>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 18
The HTML viewed in a browser window
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 19
Examples of Span elements
Formatting a portion of literal text
This is the <span style="background-color: Blue;
color: White">selected</span> item.
Formatting text that’s displayed for an Anchor element
<a href="inlinestyles.aspx">Click here for a list of
<span style="font-weight: bold; font-size: large;
color: Red">Drastically Reduced</span> items</a>
A Span element that uses an automatically-generated
style class to format text
<span class="style1">401K Future Value Calculator</span>
The elements viewed in a browser
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 20
An HTML document that uses internal styles
<head runat="server">
<title>Chapter 5: Internal Style Sheet</title>
<style type="text/css">
body {font-family: Times New Roman, Serif;
font-size: 11 pt;}
h1 {font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px; font-weight: bold;
color: Blue;}
.Title {font-family: Arial, Sans-Serif;
font-size: 30pt; color: Blue;
font-weight: bold; font-style: italic;}
</style>
</head>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 21
An HTML document that uses internal styles
(cont.)
<body>
<form id="form1" runat="server">
<div>
<p class="Title">Halloween Superstore</p>
<h1>Halloween Supplies for the Discerning
Haunter</h1>
This is standard body text.
</div>
</form>
</body>
The elements viewed in a browser
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 22
How to use regular classes
A style rule that can be used only with the specified
element
p.ProductList {font-size: x-large; font-family: Arial,
Sans-Serif}
An element that uses the style rule
<p class="ProductList">Ugly Rat</p>
A style rule for a generic class
ProductList {font-size: x-large; font-family: Arial,
Sans-Serif}
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 23
Pseudo-classes for the Anchor element
Tag
<a>
Class
Link
<a>
Visited
Description
The style that’s applied to links that haven’t
been visited by the user.
The style that’s applied to links that have
been visited by the user.
Dynamic pseudo-classes
Class
Hover
Active
Focus
Description
The style that’s applied while the user points to an element
with a pointing device (usually the mouse).
The style that’s applied while an element is being activated
by the user.
The style that’s applied while an element has the focus.
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 24
Style rules that include a pseudo-class and a
dynamic pseudo-class
a {font-family: Arial, Sans-Serif; font-size: 9pt}
a:visited {color: Blue}
a:hover {font-weight: bold}
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 25
The New Style dialog box
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 26
The code for the Murach.css style sheet
body {font-family: 'Times New Roman' , Times, serif;
font-size: 11pt;}
.H1 {font-family: Arial, Helvetica, sans-serif;
font-size: 30pt;
font-weight: bold; color: #0000FF;}
.H2 {font-family: Arial, Helvetica, sans-serif;
font-size: 14pt; color: #0000FF;}
.H3 {font-family: Arial, Helvetica, sans-serif;
font-size: 12pt; color: #0000FF;}
a {font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;}
a:hover {font-weight: bold}
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 27
The code in an HTML document that links to the
style sheet
<head>
<title>Chapter 5: Shopping Cart</title>
<link href="Murach.css" rel="stylesheet"
type="text/css" />
</head>
Attributes of the Link element
Attribute
Href
Rel
Type
Description
The URL of the document to be linked. For a style
sheet, the document must have a file extension of css.
The relationship between the Link element and the
Href URL.
The MIME type of the Link element. Required only
for email applications.
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 28
An external style sheet in Visual Studio
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 29
The Apply Styles window
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 30
The CSS Properties window
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 31
The HTML elements for working with tables
Element
Table
Start tag End tag
<table>
</table>
Tr
<tr>
</tr>
Td
<td>
</td>
Murach’s ASP.NET 3.5/C#, C5
Description
Defines the start and end of a
table.
Defines the start and end of a
row.
Defines the start and end of a
cell within a row.
© 2008, Mike Murach & Associates, Inc.
Slide 32
The HTML code for a table
<p>Please enter the following information:</p>
<table cellspacing="5" cellpadding="5" border="1">
<tr>
<td align="right">First name:</td>
<td><asp:TextBox id="txtFirstName"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td align="right">Last name:</td>
<td><asp:TextBox id="txtLastName"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td align="right">Email address:</td>
<td><asp:TextBox id="txtEmail"
runat="server"></asp:TextBox></td>
</tr>
</table>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 33
The table displayed in a browser
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 34
Common attributes of the Table element
Border
Cellspacing
Cellpadding
Common attribute of the Tr element
Valign
Common attributes of the Td element
Align
Colspan
Rowspan
Valign
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 35
Common style properties for table elements
Height
Width
Background-color
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 36
A table that defines a simple page layout
<table style="width: 750px" border="0" cellspacing="0">
<tr style="height: 75px">
<td colspan="2" style="background-color: Gray">
Banner area
</td>
</tr>
<tr style="height: 400px">
<td style="width: 150px;
background-color: Silver" valign="top">
Navigation area
</td>
<td style="width: 600px; background-color: White"
valign="top">
Content area
</td>
</tr>
</table>
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 37
The table viewed in a browser
Murach’s ASP.NET 3.5/C#, C5
© 2008, Mike Murach & Associates, Inc.
Slide 38
