Transcript Slide 1

Web-Enabled Decision Support Systems
Web Introduction and Essential HTML
Prof. Name
Position
University Name
[email protected]
(123) 456-7890
1
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
2
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)
3
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
4
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:
1. Portable media storage devices
2. Local area networking (LAN)
3. Wide area networking (WAN)
4. Internet
5
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.
6
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
7
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
8
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
9
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:
<b> This is marked as bold face text. </b>
O utput: T h is is m a rked as b o ld face text.
<b><i> This is marked as bold face italic text. </i></b>
O utput: T h is is m a rked as b o ld face italic te xt.
10
Create a New Web Site Project

How-to: Set Up a Web Site Using Visual Studio
1. Choose the File | New Web Site option from the Main menu to open a New
Web Site dialog box with a list of templates.
Creating a New Web Site
2. Select the Empty Web Site template, and accept the default Web site name.
11
Adding a HTML Page
3. Choose the Web site | Add New option from the Main menu to open the Add
New Item dialog box.
4. Select the HTML Page template, and enter the file name “einstein.htm”.
Adding a New HTML
Page to the Web Site
12
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
Page
– 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
13
Adding a Page Title
5. Change the title tag to read, “Albert Einstein’s Home Page,” as shown below.
Editing the Page Title
6. 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.
14
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
15
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
16
Displaying Text Data on a Web Page
7. Enter the text as shown inside the <body></body> tags.

We may use the text files provided in Chapter 17’s folder from the book Web site
to copy and paste the text below.
Entering Introductory Information
17
Run the Application
8. Run the application to see the Web page shown below.
The Web Page with Unformatted Text
18
The Heading Tags

HTML headings provide the reader with an idea of the subject of a
document
– HTML <h1> through <h6> tags used for headings of six different sizes
9. Add the <h1> tag at the beginning of line 6. Then, add the ending </h1> tag
at the end of the line.
Adding Heading
Tags
19
The Heading Tags (cont.)
10. Mark-up line 7 with a <h3></h3> tag pair.
Heading Tags Embedded within the Body Tag
20
Run the Application
11. Press Ctrl + F5 to view the Web page in the browser.
h1
h3
Web Page with Different Headings
21
Paragraphs

HTML pages can add paragraphs to organize Web content
– Paragraphs are defined with the <p></p> tag pair
12. Add paragraph tags to Einstein’s introductory description as shown below.
Adding Paragraph Tags
22
Run the Application
13. Press Ctrl + F5 to view the output.
The Web Page with Paragraphs
23
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:
< p a l i g n = r i g h t > P ara graph text go es here < / p >
24
The Font Tag

The font tag pair <font></font> is probably one of the most frequently
used tags for text formatting
– The tag pairs <b></b>, <u></u>, and <i></i> are associated with the font tag
T a g E x a m p le
A ttrib u te
V a lu e s
V a lu e E x a m p le s
<font face=Arial></font>
fa c e
N a m e o f fo n t typ e
A ria l, C o u rie r N e w ,
G e o rg ia , V e rd a n a , e tc .
<font face=Arial
c o lo r
C o lo r n a m e /c o d e
color=Navy></font>
<font face=Arial color=Navy
N a v y, G ra y, B la c k ,
R e d , e tc .
s ize
N a s in te g e r
size=10></font>
<b></b>
U s e fo r b o ld fa c e s tyle
<u></u>
U s e fo r u n d e rlin e s tyle
<i></i>
U s e fo r ita lic s tyle
25
1 0 , 1 2 , 1 4 , e tc .
Adding Font Tags
14. Add font tags with face and color attributes as shown below (lines 6 and 9).
Adding Font Tags
26
Run the Application
15. Run the application to see the Web page with different fonts.
The Web Page with Different Fonts
27
List Tags

HTML also supports two types of listing:
– Ordered listing (<ol>)
– Unordered listing (<ul>)
– List items utilize the <li> tag
T a g E x a m p le
A ttrib u te
V a lu e s
D e s c rip tio n
<ul type=circle></ul>
typ e
d is c , c irc le , s q u a re
S e ts th e s h a p e o f th e b u lle t.
D e fa u lt is d is c .
<ol type=A></ol>
typ e
1 , A , a , I, i
L a b e ls ite m s w ith a n u m b e r, a n
u p p e r- o r lo w e rc a s e le tte r,
a n d /o r a R o m a n n u m e ra l.
<ol start=5></ol>
s ta rt
n (in te g e r)
S ta rts th e lis tin g .
<li type=disc></li>
typ e
Sam e as <ol> or
O ve rrid e s th e va lu e o f < o l > o r
<ul>
< u l > ta g s .
n (in te g e r)
S ta rts th e o rd e re d lis tin g .
<li value=2></li>
va lu e
28
Adding List Tags
16. Add a Navy colored heading, “Einstein’s Quotes” (lines 14 and 15).
17. Add Einstein’s 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
29
Run the Application
18. Run the application for the output shown below.
The Web Page with List of Einstein’s Quotes
30
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
31
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 <a></a> (anchor) tags are used to mark the hyperlinks
 The text or image embedded within a <a></a> 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
32
Adding a Hyperlink
19. 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
33
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
34
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 <body> has inherent attributes:


Background: Enables the addition of background images
Bgcolor: Enables the selection of background colors
20. Click on the body tag and add the bgcolor attribute as “AntiqueWhite”.
Setting the
Bgcolor
Attribute
35
Run the Application
21. Press Ctrl + F5 to see the background color effect.
The Web Page with a Colorful Background
36
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
37
Adding Graphics to Web Pages

The <img> 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”
A ttrib u te
V a lu e
D e s c rip tio n
src
Im a g e p a th
T h is s p e c ifie s th e lo c a tio n o f a n im a g e a s a p a th .
alt
S trin g
T h is in d ic a te s th e a lte rn a tiv e te x t to b e u s e d fo r th e lin k
if th e b ro w s e r d o e s n o t d is p la y th e im a g e .
height
N (in te g e r)
T h e h e ig h t o f th e im a g e .
width
N (in te g e r)
T h e w id th o f th e im a g e .
align
C e n te r, le ft, rig h t, to p , b o tto m
A lig n m e n t o p tio n s .
38
Adding an Image
22. 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
17’s folder.
Adding an Image Tag and Setting Its Src Attribute
39
Run the Application
23. Press Ctrl + F5 to view the default left aligned image in the browser window.
The Web Page with Einstein’s Picture
40
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
41
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 <tr></tr> tags
 The table data (or column) inside each table row is marked by the <td></td> pair
A ttrib u te
V a lu e
D e s c rip tio n
border
N (In te g e r)
T h e w id th o f th e ta b le b o rd e r in p ix e ls
height
N (in te g e r)
T h e h e ig h t o f th e im a g e in p ix e ls
width
N (in te g e r)
T h e w id th o f th e im a g e in p ix e ls
valign
C e n te r, le ft, rig h t, to p ,
V e rtic a l A lig n m e n t o p tio n s
b o tto m
42
The HTML Table Tag - Example
Example HTML Table Structure
Example Output
43
Adding a Table
24. Modify the HTML code to resemble below.
HTML Table Used for Aligning Einstein’s Picture
44
Run the Application
25. Press Ctrl + F5 to run the application.
The Web Page Displaying Image and Text Data in a HTML Table
45
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
46
Visual Studio’s Design Tab

We can develop or write HTML code in any text editor
– So far, we have been using Visual Studio’s Source tab

Visual Studio’s 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)
47
Using the Design Tab
26. To access the Design tab, click the Design icon on the bottom left hand
corner of the Visual Studio window.
27. 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
48
Using the Design Tab (cont.)
28. Switch to the Source tab and review the code generated by the Visual
Studio.

Note that the <h3>, <font>, and <p> tags are added along with the new text.
The Auto-Generated Code for the “Elegant Equation” Text
49
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
50
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 <form></form> 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
51
HTML Control Tags

Most of the HTML controls are marked by the <input> tag
– The type attribute determines the type of the control to be displayed
H TM L Tag
H T M L C o n tro l D is p la y e d
<input type="text" />
T e x tB o x
<input type="radio" />
R a d io B u tto n
<input type="checkbox" />
C heckBox
<input type="button"/>
C o m m a n d B u tto n
<textarea cols="20" rows="2"></textarea>
L is tB o x
<select><option selected="selected"></option>
C o m b o B o x w ith o n e e n try
</select>
52
Creating a HTML Form

We add a HTML form to Einstein’s page which illustrates the elegant
equation E=mc2
– The idea behind this is to input values of m and c from the user and display
the E value on the Web page
29. Switch to the Design tab.
30. Open the Toolbox from the menu by choosing View | Toolbox option.
31. 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.
53
Creating a HTML Form (cont.)
32. 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
54
Creating a HTML Form (cont.)
33. Individually select the TextBox controls and alter their properties as shown
below. Use the table to set properties of various controls on the page.
C o n tro l
P ro p e rty
V a lu e
M T e x tB o x
ID
tx tC
V a lu e
0 .0 1
ID
tx tM
V a lu e
299792458
V a lu e
C a lc u la te
C T e x tB o x
B u tto n
HTML Controls and
Their Property Values
Properties of a TextBox Control
55
Creating a HTML Form (cont.)
34. Switch to the Source tab. Add the <form></form> tags as shown in line 50
and 76 below.
HTML Code for the Added Controls
56
Run the Application
35. Press Ctrl + F5 to run the application.
Einstein’s Page with a HTML Form
57
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
58
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
59
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.
60
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 Studio’s Design View: WYSIWYG

17.10 Web Form and HTML Controls

17.11 In-Class Assignment

17.12 Summary
61
Summary

A HTML page is a sequence of tagged statements.
– Marked by <html></html> tags.
– Has a head and a body section marked by <head></head> and
<body></body> 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 <h1> through <h6> tags for headings in six different sizes.
– We add paragraphs using the <p></p> tag pair.
– The <font></font> tag pair and its attributes are used to control the font face,
font color, and font size.
62
Summary (cont.)

HTML supports two types of listing:
– Ordered Listing (OL)
 Enumerate items using letters or numbers.
 Uses the <ol></ol> tag pair.
– Unordered Listing (UL)
 Enumerate items using bullets.
 Uses the <ul></ul> tag pair.

HTML uses hyperlinks to link to other documents on the Web.
– The <a></a> (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.
63
Summary (cont.)

The <img> 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 <table> tag marks the beginning of a table.
 Each table row is marked by the <tr></tr> tag pair.
 Each column is marked by the <td></td> tag pair.

HTML provides controls like TextBox, ComboBox, RadioButton,
CommandButton, ListBox, etc.
– Most of the HTML controls are marked by <input> tag.
– The type attribute of a <input> tag determines the type of control to display.
64