4 Internet Programming

ENG224
INFORMATION TECHNOLOGY Part I

4. Internet Programming
1
ENG224
Reference
H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet
and World Wide Web: How to Program, Prentice
Hall, 2002
ENG224
Web site development
To develop a Web site, three steps:

1. Obtain the appropriate equipment
Web Server hardware and software
2. Register the Web Server to an Internet
Service Provider (ISP)
Obtain the IP address and DNS address
3. Develop the contents
Internet Programming
ENG224
Internet Programming
Web
service is a kind of client / server process

Need interaction between client and server
Programming for providing Web service can
also be divided into
Client-side programming: to define the operation to

be performed on the clients machine
Server-side programming: to define the operation to
be performed on the server
ENG224
Internet
Database Web Server
Web Client
Server-side Programming
Client-side Programming
Skills that are often required:

CGI
PHP
ASP
Perl
Java Servlet,
Skills that are often required:

XHTML
Javascript
Java
Dreamweaver
Flash
SMIL, XML
ENG224
4. Internet Programming - XHTML
4.1 XHTML Extensible HyperText

MarkUp Language
ENG224
Web programming using XHTML

Nowadays,
there are many tools that help to

develop Web page
Dreamweaver, Visual studio
Provide
sophisticated tools to allow Web page

developed in a graphical manner
Finally, the job of these tools is to convert the
user design to XHTML code
Understanding of XHTML allows us
fine tuning the codes generated by these tools

understand the source of a Web page
ENG224
What is XHTML?
Unlike procedural programming languages, e.g. C, C++, XHTML

is a markup language that specifies the format of document to be
seen in browser
XHTML has replaced the HTML as the primary means of
describing the Web page content
Become a World Wide Web Consortium (W3C) recommendation
W3C is an industry consortium
Seeks to promote standards for the evolution of the Web and

interoperability between WWW products by producing specifications and
reference software
Compared with HTML, XHTML provides more robust, richer and

extensible features
ENG224
Features of XHTML
Platform independent
Text-based
Program is written with ASCII characters

Can be written using a text editor, such as notepad
An XHTML file must have an extension of .html or .htm

Information is generally enclosed inside paired tags
The same piece of code can give the same display in Mac,
Linux and Windows
E.g. <html> </html>

There are many tags in XHTML. They specify different
information required to display the Web page content
start tag
end tag (with a /)
ENG224
Basic Structure of XHTML

<html>

<head>
<title>
This is title, describing the content
</title>
</head>
<body>
This is body, main part of the page
</body>
10
</html>
ENG224
useful
usefulfor
forvalidating
validatingthe
thecode
codeto
to
see
seeififthey
theymeet
meetthe
thexhtml
xhtmlstandard
standard
<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
comment

comment

define
definethe
thenamespace
namespaceof
ofhtml
html
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Internet and WWW How to Program Welcome
</title>
define
</head>
definethe
thetitle
titleof
ofthe
theweb
webpage
page
11
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
<p> - new paragraph
<p> - new paragraph
Example
Example
ENG224
See the title defined in head
12
Thats the content defined in body
ENG224
An
XHTML document can be divided into 2

sections
head section
contains information of how the page is formatted

e.g. <title> </title> can be found in head section
to indicate the title of the Web page when it is
shown in browser
body
13
section
contains the actual page contents

e.g. <p>Welcome to XHTML!</p> shows a line of
text Welcome to XHTML! on the new paragraph
ENG224
Tags
Tags: case sensitive
14
For XHTML, <center> is different from <CENTER>

For HTML, it is case insensitive
Browse will not display information within tag that does

not understand
Tags: no precise positioning
Many start tags define attributes that provide additional
information
E.g. <html xmlns = "http://www.w3.org/1999/xhtml">
start tag
attribute name
attribute value
ENG224
Common Tags Headers
Some text may be more important the others

XHTML provides six headers, called header elements,
for specifying the relative importance of information
15
<h1> </h1>, <h2> </h2> to <h6> </h6>
It is assumed the text in <h1> is more important than

that in <h2> and so on so forth
By default, the size of the text that is more important is
bigger
ENG224
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Internet and WWW How to Program Headers</title>
</head>
<body>
<h1>Level
<h2>Level
<h3>Level
<h4>Level
<h5>Level
<h6>Level
16
</body>
</html>
1
2
3
4
5
6
Header</h1>
header</h2>
header</h3>
header</h4>
header</h5>
header</h6>
66headers
headersare
areall
allused
used
to
toindicate
indicatethe
therelative
relative
importance
importanceof
oftext
text
ENG224
Text
Textunder
under<h1>
<h1>has
hasthe
thelargest
largestsize
size
17
ENG224
Meta Tag
HTML
interacts with the search engines

through using meta tag
These
Thesewords
wordsare
arecompared
compared
with
withwords
wordsin
insearch
searchrequests
requests
18
<head>
<meta name=keywords content=lecture notes, html,
form, feedback>
<meta name=description content = this web site
describes >
</head>
Description
Descriptionof
ofaapage
pageseen
seenon
onsearching
searching
ENG224
Linking Webpage
One
of the most important XHTML features is

the hyperlink
Link to another resources, such as web page,

image, etc.
Achieve
by using the anchor tag <a>:
To a web page:
<a href=http://www.eie.polyu.edu.hk>PolyU</a>
anchor
anchorattribute
attribute
19
Value
Valueof
ofthe
theattribute:
attribute:
The
Theaddress
addressof
ofthe
theWeb
Webpage
page
The
Thename
nameon
onthe
theWeb
Web
page
pagethat
thatrepresents
representsthis
this
link
link
ENG224
<body>
<h1>Here are my favorite
sites</h1>
strong
strongtag
taglets
letsthe
thetext
textto
tobe
be
displayed
displayedwith
withbold
boldfont
font
Other
Othersimilar
similartags
tagsinclude
include
<u>
<u>underline
underlineand
and<em>
<em>italic
italic
<p><strong>Click a name to go to that page.

</strong></p>
Four
Fourlinks
linkscreate
create


<p><a href = "http://www.polyu.edu.hk">PolyU</a></p>
<p><a href = "http://www.eie.polyu.edu.hk">EIE</a></p>
<p><a href = "http://www.eie.polyu.edu.hk/~enpklun">
Dr Daniel Lun's Home</a></p>
<p><a href = "http://www.eie.polyu.edu.hk/
~enpklun/ENG224/ENG224.htm">ENG224 Home page</a></p>
</body>
20
Dont
Dontintroduce
introducespaces
spacesbetween
between
different
differentparts
partsof
ofaaURL
URLaddress
address
ENG224
This
Thisline
lineisisshown
shownwith
withaabold
boldfont
font
Four
Fourlinks
linksare
areincluded
included
21
ENG224
Linking Email Addresses

To
a mail address:
<a href=mailto:enpklun@polyu.edu.hk> Email me

</a>
With
a subject:
<a href=mailto:enpklun@polyu.edu.hk?subject=title>
Email me
</a>
Multiple
22
recipients:
<a href=mailto:address1,address2, address3> Email me

</a>
ENG224
Linking Images
Background
Image can be defined as an

attribute of the body tag:
<body background=image.gif>
To show
an Image inside a page:
<img src=image.gif border=0 height=256

width=256 alt=text description of the image/>
We
23
can create an image hyperlink

<a href=page1.html>
<img src=image.gif />
</a>
ENG224
Will
Willscale
scaleto
tothis
thissize
sizeto
todisplay
display
<body>
<p><img src = "xmlhtp.jpg"
height = "238 width = "183"
alt = "XML How to Program book cover"/>
<img src = "jhtp.jpg"
height = "238" width = "183"
alt = "Java How to Program book cover"/>
</p>
</body>
empty
emptyelement:
element:
do
donot
notmarkup
markuptext
text
24
jhtp.jpg
jhtp.jpgin
infact
factcannot
cannotbe
befound.
found.
With
Withthe
thealt
altattribute,
attribute,the
thestatement
statement
isisdisplayed
displayedififthe
theimage
imageisisnot
notfound
found
ENG224
alt
altstatement
statement(may
(maynot
not
display
displaythe
thesame
samefor
for
Netscape)
Netscape)
The
Theimage
imagedisplayed
displayedatatthe
the
specified
specifiedsize
size
25
ENG224
Color
2
26
ways to specify:
Use hexadecimal numbers
RGB format: FF: strongest, 00 weakest
#FF0000
#00FF00
#0000FF
Use color names
Black, White, Red, Cyan, Green, Purple,
Magenta, Blue, Yellow, OrangeRed,
SpringGreen, BlueViolet, Gold,
DarkGoldenrod, Burlywood,
ENG224
Color
Background
<body bgcolor=#00FF00> </body>

<body bgcolor =green> </body>
Text
27
color, links, visited links and activated links:
<body bgcolor =white text=black link=purple

vlink=blue alink=yellow>
Font
color:
color:
<font color=green> </font>
ENG224
Formatting Text
28
The format of displayed text can be changed by using

<font> </font>
Attributes:
Color:
Size:
Relative: +1, +2, -3,
Absolute: 10, 12,
Face:
Font used
Arial, Verdana, Helvetica, Times,
Multiple fonts:
<font face="Arial, Helvetica, sans-serif">
ENG224
background
backgroundcolor
colorisisyellow
yellow
<body bgcolor = #ffff00>

<p><font face="courier" color="green" size=24>
This is a test.</font>
horizontal
ruler
horizontal
ruler
<hr />
<font face="times" color="red" >
the
thebackslash
backslashisisonly
only
</p>
to
improve
readability
to
improve
readability
<p>
<font face="arial" color="red" size=+1>
See
Seethe
the
difference
difference <br />
<font face="times" color="#ff00ff" size=+2>
between
between
<p>
and
<p> and </p>
<br>
<br>
<p align = center><font face="courier" size=+3>
</p>
the
text
isisplaced
atatthe
center
the
text
placed
the
center
29 </body>
ENG224
size
size ==24
24
default
defaultsize
size
size
size==+1,
+1,+2,
+2,+3
+3
30
ENG224
Lists
Unordered
31
list
a list that does not order its items by letter or number

<ul> </ul> creates a list where each item begins
with a bullet
List items: <li> </li>
For example
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
ENG224
Lists
Ordered
list
List that order their items by letter

or number
<ol type=style> </ol>
When style equals to
1: decimal, 1, 2, 3,
I: uppercase Roman, I, II, III,
i: lowercase Roman, i, ii, iii,
A: uppercase Latin, A, B, C,
a: lowercase Latin, a, b, c,
32
List items: <li> </li>
ENG224
Table
Organize
data into rows and columns
Table caption
Table header
Table body
Table footer
33
Table border
ENG224
<table attribute=value> </table>

Attribute examples:
34
border=1 the larger the number, the thicker is the border.

0 means no border
align=center the table is aligned at the center of the
browser
width=60% to set the table width to 60% of the browsers
width
Caption of the table: <caption> </caption>

Insert a table row: <tr> </tr>
The head, body and foot sections are defined by
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
ENG224
<table border = "1" width = "40%" align = left

summary = "This table provides information about
the price of fruit">
<caption><strong>Price of Fruit</strong></caption>
<thead>
<tr>


<th>Fruit</th> 
<th>Price</th>
The
Theuse
useof
ofth
thtag
tag
</tr>
defines
</thead>
definesthe
the
<tbody>
<tr>
35
The
Thetrtrtag
taginsert
insert
aanew
newrow
row
content
contentof
ofheader
header
or
orfooter
footercells
cells
<td>Apple</td> 

<td>$0.25</td>
</tr>
ENG224
<tr>
<tfoot>
<td>Orange</td>
<tr>
<td>$0.50</td>
<th>Total</th>
</tr>
<th>$3.75</th>
<tr>
</tr>
<td>Banana</td>
</tfoot>
<td>$1.00</td>
</table>
</tr>
<tr>
<td>Pineapple</td>
The
<td>$2.00</td>
Theuse
useof
ofth
thtag
tag
</tr>
defines
the
defines
the
The
use
of
td
tag
The use of td tag
</tbody>
content of header
36
defines
definesthe
the
content
contentof
ofbody
body
cells
cells
content of header
or
orfooter
footercells
cells
ENG224
37
ENG224
Col span and Row span

colspan
and rowspan allow merging

columns/rows
<colspan=number>
data
<rowspan=number>
data
38
cell spans more than one column

cell spans more than one row
ENG224
39
<table border=1 width=60%>

<caption> Average Grades </caption>
<tr>
first
<th colspan=4> Report </th>
firstrow
row
</tr>
<tr>
<th> </th> <th> 2000 </th> <th> 2001 </th>
<th> 2002 </th>
2nd
</tr>
2ndrow
row
<tr>
<td> Maths </td> <td> A </td> <td rowspan=2
valign=center> B </td> <td> C </td>
</tr>
3rd
<tr>
vertical
3rdrow
row
verticalalignment
alignment
<td> English </td> <td> C </td> <td> A </td>
</tr>
4th
</table>
4throw
row
ENG224
40
ENG224
Forms
When
browsing
web sites, users
often need to
provide information
such as email
address, search
keywords, etc
Forms allows user
to input information
41
ENG224
App
CGI
Internet
Web Server
www.abc.com/form.htm
Web Client
1
2
www.abc.com
method = post or get
action = program name
(script) in server to
receive the data
Name = ???
42 and others
ENG224
43
A form element is inserted into a web page by the

<form> tag
<form method = value1 action = value2> </form>
Attributes:
method = post or get
Indicates the way the Web server will organize and
send you the form output
post: causes changes to server data, e.g., update
a database
get: does not cause any changes in server-side
data, e.g., make a database request
action =
Path to script, e.g., CGI
ENG224
use
usepost
postmethod
method
script
scriptthat
thatwill
willbe
becalled
calledto
to
execute
executein
inthe
theserver
server
<form method = post action = /cgi-bin/formmail>

<input type=radio name=size value=large
checked=checked/> large
<input type=radio name=size value=medium/>
medium
<input type=radio name=size value=small/>
small
</form>
44
Only
Onlythe
theradio
radio
button
buttonof
oflarge
largeisis
checked
checked
ENG224
Forms
Elements
inside a form are introduced by the

<input> tag
<input>
45
type=hidden name=variable name

value=value that sends to the server
type =text name= value = size=25
type =submit value =
type =reset value =
type =checkbox value = name=
ENG224
Form example I
Thing
Thingthat
thatsends
sendsback
backto
toserver
server
<input type=checkbox name=things

value=ham/> Ham
value=sweetcorn/> Sweet Corn
value=mushroom/> Mushroom
value=chicken/> Chicken
value=peas/> Peas
The
Thewords
wordsshow
showon
onscreen
screen
46
Indicate
Indicateall
all55
checkboxes
checkboxes
belong
belongto
tothe
the
same
samegroup
group
ENG224
Form example II
Data
Datathat
thatwould
wouldsend
sendto
to
server
serverbut
butdo
donot
notdisplay
displayon
on
screen
screen
<input type="hidden" name=title" value="Feedback" />
<p><label>Name:
<input type= "text" name= "name" size="25"
maxlength="30"/>
</label>
send
the
input
the
textbox
to
server
send
the
input
the
textbox
to
server
</p>
<input type= "submit" value="Submit your entries"/>
<input type= "reset" value="Clear Your Entries"/>
47
clear
clearthe
thecontent
contentof
oftextbox
textbox
ENG224
Form example III

Masked
Maskedby
byasterisk
asterisk
Space
Spaceisiscounted
countedhere
here
<p><label>Comments:<br />
<textarea name= "comments" rows="4" cols="36">
Enter your comments here.
</textarea> </label></p>
<p><label>Please input your password:
<input name= "secret" type="password" size="25"/>
</label></p>
<input type= "submit" value="Submit Your Entries"/>
48
ENG224
Form example IV
The
Theselected
selectedvalue
valuehere
here
mean
meanAmazing
Amazingisisselected
selected
default
defaultvalue
value
<p><label>Rate our site:
<select name= "rating">
<option value=Amazing
selected="selected">Amazing</option>
<option value=3>3</option>
Change
Changeto
todefault
default
value
valuewhen
whenreset
reset
</select></p>
<input type= "submit" value="Submit Your Entries"/>
49

4 Internet Programming

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

4 Internet Programming

Загружено:

Авторское право:

Доступные форматы

ENG224

INFORMATION TECHNOLOGY Part I

Web site development

To develop a Web site, three steps:

service is a kind of client / server process

Client-side programming: to define the operation to

Skills that are often required:

Skills that are often required:

4.1 XHTML Extensible HyperText

Web programming using XHTML

there are many tools that help to

Dreamweaver, Visual studio

sophisticated tools to allow Web page

fine tuning the codes generated by these tools

Unlike procedural programming languages, e.g. C, C++, XHTML

W3C is an industry consortium

Seeks to promote standards for the evolution of the Web and

Compared with HTML, XHTML provides more robust, richer and

Program is written with ASCII characters

An XHTML file must have an extension of .html or .htm

E.g. <html> </html>

end tag (with a /)

Basic Structure of XHTML

<?xml version = "1.0"?>

<html xmlns = "http://www.w3.org/1999/xhtml">

<p> - new paragraph

See the title defined in head

Thats the content defined in body

XHTML document can be divided into 2

contains information of how the page is formatted

contains the actual page contents

Tags: case sensitive

For XHTML, <center> is different from <CENTER>

Browse will not display information within tag that does

Common Tags Headers

Some text may be more important the others

<h1> </h1>, <h2> </h2> to <h6> </h6>

It is assumed the text in <h1> is more important than

<html xmlns = "http://www.w3.org/1999/xhtml">

interacts with the search engines

of the most important XHTML features is

Link to another resources, such as web page,

by using the anchor tag <a>:

<p><strong>Click a name to go to that page.

Linking Email Addresses

<a href=mailto:enpklun@polyu.edu.hk> Email me

<a href=mailto:address1,address2, address3> Email me

Image can be defined as an

an Image inside a page:

<img src=image.gif border=0 height=256

can create an image hyperlink

<body bgcolor=#00FF00> </body>

color, links, visited links and activated links:

<body bgcolor =white text=black link=purple

<font color=green> </font>

The format of displayed text can be changed by using

<body bgcolor = #ffff00>

a list that does not order its items by letter or number

List that order their items by letter

List items: <li> </li>

data into rows and columns

<table attribute=value> </table>

border=1 the larger the number, the thicker is the border.