4. Internet Programming

1
4. Internet Programming
2
Reference
H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet
and World Wide Web How to Program, Prentice
Hall, 2002
3
Web site development

• To develop a Web site, three steps
• Obtain the appropriate equipment
• Web Server hardware and software
• Register the Web Server to an Internet Service
  Provider (ISP)
• Obtain the IP address and DNS address
• Develop the contents
• Internet Programming

4
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

5
Internet
Web Server
Database
Web Client

• Server-side Programming
• Skills that are often required
• CGI
• PHP
• ASP
• Perl
• Java Servlet,

• Client-side Programming
• Skills that are often required
• XHTML
• Javascript
• Java
• Dreamweaver
• Flash
• SMIL, XML

6
4.1 XHTML Extensible HyperText MarkUp Language
7
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

8
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

9
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. lthtmlgt lt/htmlgt
• There are many tags in XHTML. They specify
  different information required to display the Web
  page content

start tag
end tag (with a /)
10
Basic Structure of XHTML

• lthtmlgt
• lt!-- This is a comment --gt
• ltheadgt
• lttitlegt
• This is title, describing the content
• lt/titlegt
• lt/headgt
• ltbodygt
• This is body, main part of the page
• lt/bodygt
• lt/htmlgt

11
useful for validating the code to see if they
meet the xhtml standard
lt?xml version "1.0"?gt lt!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt lt!-- main.html --gt lt!-- Our first Web page
--gt lthtml xmlns "http//www.w3.org/1999/xhtml"gt
ltheadgt lttitlegtInternet and WWW How to
Program - Welcome lt/titlegt lt/headgt
ltbodygt ltpgtWelcome to XHTML!lt/pgt
lt/bodygt lt/htmlgt
comment
define the namespace of html
define the title of the web page
Example
ltpgt - new paragraph
12
See the title defined in head
Thats the content defined in body
13

• An XHTML document can be divided into 2 sections
• head section
• contains information of how the page is formatted
• e.g. lttitlegt lt/titlegt 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. ltpgtWelcome to XHTML!lt/pgt shows a line of
  text Welcome to XHTML! on the new paragraph

14
Tags

• Tags case sensitive
• For XHTML, ltcentergt is different from ltCENTERgt
• 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. lthtml xmlns "http//www.w3.org/1999/xhtml"gt

start tag
attribute value
attribute name
15
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
• lth1gt lt/h1gt, lth2gt lt/h2gt to lth6gt lt/h6gt
• It is assumed the text in lth1gt is more important
  than that in lth2gt and so on so forth
• By default, the size of the text that is more
  important is bigger

16
lthtml xmlns "http//www.w3.org/1999/xhtml"gt
ltheadgt lttitlegtInternet and WWW How to
Program - Headerslt/titlegt lt/headgt
ltbodygt lth1gtLevel 1 Headerlt/h1gt
lth2gtLevel 2 headerlt/h2gt lth3gtLevel 3
headerlt/h3gt lth4gtLevel 4 headerlt/h4gt
lth5gtLevel 5 headerlt/h5gt lth6gtLevel 6
headerlt/h6gt lt/bodygt lt/htmlgt
6 headers are all used to indicate the relative
importance of text
17
Text under lth1gt has the largest size
18
Meta Tag

• HTML interacts with the search engines through
  using meta tag

These words are compared with words in search
requests
ltheadgt ltmeta namekeywords contentlecture
notes, html, form, feedbackgt ltmeta
namedescription content this web site
describes gt lt/headgt
Description of a page seen on searching
19
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 ltagt
• To a web page
• lta hrefhttp//www.eie.polyu.edu.hkgtPolyUlt/agt

anchor attribute
The name on the Web page that represents this link
Value of the attribute The address of the Web
page
20
strong tag lets the text to be displayed with
bold font Other similar tags include ltugt
underline and ltemgt italic
ltbodygt lth1gtHere are my favorite siteslt/h1gt
ltpgtltstronggtClick a name to go to that
page. lt/stronggtlt/pgt lt!-- Create four test
hyperlinks --gt ltpgtlta href "http//www.polyu.e
du.hk"gtPolyUlt/agtlt/pgt ltpgtlta href
"http//www.eie.polyu.edu.hk"gtEIElt/agtlt/pgt ltpgtlta
href "http//www.eie.polyu.edu.hk/enpklun"gt
Dr Daniel Lun's Homelt/agtlt/pgt ltpgtlta href
"http//www.eie.polyu.edu.hk/ enpklun/ENG224/EN
G224.htm"gtENG224 Home pagelt/agtlt/pgt lt/bodygt
Four links create
Dont introduce spaces between different parts of
a URL address
21
This line is shown with a bold font
Four links are included
22
Linking Email Addresses

• To a mail address
• lta hrefmailtoenpklun_at_polyu.edu.hkgt Email me
• lt/agt
• With a subject
• lta hrefmailtoenpklun_at_polyu.edu.hk?subjecttitle
  gt Email me
• lt/agt
• Multiple recipients
• lta hrefmailtoaddress1,address2, address3gt
  Email me
• lt/agt

23
Linking Images

• Background Image can be defined as an attribute
  of the body tag
• ltbody backgroundimage.gifgt
• To show an Image inside a page
• ltimg srcimage.gif border0 height256
  width256 alttext description of the image/gt
• We can create an image hyperlink
• lta hrefpage1.htmlgt
• ltimg srcimage.gif /gt
• lt/agt

24
Will scale to this size to display
ltbodygt ltpgtltimg src "xmlhtp.jpg"
height "238 width "183" alt
"XML How to Program book cover"/gt ltimg
src "jhtp.jpg" height "238" width "183"
alt "Java How to Program book
cover"/gt lt/pgt lt/bodygt
jhtp.jpg in fact cannot be found. With the alt
attribute, the statement is displayed if the
image is not found
empty element do not markup text
25
alt statement (may not display the same for
Netscape)
The image displayed at the specified size
26
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,

27
Color

• Background color
• ltbody bgcolor00FF00gt lt/bodygt
• ltbody bgcolor greengt lt/bodygt
• Text color, links, visited links and activated
  links
• ltbody bgcolor white textblack linkpurple
  vlinkblue alinkyellowgt
• Font color
• ltfont colorgreengt lt/fontgt

28
Formatting Text

• The format of displayed text can be changed by
  using ltfontgt lt/fontgt
• Attributes
• Color
• Size
• Relative 1, 2, -3,
• Absolute 10, 12,
• Face
• Font used
• Arial, Verdana, Helvetica, Times,
• Multiple fonts
• ltfont face"Arial, Helvetica, sans-serif"gt

29
background color is yellow
ltbody bgcolor ffff00gt ltpgtltfont
face"courier" color"green" size24gt
This is a test.lt/fontgt lthr /gt ltfont
face"times" color"red" gt This is a
test.lt/fontgt lt/pgt ltpgt ltfont
face"arial" color"red" size1gt This
is a test.lt/fontgt ltbr /gt ltfont
face"times" color"ff00ff" size2gt
This is a test.lt/fontgt lt/pgt ltp align
centergtltfont face"courier" size3gt
This is a test.lt/fontgt lt/pgt lt/bodygt
horizontal ruler
the backslash is only to improve readability
See the difference between ltpgt and ltbrgt
the text is placed at the center
30
size 24
default size
size 1, 2, 3
31
Lists

• Unordered list
• a list that does not order its items by letter or
  number
• ltulgt lt/ulgt creates a list where each item
  begins with a bullet
• List items ltligt lt/ligt
• For example
• ltulgt
• ltligtApplelt/ligt
• ltligtOrangelt/ligt
• ltligtBananalt/ligt
• lt/ulgt

32
Lists

• Ordered list
• List that order their items by letter or number
• ltol typestylegt lt/olgt
• 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 ltligt lt/ligt

33
Table

• Organize data into rows and columns

Table caption
Table header
Table body
Table footer
Table border
34

• lttable attributevaluegt lt/tablegt
• Attribute examples
• border1 ? the larger the number, the thicker
  is the border. 0 means no border
• aligncenter ? the table is aligned at the
  center of the browser
• width60 ? to set the table width to 60 of
  the browsers width
• Caption of the table ltcaptiongt lt/captiongt
• Insert a table row lttrgt lt/trgt
• The head, body and foot sections are defined by
• lttheadgt lt/theadgt
• lttbodygt lt/tbodygt
• lttfootgt lt/tfootgt

35
lttable border "1" width "40" align left
summary "This table provides information about
the price of fruit"gt
ltcaptiongtltstronggtPrice of Fruitlt/stronggtlt/captiongt
lttheadgt lttrgt lt!-- lttrgt inserts a
table row --gt ltthgtFruitlt/thgt lt!--
insert a heading cell --gt
ltthgtPricelt/thgt lt/trgt lt/theadgt
lttbodygt lttrgt lttdgtApplelt/tdgt lt!--
insert a data cell --gt lttdgt0.25lt/tdgt
lt/trgt
The use of th tag defines the content of header
or footer cells
The tr tag insert a new row
36
lttrgt lttdgtOrangelt/tdgt
lttdgt0.50lt/tdgt lt/trgt lttrgt
lttdgtBananalt/tdgt lttdgt1.00lt/tdgt
lt/trgt lttrgt lttdgtPineapplelt/tdgt
lttdgt2.00lt/tdgt lt/trgt lt/tbodygt
lttfootgt lttrgt ltthgtTotallt/thgt
ltthgt3.75lt/thgt lt/trgt lt/tfootgt lt/tablegt
The use of th tag defines the content of header
or footer cells
The use of td tag defines the content of body
cells
37
(No Transcript)
38
Col span and Row span

• colspan and rowspan allow merging columns/rows
• ltcolspannumbergt
• data cell spans more than one column
• ltrowspannumbergt
• data cell spans more than one row

39

• lttable border1 width60gt
• ltcaptiongt Average Grades lt/captiongt
• lttrgt
• ltth colspan4gt Report lt/thgt
• lt/trgt
• lttrgt
• ltthgt lt/thgt ltthgt 2000 lt/thgt ltthgt 2001 lt/thgt
• ltthgt 2002 lt/thgt
• lt/trgt
• lttrgt
• lttdgt Maths lt/tdgt lttdgt A lt/tdgt lttd
  rowspan2 valigncentergt B lt/tdgt lttdgt C
  lt/tdgt
• lt/trgt
• lttrgt
• lttdgt English lt/tdgt lttdgt C lt/tdgt lttdgt A
  lt/tdgt
• lt/trgt
• lt/tablegt

first row
2nd row
3rd row
vertical alignment
4th row
40
(No Transcript)
41
Forms

• When browsing web sites, users often need to
  provide information such as email address, search
  keywords, etc
• Forms allows user to input information

42
CGI
App
Internet
Web Server
Web Client
43

• A form element is inserted into a web page by the
  ltformgt tag
• ltform method value1 action value2gt
  lt/formgt
• 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

44
script that will be called to execute in the
server
use post method
ltform method post action /cgi-bin/formmail
gt ltinput typeradio namesize valuelarge
checkedchecked/gt large ltinput typeradio
namesize valuemedium/gt medium ltinput
typeradio namesize valuesmall/gt
small lt/formgt
Only the radio button of large is checked
45
Forms

• Elements inside a form are introduced by the
  ltinputgt tag
• ltinputgt
• typehidden namevariable name
• valuevalue that sends to the server
• type text name value size25
• type submit value
• type reset value
• type checkbox value name

46
Form example I
Thing that sends back to server

• ltinput typecheckbox namethings
  valueham/gt Ham
• ltinput typecheckbox namethings
  valuesweetcorn/gt Sweet Corn
• ltinput typecheckbox namethings
  valuemushroom/gt Mushroom
• ltinput typecheckbox namethings
  valuechicken/gt Chicken
• ltinput typecheckbox namethings
  valuepeas/gt Peas

Indicate all 5 checkboxes belong to the same group
The words show on screen
47
Form example II
Data that would send to server but do not display
on screen
ltinput type"hidden" nametitle"
value"Feedback" /gt ltpgtltlabelgtName ltinput
type "text" name "name" size"25"
maxlength"30"/gt lt/labelgt lt/pgt ltinput type
"submit" value"Submit your entries"/gt ltinput
type "reset" value"Clear Your Entries"/gt
send the input the textbox to server
clear the content of textbox
48
Form example III
Masked by asterisk
Space is counted here
ltpgtltlabelgtCommentsltbr /gt lttextarea name
"comments" rows"4" cols"36"gt Enter your
comments here. lt/textareagt lt/labelgtlt/pgt ltpgtltlabel
gtPlease input your password ltinput name
"secret" type"password" size"25"/gt lt/labelgtlt/pgt
ltinput type "submit" value"Submit Your
Entries"/gt ltinput type "reset" value"Clear
Your Entries"/gt
49
Form example IV
The selected value here mean Amazing is
selected default value
ltpgtltlabelgtRate our site ltselect name
"rating"gt ltoption valueAmazing selected"sel
ected"gtAmazinglt/optiongt ltoption
value3gt3lt/optiongt ltoption value2gt2lt/optiongt
ltoption value1gt1lt/optiongt ltoption
value0gt0lt/optiongt lt/selectgtlt/pgt ltinput type
"submit" value"Submit Your Entries"/gt ltinput
type "reset" value"Clear Your Entries"/gt
Change to default value when reset