
ENG224 INFORMATION TECHNOLOGY – Part I. 4. Internet Programming. 4. Internet Programming. 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. ENG224
Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
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
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Web site development
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Internet Programming
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Internet
Database
Web Server
Web Client
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
4.1 XHTML – Extensible HyperText MarkUp Language
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
Web programming using XHTML
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
What is XHTML?INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
Features of XHTMLstart tag
end tag (with a /)
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>
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
useful for validating the code to see if they meet the xhtml 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 -->
<!-- Our first Web page -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome
</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
comment
define the namespace of html
define the title of the web page
Example
<p> - new paragraph
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
See the title defined in head
That’s the content defined in body
INFORMATION TECHNOLOGY – Part I
4. Internet Programming - XHTML
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Tagsstart tag
attribute value
attribute name
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Common Tags – HeadersINFORMATION 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>
<h1>Level 1 Header</h1>
<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>
6 headers are all used to indicate the relative importance of text
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Meta TagThese words are compared with words in search requests
<head>
<meta name=“keywords” content=“lecture notes, html, form, feedback”>
<meta name=“description” content = “this web site describes …”>
</head>
Description of a page seen on searching
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Linking Webpage<a href=“http://www.eie.polyu.edu.hk”>PolyU</a>
anchor attribute
The name on the Web page that represents this link
Value of the attribute:
The address of the Web page
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
strong tag lets the text to be displayed with bold font
Other similar tags include
<u> underline and <em> italic
<body>
<h1>Here are my favorite
sites</h1>
<p><strong>Click a name to go to that page.
</strong></p>
<!-- 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>
Four links create
Don’t introduce spaces between different parts of a URL address
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
This line is shown with a bold font
Four links are included
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Linking Email Addresses<a href=“mailto:enpklun@polyu.edu.hk”> Email me
</a>
<a href=“mailto:enpklun@polyu.edu.hk?subject=title”> Email me
</a>
<a href=“mailto:address1,address2, address3”> Email me
</a>
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Linking Images<body background=“image.gif”>
<img src=“image.gif” border=“0” height=“256” width=“256” alt=“text description of the image”/>
<a href=“page1.html”>
<img src=“image.gif” …/>
</a>
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Will scale to this size to 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>
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
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
“alt” statement (may not display the same for Netscape)
The image displayed at the specified size
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
ColorINFORMATION TECHNOLOGY – Part I
4. Internet Programming
ColorINFORMATION TECHNOLOGY – Part I
4. Internet Programming
Formatting TextINFORMATION TECHNOLOGY – Part I
4. Internet Programming
background color is yellow
<body bgcolor = “#ffff00”>
<p><font face="courier" color="green" size=“24”>
This is a test.</font>
<hr />
<font face="times" color="red" >
This is a test.</font>
</p>
<p>
<font face="arial" color="red" size=“+1”>
This is a test.</font>
<br />
<font face="times" color="#ff00ff" size=“+2”>
This is a test.</font>
</p>
<p align = center><font face="courier" size=“+3”>
This is a test.</font>
</p>
</body>
horizontal ruler
the backslash is only to improve readability
See the difference between <p> and <br>
the text is placed at the center
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
ListsWhen style equals to
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
<thead> … </thead>
<tbody> … </tbody>
<tfoot> … </tfoot>
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>
</thead>
<tbody>
<tr>
<td>Apple</td> <!-- insert a data cell -->
<td>$0.25</td>
</tr>
The use of th tag defines the content of header or footer cells
The tr tag insert a new row
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
</table>
The use of th tag defines the content of header or footer cells
The use of td tag defines the content of body cells
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Col span and Row spanINFORMATION TECHNOLOGY – Part I
4. Internet Programming
first row
<table border=“1” width=“60%”>
<caption> Average Grades </caption>
<tr>
<th colspan=“4”> Report </th>
</tr>
<tr>
<th> </th> <th> 2000 </th> <th> 2001 </th>
<th> 2002 </th>
</tr>
<tr>
<td> Maths </td> <td> A </td> <td rowspan=“2” valign=“center”> B </td> <td> C </td>
</tr>
<tr>
<td> English </td> <td> C </td> <td> A </td>
</tr>
</table>
2nd row
3rd row
vertical alignment
4th row
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
1
www.abc.com/form.htm
2
www.abc.com
method = post or get
action = program name
(script) in server to
receive the data
Name = ???
and others
3
App
CGI
Internet
Web Server
Web Client
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
script that will be called to execute in the server
use post method
<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 the radio button of large is checked
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Formsvalue=“value that sends to the server”
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Form example IThing that sends back to server
<input type=“checkbox” name=“things” value=“ham”/> Ham
<input type=“checkbox” name=“things” value=“sweetcorn”/> Sweet Corn
<input type=“checkbox” name=“things” value=“mushroom”/> Mushroom
<input type=“checkbox” name=“things” value=“chicken”/> Chicken
<input type=“checkbox” name=“things” value=“peas”/> Peas
Indicate all 5 checkboxes belong to the same group
The words show on screen
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Form example IIData that would send to server but do not display on screen
<input type="hidden" name=“title" value="Feedback" />
<p><label>Name:
<input type= "text" name= "name" size="25" maxlength="30"/>
</label>
</p>
<input type= "submit" value="Submit your entries"/>
<input type= "reset" value="Clear Your Entries"/>
send the input the textbox to server
clear the content of textbox
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Form example IIIMasked by asterisk
Space is counted 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"/>
<input type= "reset" value="Clear Your Entries"/>
INFORMATION TECHNOLOGY – Part I
4. Internet Programming
Form example IV
The “selected” value here mean Amazing is selected default 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>
<option value=“1”>1</option>
<option value=“0”>0</option>
</select></p>
<input type= "submit" value="Submit Your Entries"/>
<input type= "reset" value="Clear Your Entries"/>
Change to default value when reset