XHTML II

1
XHTML II
2
Contents

• Tables
• Forms
• Frames

3
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
• ltTABLEgt...lt/TABLEgt
• Table definition, Main outer element
• ltTRgt...ltTRgt
• Table Row definition, inner element
• ltTDgt...lt/TDgt and ltTHgt...lt/THgt
• Table cell and heading definitions

4
Tables

• ltTABLE BORDER2gt
• ltTRgt
• ltTDgtBikelt/TDgt
• ltTDgtSpeedlt/TDgt
• ltTDgtInsuranceltBRgtBandlt/TDgt
• ltTDgtPricelt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtYF600Rlt/TDgt
• ltTDgt149.4lt/TDgt
• ltTDgt14lt/TDgt
• ltTDgt7245lt/TDgt
• lt/TRgt
• ltTRgt
• ltTD WIDTH200gtCBR600F-Tlt/TDgt
• ltTDgt151.7lt/TDgt
• ltTD WIDTH30gt14lt/TDgt
• ltTDgt7230lt/TDgt
• lt/TRgt

The border attribute gives the size in pixels of
the tables border.
The width attribute gives the width of the table.
5
Tables

• ltTRgt
• ltTDgtZX-6R Ninjalt/TDgt
• ltTDgt156.5lt/TDgt
• ltTDgt14lt/TDgt
• ltTDgt7445lt/TDgt
• lt/TRgt
• ltTRgtltTDgtRF600Rlt/TDgt
• ltTDgt142lt/TDgt
• ltTDgt13lt/TDgt
• ltTDgt6699lt/TDgt
• lt/TRgt
• lt/TABLEgt

6
Tables

• TH ROWSPAN5gtBikesltBRgtInfo!lt/THgt

The rowspan attribute indicates height of the
data cell in number of rows.
7
Tables

• ltCAPTIONgtWhich Bike Will I Buylt/CAPTIONgt
• ltTR BGCOLOR0000FFgt

The caption tag summarizes the table's contents
Change colour of rows
8
Tables

• Hyperlinks in tables
• In addition to text and graphical images,
  HyperText images can also be referenced from
  within table cells.

9
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.

10
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.

11
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.

12
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.

13
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.

14
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.

15
Forms
The method attribute specifies how the forms
data is sent to the Web server. The post method
appends form data to the browser request.
Each form must begin and end with form tags.

• 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
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Feedback Formlt/titlegt
• lt/headgt
• ltbodygtlth1gtFeedback Formlt/h1gt
• ltpgtAny comments please.lt/pgt
• ltform method "post" action "/cgi-bin/feedbackf
  orm"gtltpgt
• ltinput type "hidden" name "recipient" value
  "webeng_at_xhtmllecture.com" /gt
• ltinput type "hidden" name "subject" value
  "Feedback Form" /gt
• ltinput type "hidden" name "redirect" value
  "main.html" /gt lt/pgt
• ltpgt

The value of the action attribute specifies the
URL of a script on the Web server.
Input elements are used to send data to the
script that processes the form.
A hidden value for the type attribute sends data
that is not entered by the user.
16
Forms

• ltlabelgtName
• ltinput name "name" type "text" size "25"
  maxlength "30" /gt
• lt/labelgtlt/pgt
• ltpgt
• ltinput type "submit" value "Submit comments"
  /gt
• ltinput type "reset" value "Clear comments" /gt
• lt/pgt
• lt/formgtlt/bodygtlt/htmlgt

The maxlength attribute gives the maximum number
of Characters the user can input.
The size attribute gives the number of
characters visible in the text box.
The value attribute displays a name on the
buttons created.
The label element describes the data the user
needs to enter in the text box.
17
Forms
Text box created using input element.
Submit button created using input element.
Reset button created using input element.
18
Table Form

• ltTABLE FRAME nonegt
• ltTRgtltTD ALIGN rightgt
• NameltBRgt
• Card numberltBRgt
• ExpiresltBRgt
• TelephoneltBRgt
• ltTD ALIGNleftgtltBRgt
• ltFORMgt
• ltINPUT NAMEname SIZE18gtltBRgt
• ltINPUT NAMEcardnum SIZE18gtltBRgt
• ltINPUT NAMEexpires-month SIZE2gt/
• ltINPUT NAMEexpires-year SIZE2gtltBRgt
• ltINPUT NAMEphone SIZE18gt
• lt/FORMgt
• lt/TABLEgt

19
Form features

• ltheadgt
• lttitlegtWeb Engineering - Form Featureslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtSome Formlt/h1gt
• ltpgtWrite something, select options and click
  buttons!lt/pgt
• ltform method "post" action "/cgi-bin/featuresf
  orm"gt
• ltpgtltinput type "hidden" name "recipient"
• value "webeng_at_xhtmllecture.com" /gt
• ltinput type "hidden" name "subject"
• value "Features Form" /gt
• ltinput type "hidden" name "redirect"
• value "main.html" /gt
• lt/pgt
• ltpgtltlabelgtWrite here
• ltinput name "name" type "text" size "25" /gt
• lt/labelgtlt/pgt
• ltpgtltlabelgtSecret password
• ltinput name "psswd" type "password"

• Same as before
• Form method
• Input
• Labels

20
Form features
Check boxes and Radio boxes

• ltstronggtSelect anythinglt/stronggtltbr /gt
• ltlabelgtOption1 ltinput name "option1" type
  "checkbox" value "op1" /gtlt/labelgt
• ltlabelgtOption2 ltinput name "option2" type
  "checkbox" value "op2" /gtlt/labelgt
• ltlabelgtOption3 ltinput name "option3" type
  "checkbox" value "op3" /gtlt/labelgt
• ltlabelgtOption4 ltinput name "option4" type
  "checkbox value "op4" /gtlt/labelgt
• lt/pgtltpgt
• ltstronggtSelect onethinglt/stronggtltbr /gt
• ltlabelgtChoice1ltinput name "Choice1" type
  "radio value "Choice1"
• checked "checked" /gtlt/labelgt
• ltlabelgtChoice2 ltinput name "Choice2" type
  "radio value "Choice2" /gtlt/labelgt
• ltlabelgtChoice3 ltinput name "Choice3" type
  "radio value "Choice3" /gtlt/labelgt
• lt/pgt

21
Form features

• ltpgt
• ltlabelgtCombo box ltselect name "combo"gt
• ltoption selected "selected"gtAny textlt/optiongt
• ltoptiongthilt/optiongt
• ltoptiongttherelt/optiongt
• ltoptiongtweblt/optiongt
• ltoptiongtenglt/optiongt
• ltoptiongterslt/optiongt
• lt/selectgtlt/labelgt
• lt/pgtltpgt
• ltinput type "submit" value "Send this
  somewhere" /gt
• ltinput type "reset" value "Clear it away" /gt
• lt/pgt

Combo boxes
22
Form features
23
Meta tags

• 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
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Meta taglt/titlegt
• ltmeta name "keywords" content "homepage,
  myname, myinterests, personaldetails" /gt
• ltmeta name "description" content "This Web
  page can only possibly be of interest to myself
  and immediate family.." /gt
• lt/headgt
• ltbodygt
• lth1gtMy home page!lt/h1gt
• ltpgtThis is my ltstronggtltemgtHome Pagelt/emgtlt/stronggt.
  It is
• traditional that I put the best picture of myself
  ) on this page and also tell the world of my
  hobbies.lt/pgt
• ltpgtContact me!lt/pgt
• lt/bodygt
• lt/htmlgt

24
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.

25
Frames
The frameset element informs the browser that
the page contains frames.

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.d
  td"gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering frameslt/titlegt
• lt/headgt
• ltframeset cols "110,"gt
• ltframe name "leftframe" src "links.htm" /gt
• ltframe name "main" src "picture.htm" /gt
• ltnoframesgt
• ltpgtThis page uses frames, but you cant see
  them.lt/pgt
• ltpgtGo, lta href rogerrabbit.html"gthere lt/agt for
  no frames.lt/pgt
• lt/noframesgt
• lt/framesetgt
• lt/htmlgt

The cols attribute gives the width of each frame.
The first vertical frame created is 110 pixels
from the left of the browser. The second
vertical frame fills the rest of the browser,
as indicated by the value.
The frame element loads documents into the
frameset. The src attribute indicates the
document to be loaded.
links.html is loaded into the left frame and
picture.html is loaded into the right frame.
The noframes element provides an option for
browsers that do not display frames.
26
Frames
links.htm
picture.htm
27
Frames

• ltFRAMESET ROWS 300,300gt
• Defines two horizontal frames each 300 pixels
  deep. If the screen is 700 pixels deep then the
  remaining space is not used.
• ltFRAMESET COLS 20, 40, 40gt
• Defines three vertical frames. The first 20 or
  the screen, the second 40 and the third 40.
• ltFRAMESET ROWS 20, 300, gt
• 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.

28
Nested frames
The vertical frame on the right is divided into
two horizontal frames.

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.d
  td"gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Nested frameslt/titlegt
• lt/headgt
• ltframeset cols "110,"gt
• ltframe name "nav" src "links.htm" /gt
• ltframeset rows "175,"gt
• ltframe name "picture" src "picture.htm" /gt
• ltframe name "main" src "tableframe.htm" /gt
• lt/framesetgt
• lt/framesetgt
• lt/htmlgt

The rows attribute works in a similar manner to
the cols attribute, except the rows attribute
gives the height of each frame.