Scribd
Upload
123 views

4 Internet Programming

This document discusses internet programming and web development. It covers the steps to develop a website, including obtaining equipment, registering a web server with an internet service provider, and developing content. It also discusses client-side and server-side programming. The document then focuses on XHTML and its basic structure and tags. It provides examples of common tags for headers, paragraphs, and attributes.

Uploaded by

bsgindia82
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
123 views

4 Internet Programming

This document discusses internet programming and web development. It covers the steps to develop a website, including obtaining equipment, registering a web server with an internet service provider, and developing content. It also discusses client-side and server-side programming. The document then focuses on XHTML and its basic structure and tags. It provides examples of common tags for headers, paragraphs, and attributes.

Uploaded by

bsgindia82
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 49

ENG224

INFORMATION TECHNOLOGY – Part I


4. Internet Programming

4. Internet Programming

1
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Reference
H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet
and World Wide Web: How to Program, Prentice
Hall, 2002

2
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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

3
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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 client’s machine
– Server-side programming: to define the operation to
be performed on the server

4
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Internet
Database Web Server Web Client
Server-side Programming Client-side Programming

Skills that are often required: Skills that are often required:
• CGI • XHTML
• PHP • Javascript
• ASP • Java
• Perl • Dreamweaver
• Java Servlet, … • Flash
• SMIL, XML …
5
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

4.1 XHTML – Extensible HyperText


MarkUp Language

6
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

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
7
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

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

8
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

Features of XHTML
 Platform independent
– The same piece of code can give the same display in Mac,
Linux and Windows
 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
– E.g. <html> … </html>
– There are many tags in XHTML. They specify different
information required to display the Web page content

9 start tag end tag (with a /)


ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

Basic Structure of XHTML


<html>
<!-- This is a comment -->
<head>
<title>
This is title, describing the content
</title>
</head>
<body>
This is body, main part of the page
</body>
</html>
10
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
useful
usefulforforvalidating
validatingthe
thecode
codetoto
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">

<!-- main.html --> comment


comment
<!-- Our first Web page -->
define
definethe
thenamespace
namespaceof
ofhtml
html
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program -
Welcome
</title>
</head> define
definethe
thetitle
titleof
ofthe
theweb
webpage
page
<body>
<p>Welcome to XHTML!</p>
</body>
</html> <p> - new paragraph Example
Example
11 <p> - new paragraph
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

See the title defined in head

That’s the content defined in body


12
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML

 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 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

13
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Tags
 Tags: case sensitive
– 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


14
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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
– <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

15
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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


<head>
<title>Internet and WWW How to Program -
Headers</title>
</head>

<body> 66headers
headersare
areall
allused
used
to
toindicate
indicatethe
therelative
relative
<h1>Level 1 Header</h1>
importance
importanceof oftext
text
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>

</body>
</html>
16
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Text
Textunder
under<h1>
<h1>has
hasthe
thelargest
largestsize
size

17
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Meta Tag
 HTML interacts with the search engines
through using meta tag
These
Thesewords
wordsare
arecompared
compared
with
withwords
wordsin
insearch
searchrequests
requests

<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
18
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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 The
Thename
nameon onthe
theWeb
Web
page
pagethat
thatrepresents
representsthis
this
Value
Valueof
ofthe
theattribute:
attribute: link
link
19 The
Theaddress
addressof
ofthe
theWeb
Webpage
page
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
strong
strongtag
taglets
letsthe
thetext
textto
tobe
be
<body> displayed
displayedwith
withbold
boldfont
font
<h1>Here are my favorite Other
Othersimilar
similartags
tagsinclude
include
sites</h1> <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
<!-- Create four test hyperlinks -->

<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>
Don’t
Don’tintroduce
introducespaces
spacesbetween
between
20 different
differentparts
partsof
ofaaURL
URLaddress
address
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

This
Thisline
lineisisshown
shownwith
withaabold
boldfont
font

Four
Fourlinks
linksare
areincluded
included

21
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Linking Email Addresses


 To a mail address:
<a href=“mailto:[email protected]”> Email me
</a>
 With a subject:
<a href=“mailto:[email protected]?subject=title”>
Email me
</a>
 Multiple recipients:
<a href=“mailto:address1,address2, address3”> Email me
</a>
22
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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 can create an image hyperlink
<a href=“page1.html”>
<img src=“image.gif” …/>
</a>
23
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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: jhtp.jpg
jhtp.jpgininfact
factcannot
cannotbebefound.
found.
do
donot
notmarkup
markuptext
text With
Withthethealt
altattribute,
attribute,the
thestatement
statement
isisdisplayed
displayedififthe
theimage
imageisisnot
notfound
found
24
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

“alt”
“alt”statement
statement(may
(maynot
not
display
displaythe
thesame
samefor
for
Netscape)
Netscape)

The
Theimage
imagedisplayed
displayedatatthe
the
specified
specifiedsize
size
25
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Color
 2 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, …
26
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Color
 Background color:
– <body bgcolor=“#00FF00”> … </body>
– <body bgcolor =“green”> … </body>
 Text color, links, visited links and activated links:
– <body bgcolor =“white” text=“black” link=“purple”
vlink=“blue” alink=“yellow”>
 Font color:
– <font color=“green”> … </font>

27
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Formatting Text
 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">
28
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
background
backgroundcolor
colorisisyellow
yellow
<body bgcolor = “#ffff00”>
<p><font face="courier" color="green" size=“24”>
This is a test.</font> horizontal ruler
<hr /> horizontal ruler
<font face="times" color="red" >
This is a test.</font> the
thebackslash
backslashisisonlyonly
</p> to improve readability
<p> to improve readability
<font face="arial" color="red" size=“+1”>
See
Seethe
the This is a test.</font>
difference
difference <br />
between <font face="times" color="#ff00ff" size=“+2”>
between This is a test.</font>
<p> and
<p> and </p>
<br>
<br> <p align = center><font face="courier" size=“+3”>
This is a test.</font>
</p> the
the text
text isisplaced
placed atatthe
the center
center
29 </body>
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

size
size ==24
24
default
defaultsize
size

size
size==+1,
+1,+2,
+2,+3
+3

30
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Lists
 Unordered 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>
31
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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, …

– List items: <li> … </li>


32
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Table
 Organize data into rows and columns

Table caption
Table header

Table body
Table footer
33 Table border
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

 <table attribute=“value”> … </table>


 Attribute examples:
– 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 browser’s
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>
34 <tfoot> … </tfoot>
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

<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> <!-- <tr> inserts a table row -->
<th>Fruit</th> <!-- insert a heading cell -->
<th>Price</th>
</tr> The
Theuse
useof
ofth
thtag
tag
</thead> defines
definesthe
the
The
Thetrtrtag
taginsert
insert content
contentof
ofheader
header
<tbody> aanew
newrowrow or
<tr>
orfooter
footercells
cells
<td>Apple</td> <!-- insert a data cell -->
<td>$0.25</td>
35 </tr>
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

<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>
<td>$2.00</td> The
Theuse
useof ofth
thtag
tag
</tr>
The use of td tag defines
defines the
the
</tbody> The use of td tag content of header
defines
definesthe
the content of header
content or
orfooter
footercells
cells
contentof
ofbody
body
36 cells
cells
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

37
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Col span and Row span


 colspan and rowspan allow merging
columns/rows
– <colspan=“number”>
 data cell spans more than one column
– <rowspan=“number”>
 data cell spans more than one row

38
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
<table border=“1” width=“60%”>
<caption> Average Grades </caption>
<tr>
<th colspan=“4”> Report </th> first
firstrow
row
</tr>
<tr>
<th> </th> <th> 2000 </th> <th> 2001 </th>
<th> 2002 </th>
</tr> 2nd
2ndrowrow
<tr>
<td> Maths </td> <td> A </td> <td rowspan=“2”
valign=“center”> B </td> <td> C </td>
</tr>
<tr> vertical
verticalalignment
alignment 3rd
3rdrow
row
<td> English </td> <td> C </td> <td> A </td>
</tr>
</table> 4th
4throw
row
39
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

40
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

App CGI
Internet
Web Server Web Client
1
www.abc.com/form.htm

2
www.abc.com
method = post or get
3
action = program name
(script) in server to
receive the data
Name = ???
42 and others
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

 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

43
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

use script
scriptthat
thatwill
willbe
becalled
calledto
to
usepost
postmethod
method
execute
executeininthe
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>

Only
Onlythe
theradio
radio
button
buttonof
oflarge
largeisis
checked
checked
44
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Forms
 Elements inside a form are introduced by the
<input> tag
 <input>
– 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=“”
45
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Thing
Thingthat
thatsends
sendsback
backto
toserver
server
Form example I
<input type=“checkbox” name=“things”
value=“ham”/> Ham
<input type=“checkbox” name=“things”
value=“sweetcorn”/> Sweet Corn Indicate
Indicateall
all55
<input type=“checkbox” name=“things” checkboxes
checkboxes
value=“mushroom”/> Mushroom belong
belongtotothe
the
<input type=“checkbox” name=“things” same
samegroup
group
value=“chicken”/> Chicken
<input type=“checkbox” name=“things”
value=“peas”/> Peas

The
Thewords
wordsshow
showon
onscreen
screen

46
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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
sendthe
theinput
inputthe
thetextbox
textboxto
toserver
server
</p>
<input type= "submit" value="Submit your entries"/>
<input type= "reset" value="Clear Your Entries"/>
47 clear
clearthe
thecontent
contentof
oftextbox
textbox
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

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<input type= "reset" value="Clear Your Entries"/>
ENG224
INFORMATION TECHNOLOGY – Part I
4. Internet Programming

Form example IV
The
The“selected”
“selected”value
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>
<option value=“2”>2</option> Change
Changeto
todefault
default
<option value=“1”>1</option> value
valuewhen
whenreset
reset
<option value=“0”>0</option>
</select></p>
<input type= "submit" value="Submit Your Entries"/>
<input type= "reset" value="Clear Your Entries"/>
49

You might also like