Markup Languages
INE2720
Web Application Software Development
Essential Materials
Outline




Definitions – WWW, HTTP, HTML
The concept of Markup Language
What is SGML?
Introduction to HTML
–
–
–
–
–
–

Creating and publishing a Web page
Validating a document
Main HTML elements
Block-level, Text-level HTML elements
Creating hypertext links, adding images to documents
Building tables, Using Frames and Forms
Introduction to XML
– DTD, MathML, XHTML
INE2720 – Web Application Software Development
2
All copyrights reserved by C.C. Cheung 2003.
The World Wide Web

Definitions
– The World Wide Web (WWW)


The set of computers on the Internet that support HTTP
Not a separate network
– HTTP


The HyperText Transfer Protocol
The language used by a WWW client (e.g. Netscape, IE) to
request documents from a WWW server (i.e. the program
running at Web sites like amazon.com or yahoo.com)
– HTML


The HyperText Markup Language
The language used to design web pages
INE2720 – Web Application Software Development
3
All copyrights reserved by C.C. Cheung 2003.
HTTP

HTTP (Hypertext Transfer Protocol)
– protocol used to access data on the
WWW.
– uses one TCP connection on well-known
port 80.
– two types of http messages: Request,
Response
– transfer data in the form of plain text,
hypertext, audio, video, and so on.
INE2720 – Web Application Software Development
4
All copyrights reserved by C.C. Cheung 2003.
HTTP
DEMO!
INE2720 – Web Application Software Development
5
All copyrights reserved by C.C. Cheung 2003.
The Concept of Markup
Language

Markup language
– originates from the book publishing
industry.
– allows us to embed formatting instructions
in the document.

Two types of markup:
– Procedural markup
– Descriptive markup or Generic markup
INE2720 – Web Application Software Development
6
All copyrights reserved by C.C. Cheung 2003.
Procedural Markup



formatting codes are mixed in
with the text of the document.
typically unique to a specific
software package such as
Microsoft Word
Disadvantages:
– a single way of presenting the
information, such as a printed
page
– provide no capability to define
appearance for other media,
such as CD-ROM and Internet.
INE2720 – Web Application Software Development
7
All copyrights reserved by C.C. Cheung 2003.
Descriptive Markup



 allows multiple presentations of
Basic concept: content of a
document should remain separate the same information.
– e.g. publications on paper, on CDfrom its style.
ROM and on the Web can come
describes the purpose of the text
from one set of source files.
in a document, rather than its
physical appearance on the page.
based on the structure of a
document and identifies elements
within that structure -- such as a
chapter, a section, or a table of
contents -- using notations that
describe what the element is, not
how it appears.
INE2720 – Web Application Software Development
8
All copyrights reserved by C.C. Cheung 2003.
SGML

SGML: Standard Generalized Markup Language
– an international standard (ISO 8879) published
in 1986.
– prescribes a standard format for embedding
descriptive markup within a document.
– specifies a standard method for describing the
structure of a document.


allows you to set up hierarchical models for each type
of document you produce.
supports different document structures for different
information types, e.g. technical manuals, parts
catalogs, design specifications, reports and memos.
INE2720 – Web Application Software Development
9
All copyrights reserved by C.C. Cheung 2003.
SGML

SGML documents are
– ASCII format: human and machine-readable
– independent of any specific hardware or
software
– portable

Can be broken into three components:
– structure
– content
– style
INE2720 – Web Application Software Development
10
All copyrights reserved by C.C. Cheung 2003.
SGML

Structure:
– defined in a file called the Document Type
Definition (DTD)
– describes the structure of a document, much like a
database schema describes the types of
information it handles and the relationships
between fields

e.g. the address information should contain street, city,
country fields
– specifies rules for the relationships between
elements


e.g. the street field must go first before the city field.
e.g. the country field is compulsory and can not be blanks.
INE2720 – Web Application Software Development
11
All copyrights reserved by C.C. Cheung 2003.
SGML

<address>
<street> street name </street>
<city> city name </city>
</address>
Content:
– content is the information itself
– identify the content's position within the DTD
structure by using "tagging.”



These tags mark the beginning and end of each part of
the structure.
e.g. <street> 276 Castle Peak Road </street>
"<street>" indicates the start of a street name, and
"</street>" indicates the end
– Nesting of tags reveal the structure of a
document.
INE2720 – Web Application Software Development
12
All copyrights reserved by C.C. Cheung 2003.
SGML

Style:
– Define how different fields should be
displayed.
e.g. The style defines that “city field in the
address should be all in upper case and in red
colored font”.
 Content: <city> hong kong </city>
 Display: HONG KONG

– SGML itself has nothing to do with setting
standards for style, so most systems still
rely on proprietary methods.
INE2720 – Web Application Software Development
13
All copyrights reserved by C.C. Cheung 2003.
SGML

Benefits of SGML:
– Increased productivity
– Reusability
– Information longevity
– Improved data integrity
– Better data control
– Shareability
– Portability of information
– Flexibility beyond traditional publishing
INE2720 – Web Application Software Development
14
All copyrights reserved by C.C. Cheung 2003.
SGML
SGML

HTML
XML
Two implementations of SGML standard:
– HTML: Hypertext Markup Language
– XML: Extensible Markup Language
HTML
Structure Not defined
Content
 Limited number of tags
 Tags are defined in HTML
specifications
 Tags are not case sensitive
Style
Not defined
INE2720 – Web Application Software Development
15
XML
Defined in DTD files
 Unlimited number of tags
 Tags are defined in DTD
 Tags are case sensitive
Defined in XSL (style) files
All copyrights reserved by C.C. Cheung 2003.
SGML


HTML tags are limited, so we need to write
content using available HTML tags
e.g. writing address as
<P> 276 Castle Peak Road </P>
<P> Hong Kong </P>


With XML, we can define new tags for
writing address fields.
e.g. it will be more descriptive to write
<street> 276 Castle Peak Road </street>
<city> Hong Kong </city>
INE2720 – Web Application Software Development
16
All copyrights reserved by C.C. Cheung 2003.
HTML History & its Future



HTML 2.0
HTML 3.2
HTML 4.0
– All formatting is separated into a style sheet.

HTML 4.01
– Makes the future upgrade from HTML to XHTML in a
simple process.

XHTML – sometimes referred to as HTML 5
– The future of HTML standard
– Almost identical to HTML 4.01
– 1.0, 1.1 and 2.0
INE2720 – Web Application Software Development
17
All copyrights reserved by C.C. Cheung 2003.
XHTML 2.0
INE2720 – Web Application Software Development
18
All copyrights reserved by C.C. Cheung 2003.
Markup Languages
Language
Year
Introduced
Description
SGML
1986
International standard for specifying a document markup language
HTML
1992
An early recommendation
HTML+
1993
A superset of HTML
HTML 2.0
1995
An HTML version created by IETF
HTML 3.2
1996
W3C formal recommendation for HTML
XML
1998
Universal format for structured documents and data on the Web
XHTML
2000
Document markup language for the Web
SGML
HTML
SGML
XML
XML
INE2720 – Web Application Software Development
XHTML
19
All copyrights reserved by C.C. Cheung 2003.
HTML Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<Title>Home Page for Lawrence M. Brown</Title>
</HEAD>
<BODY BGCOLOR="WHITE">
<H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1>
<HR>
<IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117
HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo">
Senior Network Engineer<BR>
<A HREF="http://www.dt.navy.mil/">
Naval Surface Warfare Center</A><BR>
9500 MacArthur Boulevard<BR>
West Bethesda, Maryland, MD 20817-5700<BR>
<I>email:</I> <A HREF="mailto:brown@corewebprogramming.com">
brown@corewebprogramming.com</A><BR>
<I>Phone:</I> (301) 277-4648<BR CLEAR="ALL">
<P>
This is my personal home page. For more specific
programming-related resources pages, please see:
<!-- Rest of Sample Page Deleted -->
</BODY>
</HTML>
INE2720 – Web Application Software Development
20
All copyrights reserved by C.C. Cheung 2003.
Creating and Publishing
a Web Page
1.
2.
Create an HTML document
Place the document in a world-accessible directory
(often public_html or www) on a system
running an HTTP server
Unix>
Unix>
Unix>
Unix>
3.
cd
chmod a+x .
(Note the ".")
mkdir public_html
chmod a+x public_html
Access the web page through
http://hostname/~username/filename

–
E.g. http://www.apl.jhu.edu/~lmb/test.html
If the filename is omitted, a system default filename is
assumed (often index.html)

E.g. http://www.apl.jhu.edu/~hall/ refers to the
file index.html in hall’s public_html directory
INE2720 – Web Application Software Development
21
All copyrights reserved by C.C. Cheung 2003.
Creating and Publishing
a Web Page, cont.
4.
Validate the Document
– Check the syntax using a formal HTML validator


http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
– The version of HTML against which the document is
validated is based on the DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
– The WWW Consortium recently added advice that Web
pages include information on the character set, even
though ASCII or Latin-1 is the default. The validator at
http://validator.w3.org/ gives warnings if you omit this.
You can ignore such warnings if you wish.
INE2720 – Web Application Software Development
22
All copyrights reserved by C.C. Cheung 2003.
W3C XHTML Validation Service
Validator.w3.org
Fig. 4.2
Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).)
INE2720 – Web Application Software Development
23
All copyrights reserved by C.C. Cheung 2003.
W3C XHTML Validation Service
XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)
INE2720 – Web Application Software Development
24
All copyrights reserved by C.C. Cheung 2003.
.htm or .html


We can save an HTML file to either
the .htm or .html file extension.
It might be a problem inherited from
the past.
– Some commonly used software can only
allow three character extensions.
– .txt , .doc , …
INE2720 – Web Application Software Development
25
All copyrights reserved by C.C. Cheung 2003.
HTML Document Template
INE2720 – Web Application Software Development
26
All copyrights reserved by C.C. Cheung 2003.
HTML <META> Tag


Can record document information
Forward and refresh pages
<HEAD>
<TITLE>Why You Should Buy Windows 2000</TITLE>
<BASE HREF="http://www.microsoft.com/windows2000/">
<META NAME="author" CONTENT="Bill Gates">
<META NAME="keywords"
CONTENT="Windows,Advocacy,OS,Operating Systems">
<META NAME="description"
CONTENT="A summary of the advantages of Windows 2000.">
</HEAD>
<HEAD>
<TITLE>Why You Should Buy Windows 2000</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="1800">
</HEAD>
INE2720 – Web Application Software Development
27
All copyrights reserved by C.C. Cheung 2003.
HTML Element / Tag
<p align=“right”> </p>

Element


Attribute Name
Attribute Value
You have to understand the important
terms related to HTML.
Not case-sensitive.
INE2720 – Web Application Software Development
28
All copyrights reserved by C.C. Cheung 2003.
Main HTML Elements
1.
2.
3.
DOCTYPE
HTML
HEAD
– TITLE element required
– Optional elements:






BASE
META
BGSOUND
SCRIPT, NOSCRIPT
STYLE
LINK
INE2720 – Web Application Software Development
29
All copyrights reserved by C.C. Cheung 2003.
Main HTML Elements
(Continued)
4.
BODY Element
– <BODY BGCOLOR="YELLOW">
– HTML Attributes and Attribute Values





5.
BACKGROUND
BGCOLOR
TEXT
LINK, VLINK, ALINK
OnLoad, OnUnload, OnFocus, OnBlur
Elements inside BODY element
– <BODY>
Remaining HTML elements
</BODY>
INE2720 – Web Application Software Development
30
All copyrights reserved by C.C. Cheung 2003.
META Element

Records document information,
forwards and refreshes pages
– NAME="author"
– NAME="keywords"
– NAME="description"
– HTTP-EQUIV="refresh"
INE2720 – Web Application Software Development
31
All copyrights reserved by C.C. Cheung 2003.
META Element, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>News Headlines</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="3600">
</HEAD>
<BODY>
<H1 ALIGN="CENTER">News Headlines</H1>
<H2>National News</H2>
Blah, blah, blah.
<H2>International News</H2>
Yadda, yadda, yadda.
</BODY>
</HTML>
INE2720 – Web Application Software Development
32
All copyrights reserved by C.C. Cheung 2003.
Block-Level Elements

Headings

–
–
–
–
–
–
–
– H1 ... H6
– ALIGN

Basic Text Sections
–
–
–
–
–
–
P
ALIGN
PRE
WIDTH
ADDRESS
BLOCKQUOTE
INE2720 – Web Application Software Development
Lists


33
OL
LI
UL
LI
DL
DT
DD
Frames and Forms
Misc.
–
–
–
–
HR
DIV
CENTER
MULTICOL (Netscape only)
All copyrights reserved by C.C. Cheung 2003.
Headings

Heading Types
–
–
–
–
–
–

<H1
<H2
<H3
<H4
<H5
<H6
...> ... </H1>
...> ... </H2>
...> ... </H3>
...> ... </H4>
...> ... </H5>
...> ... </H6>
Attributes: ALIGN
– Values: LEFT (default), RIGHT, CENTER

Nesting tags
– Headings and other block-level elements can contain
text-level elements, but not vice versa
INE2720 – Web Application Software Development
34
All copyrights reserved by C.C. Cheung 2003.
Headings, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="CENTER">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="RIGHT">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
INE2720 – Web Application Software Development
35
All copyrights reserved by C.C. Cheung 2003.
Headings, Result
INE2720 – Web Application Software Development
36
All copyrights reserved by C.C. Cheung 2003.
P – The Basic Paragraph

Attributes: ALIGN
– LEFT (default), RIGHT, CENTER. Same as headings.
– Whitespace ignored (use <BR> for line break)

Consecutive <P>’s do not yield multiple blank lines
– End Tag is Optional:
<BODY>
<P>
Paragraph 1
</P>
<P>
Paragraph 2
</P>
<P>
Paragraph 3
</P>
</BODY>
<BODY>
Paragraph 1
<P>
Paragraph 2
<P>
Paragraph 3
</BODY>
Equivalent with Implied Tags
Fully-Specified
INE2720 – Web Application Software Development
37
All copyrights reserved by C.C. Cheung 2003.
Preformatted Paragraphs

The PRE Element
– <PRE> ... </PRE>

Attributes: WIDTH
– Expected width in characters. Not widely supported.

Problem: Special Characters
<PRE>
if (a<b) {
doThis();
} else {
doThat();
}
</PRE>
Desired Character
<
>
&
"
Non-breaking space
INE2720 – Web Application Software Development
38
HTML Required
&lt;
&gt;
&amp;
&quot;
&nbsp;
All copyrights reserved by C.C. Cheung 2003.
HTML Character Entities

The “<“ character has special meaning
in HTML documents
– We cannot use it directly in the text.
– We have to use a character entity.
– We must use “&lt;” or “&#60;”
– Note, they are case sensitive.
– The most common one is the nonbreaking space – “&nbsp;”
INE2720 – Web Application Software Development
39
All copyrights reserved by C.C. Cheung 2003.
The most common entities
Display
Description
Name
Non-breaking space &nbsp;
<
Less than
&lt;
>
Greater than
&gt;
&
Ampersand
&amp;
“
Quotation mark
&quot;
‘
Apostrophe
&#39;
INE2720 – Web Application Software Development
40
All copyrights reserved by C.C. Cheung 2003.
HTML Lists



Unordred Lists
Ordered Lists
Definition Lists
INE2720 – Web Application Software Development
41
All copyrights reserved by C.C. Cheung 2003.
OL: Ordered (Numbered)
Lists

OL Element
– <OL>
<LI>…
<LI>…
...
</OL>
– Attributes: TYPE, START, COMPACT

A sample list:
<OL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</OL>
List entries: LI
– <LI ...> ... </LI> (End Tag Optional)
– Attributes: (When inside OL) VALUE, TYPE
INE2720 – Web Application Software Development
42
All copyrights reserved by C.C. Cheung 2003.
<OL TYPE="I">
<LI>Headings
<LI>Basic Text Sections
<LI>Lists
<OL TYPE="A">
<LI>Ordered
<OL TYPE="1">
<LI>The OL tag
<OL TYPE="a">
<LI>TYPE
<LI>START
<LI>COMPACT
</OL>
<LI>The LI tag
</OL>
<LI>Unordered
<OL TYPE="1">
<LI>The UL tag
<LI>The LI tag
</OL>
<LI>Definition
<OL TYPE="1">
<LI>The DL tag
<LI>The DT tag
<LI>The DD tag
</OL>
</OL>
<LI>Miscellaneous
</OL>
INE2720 – Web Application Software Development
Nested
Ordered Lists
43
All copyrights reserved by C.C. Cheung 2003.
UL: Unordered (Bulleted) Lists

UL Element
A sample list:
<UL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</UL>
– <UL>
<LI>…
<LI>…
...
</UL>

Attributes: TYPE, COMPACT
– TYPE is DISC, CIRCLE, or SQUARE

List entries: LI (TYPE)
– TYPE is DISC, CIRCLE, or SQUARE
INE2720 – Web Application Software Development
44
All copyrights reserved by C.C. Cheung 2003.
<UL TYPE="DISC">
<LI>The UL tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>COMPACT
</UL>
<LI>The LI tag
<UL TYPE="CIRCLE">
<LI>TYPE
<UL TYPE="SQUARE">
<LI>DISC
<LI>CIRCLE
<LI>SQUARE
</UL>
<LI>VALUE
</UL>
</UL>
INE2720 – Web Application Software Development
UL: Custom
Bullets
45
All copyrights reserved by C.C. Cheung 2003.
Text-Level Elements

Physical Character Styles
– B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK
– FONT



SIZE
COLOR
FACE
– BASEFONT
– SIZE

Logical Character Styles
– EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE
INE2720 – Web Application Software Development
46
All copyrights reserved by C.C. Cheung 2003.
Text-Level Elements
(Continued)

Hypertext Links
–A


HREF, NAME, TARGET, ...
Images
– IMG


SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE,
VSPACE, BORDER, USEMAP, ISMAP
Misc. Text-Level Elements
–
–
–
–
BR (Explicit line break)
AREA (Client-side image maps)
APPLET (Java)
...
INE2720 – Web Application Software Development
47
All copyrights reserved by C.C. Cheung 2003.
Physical Character Styles,
Example
...
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
...
INE2720 – Web Application Software Development
48
All copyrights reserved by C.C. Cheung 2003.
Text Formatting
<b>
Bold text
<big>
Big text
<em>
Emphasized text
<i>
Italic text
<small>
Small text
<strong>
Strong text
<sub>
Subscripted text
<sup>
Superscripted text
INE2720 – Web Application Software Development
49
All copyrights reserved by C.C. Cheung 2003.
Physical Character Styles,
Result
INE2720 – Web Application Software Development
50
All copyrights reserved by C.C. Cheung 2003.
Logical Character Styles,
Example
...
<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK
Acronym</ACRONYM>
...
INE2720 – Web Application Software Development
51
All copyrights reserved by C.C. Cheung 2003.
Logical Character Styles, Result
INE2720 – Web Application Software Development
52
All copyrights reserved by C.C. Cheung 2003.
HTML Links


<a> to create a link to another
document.
The target attribute
– <a href=“…”, target=“_blank”>xxx</a>
– Open the document in a new browser
window.

The name attribute
– <a name=“abc”>
– <a href=“#abc”>Useful text</a>
INE2720 – Web Application Software Development
53
All copyrights reserved by C.C. Cheung 2003.
Hypertext Links


Links can contain images and other text-level
elements (i.e., <A HREF…> ... </A>)
Link to Absolute URL
– Use a complete URL beginning with http://
Java is discussed in
<A HREF="http://host/path/chapter2.html">
Chapter 2</A>.

Link to Relative URL
– Use a filename or relative path to filename
Interpreted wrt location of current file
Java is discussed in
<A HREF="chapter2.html">Chapter 2</A>.

INE2720 – Web Application Software Development
54
All copyrights reserved by C.C. Cheung 2003.
Hypertext Links
(Continued)

Link to Section
– Use a section name (see below) preceded by #
Images are discussed in
<A HREF="#Section2">Section 2</A>.

Link to Section in URL
– Use absolute or relative URL, then #, then section name
Images are discussed in
<A HREF="chapter1.html#Section2">
Sec. 2 of Chap. 1</A>.

Naming a Section
– Use <A NAME="..."> and do not include the pound sign
<H2><A NAME="Section2">Images</A></H2>
INE2720 – Web Application Software Development
55
All copyrights reserved by C.C. Cheung 2003.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 4.5: links.html
-->
<!-- Introduction to hyperlinks -->
Text between strong tags will
appear bold.
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
Linking is accomplished in XHTML
with the anchor (a) element.
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page.</strong></p>
<p><a href = "http://www.deitel.com">Deitel</a></p>
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
The text between the a tags is the anchor for the
link.
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
</html>
Elements placed between paragraph tags
will be set apart from other elements on the
page with a vertical line before and after it.
The anchor links to the page that’s
value is given by the href attribute.
Hypertext Links
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 4.6: contact.html -->
<!-- Adding email hyperlinks -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Contact Page
</title>
</head>
<body>
<p>My email address is
<a href = "mailto:deitel@deitel.com"> deitel@deitel.com
</a>. Click the address and your browser will open an
email message and address it to me.</p>
</body>
</html>
When a user clicks on an email link,
an email message addressed to the
value of the link will open up.
To create an email link include “mailto:”
before the email address in the href
attribute.
IMG: Embedding Images

Example
<IMG SRC="SomeFile.gif" ALT="My Dog"
WIDTH=400 HEIGHT=300>

Attributes:
–
–
–
–
–
–
–
SRC (required)
ALT (technically required)
ALIGN (see <BR CLEAR="ALL">)
WIDTH, HEIGHT
HSPACE, VSPACE
BORDER
USEMAP, ISMAP
INE2720 – Web Application Software Development
59
All copyrights reserved by C.C. Cheung 2003.
Image Alignment, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Image Alignment</TITLE></HEAD>
<BODY>
<H1 ALIGN="CENTER">Image Alignment</H1>
<TABLE BORDER=1>
<TR><TH>Alignment
<TH>Result
<TR><TH><CODE>LEFT</CODE>
<TD><IMG SRC="rude-pc.gif" ALIGN="LEFT"
ALT="Rude PC" WIDTH=54 HEIGHT=77>
This positions the image at the left side,
with text flowing around it on the right.
<TR><TH><CODE>RIGHT</CODE>
<TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT"
ALT="Rude PC" WIDTH=54 HEIGHT=77>
This positions the image at the right side,
with text flowing around it on the left.
...
</TABLE>
</BODY>
</HTML>
INE2720 – Web Application Software Development
60
All copyrights reserved by C.C. Cheung 2003.
Image Alignment, Result
INE2720 – Web Application Software Development
61
All copyrights reserved by C.C. Cheung 2003.
Break Time – 15 minutes
INE2720 – Web Application Software Development
62
All copyrights reserved by C.C. Cheung 2003.
Tables

Template
<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH>
<TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>
INE2720 – Web Application Software Development
63
All copyrights reserved by C.C. Cheung 2003.
TABLE Element Attributes

ALIGN
– The ALIGN attribute gives the horizontal alignment of the table
as a whole
– Legal values are LEFT, RIGHT, and CENTER, with LEFT being the
default

BORDER
– This specifies the width in pixels of the border around the table
– This is in addition to the border around each cell (the
CELLSPACING).
– The default is zero, which also results in the visible 3D divider
between cells being turned off

CELLSPACING
– This gives the space in pixels between adjacent cells. Drawn as a
3D line if BORDER is nonzero, otherwise empty space in the
background color is used
– The default is usually about 3
INE2720 – Web Application Software Development
64
All copyrights reserved by C.C. Cheung 2003.
TABLE Element Attributes
(Continued)

CELLPADDING
– CELLPADDING determines the empty space, in pixels, between
the cell’s border and the table element
– The default is usually about 1

WIDTH
– This specifies the width of the table, either in pixels (<TABLE
WIDTH=250>) or as a percentage of the current browser
window width (<TABLE WIDTH="75%">)

BGCOLOR
– Specify the background color of the table TABLE (also legal for
TR, TD, and TH)

BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT
– Non standard attributes supported by IE to specify the colors to
user for the borders
INE2720 – Web Application Software Development
65
All copyrights reserved by C.C. Cheung 2003.
TABLE Element Attributes
(Continued)

BACKGROUND
– This nonstandard attribute supported by IE gives an image file
that will be tiled as the background of the table
– You might want to use style sheets instead.

RULES
– HTML 4.0 attribute that specifies which inner dividing lines are
drawn
– All are drawn if this attribute is omitted
– Legal values are NONE, ROWS, COLS, and ALL

FRAME
– Specifies which outer borders are drawn
– All four are drawn if this attribute is omitted
– Legal values are BORDER or BOX (all), VOID (none), ABOVE
(top), BELOW (bottom), HSIDES (top and bottom, despite the
somewhat confusing name), VSIDES (left and right), LHS (left),
and RHS (right)
INE2720 – Web Application Software Development
66
All copyrights reserved by C.C. Cheung 2003.
Table CAPTION

Attribute
– ALIGN (Values: TOP, BOTTOM)

Usage
– An enclosing borderless table may give more flexibility
than the built-in CAPTION.
INE2720 – Web Application Software Development
67
All copyrights reserved by C.C. Cheung 2003.
TR: Table Row



TR is used to define each row in the table
Each row will then contain TH and/or TD entries
ALIGN
– ALIGN (legal values LEFT, RIGHT, or CENTER) is used to set the
default horizontal alignment for table cells

VALIGN
– VALIGN (legal values TOP, MIDDLE, or BOTTOM) is used to set
the default vertical alignment for table cells

BGCOLOR
– Sets the color for the table row, overriding any values set for the
table as a whole via the BGCOLOR attribute of TABLE


BORDERCOLOR, BORDERCOLORDARK,
BORDERCOLORLIGHT
– Supported only by Internet Explorer, these specify the colors to
use for the row borders
INE2720 – Web Application Software Development
68
All copyrights reserved by C.C. Cheung 2003.
Table Cells: TH and TD

COLSPAN
– COLSPAN defines a heading or cell data entry that spans
multiple columns
<TABLE BORDER=1>
<TR><TH COLSPAN=2>Col 1&2 Heading
<TH>Col3 Heading
<TR><TD>Col1 Data
<TD>Col2 Data
<TD>Col3 Data
</TABLE>
INE2720 – Web Application Software Development
69
All copyrights reserved by C.C. Cheung 2003.
Table Cells: TH and TD
(Continued)

ROWSPAN
– ROWSPAN defines a heading or cell data entry that spans
multiple rows; similar to COLSPAN

ALIGN
– LEFT, RIGHT, CENTER, JUSTIFY and CHAR.
– E.g., the following aligns entries on a decimal point
<TD ALIGN="CHAR" CHAR=".">

VALIGN
– TOP, BOTTOM, MIDDLE

WIDTH, HEIGHT
– Values in pixels only (no percentages officially allowed)

NOWRAP
– Use with caution

BGCOLOR, BACKGROUND
– Same as for TABLE and TR
INE2720 – Web Application Software Development
70
All copyrights reserved by C.C. Cheung 2003.
HTML Hex-Colors
White
Red
Green
Blue
Cyan
Yellow
Black
Dim Grev
Forest Green
Grey
Midnight Blue
Orange
Spring Green
Turquoise
INE2720 – Web Application Software Development
71
#FFFFFF
#FF0000
#00FF00
#0000FF
#00FFFF
#FFFF00
#000000
#545454
#238E23
#C0C0C0
#2F2F4F
#FF7F00
#00FF7F
#ADEAEA
All copyrights reserved by C.C. Cheung 2003.
Basic HTML - Summary



A DOCTYPE is required to validate the document
HTML document should have an enclosing HTML
element, a HEAD (TITLE is required) and a BODY
Hypertext links, <A HREF="…">
– can be absolute or relative
– A link to a named section is denoted by #section

Tables are composed of main table element,
<TABLE>; rows, <TR>; table headers, <TH>; and
table data, <TD>
– Use BGCOLOR to give background colors to tables, rows,
or cells
– Use ROWSPAN or COLSPAN to join cells
INE2720 – Web Application Software Development
72
All copyrights reserved by C.C. Cheung 2003.
HTML Frames - Outline






Advantages and disadvantages of frames
FRAME template
Defining rows and cols in a FRAMESET
Common FRAME and FRAMESET attributes
Nested frames
Targeting a document to a named
FRAME cell
INE2720 – Web Application Software Development
73
All copyrights reserved by C.C. Cheung 2003.
HTML Frames





Vertical frameset
Horizontal frameset
You can display more than one HTML
document in the same browser.
Webmaster should keep track of more
HTML documents.
Difficult to print the entire page
– Print friendly page.
INE2720 – Web Application Software Development
74
All copyrights reserved by C.C. Cheung 2003.
Frame Advantages





Certain parts of the interface (e.g., a TOC)
are always on the screen
Can avoid retyping common sections of
multiple Web pages
Consistent use across a large site
sometimes simplifies user navigation
A convenient way to mix text-oriented HTML
with Java applets
Image maps are more convenient if the map
image remains on screen and only the
results section changes
INE2720 – Web Application Software Development
75
All copyrights reserved by C.C. Cheung 2003.
Frame Disadvantages



The meaning of the “Back” and “Forward” buttons
can be confusing
Poorly designed frames can get the user lost
Hard to find real URL of a page you want
– Printing problems!



Hard to bookmark "configuration"
Some very old browsers do not support frames
Security
– Hackers can insert frame cells into your pages in some
circumstances, perhaps stealing information intended for
your site
INE2720 – Web Application Software Development
76
All copyrights reserved by C.C. Cheung 2003.
Frame Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Document Title</TITLE></HEAD>
<FRAMESET ...>
<!-- FRAME and Nested FRAMESET Entries -->
<NOFRAMES>
<BODY>
<!-- Stuff for non-Frames browsers -->
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
INE2720 – Web Application Software Development
77
All copyrights reserved by C.C. Cheung 2003.
FRAMESET Attributes

COLS, ROWS
– A comma-separated list of pixel values, percentages, and
weighted remainders
– FRAMESET entries should always specify at least two rows
or columns. Netscape problems if not!
– Examples
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
<FRAMESET COLS="25%,*,*">
...
</FRAMESET>
INE2720 – Web Application Software Development
78
All copyrights reserved by C.C. Cheung 2003.
FRAMESET ROWS, Example
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
50 pixels, 10%, 1/3, 2/3
INE2720 – Web Application Software Development
79
All copyrights reserved by C.C. Cheung 2003.
FRAMESET Attributes
(Continued)

FRAMEBORDER
– Indicates whether borders will be drawn between frame
cells
– YES or 1 specifies borders; NO or 0 specifies no border
– Can be overridden by FRAMEBORDER settings in individual
FRAME entries
– Often used in conjunction with BORDER=0 and
FRAMESPACING=0

BORDER (Netscape), FRAMESPACING (IE)
– Specify the thickness of the border between cells
– Apply to outermost FRAMESET only

BORDERCOLOR
– Sets the color of the border between cell, using either a
hex RGB value or color name
INE2720 – Web Application Software Development
80
All copyrights reserved by C.C. Cheung 2003.
Frame Border, Examples
Frame Border
INE2720 – Web Application Software Development
81
All copyrights reserved by C.C. Cheung 2003.
FRAME: Specifying
Content of Frame Cells

SRC
– URL of the document to place in the frame cell

NAME
– Supplies destination for TARGET attribute of hypertext
links


FRAMEBORDER, BORDERCOLOR
MARGINWIDTH, MARGINHEIGHT
– Specifies the left/right and top/bottom cell margins,
respectively

SCROLLING
– Indicates whether cells should have scrollbars

NORESIZE
– Disables the ability to resize the frame cells
INE2720 – Web Application Software Development
82
All copyrights reserved by C.C. Cheung 2003.
Frame Example 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 1</TITLE></HEAD>
<FRAMESET ROWS="55%,45%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">non-frames version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
INE2720 – Web Application Software Development
83
All copyrights reserved by C.C. Cheung 2003.
Frame Example 1, Result
INE2720 – Web Application Software Development
84
All copyrights reserved by C.C. Cheung 2003.
Frame Example 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 2</TITLE></HEAD>
<FRAMESET COLS="55%,45%">
<FRAMESET ROWS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<FRAMESET ROWS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">nonframes version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
85
All copyrights reserved by C.C. Cheung 2003.
INE2720 – Web Application Software Development
Frame Example 2, Result
INE2720 – Web Application Software Development
86
All copyrights reserved by C.C. Cheung 2003.
Targeting Frame Cells


Specify the cell in which to place a page
referenced by a hyperlink
The NAME Attribute of FRAME
<FRAME SRC="..." NAME="cellName">

The TARGET Attribute of A HREF
<A HREF="..." TARGET="cellName">
INE2720 – Web Application Software Development
87
All copyrights reserved by C.C. Cheung 2003.
Targeting Example
INE2720 – Web Application Software Development
88
All copyrights reserved by C.C. Cheung 2003.
Cold-Fusion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Investing in Cold Fusion</TITLE>
</HEAD>
<FRAMESET ROWS="75,*">
<FRAME SRC="TOC.html" NAME="TOC">
<FRAME SRC="Introduction.html" NAME="Main">
<NOFRAMES>
<BODY>
This page requires Frames. For a non-Frames version,
<A HREF="Introduction.html">the introduction</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
INE2720 – Web Application Software Development
89
All copyrights reserved by C.C. Cheung 2003.
TOC.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%">
<TR><TH><A HREF="Introduction.html" TARGET="Main">
Introduction</A></TH>
<TH><A HREF="Potential.html" TARGET="Main">
Potential</A></TH>
<TH><A HREF="Investing.html" TARGET="Main">
Investing</A></TH>
<TH><A HREF="References.html" TARGET="Main">
References</A></TH></TR>
</TABLE>
</BODY>
</HTML>
INE2720 – Web Application Software Development
90
All copyrights reserved by C.C. Cheung 2003.
Targeting Example, Results
INE2720 – Web Application Software Development
91
All copyrights reserved by C.C. Cheung 2003.
Predefined Frame Names

_blank
– Load document into a new browser window

_top
– Causes the linked document to take up the whole browser
window
– Document will not be contained in a frame cell

_parent
– Places document in the immediate FRAMESET parent
– Same as _top if no nested frames

_self
– Place document in current cell
– Only necessary to override a BASE entry
INE2720 – Web Application Software Development
92
All copyrights reserved by C.C. Cheung 2003.
Update Multiple Frames
(Revisit during the JS lecture)
INE2720 – Web Application Software Development
93
All copyrights reserved by C.C. Cheung 2003.
HTML Frames - Summary


Frames require a Frameset DOCTYPE for validation
A FRAMESET can be divided either into columns or
rows
– To create both rows and columns use nested FRAMESETs

By giving a FRAME a name, documents can be
targeted to the named frame cell
– <FRAME … NAME="…">
– <A HREF="…" TARGET="…">

There are four predefined frame names
– _blank, _top, _parent, and _self
INE2720 – Web Application Software Development
94
All copyrights reserved by C.C. Cheung 2003.
Outline – HTML Forms











Sending data from forms
The FORM element
Text controls
Push buttons
Check boxes and radio buttons
Combo boxes and list boxes
File upload controls
Server-side image maps
Hidden fields
Grouping controls
Tab ordering
INE2720 – Web Application Software Development
95
All copyrights reserved by C.C. Cheung 2003.
Sending Data with GET
…
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">A Sample Form Using GET</H2>
<FORM ACTION="http://localhost:8088/SomeProgram">
<CENTER>
First name:
<INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR>
Last name:
<INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P>
<INPUT TYPE="SUBMIT">
</CENTER>
</FORM>
</BODY></HTML>
INE2720 – Web Application Software Development
96
All copyrights reserved by C.C. Cheung 2003.
Initial Result
INE2720 – Web Application Software Development
97
All copyrights reserved by C.C. Cheung 2003.
Submission Result
INE2720 – Web Application Software Development
98
All copyrights reserved by C.C. Cheung 2003.
Sending Data with POST
…
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">A Sample Form Using POST</H2>
<FORM ACTION="http://localhost:8088/SomeProgram"
METHOD="POST">
<CENTER>
First name:
<INPUT TYPE="TEXT" NAME="firstName"
VALUE="Joe"><BR>
Last name:
<INPUT TYPE="TEXT" NAME="lastName"
VALUE="Hacker"><P>
<INPUT TYPE="SUBMIT">
</CENTER>
</FORM>
</BODY></HTML>
INE2720 – Web Application Software Development
99
All copyrights reserved by C.C. Cheung 2003.
Initial Result
INE2720 – Web Application Software Development
100
All copyrights reserved by C.C. Cheung 2003.
Submission Result
INE2720 – Web Application Software Development
101
All copyrights reserved by C.C. Cheung 2003.
URL Encoding: Original Form
INE2720 – Web Application Software Development
102
All copyrights reserved by C.C. Cheung 2003.
URL Encoding: Result
INE2720 – Web Application Software Development
103
All copyrights reserved by C.C. Cheung 2003.
Text Controls

Textfields
– <INPUT TYPE="TEXT" NAME="…" …>


VALUE can give original value
Password Fields
– <INPUT TYPE="PASSWORD" NAME="…" …>


Always use POST
Text Areas
– <TEXTAREA NAME="…"
ROWS="…" COLS="…">
…
</TEXTAREA>

Interpretation of regular HTML tags turned off between
<TEXTAREA…> and </TEXTAREA>
INE2720 – Web Application Software Development
104
All copyrights reserved by C.C. Cheung 2003.
Push Buttons

Submit Buttons
– <INPUT TYPE="SUBMIT" …>



Use NAME if you have multiple buttons
Use VALUE to change button's label
Reset Buttons
– <INPUT TYPE="RESET" …>


Use VALUE to change button's label
JavaScript Buttons
– <INPUT TYPE="BUTTON"
onClick="someJavaScriptFunction()" …>

Fancy Buttons
– <BUTTON TYPE="SUBMIT" …>HTML</BUTTON>

Internet Explorer and Netscape 6 only
INE2720 – Web Application Software Development
105
All copyrights reserved by C.C. Cheung 2003.
Using Multiple Submit
Buttons
<CENTER>
Item:
<INPUT TYPE="TEXT" NAME="Item" VALUE="256MB
SIMM"><BR>
<INPUT TYPE="SUBMIT" NAME="Add"
VALUE="Add Item to Cart">
<INPUT TYPE="SUBMIT" NAME="Delete"
VALUE="Delete Item from Cart">
</CENTER>
INE2720 – Web Application Software Development
106
All copyrights reserved by C.C. Cheung 2003.
Check Boxes

Format
– <INPUT TYPE="CHECKBOX" NAME="…" …>



The CHECKED attribute makes it initially checked
Name/value pair sent only if checkbox is checked when form
is submitted
Example code
<P>
<INPUT TYPE="CHECKBOX" NAME="noEmail" CHECKED>
Check here if you do <I>not</I> want to
get our email newsletter

Example result
INE2720 – Web Application Software Development
107
All copyrights reserved by C.C. Cheung 2003.
Radio Buttons

Format
– <INPUT TYPE ="RADIO"
NAME="…" VALUE="…"…>



All radio buttons in a group should have same NAME
Only one button in a group can be pressed; pressing a
different one causes previous one to pop out
Example
<DL>
<DT>Credit Card:
<DD><INPUT TYPE="RADIO" NAME="creditCard"
VALUE="visa">
Visa
<DD><INPUT TYPE="RADIO" NAME="creditCard"
VALUE="mastercard">
Master Card
...
</DL>
INE2720 – Web Application Software Development
108
All copyrights reserved by C.C. Cheung 2003.
Combo Boxes

Format
– SELECT gives NAME
– OPTION gives VALUE

Example
Favorite language:
<SELECT NAME="language">
<OPTION VALUE="c">C
<OPTION VALUE="c++">C++
<OPTION VALUE="java" SELECTED>Java
<OPTION VALUE="lisp">Lisp
<OPTION VALUE="perl">Perl
<OPTION VALUE="smalltalk">Smalltalk
</SELECT>
INE2720 – Web Application Software Development
109
All copyrights reserved by C.C. Cheung 2003.
List Boxes

Format
– Identical to combo boxes, but specify MULTIPLE

Example
Languages you know:<BR>
<SELECT NAME="language" MULTIPLE>
<OPTION VALUE="c">C
<OPTION VALUE="c++">C++
<OPTION VALUE="java" SELECTED>Java
<OPTION VALUE="lisp">Lisp
<OPTION VALUE="perl" SELECTED>Perl
<OPTION VALUE="smalltalk">Smalltalk
</SELECT>
INE2720 – Web Application Software Development
110
All copyrights reserved by C.C. Cheung 2003.
Other Controls and Options

File upload controls
– Lets user select a file and send it to the server

Server-side image maps
– User clicks on an image and form gets submitted.
– Form data gets sent as name.x=x-pos&name.y=y-pos

Hidden fields
– Preset NAME and VALUE sent with form submission..

Grouping Controls
– FIELDSET lets you visually group forms.
– Internet Explorer and Netscape 6 only.

Tab order control
– TABINDEX (Internet Explorer and Netscape 6 only)
INE2720 – Web Application Software Development
111
All copyrights reserved by C.C. Cheung 2003.
HTML Form - Example
INE2720 – Web Application Software Development
112
All copyrights reserved by C.C. Cheung 2003.
HTML Forms - Summary

General process
FORM uses ACTION to specify base URL
Input elements each have a NAME
User enters values
When form submitted, URL is
baseURL?name1=value1&name2=value2&…
– For POST requests, name/value pairs sent on separate line
(not part of URL)
–
–
–
–

Textfields
– <INPUT TYPE="TEXT" …>

Submit Buttons
– <INPUT TYPE="SUBMIT" …>
INE2720 – Web Application Software Development
113
All copyrights reserved by C.C. Cheung 2003.
Break Time – 15 minutes
INE2720 – Web Application Software Development
114
All copyrights reserved by C.C. Cheung 2003.
XML

XML: Extensible Markup Language
– was developed in 1996 by the World Wide Web
Consortium (W3C) XML working group
– Designed to carry data
– Has all 3 components of SGML:



structure (DTD)
content (XML)
style (XSL)
XML
Document
+
DTD
(Optional)
XML
Parser
Application
XSL
(Optional)
INE2720 – Web Application Software Development
115
All copyrights reserved by C.C. Cheung 2003.
XML

XML documents contain only data
–
–
–
–
Applications decide how to display the data
Files end in the .xml extension
Highly portable
Language for creating markup languages


Can create new tags
Document Type Definition (DTD) files
– Defines grammatical rules for the document
– Used to check the XML document structure against

Extensible Style Language (XSL) files
– Defines additional information for rendering the document
– Possible to search, sort, manipulate and render XML using
Extensible Style Language (XSL)
INE2720 – Web Application Software Development
116
All copyrights reserved by C.C. Cheung 2003.
XML

XML parser
– Checks an XML document’s syntax


validating against DTD
non-validating against DTD
– Support either the

Document Object Model (DOM)
– Build a tree structure containing the XML document’s
data

Simple API for XML (SAX)
– Process the document and generate events
– More info on XML parsers:

www.xml.com/xml/pub/Guide/XML_Parsers
INE2720 – Web Application Software Development
117
All copyrights reserved by C.C. Cheung 2003.
Document Type Definitions

DTD: Document Type Definitions
– Specify list of element types, attributes and their
relationships to each other
– Optional, but recommended for program conformity
– !Element


Element type declaration – defines the rules for an element
#PCDATA: The element can store parsed character data
– !ATTLIST




Defines attributes for an element
#IMPLIED: Can assign its own type attribute or ignore
#REQUIRED: The specified attribute must be declared in
the document
#FIXED: The Specified attribute must be declared with
given value
INE2720 – Web Application Software Development
118
All copyrights reserved by C.C. Cheung 2003.
Document Type Definitions
1<!-- Fig 27.6: letter.dtd
-->
2<!-- DTD document for letter.xml -->
3
4<!ELEMENT letter (contact+, salutation, paragraph+,
5
closing, signature )>
6
7<!ELEMENT contact (name, address1, address2, city, state,
8
zip, phone, flag)>
9<!ATTLIST contact type CDATA #IMPLIED>
10
11<!ELEMENT name (#PCDATA)>
12<!ELEMENT address1 (#PCDATA)>
13<!ELEMENT address2 (#PCDATA)>
14<!ELEMENT city (#PCDATA)>
15<!ELEMENT state (#PCDATA)>
16<!ELEMENT zip (#PCDATA)>
17<!ELEMENT phone (#PCDATA)>
18<!ELEMENT flag EMPTY>
19<!ATTLIST flag gender (M | F) "M">
20
21<!ELEMENT salutation (#PCDATA)>
22<!ELEMENT closing (#PCDATA)>
23<!ELEMENT paragraph (#PCDATA)>
24<!ELEMENT signature (#PCDATA)>
Business letter DTD
 Declare elements
and elements’
attributes
#IMPLIED indicates
attribute is
unspecified—system
gives it a value
CDATA states that
attribute contains a
string
#PCDATA specifies
parsed character data
EMPTY specifies
element does not
contain content
(commonly used for
attributes)
Basic XML Documents

XML elements
– Root element



Must be exactly one per XML document
Contains all other elements in document
Lines preceding the root element are called the prolog
– Container element

Contains sub-elements (children)
– Empty element



No matching end tag
In HTML, IMG
Terminate with forward slash (/)
INE2720 – Web Application Software Development
120
All copyrights reserved by C.C. Cheung 2003.
Basic XML Documents
1<?xml version = "1.0"?>
2
3<!-- Fig. 27.5: letter.xml
-->
4<!-- Business letter formatted with XML -->
5
6<!DOCTYPE letter SYSTEM "letter.dtd">
7
8<letter>
9
10
<contact type = ”to">
11
<name>John Doe</name>
12
<address1>123 Main St.</address1>
13
<address2></address2>
14
<city>Anytown</city>
15
<state>Anystate</state>
16
<zip>12345</zip>
17
<phone>555-1234</phone>
18
<flag gender = "M"/>
19
</contact>
20
21
<salutation>Dear Sir:</salutation>
...
31</letter>
INE2720 – Web Application Software Development
121





XML declaration tells
parser which version of
XML
Specify DTD file’s name
and location
Attribute's value in
quotes
Empty element uses /
Tags contain data
appropriate for tag
names
<letter> - root
<contact type>
- container
<name>, <city>,
<address1>,<zip>
- sub-elements
All copyrights reserved by C.C. Cheung 2003.
Basic XML Documents


INE2720 – Web Application Software Development
122
Parse by msxml
into tree structure
- or + to expand/
collapse child
All copyrights reserved by C.C. Cheung 2003.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 20.9: mathml1.html -->
<!-- Simple MathML
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Simple MathML Example</title></head>
<body>
Element mrow behaves like parentheses, which allows the document
author to group related elements properly.
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mn>2</mn>
<mo>+</mo>
<mn>3</mn>
<mo>=</mo>
<mn>5</mn>
</mrow>
</math>
</body>
</html>
MathML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Fig. 20.10: mathml2.html -->
<!-- Simple MathML
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Algebraic MathML Example</title></head>
<body>
entity reference &InvisibleTimes; to indicate a
multiplication
operation
without
a
symbolic
representation.
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<mn>3</mn>
<mo>&InvisibleTimes;</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>+</mo>
<mi>x</mi>
<mo>-</mo>
<mfrac>
<mn>2</mn>
<mi>x</mi>
</mfrac>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
</body>
</html>
The msup element represents a superscript.
Element mfrac display a fraction.
XHTML

XHTML: Extensible Hypertext Markup Language
– properly structured XML that corresponds with traditional
HTML, i.e. HTML’s proposed successor
– includes HTML4 for backward compatibility
– allows complex documents to be created by combining HTML
elements with XML’s extensibility
 Ability to create new elements

Example: XHTML document might combine HTML elements with
MathML and CML elements
– allows well formed documents

Each XHTML document validated using DTD’s
– its features provide structure HTML lacks
– uses XML syntax

All tags lowercase and closed
INE2720 – Web Application Software Development
125
All copyrights reserved by C.C. Cheung 2003.
HTML – OK, XHTML - !OK
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
<body></HEAD>
<td>It is an acceptable HTML, but
an unacceptable XHTML
Test
</BODY>
…
<table WIDTH=80%>  Incorrect
<table width=“80%”>  Correct
INE2720 – Web Application Software Development
126
All copyrights reserved by C.C. Cheung 2003.
XHTML




Elements must be Properly Nested
Tag names must be in lowercase
XHTML elements must be closed
Empty elements must be closed
– Tags without end tag e.g. <br>


Attribute name must be in lowercase
Attribute value must be quoted
INE2720 – Web Application Software Development
127
All copyrights reserved by C.C. Cheung 2003.
Properly Nested
<b><i>This text is bold and italic</b></i>
<b><i>This text is bold and italic</i></b>
</li>
<ul>
<li>John</li>
<li>Mary
<ul>
<li>Green</li>
<li>Purple</li>
</ul>
<li>Milk</li>
</ul>
INE2720 – Web Application Software Development
Any Error???
128
All copyrights reserved by C.C. Cheung 2003.
Correct XHTML
<p>This is a paragraph
<p>This is another paragraph</p>
This is a break<br>
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif"
alt="Happy face" />
INE2720 – Web Application Software Development
129
All copyrights reserved by C.C. Cheung 2003.
Minimum XHTML document
<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>
</head>
<body> Body text goes here </body>
</html>
INE2720 – Web Application Software Development
130
All copyrights reserved by C.C. Cheung 2003.

Example of XHTML document which has been validated
by W3C’s HTML validation service at validator.w3.org
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
2
"http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">
3<html>
4
5<!-- Fig. 27.21: xhtmlExample.html -->
6<!--An XHTML example-->
7<head>
8
9<meta name = "keywords" content = "Webpage, design, HTML,
10
tutorial, personal, help, index, form, contact, feedback,
11
list, links, frame, deitel"/>
12
13<meta name = "description" content = "This Web site will help
14
you learn the basics of HTML and Webpage design through the
15
use of interactive examples and instruction."/>
16
17</head>
18
19<frameset cols = "110,*">
20
<frame name = "nav" scrolling = "no" src = "nav.html"/>
21
22
<!-- Nested Framesets are used to change the formatting -->
23
<!-- and spacing of the frameset as a whole
-->
24
<frameset rows = "175,*">
25
<frame name = "picture" src = "picture.html"
26
noresize = "noresize"/>
27
<frame name = "main" src = "main.html"/>
28
</frameset>
29
30
31
32
33
34
<noframes>
<p>This page uses frames, but your browser does not
support them.</p>
<p>Get Internet Explorer 5 at the
<a href = "http://www.microsoft.com/">Microsoft
35
36
Web-Site</a></p>
</noframes>
37</frameset>
38
39
40
<simple xmlns:ct = "http://www.deitel.com">
<ct:contact>
41
<ct:LastName>Black</ct:LastName>
42
<ct:FirstName>John</ct:FirstName>
43
</ct:contact>
44
45
46
47
48
49
<ct:contact>
1.1 <simple> xhtml tag
<ct:LastName>Green</ct:LastName>
<ct:FirstName>Sue</ct:FirstName>
</ct:contact>
</simple>
50
51</html>
3 Document Type
Definitions

XHTML 1.0 Strict
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
– Clean markup, use with CSS

XHTML 1.0 Transitional
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
– More loose markup (allow old tag), commonly use

XHTML 1.0 Frameset
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
– Partition your browser into several frames
INE2720 – Web Application Software Development
133
All copyrights reserved by C.C. Cheung 2003.
XHTML 1.0
INE2720 – Web Application Software Development
Reference: W3.org
134
All copyrights reserved by C.C. Cheung 2003.
Converting your web sites
to XHTML

Create a prolog for every applicable document
– DOCTYPE declaration

Change tag and attribute names to lowercase
– XHTML is case sensitive

Insert quotation marks to all attribute values
– Very time-consuming job

Repair empty element tags
– <br / >

Validate the web site documents
– http://validate.w3.org
INE2720 – Web Application Software Development
135
All copyrights reserved by C.C. Cheung 2003.
HTML Tidy
INE2720 – Web Application Software Development
Fixed mistakes automatically!
Let’s see the demo now.
136
All copyrights reserved by C.C. Cheung 2003.
References





Deitel: Chapter 4, 5, 20
CWP: Chapter 1, 2, 3, 4, 18
HTML Tutorial
W3 Schools
Buttons
http://www.rewnet.com/bbb/
http://www.graphics-4free.com/
http://coolgraphics.com/gallery/

http://www.wilrose.com/downloads/HTML_Tutorial.pdf

Thank you for patience!
INE2720 – Web Application Software Development
137
All copyrights reserved by C.C. Cheung 2003.