HTML Applications with Visual Studio .NET - PowerPoint PPT Presentation


PPT – HTML Applications with Visual Studio .NET PowerPoint presentation | free to download - id: 9e5f9-NjY0N


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

HTML Applications with Visual Studio .NET


ASP server label control (properties are consistent with Visual Basic .NET controls) ... Make sure to verify that Visual Basic Projects is selected in the ' ... – PowerPoint PPT presentation

Number of Views:194
Avg rating:3.0/5.0
Slides: 93
Provided by: Kathlee


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: HTML Applications with Visual Studio .NET

HTML Applications with Visual Studio .NET

Static and Dynamic Web Applications
  • Static Web pages
  • Created with HTML controlsrenders exactly the
    same every time the page is displayed
  • Dynamic Web pages
  • Allow users to interact with the Web page
  • Changes appearance or content
  • One tool for creating dynamic content is
    Microsofts Active Server Pages .NET (ASP.NET)
  • Used to build server-side Web applications (code
    statements that build the page run on the server)

Processing a Request for a Web Page
  • Main ASP.NET applications
  • Web Forms
  • Used to process forms and develop cross-browser
  • Uses .aspx file extension
  • Web Services
  • Other applications can interact with your program
  • Uses .asmx file extension

Web Forms
  • ASP.NET pages within an ASP.NET application
  • Identified with file extension .aspx
  • The Web Form consists of two (2) components
  • The HTML template
  • The actual web page that contains the design
    layout, content and controls
  • A collection of code that commonly is located
    behind the Web Form
  • The code behind the page
  • Equivalent to a Form in Visual Basic .NET

Web Services
  • Exposes part of a program over the Internet
  • Web Service file has .asmx file extension
  • Uses open standards so it is supported across
    applications and platforms
  • Used to create business-to-business applications
  • Makes it possible to share data with other

HTML Server Controls
  • Similar to (and related to) HTML controls except
    that they are processed by the web server
  • The attribute and value runat"server" transforms
    an HTML control into an HTML Server control
  • HTML control
  • ltinput type"text"gt
  • HTML Server control
  • ltinput type"text" runat"server" /gt
  • Note All XHTML controls must have a closing
    tag, if not, the tag must end with /gt

ASP.NET Server Controls
  • When they execute, they create HTML code
  • Similar to Visual Basic .NET controls
  • ASP.NET controls usually identified with prefix
    asp followed by the name of the control, i.e.
  • ltaspDropDownListgt
  • Types of ASP.NET Server Controls
  • ASP.NET Form Controls (Web controls)
  • Data Validation Controls
  • User Controls
  • Mobile Controls (run on mobile devices)

HTML Server vs. ASP.NET Server Controls
  • ASP.NET form controls also have different
    properties than their HTML server control
  • HTML Server label control
  • Message1.InnerHTML "Product 1"
  • ASP server label control (properties are
    consistent with Visual Basic .NET controls)
  • Message2.Text "Product 2"

Server Controls within Visual Studio .NET
Browser Source Code
  • What is the Web server sending to the browser?
    (Look at the browsers source code for an ASP.NET
  • ASP.NET code is never sent to the browser
  • Instead the ASP.NET code runs on the web server
    and builds an HTML document
  • Only HTML tags, along with client-side scripts
    (i.e. JavaScript statements), are sent to the

The Code Behind the Page
  • Written in an ASP.NET-compatible language
  • The file extension is .vb if the code is written
    in Visual Basic .NET
  • Compiled code behind the page is the class
    definition for the page
  • When the application is built, the code is
    compiled into an executable file stored in the
    bin directory

The Code Behind the Page
Locating Your ASP.NET Application
  • Web Server is called Internet Information Server
  • c/Inetpub/wwwroot
  • This location maps to
  • http//localhost/
  • Applications are developed on a local Web server
  • The Web application is deployed to a production
    Web server on the Internet
  • Web application files can be transferred to a
    server using File Transfer Protocol (FTP)

The .NET Framework
  • An architectural model for creating programs that
    interface with the operating system and base
    class libraries
  • Contains a hierarchical set of Base Class
  • Base class libraries are code libraries that
    provide general functions

The .NET Framework
  • Base class libraries are organized into
  • The top namespace for all .NET classes is System
  • All Web Forms inherit the "System.Web.UI"
  • System.Web.UI contains classes for controls used
    on Web Forms
  • HTML Server controls
  • ASP.NET Server controls (Web controls)

The HTML Server controls
The ASP.NET Server controls
Registering ASP.NET with IIS
  • To develop ASP.NET applications, a web server
    such as Internet Information Server (IIS) must be
    installed on the computer
  • Even if the web server has previously been
    installed, ASP.NET still may need to be
    registered with IIS
  • From the command prompt, enter the following or
  • windowsDirectory\Microsoft.NET\Framework\versionNu
    mber\aspnet_regiis.exe -i

Visual Studio .NET User Interface (Page 1)
  • Integrated Development Environment (IDE)the
    shared development environment
  • Document windows (Edit and view documents)
  • Resource Tools
  • Solution Explorermanage project files and
  • Server Exploreraccess server public components
    and manage connections to databases

(No Transcript)
Visual Studio .NET User Interface (Page 2)
  • Resource Tools (continued)
  • Properties windowfor setting properties for
    objects, controls, and classes
  • Document Taballows switching easily between open
  • Toolboxcontains commonly used controls
  • Task windowcontains a to do list, i.e. errors
    that must be corrected before the application
    runs successfully

Creating a Web Application (Page 1)
  • A solution may contain pointers to many projects
  • Solution files are stored in a folder in the
    Visual Studio Projects folder
  • Project name is also the folder (directory) name
  • By default, project name is the solution name
    (one or more projects make up a solution)
  • Project files are stored in the same folder

Creating a Web Application (Page 2)
  • Any of the following may be the Web server name
  • Localhost
  • the machine name
  • IP address
  • Default Web site is http//localhost/ProjectName/
    as in http//localhost/Chapter2/

Creating a Web Application (Page 3)
  • To create an ASP.NET project
  • Select the File menu from the menu bar, the New
    command from the File menu and Project… from the
  • Make sure to verify that Visual Basic Projects is
    selected in the "Project Types" pane
  • Select the ASP.NET Web Application template
  • Name the solution by completing the "Location"
    following "localhost/", i.e. http//localhost/Chap
  • Click the ltOKgt button (may take a while to create)

The Solution Explorer Window
  • Contains folders, project files, and hidden files
  • Contains Reference folderlisting of base class
    libraries and namespaces
  • Contains a bin directorystores the compiled
  • Compiled application is named after the project
    name with the file extension .dll, i.e.

The Solution Explorer Window
Adding an Existing Item
  • Existing items might include Web Forms, HTML
    Pages, Web User Controls, image files, etc.
  • Before starting, be certain folder that the item
    will be inserted into is selected in the
    "Solution Explorer"
  • Select Project from the menu bar
  • Select Add Existing Item… from the Project menu
  • Browse to "Look in" folder
  • Select "Files of type" from drop-down list
  • Select files and click ltOpengt button the item(s)
    is/are added to specified folder in Solution

Adding an Existing Item
Chapter2 Project
  • Add all images from the Chapter02 download
  • Drill down to C\Course Technology\?????
  • Select "All Files" from Files of type dropdown
  • Select all files and click ltOpengt button

Adding a New Item
  • Before starting, be certain folder where new item
    will be inserted into is selected in Solution
  • Select Project from the menu bar
  • Select the command from Project menu depending
    upon type of item to be added, i.e.
  • Add Web Form…
  • Add Web User Control…
  • Add HTML Page…
  • Type filename (appropriate extension will be
  • Click ltOpengt button the new item(s) is/are added
    to the selected folder in Solution Explorer

Adding a New Item
The Toolbox
  • Provides access to commonly used controls
  • Organized as tabs including
  • HTML tabcontains the HTML controls
  • Web Forms tabcontains ASP.NET Server controls
  • Can be hidden and can slide out like several
    other windowsthe Auto Hide feature
  • Default mode for the Toolbox
  • Click the Auto Hide icon (push pin) to turn off

Properties Window
  • Set the properties for objects, controls, and
  • Properties can be updated
  • At design time
  • In the program code behind the page

Properties Window
HTML Controls (Page 1)
  • HTML is a markup language
  • lthr noshadegt
  • HTML standards are set by World Wide Web
    Consortium (W3C)
  • XHTML is the current version it is "XML
  • Requires beginning and closing tags
  • If there is no closing tag, use "lttagName /gt" ,
  • lthr noshade /gt

HTML Controls (Page 2)
  • HTML Designer (two tabs near bottom of Web Form)
  • Design viewa graphical user interface (GUI)
  • HTML viewHTML code editor
  • The ms_positioning attribute of the ltbodygt tag
  • GridLayoutabsolute position objects on the page
  • FlowLayoutposition elements in top-down format
  • IntelliSensea drop-down list of commands related
    to the command that the developer is typing

Turning Off Auto Formatting
  • To keep ASP.NET from reformatting the HTML code
    every time an application is saved or when
    switching from Design to HTML view
  • Select Tools from menu bar
  • Select Options… from Tools menu
  • Click Text Editor in Options dialog window
  • Select HTML/XML in Text Editor folder
  • Select Format command from HTML/XML folder
  • Apply Automatic Formattingturn off both "When
    saving document" and "When switching from Design
    to HTML/XML view"

IntelliSense (in HTML View)
feedback.htm (Page 1)
  • In HTML view, modify the following in the
    Properties window
  • Title Tara Store
  • Keywords Irish Gifts, Ireland, Tara Store
  • In Design view, drag "header.jpg" file from
    "images" folder in Solution Explorer to
    upper-left corner of the Form and modify in the
    Properties window
  • Alt Tara Store Banner

feedback.htm (Page 2)
  • In HTML view, add the following tag after ltimg …
  • lthrgt
  • Modify the position of the lthrgt tag by updating
    the Style property (click Build (…) button in
    Properties window …
  • Position tabPosition Mode Absolutely position
    Top 89 Left 0

feedback.htm (Page 3)
  • In Design view
  • Select Table from the menu bar
  • Select Insert from the Table menu
  • In the "Insert Table" dialog, set properties
  • Rows6 Columns1
  • Border0
  • PositionAbsolute
  • Left244 Top132

feedback.htm (Page 4)
  • Enter into the first row of the Table "Tara Store
    Feedback Form"
  • Select entire phrase and on the Formatting
  • Style Heading 2
  • Font Verdana
  • Size 4

feedback.htm (Page 5)
  • From the HTML tab in the Toolbox, drag a Label
    control into the second row of the Table
  • Select the Label (click twice but slowly) and
    enter the following
  • "Complete the form"
  • Then press ltShiftgt ltEntergt
  • "and click on the submit button"
  • Set properties
  • Class TSHeading

feedback.htm (Page 6)
  • From the HTML tab in the Toolbox, drag a Text
    Field control into the third row of the Table
  • Set properties
  • Class txtBox
  • ID Email
  • Size 30
  • Value Enter your e-mail address

feedback.htm (Page 7)
  • From the HTML tab in the Toolbox, drag a Text
    Area control into the fourth row of the Table
  • Set properties
  • Class txtBox
  • Cols 25
  • ID comments
  • Rows 5
  • In HTML view after (on the same line) the opening
    lttextarea …gt tag, enter the following
  • "Enter your comments"

feedback.htm (Page 8)
  • In Design view from the HTML tab in the Toolbox,
    drag a Submit Button control into the fifth row
    of the Table
  • Set properties
  • Class TSButton
  • ID btnSubmit
  • Value Send

feedback.htm (Page 9)
  • Type bulleted list (select from Formatting
    toolbar) into the last row of the Table as
  • E-mail us at
  • Visit us at
  • In HTML view, one at a time select inside each of
    the ltligt tags within the last row and set
  • Class TSLinks

Previewing the HTML Page
  • Preview page in both internal and external
  • Right-click mouse on white space of Web Form
    while in "Design" view to see page in Visual
    Studio .NET's internal browser
  • Type the page's local URL to view in an external
    browser such as MS Internet Explorer, i.e.
  • http//localhost/Chapter2/feedback.htm
  • Note If you preview page by starting the
    application, the default start page will appear
    in the browser. The start page can be changed

Go to feedback.htm
Creating Cascading Style Sheets (CSS)
  • Stores information on how to present the site
  • Cascading style sheets allow content to be
    separated from formatting
  • W3C also sets the standards for CSS
  • Inconsistency exists among the way various
    browsers and versions implement CSS
  • ASP.NET's Style Builder is a graphical user
    interface for building CSS files

Go to feedback.htm (w/Styles.css)
CSS Overview
  • A style rule is the information that is applied
    to a single HTML tag, or a group of tags
  • Name and value of the style is stored
  • Syntax for the rules vary
  • Inline rules apply to a single tag
  • Embedded rules apply to all elements within a
    single web page
  • External rules apply to all elements within
    multiple web pages

Inline Style Sheets
  • Placed inside the tag
  • Use the keyword style as an attribute with a tag
  • Join together each name and value pair with a
    colon separate pairs with semicolons
  • Format
  • lttagname style"property1value1property2value2"
  • Content goes here
  • lt/tagnamegt
  • Example
  • lth1 style"colorgreen"gtWelcome to Tara

Embedded Style Sheets (Page 1)
  • Placed in the ltheadinggt section
  • Style content placed within ltstylegt…lt/stylegt tags
  • Separate the name and value elements with the
    assignment operator ()
  • Separate each style pair from other pairs with a
    semicolon ()
  • Style elements will apply to every matching tag
    in the ltbodygt of the web page

Embedded Style Sheets (Page 2)
  • Example
  • lthtmlgtltheadgtlttitlegtEmbedded Styleslt/titlegt
  • ltstylegt
  • h1 colorgreen
  • font-size12
  • lt/stylegt
  • lt/headgt
  • ltbodygt
  • lth1gtWelcome to Tara Store!lt/h1gt
  • lt/bodygtlt/htmlgt

External Style Sheets (Page 1)
  • The style sheet is created as a separate document
    file with the extension .css
  • The ltlinkgt tag tells the browser to look to the
    style sheet for formatted elements
  • Placed into each Web page that will use the style
  • This tag must be included in ltheadgt section of
    the page
  • Promotes uniform style to an entire Web site
  • Uses the same format found in the ltstylegt block
    for every element in each linked style sheet

External Style Sheets (Page 2)
  • The ltlinkgt tag attaches the style sheet to a web
  • Format
  • ltlink rel"stylesheet" href"filename.css"
  • relthe file is a CSS style sheet
  • typethe file is a text/css MIME type
  • hrefthe location of the file (relative or
    absolute URL)
  • Placed in the heading section
  • Example
  • ltlink rel"stylesheet" type"text/css"

External Style Sheets (Page 3)
  • In ASP.NET, the ltlinkgt tag inserted be dragging
    the style sheet file from Solution Explorer into
    the Web form, either in Design or HTML view

Comments in Cascading Style Sheets
  • The characters / / can be added to embedded or
    external stylesheets to insert internal
  • Example
  • / Styles.CSS
  • Created By Katie Kalata
  • Stylesheet is used to format main menu /
  • / Corporate logo /
  • H1 colorgreen
  • / Red heading /
  • H2 colorred
  • / Blue heading /
  • H3 colorblue

Cascading Style Sheet Rules and Hierarchy
  • CSS may contain conflicting styles when there are
    different rules for the same elements within
    inline, embedded and/or external style sheets
  • This is "cascading" component in the name
    cascading style sheets
  • In general
  • Inline takes precedence over embedded
  • Embedded takes precedence over external

Classes (Page 1)
  • A class name can be used to format a group of
    different tags or a subgroup of a specific tag
  • Prefix the name of the class with a period (.)
  • lthtmlgtltheadgtlttitlegtSample Embedded Style
  • ltstylegt
  • h1 colorgreen
  • .SelCat colorred
  • .BlueHead colorblue
  • lt/stylegt
  • lt/headgt

Classes (Page 2)
  • Apply the class with the keyword class and the
    class name as per the following example
  • ltbodygt
  • lth1 class"BlueHead"gtWelcome to Tara Store!lt/h1gt
  • lth2gtProduct Listinglt/h2gt
  • ltulgt
  • ltli class"SelCat"gtGiftslt/ligt
  • ltligtJewelrylt/ligt
  • ltligtChina Crystallt/ligt
  • ltligtClothinglt/ligt
  • ltligtBooks, Music, Videoslt/ligt
  • lt/ulgt

Classes (Page 3)
  • Both headings would appear in blue
  • lth3 class"BlueHead"gtAbout Tara Storelt/h3gt
  • ltulgt
  • ltligtWhats Newlt/ligt
  • ltligtCurrent Saleslt/ligt
  • ltligtLocationlt/ligt
  • ltligtContact Uslt/ligt
  • ltligtMembers Onlylt/ligt
  • lt/ulgt
  • lt/bodygtlt/htmlgt

CSS Editor
  • The VS.NET CSS editor implements Style Builder
  • Includes the IntelliSense feature
  • To create a new style sheet
  • Select Project from the menu bar
  • Select Add New Item… from the Project menu
  • Scroll down in the Templates window and select
    the "Style Sheet" icon
  • Type a Name for the new file (".css" extension
    automatically added) and click the ltOpengt button
  • Or double-click existing style sheet (i.e.
    "Styles.css") in the Solution Explorer window to
    open it

Creating a Cascading Style Sheet
Adding a Style Rule
  • To add a new style rule to the Style Builder
  • Select Styles from the menu bar
  • Select Add Style Rule… from the Styles menu
  • Select the Element radio button, select the tag
    to be formatted from the drop-down list, and
    click the ltOKgt button (a new empty rule is added
    to end of the list)
  • (To combine elements is to create a hierarchy
    select each item, then click the "gt" button),
  • UL LI

Creating a Cascading Style Sheet
Build the Style Rule
  • To build the new style rule
  • Click anywhere within an existing style rule
  • Select Styles from the menu bar
  • Select Build Style… from the Styles menu
  • The Style Builder window lists on tabs in left
    column various formatting types (based on which
    element(s) are being formatted) select the one
    to be edited
  • Modify all the desired formatting attributes
  • Click the ltOKgt button and the rules are added to
    the style sheet for that element

Creating a Cascading Style Sheet
Creating a Cascading Style Sheet
Styles.css (Page 1)
  • Drag the "Styles.css" file from the Solution
    Explorer to the "feedback.htm" document
  • Select (click anywhere inside) style rule for H2
  • Font tab
  • ColorGreen
  • Add style rule for HR
  • Font tab
  • ColorGreen

Styles.css (Page 2)
  • Select style rule for UL LI
  • Font tab
  • ColorGreen
  • FamilyVerdana
  • SizeSpecific10
  • Lists tab
  • Custom Bullet"images/bullet.gif"

Styles.css (Page 3)
  • Add style rule for Table
  • Edges tab
  • StyleSolid Line
  • ColorGreen
  • Add style rule for TD
  • Text tab
  • HorizontalCentered

Styles.css (Page 4)
  • Add style rule for "Class name" .TSHeading
  • Font tab
  • Small capsSmall caps
  • SizeSpecific12
  • Add style rule for "Class name" .TSLinks
  • Font tab
  • ColorGreen
  • SizeSpecific10

Styles.css (Page 5)
  • Add style rule for "Class name" .txtBox
  • Font tab
  • BoldAbsoluteBold
  • ColorGreen
  • FamilyVerdana
  • SizeSpecific10
  • Edges tab
  • ColorGreen
  • StyleSolid Line

Styles.css (Page 6)
  • Add style rule for "Class name" .TSButtons
  • Font tab
  • BoldAbsoluteBold
  • ColorWhite
  • FamilyVerdana
  • SizeSpecific10
  • Small capsSmall caps
  • Background tab
  • ColorGreen
  • Edges tab
  • ColorYellow
  • StyleRidge

Go to feedback.htm (w/Styles.css)
The CSS SpecificationVersion 1
  • Located at

User Controls (Page 1)
  • User controls are separate content and
    programming code that can be reused within
    several web pages
  • Easier to maintain since modifying the file will
    cause all web pages in which it is used to be
  • Examples
  • Heading, footers, menus
  • Lists of records returned from a database
  • Commonly used forms
  • The file for a user control ends in ".ascx"
  • First line identifies the file using the keyword
  • May not have lthtmlgt, ltheadgt, ltbodygt or ltformgt tags

User Controls (Page 2)
  • Example
  • lt_at_ Control gt
  • ltselect idmonthsgt
  • ltoptiongtJanuarylt/optiongt
  • ltoptiongtFebruarylt/optiongt
  • ltoptiongtMarchlt/optiongt
  • ltoptiongtAprillt/optiongt
  • ltoptiongtMaylt/optiongt
  • ltoptiongtJunelt/optiongt
  • ltoptiongtJulylt/optiongt
  • ltoptiongtAugustlt/optiongt
  • ltoptiongtSeptemberlt/optiongt
  • ltoptiongtOctoberlt/optiongt
  • ltoptiongtNovemberlt/optiongt
  • ltoptiongtDecemberlt/optiongt
  • lt/selectgt

Creating a Web User Control
  • Select Project from the menu bar
  • Select Add Web User Control… from Project menu
  • The "Web User Control" icon will already be
    selected in Templates frame of "New Item" dialog
  • Type a Name for the new file
  • The extension ".ascx" will be added automatically
    when the file is created
  • Click the ltOpengt button

  • Drag "header.jpg" from images folder in Solution
    Explorer to upper-left corner of Form
  • Press ltEntergt key after "header" image so the
    next inserted element will be positioned below it
  • In HTML view, enter the following script
  • lt Response.Write("lth1 align 'center'gtWelcome
    to Tara Storelt/h1gt") gt
  • Drag a Label control from the "Web Forms" tab in
    the Toolbox to below the "header" image

Inserting VbScript into HTML
  • VbScript statements may be inserted into the HTML
    between the tags "lt" and "gt"
  • Format
  • lt Visual Basic Statement gt
  • Example
  • lt Response.Write("ltH1gtA headinglt/H1gt") gt

The Response.Write Method
  • A VbScript command that inserts HTML elements
    into the HTML code
  • Useful for inserting dynamic content
  • The HTML code may be a combination of code and
    text elements
  • Format
  • lt Response.Write("ContentString") gt
  • Example
  • lt Response.Write("ltH1gtA headinglt/H1gt") gt

header.ascxHTML View
  • Private Sub Page_Load( … ) Handles MyBase.Load
  • Label1.Text Now.ToLongDateString
  • End Sub

Inserting User Control into a Web Page (Page 1)
  • Register it in a web page with "_at_ Register"
  • Format
  • lt_at_ Register TagPrefix"Namespace"
    TagName"TagName" src"Ch2_Months.ascx" gt
  • TagPrefix is used to identify the user controls
  • TagName is the name of the control
  • src is the path and filename of the user control
  • Example
  • lt_at_ Register TagPrefix"Months"
    TagName"ListMonths" src"Ch2_Months.ascx" gt

Inserting User Control into a Web Page (Page 2)
  • Insert the control anywhere in the page
  • Can be reused any number of times within the page
  • Must provide a unique ID for each occurrence
  • Format
  • ltTagPrefixTagName id "TagID" runat
  • Example
  • ltMonthsListMonths id "ListMonths1" runat
  • Can be registered and inserted into Web document
    by dragging the User Control file from Solution

header.ascx Inserted into feedback.htm
  • In HTML view, register the User Control in a new
    "home.aspx" Web Form as follows
  • lt_at_ Register TagPrefix"Chapter2"
    TagName"MyHeading" src"header.ascx" gt
  • Insert the User Control after the ltformgt tag as
  • ltChapter2MyHeading id"MyHeading1"
  • Or drag User Control file from Solution Explorer
    into "home.aspx" in either Design or HTML view

home.aspx--HTML View
(No Transcript)