Fundamentals of Web Programming

1
Fundamentals ofWeb Programming

• Lecture 6 Advanced HTML

2
Todays Topics

• Table Tags
• Form Tags
• Frame Tags

3
Table Tags

• ltTABLEgt, ltCAPTIONgt, ltTHEADgt, ltTFOOTgt, ltTBODYgt,
  ltCOLGROUPgt, ltCOLgt, ltTRgt, ltTDgt, ltTHgt

4
Tag ltTABLEgt

• Type container
• Function
• represent tabular information
• control layout of page elements

5
Tag ltTABLEgt

• Syntax ltTABLE ALIGNLEFT CENTER RIGHT
  BORDERpixels BGCOLORcolor
  WIDTHpixels_or_ COLScolumns
  CELLPADDINGpixels CELLSPACINGpixels
  FRAMEouter_border RULESinner_bordergt
  lt/TABLEgt

6
Tag ltTABLEgt

• Attributes
• ALIGN - alignment of table on the page
• BORDER - thickness of table border in pixels
• BGCOLOR - background color for table cells
• CELLPADDING - whitespace between cell contents
  and cell border

7
Tag ltTABLEgt

• Attributes (cont.)
• CELLSPACING - whitespace between cells
• COLS - number of columns in the table (optional,
  but helps the browser work faster)
• FRAME - controls rendering of outer border

8
Tag ltTABLEgt

• Attributes (cont.)
• RULES - controls rendering of inner border
• WIDTH - width of the table in pixels or
  percentage of screen width

9
Tag ltCAPTIONgt

• Type container
• Function Specifies a table caption
• SyntaxltCAPTION ALIGNTOP BOTTOM LEFT
  RIGHTgt lt/CAPTIONgt
• Attributes
• ALIGN - controls where caption appears with
  respect to the table

10
Tag ltTHEADgt

• Type container
• Function Defines a specific header row allows
  the browser to float the headings over page
  breaks.

11
Tag ltTHEADgt

• SyntaxltTHEAD ALIGNLEFT CENTER RIGHT
  JUSTIFY VALIGNTOP MIDDLE BOTTOM
  BASELINEgtlt/THEADgt

12
Tag ltTHEADgt

• Attributes
• ALIGN - controls the horizontal alignment within
  the cells of the table header
• VALIGN - controls the vertical alignment within
  the cells of the table header

13
Tag ltTFOOTgt

• Type container
• Function Defines a footer section of the table.
• SyntaxltTFOOT ALIGNLEFT CENTER RIGHT
  JUSTIFY VALIGNTOP MIDDLE BOTTOM
  BASELINEgtlt/TFOOTgt

14
Tag ltTFOOTgt

• Attributes
• ALIGN - controls the horizontal alignment within
  the cells of the table footer
• VALIGN - controls the vertical alignment within
  the cells of the table footer

15
Tag ltTBODYgt

• Type container
• Function Defines the body section of the table.
• SyntaxltTBODY ALIGNLEFT CENTER RIGHT
  JUSTIFY VALIGNTOP MIDDLE BOTTOM
  BASELINEgtlt/TBODYgt

16
Tag ltTBODYgt

• Attributes
• ALIGN - controls the horizontal alignment within
  the cells of the table body
• VALIGN - controls the vertical alignment within
  the cells of the table body

17
Tag ltCOLGROUPgt

• Type container
• Function Groups a set of columns with the same
  properties

18
Tag ltCOLGROUPgt

• SyntaxltCOLGROUP SPANcols WIDTHpixels_or_
  ALIGNLEFT RIGHT CENTER JUSTIFY
  VALIGNTOP MIDDLE BOTTOM BASELINEgt
  lt/COLGROUPgt

19
Tag ltCOLGROUPgt

• Attributes
• ALIGN - horizontal alignment within the column
  group
• SPAN - how many columns in group
• VALIGN - vertical alignment within the column
  group
• WIDTH - the width of the enclosed columns in
  pixels or percentage of screen width

20
Tag ltCOLgt

• Type standalone
• Function Specifies properties for a column or
  columns in a column group

21
Tag ltCOLgt

• SyntaxltCOL SPANcols WIDTHpixels_or_
  ALIGNLEFT RIGHT CENTER JUSTIFY
  VALIGNTOP MIDDLE BOTTOM BASELINEgtlt/COLgt

22
Tag ltCOLgt

• Attributes
• ALIGN - horizontal alignment within the column
  cells
• SPAN - how many columns to which to apply the
  property
• VALIGN - vertical alignment within the column
  cells
• WIDTH - the width of the column in pixels or
  percentage of screen width

23
Tag ltTRgt

• Type container
• Function Defines a row of a table, table header,
  footer, or body
• SyntaxltTR BGCOLORcolor ALIGNLEFT RIGHT
  CENTER JUSTIFY VALIGNTOP MIDDLE BOTTOM
  BASELINEgt lt/TRgt

24
Tag ltTRgt

• Attributes
• ALIGN - horizontal alignment within the cells in
  this row
• BGCOLOR - background color for cells in this row
• VALIGN - vertical alignment within the cells in
  this row

25
Tag ltTDgt, ltTHgt

• Type container
• Function Defines a cell in a table. ltTDgt is
  rendered in normal weight font and aligned flush
  left. ltTHgt is rendered in boldface and centered
  horizontal alignment.

26
Tag ltTDgt, ltTHgt

• Syntax (same for ltTHgt)ltTD ALIGNLEFT RIGHT
  CENTER JUSTIFY VALIGNTOP MIDDLE BOTTOM
  BASELINE BGCOLORcolor NOWRAP ROWSPANrows
  COLSPANcolumnsgt lt/TDgt

27
Tag ltTDgt, ltTHgt

• Attributes
• ALIGN - horizontal alignment within the cell
• BGCOLOR - background color of the cell
• COLSPAN - number of columns the cell should
  occupy
• NOWRAP - suppresses text wrapping within the cell

28
Tag ltTDgt, ltTHgt

• Attributes (cont.)
• ROWSPAN - specifies the number of rows the cell
  should occupy
• VALIGN - controls the vertical alignment within
  the cell

29
Form Tags

• ltFORMgt, ltINPUTgt, ltSELECTgt, ltOPTIONgt, ltTEXTAREAgt,
  ltBUTTONgt, ltLABELgt, ltFIELDSETgt, ltLEGENDgt

30
Tag ltFORMgt

• Type container
• Function Contains the text and tags that
  comprise an HTML form.

31
Tag ltFORMgt

• SyntaxltFORM ACTIONurl METHODGET POST
  TARGETframe ENCTYPEMIME_type_of_upload
  ACCEPT-CHARSETacceptable_charsetsgt lt/FORMgt

32
Tag ltFORMgt

• Attributes
• ACCEPT-CHARSET - a list of character sets that
  the forms processing script can handle.
• ACTION - the URL of the script or program that
  will process the form data.

33
Tag ltFORMgt

• Attributes (cont.)
• ENCTYPE - used when a file is to be uploaded by
  the form set to the MIME type of the file
• METHOD
• GET append the data to the end of the URL
• POST sent as part of HTTP headers
• TARGET - the specific frame where the output
  should be displayed.

34
Tag ltINPUTgt

• Type standalone
• Function Places controls
• Text, password, or hidden fields
• Check boxes, Radio buttons
• File upload fields
• Image-based buttons
• Scripted buttons
• Submit/reset buttons

35
Tag ltINPUTgt

• SyntaxltINPUT TYPETEXT PASSWORD
  NAMEfield_name VALUEdefault_value
  SIZEwidth MAXLENGTHmax_chars DISABLED
  READONLYgt

36
Tag ltINPUTgt

• SyntaxltINPUT TYPEHIDDEN NAMEfield_name
  VALUEfield_value CHECKED DISABLEDgt

37
Tag ltINPUTgt

• SyntaxltINPUT TYPECHECKBOX NAMEfield_name
  VALUEfield_value CHECKED DISABLEDgt

38
Tag ltINPUTgt

• SyntaxltINPUT TYPERADIO NAMEfield_name
  VALUEfield_value CHECKED DISABLEDgt

39
Tag ltINPUTgt

• Syntax ltINPUT TYPEFILE NAMEfield_name
  VALUEfield_value ACCEPTacceptable_MIME_types
  DISABLEDgt

40
Tag ltINPUTgt

• SyntaxltINPUT TYPEIMAGE SRCurl
  ALTtext_description ALIGNTOP MIDDLE
  BOTTOM LEFT RIGHT USEMAPmap_name DISABLEDgt

41
Tag ltINPUTgt

• SyntaxltINPUT TYPEBUTTON VALUEbutton_label
  onclickscript_name DISABLEDgt

42
Tag ltSELECTgt

• Type container
• Function Defines a list of choices for the user
  (one or many)
• SyntaxltSELECT NAMEfield_name
  SIZEvisible_rows MULTIPLE DISABLEDgt...
  lt/SELECTgt

43
Tag ltSELECTgt

• Attributes
• DISABLED - deactivates the field
• MULTIPLE - select gt 1 option by pressing Ctrl
• NAME - field name passed to server
• SIZE - the number of options visible
• if SIZE1 and MULTIPLE isnt specified, uses a
  drop-down list
• otherwise, uses a scrollable list

44
Tag ltOPTIONgt

• Type container
• Function Defines a specific option inside
  ltSELECTgt.
• SyntaxltOPTION VALUEoption_value SELECTED
  DISABLEDgt... lt/OPTIONgt

45
Tag ltOPTIONgt

• Attributes
• DISABLED - deactivates the option
• SELECTED - preselects an option
• VALUE - value to pass to the browser if the
  option is selected defaults to the text inside
  the option tag

46
Tag ltTEXTAREAgt

• Type container
• Function Defines a multiple-line text input
  window.
• SyntaxltTEXTAREA NAMEfield_name ROWSrows
  COLScols DISABLED READONLYgt... lt/TEXTAREAgt

47
Tag ltTEXTAREAgt

• Attributes
• COLS - number of columns wide
• DISABLED - deactivate the text
• NAME - assigns a unique name to pass to the
  processing program
• READONLY - leaves the window active, but
  uneditable by the user
• ROWS - number of rows high

48
Tag ltBUTTONgt

• Type container
• Function Defines a 3D button in the form.
  Contains text or image.
• SyntaxltBUTTON TYPESUBMIT RESET
  NAMEbutton_name VALUEbutton_value
  DISABLEDgt... lt/BUTTONgt

49
Tag ltBUTTONgt

• Attributes
• DISABLED - disables the button
• NAME - gives the button a unique name
• TYPE - set to SUBMIT or RESET (two types of
  button)
• VALUE - what is passed to the server when the
  button is clicked

50
Tag ltLABELgt

• Type container
• Function Defines a form field label.
• SyntaxltLABEL FORfield_ID ACCESSKEYshortcut_
  key DISABLEDgt... lt/LABELgt

51
Tag ltLABELgt

• Attributes
• ACCESSKEY - shortcut to zoom to the labelled
  field
• DISABLED - deactivate the label
• FOR - the value of the ID attribute for the
  labelled field

52
Tag ltFIELDSETgt

• Type container
• Function Groups related form input fields.
• SyntaxltFIELDSETgt... lt/FIELDSETgt
• Attributes none
• Related Use ltLEGENDgt to give the group fields a
  label.

53
Tag ltLEGENDgt

• Type container
• Function Names a group of related form fields.
• SyntaxltLEGEND ALIGNLEFT RIGHT TOP
  BOTTOM ACCESSKEYshortcut_keygt... lt/LEGENDgt

54
Tag ltLEGENDgt

• Attributes
• ACCESSKEY - A keyboard key used as a shortcut
• ALIGN - controls how the legend text is aligned
  with respect to the form fields

55
Frame Tags

• ltFRAMESETgt, ltFRAMEgt, ltNOFRAMESgt, ltIFRAMEgt

56
Tag ltFRAMESETgt

• Type container
• Function Divides the browser window into frames.
• SyntaxltFRAMESET ROWSlist_of_sizes
  COLSlist_of_sizesgt...lt/FRAMESETgt
• Can take one of ROWS, COLS

57
Tag ltFRAMESETgt

• Attributes
• ROWS - how to break up the window into multiple
  rows
• the number of items determines the number of
  rows
• each item can be in pixels, a percentage of
  screen height, or relative to the amount of space
  available
• COLS - analogous to ROWS, but divides the window
  into columns

58
Tag ltFRAMEgt

• Type standalone
• Function Places content into a frame.

59
Tag ltFRAMEgt

• SyntaxltFRAME SRCurl NAMEframe_name
  FRAMEBORDER01 MARGINWIDTHpixels
  MARGINHEIGHTpixels NORESIZE SCROLLINGYES
  NO AUTOgt

60
Tag ltFRAMEgt

• Attributes
• FRAMEBORDER - switches frame border off/on (0 or
  1)
• MARGINHEIGHT - top margin of the frame
• MARGINWIDTH - left margin of the frame
• NAME - a unique name to be used as TARGET
  attribute elsewhere

61
Tag ltFRAMEgt

• NORESIZE - suppresses dragging of frame borders
• SCROLLING - controls presence of scrollbars
• YES - always
• NO - never
• AUTO - if the frame contents exceed the frames
  extent
• SRC - URL to load into the frame

62
Tag ltNOFRAMESgt

• Type container
• Function Provides alternate layout for browsers
  without frames.
• SyntaxltNOFRAMESgt... lt/NOFRAMESgt
• Related Appears inside ltFRAMESETgt, before any
  nested ltFRAMESETgt tags.

63
Tag ltIFRAMEgt

• Type container
• Function Places a floating frame on the page.

64
Tag ltIFRAMEgt

• SyntaxltIFRAME SRCurl NAMEframe
  FRAMEBORDER0 1 WIDTHpixels/
  HEIGHTpixels/ MARGINWIDTHpixels
  MARGINHEIGHTpixels SCROLLINGYES NO AUTO
  ALIGNTOP MIDDLE BOTTOM LEFT RIGHTgt ...
  lt/IFRAMEgt

65
Tag ltIFRAMEgt

• Attributes
• ALIGN - controls how the floating frame is
  aligned
• FRAMEBORDER - turns frame border off/on (0 or 1)
• HEIGHT - in pixels
• MARGINHEIGHT - top margin, in pixels
• MARGINWIDTH - left margin, in pixels

66
Tag ltIFRAMEgt

• NAME - unique name for use in TARGET elsewhere
• SCROLLING - always, never, when needed
• SRC - URL to load into the frame
• WIDTH - in pixels