XHTML II

University of
Sunderland CITM05 Web Development Unit 1
 Contents

• Tables
• Forms
• Frames

University of
Sunderland CITM05 Web Development Unit 1
 Tables

• HTML TABLE ELEMENTS

• Tables in HTML consist of a number of separate elements
which all contribute to the construction of a table.
• The main elements involved are:
– <TABLE>...</TABLE>
• Table definition, Main outer element
– <TR>...<TR>
• Table Row definition, inner element
– <TD>...</TD> and <TH>...</TH>
• Table cell and heading definitions

University of
Sunderland CITM05 Web Development Unit 1
 Tables
<TABLE BORDER=2> The border attribute gives the
<TR>
<TD>Bike</TD> size in pixels of the table’s border.
<TD>Speed</TD>
<TD>Insurance<BR>Band</TD>
<TD>Price</TD>
</TR>
<TR>
<TD>YF600R</TD>
<TD>149.4</TD>
<TD>14</TD> The width attribute gives
<TD>7245</TD> the width of the table.
</TR>
<TR>
<TD WIDTH=200>CBR600F-T</TD>
<TD>151.7</TD>
<TD WIDTH=“30%”>14</TD>
<TD>7230</TD>
</TR>

University of
Sunderland CITM05 Web Development Unit 1
 Tables

<TR>
<TD>ZX-6R Ninja</TD>
<TD>156.5</TD>
<TD>14</TD>
<TD>7445</TD>
</TR>
<TR><TD>RF600R</TD>
<TD>142</TD>
<TD>13</TD>
<TD>6699</TD>
</TR>
</TABLE>

University of
Sunderland CITM05 Web Development Unit 1
 Tables
TH ROWSPAN=5>Bikes<BR>Info!</TH>
The rowspan attribute indicates
height of the data cell in
number of rows.

University of
Sunderland CITM05 Web Development Unit 1
 Tables

<CAPTION>Which Bike Will I Buy</CAPTION>

<TR BGCOLOR=“#0000FF”>
The caption tag summarizes
the table's contents

Change colour of rows

University of
Sunderland CITM05 Web Development Unit 1
 Tables
• Hyperlinks in tables
• In addition to text and graphical images, HyperText
images can also be referenced from within table cells.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
• Forms work in a different and slightly more complex way
than standard HTML pages.
• Forms consist of a number of separate data entry
components such as menus and text areas.
• The user can select different options from the menus and
enter text in the text entry fields.
• A single form can contain many text entry fields and/or
many menus.
• To differentiate the menus and text areas from each other
each one is given a unique name, selected by the Web form
designer.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
• GET or POST methods transmit data to the server.
• An environment variable called REQUEST_METHOD is
created which is set to either POST or GET depending one
which method was used.
• GET method - environment variable called QUERY_STRING
contains transmitted data. Problem - as little as 256 bytes.
• POST method - environment variable called
CONTENT_LENGTH contains the data that was transmitted.
• Can be read through “standard input” by programs or scripts
and thus there is no limitation on the amount of data which
can be transmitted. However, the POST method is not
supported by every Web server.
• Form data is encoded when it is sent and requires decoding.

University of
Sunderland CITM05 Web Development Unit 1
 Forms

• Forms are very easy to create, however:

– While forms can be developed locally on a client they need to be
linked to a server in order for the form data to be processed.
– The processing of form data by the server is not a magical task
which is performed automatically.
– Unfortunately, when a form is created a program should to be
specified (in one of the form elements) which is a Common
Gateway Interface (CGI) program which will process the form data.
– The Web developer has to create this program, which must run on
the server.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
• Checkboxes
– Square boxes which when selected a tick or “check”
appears in them.
• Radio Buttons
– Similar to Checkboxes but only one button of a group can
be selected at any one time.
• Text Fields
– One line “fields” where text can be entered.
• Password Fields
– Similar to text fields except the typed text appears as
******
• File Fields
– Input Supplied as a File.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
• Image Fields
– A selectable Image.
• Hidden Data
– Fields hidden from the form user.
• Submit Buttons
– A button used to transmit the form data to the server.
• Reset Buttons
– Button - clears all typed and selected information from the form.
• Textareas
– Multiple column / row “box” - many lines of data can be entered.
• Menus
– Selectable “pull-down” menus.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
• The Form element
• ACTION
– Defines the URL of the program that will process the data sent from
the form.
• METHOD
– Defines the method in which the data will be transmitted to the
server.
• ENCTYPE
– Defines the method for form data encoding.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
The method attribute specifies
Each form must begin and
how the form’s data is sent
end with form tags.
to the Web server. The post
<?xml version = "1.0"?> method appends form data
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"to the browser request.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"> The value of the action attribute
<head> specifies the URL of a script on
<title>Web Engineering - Feedback Form</title> the Web server.
</head>
<body><h1>Feedback Form</h1> Input elements are used to send
<p>Any comments please.</p> data to the script that processes the form.
<form method = "post" action = "/cgi-bin/feedbackform"><p>
<input type = "hidden" name = "recipient" value = "[email protected]" />
<input type = "hidden" name = "subject" value = "Feedback Form" />
<input type = "hidden" name = "redirect" value = "main.html" /> </p>
<p> A hidden value for the type
attribute sends data that is
not entered by the user.

University of
Sunderland CITM05 Web Development Unit 1
 Forms
<label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30" />
</label></p>
The maxlength attribute gives
<p> the maximum number of
<input type = "submit" value = "Submit comments" /> Characters the user can input.
<input type = "reset" value = "Clear comments" />
</p> The size attribute gives
the number of characters
</form></body></html> visible in the text box.

The label element describes The value attribute displays

the data the user needs a name on the buttons created.
to enter in the text box.

University of
Sunderland CITM05 Web Development Unit 1
 Forms

Text box created using

input element.

Submit button created

using input element.

Reset button created

using input element.

University of
Sunderland CITM05 Web Development Unit 1
 Table & Form

<TABLE FRAME = none>

<TR><TD ALIGN = right>
Name:<BR>
Card number:<BR>
Expires:<BR>
Telephone:<BR>
<TD ALIGN=left><BR>
<FORM>
<INPUT NAME=“name” SIZE=18><BR>
<INPUT NAME=“cardnum” SIZE=18><BR>
<INPUT NAME=“expires-month” SIZE=2>/
<INPUT NAME=“expires-year ” SIZE=2><BR>
<INPUT NAME=“phone” SIZE=18>
</FORM>
</TABLE>
University of
Sunderland CITM05 Web Development Unit 1
 Form features
<head>
<title>Web Engineering - Form Features</title>
</head>
<body>
<h1>Some Form</h1>
<p>Write something, select options and click buttons!</p> Same as before:
<form method = "post" action = "/cgi-bin/featuresform">
<p><input type = "hidden" name = "recipient"
•Form method
value = "[email protected]" /> •Input
<input type = "hidden" name = "subject"
value = "Features Form" /> •Labels
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>
<p><label>Write here:
<input name = "name" type = "text" size = "25" />
</label></p>
<p><label>Secret password:
<input name = "psswd" type = "password"
size = "25" /></label></p>

University of
Sunderland CITM05 Web Development Unit 1
 Form features

Check boxes and Radio boxes

<strong>Select anything:</strong><br />

<label>Option1 <input name = "option1" type = "checkbox" value = "op1" /></label>
<label>Option2 <input name = "option2" type = "checkbox" value = "op2" /></label>
<label>Option3 <input name = "option3" type = "checkbox" value = "op3" /></label>
<label>Option4 <input name = "option4" type = "checkbox“ value = "op4" /></label>
</p><p>
<strong>Select onething:</strong><br />
<label>Choice1<input name = "Choice1" type = "radio“ value = "Choice1"
checked ="checked" /></label>
<label>Choice2 <input name = "Choice2" type = "radio“ value = "Choice2" /></label>
<label>Choice3 <input name = "Choice3" type = "radio“ value = "Choice3" /></label>
</p>

University of
Sunderland CITM05 Web Development Unit 1
 Form features

<p>
<label>Combo box: <select name = "combo">
<option selected = "selected">Any text</option>
Combo boxes
<option>hi</option>
<option>there</option>
<option>web</option>
<option>eng</option>
<option>ers</option>
</select></label>
</p><p>
<input type = "submit" value ="Send this somewhere" />
<input type = "reset" value = "Clear it away" />
</p>

University of
Sunderland CITM05 Web Development Unit 1
 Form features

University of
Sunderland CITM05 Web Development Unit 1
 Meta tags
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Web Engineering - Meta tag</title>
<meta name = "keywords" content = "homepage, myname, myinterests, personaldetails" />
<meta name = "description" content = "This Web page can only possibly be of interest to
myself and immediate family.." />
</head>
<body>
<h1>My home page!</h1>
<p>This is my <strong><em>Home Page</em></strong>. It is
traditional that I put the best picture of myself :) on this page and also tell the world of my
hobbies.</p>
<p>Contact me!</p>
</body>
</html>

University of
Sunderland CITM05 Web Development Unit 1
 Frames
• Frames slow down Web page loading.
• Because a frame page usually consists of more than one
Web page it usually takes longer to load initially because all
of the separate pages need to be downloaded and
displayed.
• There are also a number of Web browsers which do not
support Frames.
• If Web pages are designed to make use of Frames then
these Web users will be at a disadvantage unless careful
consideration is given to the design of your Web system.

University of
Sunderland CITM05 Web Development Unit 1
 Frames
The frameset element informs the
browser that the page contains frames.
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
The cols attribute gives the width of each frame.
<head>
The first vertical frame created is 110 pixels
<title>Web Engineering: frames</title>
from the left of the browser. The second
</head> vertical frame fills the rest of the browser,
<frameset cols = "110,*"> as indicated by the * value.
<frame name = "leftframe" src = "links.htm" />
<frame name = "main" src = "picture.htm" /> The frame element loads documents
<noframes> into the frameset. The src attribute
<p>This page uses frames, but you can’t see them.</p> indicates the document to be loaded.
<p>Go, <a href = “rogerrabbit.html">here </a> for no frames.</p>
</noframes>
links.html is loaded into the
</frameset> The noframes element provides left frame and picture.html is
</html> an option for browsers that loaded into the right frame.
do not display frames.
University of
Sunderland CITM05 Web Development Unit 1
 Frames

links.htm

picture.htm

University of
Sunderland CITM05 Web Development Unit 1
 Frames
• <FRAMESET ROWS = “300,300”>
– Defines two horizontal frames each 300 pixels deep. If the screen is
700 pixels deep then the remaining space is not used.

• <FRAMESET COLS= “20%, 40%, 40%”>

– Defines three vertical frames. The first 20% or the screen, the
second 40% and the third 40%.

• <FRAMESET ROWS = “20%, 300, *”>

– Defines three horizontal frames. The first 20% of the current screen
size. The second is 200 pixels deep and the third all the remaining
screen space.

University of
Sunderland CITM05 Web Development Unit 1
 Nested frames
The vertical frame on the right
is divided into two horizontal frames.
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
The rows attribute works in a similar manner
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> to the cols attribute, except the rows
<html xmlns = "http://www.w3.org/1999/xhtml"> attribute gives the height of each frame.
<head>
<title>Web Engineering - Nested frames</title>
</head>
<frameset cols = "110,*">
<frame name = "nav" src = "links.htm" />
<frameset rows = "175,*">
<frame name = "picture" src = "picture.htm" />
<frame name = "main" src = "tableframe.htm" />
</frameset>
</frameset>
</html>

University of
Sunderland CITM05 Web Development Unit 1