About the Presentations

1
About the Presentations

• The presentations cover the objectives found in
  the opening of each chapter.
• All chapter objectives are listed in the
  beginning of each presentation.
• You may customize the presentations to fit your
  class needs.
• Some figures from the chapters are included. A
  complete set of images from the book can be found
  on the Instructor Resources disc.

2
ASP.NET Programming with C and SQL Server
First Edition

• Chapter 1
• Introduction to Web Development

3
Objectives

• In this chapter, you will
• Study the history of the World Wide Web
• Learn about Web development
• Learn about Microsoft Visual Web Developer 2008
  Express Edition
• Work with well-formed Web pages

4
Introduction to Web Development

• Original purpose of the World Wide Web was to
  locate and display information
• With increasing commercial usage came demand for
  more interactive and visually appealing Web sites
• Initial response was JavaScript, but it has some
  disadvantages
• Runs on the clients system
• Works only within a Web browser

5
Introduction to Web Development (contd.)

• For a fully interactive Web site that accesses a
  database on a server, you must use a server-side
  scripting tool such as ASP.NET
• Combined with C, ASP.NET is one of todays most
  popular Web site development technologies

6
Introduction to the World Wide Web

• Internet a vast network that connects computers
  all over the world
• Originally developed in the 1960s by the Advanced
  Research Projects Agency (ARPA) of the U.S. Dept.
  of Defense (later known as DARPA)
• Goal to interconnect the main computer systems
  of various universities and research institutions
  funded by ARPA
• First implementation was called ARPANET
• Access was restricted to academic researchers,
  scientists, and the military

7
Introduction to the World Wide Web (contd.)

• At the end of the 1980s, commercial access to the
  Internet was granted
• World Wide Web (or Web) created by Tim
  Berners-Lee in 1990-91 at the European Laboratory
  for Particle Physics (CERN) in Geneva,
  Switzerland
• Purpose to easily access cross-referenced
  documents, through a method called hypertext
  linking
• Hypertext link (hyperlink) contains a reference
  to a Web page that can be accessed by a click

8
Introduction to the World Wide Web (contd.)

• Web page a document on the Web
• Uniform Resource Locator (URL) a unique address
  on the Web
• Uniform Resource Identifier (URI) a generic term
  for many types of names and addresses on the Web
• Web site refers to a location on the Internet of
  Web pages and related files that belong to a
  company, organization, or individual
• Web browser a program for displaying Web pages

9
Introduction to the World Wide Web (contd.)

• Request when the users browser asks a Web
  server for a Web page
• Web server a computer that delivers Web pages
• Response what the Web server returns to the Web
  browser

10
Understanding Web Browsers

• Microsoft Internet Explorer currently the most
  popular browser on the market
• NCSA Mosaic first browser, created in 1993
• Netscape Navigator created in 1994, and
  controlled 75 of the market until Internet
  Explorer was released, starting the browser
  wars
• Incompatibilities among browsers for DHTML
  elements resulted in creation of a set of
  industry standards
• World Wide Web Consortium (W3C) oversees
  development of standards for the Web

11
Understanding Web Browsers (contd.)

• A benefit of the browser wars was rapid
  development and adoption of advanced Web page
  standards, including JavaScript, CSS, and DHTML
• Mozilla Firefox a new open source software
  browser that has gained significant market share
• Open source software for which the source code
  can be freely used and modified

12
Using HTML

• Hypertext Markup Language (HTML) a markup
  language used to create Web pages (HTML pages)
• Markup language a set of characters or symbols
  that define a documents logical structure how
  it should be printed or displayed
• HTML is based on Standard Generalized Markup
  Language (SGML)
• HTML documents are text documents that contain
  formatting instructions called tags

13
Basic HTML Syntax

• HTML tags determine how data is displayed on a
  Web page
• Are enclosed in brackets (lt gt)
• Usually occur as an opening and closing pair of
  tags
• Closing tag starts with a / to define it as a
  closing tag
• Data may be placed within the tag pair
• Element a tag pair and any data it contains
• Content the information contained within an
  opening and closing tag
• Empty element an element that does not require a
  closing tag

14
Basic HTML Syntax (contd.)
Table 1-1 Common HTML elements
15
Basic HTML Syntax (contd.)

• Root element contains all other elements in a
  document
• lthtmlgt element the root element for an HTML
  document
• ltheadgt element contains information used by the
  browser
• Occurs at the beginning of an HTML document after
  the opening lthtmlgt tag
• lttitlegt element contains text that appears in
  the browsers title bar
• ltheadgt element must contain a lttitlegt element

16
Basic HTML Syntax (contd.)

• Document head the ltheadgt element and its
  contents
• ltbodygt element contains the document body
• Parsing (or rendering) the process by which a
  Web browser assembles and formats an HTML
  document
• HTML is not case sensitive, but it is recommended
  to use lowercase letters for all elements
• Attributes parameters used to configure some
  HTML elements

17
Basic HTML Syntax (contd.)

• Attributes are placed in the opening tag, prior
  to the closing bracket
• Syntax attribute value
• Only recognized HTML elements and text are
  processed by a browser
• Nonprinting characters such as tabs and line
  breaks are ignored
• ltpgt element creates a paragraph with a line
  break before and after its contents
• ltbrgt element creates a line break

18
Creating a Web Page

• HTML documents are text files
• Can be created with any text editor, such as
  Notepad or WordPad
• Cannot view the final result until the document
  is opened in a browser
• HTML editor an application designed for creating
  HTML documents
• Examples Macromedia Dreamweaver, Microsoft
  FrontPage

19
Web Communication Protocols

• Hypertext Transfer Protocol (HTTP) manages the
  hypertext links used to navigate the Web
• Host a computer system that is being accessed by
  a remote computer
• Domain name a unique address for identifying a
  Web server on the Internet
• Domain identifier last part of a domain name
  that identifies the type of organization
• URL may also contain directory and file names

20
Web Communication Protocols (contd.)
Figure 1-3 Sample URL
21
Web Communication Protocols (contd.)

• Transmission Control Protocol/Internet Protocol
  (TCP/IP) a large collection of communication
  protocols used on the Internet
• HTTP is a component of TCP/IP
• Hypertext Transfer Protocol Secure (HTTPS)
  provides secure Internet connections

22
Introduction to Web Page Development

• Web page design (Web design) refers to the
  visual design and creation of documents on the
  Web
• Quality Web design plays an important role in
  attracting first-time and repeat visitors to a
  Web site
• Web page authoring (Web authoring) refers to the
  creation and assembly of tags, attributes, and
  data that make up a Web page
• Web development (Web programming) refers to the
  design of software applications for a Web site

23
Understanding Client/Server Architecture

• Server usually refers to some sort of database
  from which a client requests information
• Two-tier system a system consisting of a client
  and a server
• Client (front-end)
• Handles the presentation of the interface to the
  user
• Receives, formats, and presents the results
  returned from the server
• Server (back-end) performs the heavy processing
  such as calculations

24
Understanding Client/Server Architecture (contd.)
Figure 1-4 The design of a two-tier client/server
system
25
Understanding Client/Server Architecture (contd.)

• Three-tier (multitier) client/server system
  contains three distinct pieces
• Client tier the Web browser
• Processing tier handles the interaction between
  the Web browser client and the data storage tier
• Data storage tier stores data in a database and
  handles requests from the processing tier

26
Understanding Client/Server Architecture (contd.)
Figure 1.5 The design of a three-tier
client/server system
27
Client-Side Scripting and JavaScript

• Static Web pages pages that cannot change after
  the browser renders them
• JavaScript client-side scripting language used
  to develop interactive Web pages
• Client-side scripting refers to a scripting
  language that runs on the users browser (on the
  client tier)
• Scripting language refers to any type of
  language capable of programmatically controlling
  a Web page

28
Client-Side Scripting and JavaScript (contd.)

• Scripting engine part of the browser that
  executes scripting language code
• Interpreter any program that executes scripting
  language code
• Scripting host a Web browser that contains a
  scripting engine
• JavaScript allows creation of
• Web pages with interactive games
• Dynamic modification of Web pages after rendering
• Visual effects such as animation
• Control of the Web browser window

29
Client-Side Scripting and JavaScript (contd.)

• For security reasons, client-side JavaScript
• Cannot be used outside of a Web browser
• Does not allow file manipulation
• Does not include mechanisms for creating network
  connections or accessing databases
• Cannot run system commands or execute programs on
  a client
• Cannot interact directly with Web servers
  operating at the processing tier

30
Server-Side Scripting and ASP.NET

• Server-side scripting a technology that
  processes a request by executing a script on a
  server
• Primarily used for communication between the
  client tier and the data storage tier
• Common uses include shopping carts, search
  engines, message boards, Web-based e-mail, blogs,
  games, etc.

31
Server-Side Scripting and ASP.NET (contd.)?
Figure 1.6 How a Web server processes a
server-side script
32
Server-Side Scripting and ASP.NET (contd.)?

• Active Server Pages (ASP).NET server-side
  scripting technology part of Visual Web
  Developer
• Can use two languages with ASP.NET Visual Basic
  or Visual C
• C an object-oriented programming language based
  on the C programming language
• Object-oriented programming (OOP) refers to the
  creation of reusable software objects that can be
  incorporated into other programs
• .NET Framework Microsoft platform for developing
  Web applications

33
Should You Use Client-Side or Server-Side
Scripting?

• Use client-side scripting for
• Controlling the Web browser
• Input data validation
• Light processing
• Use server-side scripting for
• Accessing a database
• Performing intensive calculations
• Using data storage
• Web application program that runs on a server
  but is accessed by clients through a Web page on
  a browser

34
Introduction to Microsoft Visual Studio 2008

• Visual Studio a suite of development tools
  including Visual C, Visual C, Visual Basic,
  and Visual Web Developer
• Express Editions free but limited editions of
  the tools in Visual Studio

35
Installing Microsoft Visual Web Developer 2008
Express Edition

• Visual Developer can be used to create
• ASP.Net Web sites
• HTML pages
• Cascading Style Sheets
• XML files
• JavaScript code
• Other types of files used on a Web site

36
Managing Web Sites in Visual Web Developer

• To create a new Web site, use File menu New Web
  Site, then select the type from the templates
• ASP.NET Web site
• ASP.NET Web service
• Empty Web site
• WCF (Windows Communication Foundation) Web
  service

37
Managing Web Sites in Visual Web Developer

• To add a new item to a Web site, use Website menu
  Add New Item
• Select item type from the list of installed
  templates
• To add an existing item, use Website menu Add
  Existing Item

38
Figure 1.7 Add New Item dialog box
39
Managing Web Sites in Visual Web Developer
(contd.)?

• Web sites project settings are stored in two
  files
• Visual Studio Solution file (.sln) contains
  settings required by the project
• Solution User Options file (.suo) contains
  customization options for the project
• These files are stored in the project folder

40
Using the Visual Studio Integrated Development
Environment (IDE)?

• Integrated development environment (IDE) the
  Visual Studio workspace in which you create
  projects
• Project the program you are writing (or the Web
  site you are developing)
• Solution can contain multiple projects
• Start Page contains links to recent projects,
  tutorials, developer information, and recent news
  about Visual Web Developer

41
Figure 1.8 IDE Start Page
42
Using the Visual Studio Integrated Development
Environment (contd.)?

• Solution Explorer window used to manage the
  files associated with the Web site
• Provides a hierarchical list of the project files
• Code Editor used to edit programming code
• Includes statement completion IntelliSense
  technology to automate tasks
• Text Editor used to edit text that is not
  associated with a programming language
• CSS Editor used to edit CSS files

43
Figure 1.9 Solution Explorer window for the
Cessna project
44
Figure 1.10 Statement completion in the Code
Editor
45
Using the Visual Studio Integrated Development
Environment (contd.)

• Properties window used to change properties,
  attributes, and other settings associated with a
  project
• Contains two columns property column and value
  column
• Certain types of windows in the IDE can be
  floating or dockable
• Right-click the windows title bar to change
  between floating and dockable

46
Figure 1.11 Properties of the ltformgt tag
displayed in the Properties window
47
Figure 1.12 Solution Explorer window with its
dockable property turned on
48
Figure 1.13 Solution Explorer window with its
floating property turned on
49
Building and Starting a Web Site

• Source code original programming code
• Compile to process and assemble the source code
  into an executable format
• Use Build menu to compile source code
• Build page compiles an individual file
• Build Web Site compiles all source files
• Visual Web Developer automatically saves changes
  to all open items during the build process

50
Building and Starting a Web Site (contd.)

• Output window displays status messages for
  various IDE features, such as build progress
• Use View menu Output to display the Output
  window
• Error List window lists any source file errors
  found during the build process
• Use View menu Error List to display this window
• Compiler error messages show any syntax errors
  in a source file
• Warning messages occur for potential problems

51
Figure 1.14 Output window after building the
Cessna Web site
Figure 1.15 Error List window displaying errors
found in ASP.NET source file
52
Using the ASP.NET Development Server

• ASP.NET Development Server basic Web server that
  can be used to test a Web site on your local
  computer
• Designed to run under localhost, the name used by
  a computer to refer to itself
• Use Debug menu Start Without Debugging
• Port represents the endpoint of a connection
  between a client and a server
• Port 80 is reserved for HTTP communications

53
Working with Well-Formed Web Pages

• Current version of HTML is 4.01, released in 1999
• Extensible Hypertext Markup Language (XHTML)
  replaced HTML for Web pages
• Supports devices other than traditional Web
  browsers
• User agent an application capable of retrieving
  and processing HTML and XHTML documents
• Includes mobile phones, PDAs, browsers, search
  engine crawlers, etc.

54
XHTML Document Type Declarations (DTDs)

• Well-formed document one that conforms to the
  rules and regulations of XHTML
• Must include a lt!DOCTYPEgt declaration as the
  first line of an XHTML document
• Document type declaration (DTD) defines the
  elements and attributes that can be used in a
  document
• Deprecated term for elements and attributes that
  are considered to be obsolete

55
XHTML Document Type Declarations (contd.)
Table 1.2 HTML elements that are deprecated in
XHTML 1.0
56
XHTML Document Type Declarations (contd.)

• Three types of DTDs for XHTML documents
• Transitional DTD allows you to use deprecated
  style elements
• Frameset DTD identical to transitional DTD, but
  also includes the ltframesetgt and ltframegt elements
• Strict DTD eliminates elements that were
  deprecated in the transitional and frameset DTDs

57
Writing Well-Formed Documents

• A well-formed document
• Must include lt!DOCTYPEgt declaration and lthtmlgt,
  ltheadgt, and ltbodygt elements
• Must use lthtmlgt as the root element
• Is case sensitive
• Must have closing tags for all XHTML elements
• Must close all empty elements with a space and
  slash before the closing bracket
• Must properly nest XHTML elements (an element
  must be totally contained within another element)

58
Using Phrase Elements

• XHTML uses two types of inline elements for
  formatting text
• Formatting elements provide specific
  instructions about how their content should be
  displayed
• Phrase elements primarily identify or describe
  their content
• Recommended to use phrase elements to allow
  compatibility with different user agents

59
Using Phrase Elements (contd.)
Table 1.3 Phrase elements
60
Working with Cascading Style Sheets (CSS)

• Style a single piece of CSS formatting
  information
• CSS information can be added directly to
  documents or stored in separate documents shared
  by multiple Web pages
• CSS design and formatting techniques are
  independent of the content of a Web page
• Style declaration creates a CSS style consists
  of
• Property refers to a specific CSS style
• Value determines the styles visual
  characteristics

61
Working with Cascading Style Sheets (contd.)

• Three locations for style declarations
• Inline styles add style information to an
  individual HTML element, using a style attribute
• Internal style sheets add style information to
  an entire document, using ltstylegt elements within
  the document head
• Selector the element to which a specific style
  rule applies
• External style sheets separate text documents
  with style declarations that are used by multiple
  Web documents in a Web site
• Have a file extension of .css

62
Validating Web Pages

• Validating parser program that checks whether an
  XHTML document is well formed
• Validation process of verifying that an XHTML
  document is well formed and conforms to the
  specified DTD
• W3C Markup Validation Service free service to
  validate both HTML and XHMTL
• Visual Web Developer automatically validates Web
  pages

63
Summary

• World Wide Web created by Tim Berners-Lee in
  1990-91 at CERN
• W3C established in 1994 at MIT to develop Web
  standards
• Two-tier system consists of client and server
• Three-tier system consists of client, processing,
  and data storage tiers
• JavaScript is a client-side scripting language
• Active Server Pages (ASP).Net is a server-side
  scripting technology

64
Summary (contd.)?

• Visual Studio is an integrated development
  environment (IDE) including Visual C, Visual
  C, Visual Basic, and Visual Web Developer
• Visual Web Developer includes the ASP.NET
  Development Server for testing Web sites
• XHMTL is the current standard markup language for
  Web pages
• A document type definition (DTD) defines the
  elements and attributes that can be used in a
  document

65
Summary (contd.)?

• Use CSS to design and format the display of Web
  pages
• A validating parser is a program that checks
  whether an XHTML document is well formed