presents

1
presentsHTML Lists, Tables and Formsv2.0
2
Objectives

• This chapter will explain
• Creating ordered and unordered lists
• Using tables to display data
• Using tables to enhance page layout
• Using forms to allow users to enter data on a web
  page
• How to integrate form data with a server-side
  process

3
Lists

• HTML supports two tags for creating listsltULgt
  Creates an unordered list. These lists are
  bulleted with a small graphicltOLgt Creates an
  ordered list. These lists are bulleted with
  letters or numbers

4
Lists The LI Tag

• The ltLIgt Tag is used to indicate a single item in
  a list

ltULgt ltLIgtBluelt/LIgt ltLIgtRedlt/LIgt ltLIgtGreenlt/LIgt lt/ULgt The code at the left generates the following in a browser

5
Lists Attributes of the UL Tag

• Most of the UL attributes are deprecated in favor
  of CSS. However they aretype can be set to
  disc, square or circlecompact compacts
  the list to use less space. This attribute is not
  widely implemented

6
Lists Attributes of the OL Tag

• These attributes are also deprecated in favor of
  CSS but may still be used. They aretype -
  values are 1, a, A, I, and Istart a number at
  which to startcompact same as UL. See
  previous slide

7
Tables Basic Syntax

• HTML tables are constructed from three basic
  tags
• ltTABLEgt - Marks the beginning and end of the
  table.
• ltTRgt - Marks the beginning and end of each
  row.
• ltTDgt - Marks the beginning and end of each
  cell within a row
• Each tag has attributes that are specific to it

8
Tables A Simple Example
lthtmlgt ltbodygt lttable border"1"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lttrgt lttdgtSallylt/tdgt lttdgtBrownlt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htmlgt The code to the left produces the table below
9
Tables The TABLE Tag

• The attributes of the TABLE tag aresummary --
  purpose/structure for speech outputwidth --
  table widthborder -- controls frame width around
  tableframe -- which parts of frame to
  renderrules -- rulings between rows and
  columnscellspacing -- spacing between
  cellscellpadding -- spacing within cells
• Of these, width, border, cellpadding, and
  cellspacing are the most commonly used

10
Tables Width

• The width attribute can be set to a number of
  pixels or to a percentage of the current screen
  width
• To set to pixels lttable width600 gt
• To set to a percentage lttable width90 gt

11
Tables Border

• The border attribute sets the size of the table
  (not cell) border

lttable border"1"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
lttable border"10"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
12
Tables Cellpadding

• Cellpadding sets the amount of area, in pixels,
  around the content of each cell

lttable border"1" cellpadding"0"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
lttable border"1" cellpadding"10"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
13
Tables Cellspacing

• Cellspacing sets the space BETWEEN cells

lttable border"1" cellspacing"0"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
lttable border"1" cellspacing"10"gt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
14
Tables The TR Tag

• The TR tag has two useful attributesalign
  values are left, right, and middle.
  Default is leftvalign values are
  top, bottom, and middle.
  Default is middleThese two attributes affect
  the horizontal and vertical alignment for the
  data in all cells of the row

15
Tables The TD Tag

• Creates a cell in a row
• Normally all rows will have the same number of
  cells if not the table will have a slightly
  irregular look
• The TD tag accepts the ALIGN and VALIGN
  attributes which set alignment for the individual
  cell
• The TD tag also accepts the ROWSPAN and COLSPAN
  attributes which are explained in the following
  slides

16
Tables TD rowspan

• The rowspan attribute causes a cell to stretch
  down into one or more rows below it. Cells in the
  rows below are pushed to the right.

lttable border"1"gt lttrgt lttd rowspan"3"gt Hello Worldlt/tdgt lttdgtZaplt/tdgtlttdgtBamlt/tdgtlt/TRgt lttrgt lttdgtmovedlt/tdgtlttdgtrightlt/tdgtlt/trgt lttrgt lttdgtAgainlt/tdgtlttdgtmovedlt/tdgt lt/trgt lt/tablegt
17
Tables TD colspan

• colspan causes a cell to stretch into the cells
  to its right
• Cells in the same row are pushed to the right

lttable border"1"gt lttrgt lttd colspan"3"gt Hello Worldlt/tdgt lttdgtMoved rightlt/tdgtlt/trgt lttrgt lttdgtZaplt/tdgtlttdgtBamlt/tdgtlttdgtBoom lt/tdgt lt/trgt lttrgt lttdgtAgainlt/tdgtlttd colspan"2"gtmovedlt/tdgt lt/trgt lt/tablegt
18
Tables Colors

• The attribute bgcolor may be used to set a
  background color for the entire table, individual
  rows and individual cells. Most common colors can
  be named, e.g. lttable bgcolor"green"gt
• Colors can also be specified by a six digit
  hexadecimal number preceded by a hash mark. The
  first two digits set the amount of red in the
  color, the next two the amount of green, and the
  last two, the amount of blue. SoFFOOOO
  brightest possible red999999 medium
  grayFFFFFF white000000 blackFFCC00
  golden yellow
• A handy color wheel for determining color values
  resides athttp//www.visibone.com/colorlab/

19
Tables TH Tag

• The ltTHgt tag can be used to create headers for a
  table. Use it in place of ltTDgt anywhere that you
  want the text in the cell to be bold-faced and
  centered

lttable border"1"gt lttrgt ltthgtFirst Namelt/thgt ltthgtLast Namelt/thgt lttrgt lttdgtJohnlt/tdgt lttdgtDoelt/tdgt lt/trgt lt/tablegt
20
FORMs Introduction

• Although the web began as a way of displaying
  text and pictures, it has grown far beyond that.
  FORMs allow users to enter data that will be
  passed to a program or script on the web server
  for execution
• Writing such programs is complex and beyond the
  scope of this course. Instead we will examine
  creating data entry fields in a web page

21
FORMS The FORM Tag

• The FORM tag marks the beginning and end of a
  group of data entry fields which will be sent to
  a server as a block
• The FORM tag allows more than one FORM to exist
  on a page

22
FORMS The FORM Tag

• The FORM tag includes two important
  attributesMETHOD values are GET and
  POSTACTION value is the URL to which data
  will be sent
• A typical FORM tag exampleltform method"post"
  action"http//www.learnquest.com/cgi-bin/process.
  jsp"gt

23
FORMs The METHOD Attribute

• The METHOD attribute specifies how data will be
  transferred to the server
• The GET method can hold only a small amount of
  data. Data names and values are appended to the
  outgoing URL and can be seen in the browsers
  address bar
• The POST method places the data behind the scenes
  in the underlying http document. Much more data
  can be moved, and it is not visible in the
  address bar
• POST is the preferred method for FORMs

24
FORMS The INPUT Tag

• The input tag is used for several input types.
  These are controlled by the TYPE attribute, which
  can take the following valuestext a
  text field for single line data entryradio
  radio button. These are grouped by the "name"
  attributecheckbox an "on/off" check
  boxbutton a button that needs some
  JavaScript to do anythingsubmit a
  button which initiates the send processreset
  a button that will reset all fields in the
  form to the values they held when the
  page was first loaded

25
FORMSINPUT Text

• Important attribute of this tag are
• NAME should be uniqueSIZE the width of the
  field in characters
• MAXLENGTH - The maximum number of characters the
  user may enter
• VALUE an initial display valueExampleltinput
  type"text" name"uname" size"10" maxlength"40"
  value"enter name here!" /gt

26
FORMS INPUT Radio

• Important attributes of the RADIO tag areNAME
  All radio buttons with the same name will be in
  one group VALUE the value to be sent to the
  server if this radio button is selected when the
  form is submittedCHECKED This attribute takes
  no value. If present, it causes this button to be
  selected when the page is first loaded
• Exampleltinput type"radio" name"grp_a"
  value"box" /gtBox ltbr /gtltinput type"radio"
  name"grp_a" value"disc" checked /gtDisc ltbr /gt

27
FORMS INPUT Checkbox

• Important attributes of the CHECKBOX tag
  areNAME should be uniqueVALUE the value
  to be sent if the CHECKBOX is checked when the
  form is submittedCHECKED like RADIO, if
  present causes the CHECKBOX to be checked when
  the page is first loaded
• Exampleltinput type"checkbox" value"happy"
  checked /gtHappy?

28
FORMS INPUT Button

• The two important attributes of the Button tag
  are
• VALUE and onClick
• VALUE specifies the label that will appear on the
  button
• onClick specifies what the button will do when it
  is clicked. This action is normally coded in
  JavaScript

29
FORMS INPUT Submit

• The submit button also takes a VALUE to describe
  its label but it has a predefined action when it
  is clicked the form it is a part of is submitted

30
FORMS INPUT Reset

• The RESET attribute sets all values in the FORM
  to the values they had when the page was first
  loaded

31
Summary

• In this chapter we learned to work with lists,
  tables and forms

32
Any Questions?