WebEnabled Decision Support Systems

1
Web-Enabled Decision Support Systems

• Web Introduction and Essential HTML

Prof. Name
name_at_email.com Position
[phone] University Name
2
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

3
Introduction

• Windows applications are practical for
  single-user personal computers and are effective,
  to a certain extent, for network solutions
• The era of the internet has taken network sharing
  to new heights
• Millions of users to share information on the
  World Wide Web (WWW)
• Windows applications can be upgraded or
  Web-enabled to access them over the internet
• In this chapter we introduce
• Various web terminologies
• Web interface language (HyperText Markup Language)

4
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

5
Information Sharing

• In the past, computers operated in complete
  isolation
• As more and more users relied on computers in
  their work, they increasingly felt the need to
  share information between machines
• Information sharing evolution
• Portable media storage devices
• Local area networking (LAN)
• Wide area networking (WAN)
• Internet

6
Internet and World Wide Web

• The internet is a network of networks that links
  computers all over the world
• Does not contain any data itself
• Simply a means of transporting information from
  one computer to another
• Services
• Electronic mail, file sharing, and the World Wide
  Web
• The World Wide Web (WWW) is a network of
  computers that communicate with each other
  through a communication standard called HyperText
  Transfer Protocol (HTTP)
• Employs the internet as its backbone for
  communication
• Services
• Retrieve files, read text, view images, listen to
  sound files, etc.

7
Web Browsers, Servers, and Pages

• A Web browser is a client software application
  that allows us to read Web pages on the Web
• Examples
• Internet Explorer, Netscape, Mozilla Firefox, and
  Opera
• A Web server is a piece of software that provides
  a service using which we can share information
  with other computers on the internet
• Examples
• Internet Information Server (IIS), Apache, and
  Tomcat
• Web applications are stored on the Web server in
  the form of Web pages
• Files written in a HyperText Markup Language
  (HTML)
• Extensions of .htm or .html

8
HTTP Cycle Request and Response

• The communication between a Web server and a Web
  client consists of a request and response cycle
• A client requests a Web page from a server using
  a Web browser
• Web address is Uniform Resource Locator (URL)
• The server responds with the requested file

The HTTP Request-Response Cycle
9
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

10
HyperText Markup Language

• HyperText Markup Language (HTML) is designed to
  specify the logical organization of a Web
  document
• Stored on the Web server
• Interpreted by the Web browser to display Web
  data
• Uses tags to mark selections of text and to
  specify format
• Examples

11
Create a New Web Site Project

• How-to Set Up a Web Site Using Visual Studio
• Choose the File New Web Site option from the
  Main menu to open a New Web Site dialog box with
  a list of templates.
• Select the Empty Web Site template, and accept
  the default Web site name.

Creating a New Web Site
12
Adding a HTML Page

• Choose the Web site Add New option from the
  Main menu to open the Add New Item dialog box.
• Select the HTML Page template, and enter the file
  name einstein.htm.

Adding a New HTML Page to the Web Site
13
Structure of an HTML Page and HTML Tags

• In the Solution Explorer, right-click on the
  newly added Web page and select the View Markup
  option to view the HTML code
• HTML tags
• Mark the starting and ending of a HTML page
• Head tags
• Store the metadata of a page, namely, the page
  title, author names, and relationships to other
  documents and scripts
• Body tags
• Form the body of an HTML page

HTML Page
14
Adding a Page Title

• Change the title tag to read, Albert Einsteins
  Home Page, as shown below.
• Press Ctrl F5 from the keyboard to run the
  application to (opens the default browser window
  with an empty page). Verify the page title in the
  title bar of the window.

Editing the Page Title
15
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

16
Essential Text Formatting

• Text data is the primary means of communication
  for most Web sites
• The visual presentation of text data has an
  impact on the appearance of a Web site
• Display options
• Font face, size, and color
• Appearance of the background and foreground
• Text formatting
• Headings
• Paragraphs
• Lists

17
Displaying Text Data on a Web Page

• Enter the text as shown inside the ltbodygtlt/bodygt
  tags.
• We may use the text files provided in Chapter
  17s folder from the book Web site to copy and
  paste the text below.

Entering Introductory Information
18
Run the Application

• Run the application to see the Web page shown
  below.

The Web Page with Unformatted Text
19
The Heading Tags

• HTML headings provide the reader with an idea of
  the subject of a document
• HTML lth1gt through lth6gt tags used for headings of
  six different sizes
• Add the lth1gt tag at the beginning of line 6.
  Then, add the ending lt/h1gt tag at the end of the
  line.

Adding Heading Tags
20
The Heading Tags (cont.)

• Mark-up line 7 with a lth3gtlt/h3gt tag pair.

Heading Tags Embedded within the Body Tag
21
Run the Application

• Press Ctrl F5 to view the Web page in the
  browser.

h1
h3
Web Page with Different Headings
22
Paragraphs

• HTML pages can add paragraphs to organize Web
  content
• Paragraphs are defined with the ltpgtlt/pgt tag pair
• Add paragraph tags to Einsteins introductory
  description as shown below.

Adding Paragraph Tags
23
Run the Application

• Press Ctrl F5 to view the output.

The Web Page with Paragraphs
24
Tag Attributes

• Attributes are the properties of an HTML tag
• Control the appearance and behavior of the text
  marked-up by the tags
• Almost all HTML tags can have attributes included
  in their opening tag
• Attributes can be assigned different values
• If not specified, attributes take their default
  values
• Example

25
The Font Tag

• The font tag pair ltfontgtlt/fontgt is probably one
  of the most frequently used tags for text
  formatting
• The tag pairs ltbgtlt/bgt, ltugtlt/ugt, and ltigtlt/igt are
  associated with the font tag

26
Adding Font Tags

• Add font tags with face and color attributes as
  shown below (lines 6 and 9).

Adding Font Tags
27
Run the Application

• Run the application to see the Web page with
  different fonts.

The Web Page with Different Fonts
28
List Tags

• HTML also supports two types of listing
• Ordered listing (ltolgt)
• Unordered listing (ltulgt)
• List items utilize the ltligt tag

29
Adding List Tags

• Add a Navy colored heading, Einsteins Quotes
  (lines 14 and 15).
• Add Einsteins quotes as shown below (use the
  text files on book Web site to copy from). Mark
  the quotes using an unordered bulleted list.

Adding List Tags to the Web Page
30
Run the Application

• Run the application for the output shown below.

The Web Page with List of Einsteins Quotes
31
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

32
HTML Hyperlinks

• Hyperlinks are special areas on a Web page that
  can be activated to redirect to a different
  section of the same or another Web page
• Can link to any Web resources
• Web pages, images, sound, or video files
• Can appear as text or graphic links on a Web page
  
• HTML ltagtlt/agt (anchor) tags are used to mark the
  hyperlinks
• The text or image embedded within a ltagtlt/agt tag
  pair is referred as a link label
• The href attribute of an anchor tag is assigned
  the address to which the document is linked
• Usually specified as a URL

33
Adding a Hyperlink

• Add a hyperlink to a Nova Web site as shown
  below.
• This link gives wealth of information about
  Einstein.

Adding a Hyperlink in HTML Code
Functional Hyperlink to NOVA Web Site
34
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

35
Page Backgrounds

• Adding colors and patterned images to the
  background of Web pages make them presentable and
  attractive to the user
• Background features apply to the entire document
  or body of an HTML page
• The HTML tag ltbodygt has inherent attributes
• Background Enables the addition of background
  images
• Bgcolor Enables the selection of background
  colors
• Click on the body tag and add the bgcolor
  attribute as AntiqueWhite.

Setting the Bgcolor Attribute
36
Run the Application

• Press Ctrl F5 to see the background color
  effect.

The Web Page with a Colorful Background
37
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

38
Adding Graphics to Web Pages

• The ltimggt tag is used to add images on Web pages
• Images are one of the most important aspects of
  any document
• A picture is worth a thousand words

39
Adding an Image

• Add the image tag just below the second heading
  (line 11). Set the src attribute to an image file
  Einstein.jpg.
• The image files for this project can be found on
  the book Web site in the Chapter 17s folder.

Adding an Image Tag and Setting Its Src Attribute
40
Run the Application

• Press Ctrl F5 to view the default left aligned
  image in the browser window.

The Web Page with Einsteins Picture
41
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

42
Structuring Web Pages Using HTML Tables

• Displaying data in a tabular format is a powerful
  way of presenting data to the user
• Helps in developing structured and easily
  readable Web pages
• A table can have one or more rows and columns
• Each table row is marked by a pair of lttrgtlt/trgt
  tags
• The table data (or column) inside each table row
  is marked by the lttdgtlt/tdgt pair

43
The HTML Table Tag - Example
Example HTML Table Structure
Example Output
44
Adding a Table

• Modify the HTML code to resemble below.

HTML Table Used for Aligning Einsteins Picture
45
Run the Application

• Press Ctrl F5 to run the application.

The Web Page Displaying Image and Text Data in a
HTML Table
46
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

47
Visual Studios Design Tab

• We can develop or write HTML code in any text
  editor
• So far, we have been using Visual Studios Source
  tab
• Visual Studios Design tab provides a graphical
  user interface to easily and quickly develop Web
  pages
• Identical to what it will look like in the
  browser window
• Known as What You See Is What You Get (WYSIWYG)

48
Using the Design Tab

• To access the Design tab, click the Design icon
  on the bottom left hand corner of the Visual
  Studio window.
• Add the equation text as shown below. Use various
  options including Style option in the Format menu
  of the Main menu to design the page.

Design Tab with Elegant Equation Text
49
Using the Design Tab (cont.)

• Switch to the Source tab and review the code
  generated by the Visual Studio.
• Note that the lth3gt, ltfontgt, and ltpgt tags are
  added along with the new text.

The Auto-Generated Code for the Elegant
Equation Text
50
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

51
Web Form and HTML Controls

• HTML control tags allow the user to enter data on
  a Web page
• Examples
• TextBox, ComboBox, RadioButton, CommandButton,
  and ListBox
• Appear and function similar to Windows controls
  discussed in previous chapters
• Windows forms include Windows controls
• Similarly, HTML forms include HTML controls
• We request users to enter data on a Web page by
  filling out various forms
• HTML supports a form tag indicated by the
  ltformgtlt/formgt tag pair
• Marks the beginning of the area where a user is
  required to enter the data
• All HTML control tags are nested inside a form
  tag pair

52
HTML Control Tags

• Most of the HTML controls are marked by the
  ltinputgt tag
• The type attribute determines the type of the
  control to be displayed

53
Creating a HTML Form

• We add a HTML form to Einsteins page which
  illustrates the elegant equation Emc2
• The idea behind this is to input values of m and
  c from the user and display the E value on the
  Web page
• Switch to the Design tab.
• Open the Toolbox from the menu by choosing View
  Toolbox option.
• Add a table (2 rows, 3 columns) under the
  Elegant Equation heading. Use Layout Insert
  Table option from the Main menu to invoke the
  Insert Table dialog box. Use this dialog box to
  insert the table.

54
Creating a HTML Form (cont.)

• Drag and drop three TextBox and a Button control
  from the Toolbox on individual rows of the table.

Toolbox Showing HTML Controls
Setting-up the Form for User Input
55
Creating a HTML Form (cont.)

• Individually select the TextBox controls and
  alter their properties as shown below. Use the
  table to set properties of various controls on
  the page.

HTML Controls and Their Property Values
Properties of a TextBox Control
56
Creating a HTML Form (cont.)

• Switch to the Source tab. Add the ltformgtlt/formgt
  tags as shown in line 50 and 76 below.

HTML Code for the Added Controls
57
Run the Application

• Press Ctrl F5 to run the application.

Einsteins Page with a HTML Form
58
Static Pages vs. Dynamic Pages

• Web pages are either designed as static or
  dynamic pages
• Static pages display the same contents every time
  they are requested
• Dynamic pages display different contents subject
  to changes in request
• Can be used to display database tables to the
  users
• The HTML code of the page is dynamically
  generated based on the current state of the
  database table
• There are several scripting languages that
  support dynamic HTML page development
• ASP.NET, JSP, and PHP are a few popular examples
• We will discuss ASP.NET in depth in subsequent
  chapters

59
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

60
In-Class Assignment

• Develop your own home page.
• Make sure to use various HTML tags and the
  attributes introduced in this chapter.
• Apply image, table, and hyperlink HTML tags while
  building your Web page.

61
Overview

• 17.1 Introduction
• 17.2 Internet, Web, and Related Technologies
• 17.3 HyperText Markup Language (HTML)
• 17.4 Essential Text Formatting
• 17.5 HTML Hyperlinks
• 17.6 Page Backgrounds
• 17.7 Adding Graphics to Web Pages
• 17.8 Structuring Web Pages Using HTML Tables
• 17.9 Using Visual Studios Design View WYSIWYG
• 17.10 Web Form and HTML Controls
• 17.11 In-Class Assignment
• 17.12 Summary

62
Summary

• A HTML page is a sequence of tagged statements.
• Marked by lthtmlgtlt/htmlgt tags.
• Has a head and a body section marked by
  ltheadgtlt/headgt and ltbodygtlt/bodygt tags,
  respectively.
• The metadata of a page is placed inside the head
  section and is not visible to the user.
• All other tags are placed inside the body
  section.
• Formatting tags
• Headings provide the reader with an idea about
  the subject of a document.
• HTML uses lth1gt through lth6gt tags for headings in
  six different sizes.
• We add paragraphs using the ltpgtlt/pgt tag pair.
• The ltfontgtlt/fontgt tag pair and its attributes are
  used to control the font face, font color, and
  font size.

63
Summary (cont.)

• HTML supports two types of listing
• Ordered Listing (OL)
• Enumerate items using letters or numbers.
• Uses the ltolgtlt/olgt tag pair.
• Unordered Listing (UL)
• Enumerate items using bullets.
• Uses the ltulgtlt/ulgt tag pair.
• HTML uses hyperlinks to link to other documents
  on the Web.
• The ltagtlt/agt (anchor) tag pair is used to create a
  hyperlink.
• The href attribute of an anchor tag is assigned
  the address to which the document is linked.
• The value of the href attribute is the
  destination of the hyperlink.

64
Summary (cont.)

• The ltimggt tag and its attributes provide a
  powerful means to add images to HTML documents.
• The HTML table tag helps structure text data,
  images, and links into cells of rows and columns.
  
• The lttablegt tag marks the beginning of a table.
• Each table row is marked by the lttrgtlt/trgt tag
  pair.
• Each column is marked by the lttdgtlt/tdgt tag pair.
• HTML provides controls like TextBox, ComboBox,
  RadioButton, CommandButton, ListBox, etc.
• Most of the HTML controls are marked by ltinputgt
  tag.
• The type attribute of a ltinputgt tag determines
  the type of control to display.