TN3429 Advanced Programming Techniques

1
TN-3429 Advanced Programming Techniques

• HTML

2
HTML

• HTML (HyperText Markup Language)
• is one of the most popular and accessible markup
  languages available.
• HTML 3.2 is fully supported by versions 3 and
  later of the two most popular Web browsers,
  Netscape Navigator and MS IE.

3
General Structure

• The structure of an HTML document resembles the
  following
• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• The title of your document goes here.
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Your HTML code goes here.
• lt/BODYgt 
• lt/HTMLgt

4
General Structure

• ltHTMLgt . lt/HTMLgt
• ltHTMLgt tags indicate the beginning and end of the
  HTML document
• ltHEADgt lt/HEADgt
• ltHEADgt tag is where you enter information about
  the web page
• ltTITLEgt lt/TITLEgt
• ltTITLEgt tag is used to specify the text that
  appears in the Web browsers title bar.
• ltBODYgt lt/BODYgt
• enclose all text, images, and other elements that
  will be visible to the user on the web page

5
ltBODYgt tag

• It accepts the following attributes
• The BACKGROUND attribute
• declares a tiled background image. Both .gif and
  .jpg formats are supported.
• The BGCOLOR attribute
• declares a solid background color.
• The TEXT attribute
• sets the color of the normal text throughout the
  page. The color value is represented as an RGB
  Triplet.

6
ltBODYgt tag

• The LINK attribute
• sets the color of the hyperlinks throughout the
  page.
• The VLINK attribute
• sets the color of the visited links throughout
  the page.
• The ALINK attribute
• defines the active link color - the color that
  hyperlinks take on when clicked.

7
ltBODYgt tag

• two ways to define colors
• use the name of the color, such as "white" or
  "blue."
• to figure out its RGB (red-green-blue) value in
  hexadecimal.
• Here's an example of a ltBODYgt tag
• ltBODY BGCOLOR"black" TEXT"30ff3d"
  LINK"f89400" ALINK"purple" VLINK"FF8DDD"gt
• This page has a fluorescent green text,
  hyperlinks in orange, active links in purple, and
  visited links in pink, all on a black background.

8
Commentslt!- - comment goes here - -gt

• The lt! comment goes here --gt tag is used for
  comments in documenting the features of your HTML
  file

9
Block-Formatting Tags ltBRgt tag

• The ltBRgt tag forces a line break in the text
• e.g. System Development Tools ltBRgt

10
Block-Formatting Tags ltNOBRgtlt/NOBRgt tag

• The ltNOBRgt tag prevents line breaks for the
  enclosed text. This tag is not often used

11
Block-Formatting Tags ltPgtlt/Pgt Paragraph

• The ltPgt tag defines the beginning and ending of a
  paragraph
• ltPgtYour text goes here.lt/Pgt
• ALIGNOption (LEFT CENTER RIGHT)
• ltP ALIGN"RIGHT"gtblah blah blahlt/Pgt would appear
  like this
• blah blah blah

12
Block-Formatting Tags ltBLOCKQUOTEgt
lt/BLOCKQUOTEgt tag

• The ltBLOCKQUOTEgt tag is used to set off long
  quotes or citations by usually indented the
  enclosed text on both sides.
• ltBLOCKQUOTEgt abc lt/BLOCKQUOTEgt
• ltBLOCKQUOTEgt ltBLOCKQUOTEgtdeflt/BLOCKQUOTEgtlt/BLOCKQU
  OTEgt

13
Block-Formatting Tags ltPREgtlt/PREgt tag

• The ltPREgt tag retains the preformatted appearance
  of the text in the HTML file, including any line
  breaks or spaces. Text is usually displayed in a
  fixed width font.

14
Block-Formatting Tags ltHngtlt/Hngt tag

• n1, 2, 3, 4, 5, 6
• The six levels of text headings ranging from the
  largest (ltH1gt) to the smallest (ltH6gt).
• Text headings appear in a bold face font

15
Block-Formatting Tags ltBASEFONT SIZEValuegt tag

• The ltBASEFONTgt tag specifies the default font
  size, in points, for text in the document. The
  default value is 3.

16
Block-Formatting Tags ltCENTERgtlt/CENTERgt tag

• The ltCENTERgt tag centers the enclosed text or
  image horizontally

17
Block-Formatting Tags ltHRgt tag

• The ltHRgt tag creates a horizontal line
• ALIGN (LEFT CENTER RIGHT)
• Alignment of the horizontal line.
• COLORColor
• Specifies a color for the line
• NOSHADE
• Removes 3D shading from the line
• SIZEValue
• The size (height) of the line in pixels
• WIDTHValue
• The width (length) of the line either in pixels
  or as a
  percentage of the display area.

18
Character Tags ltFONTgtlt/FONTgt tag

• The ltFONTgt tag is used to control the appearance
  of the text it encloses
• COLORColor
• The color of the enclosed text
• FACEList
• The font face of the text. Multiple font faces
  can be
  specified, separated by commas.
• SIZEValue
• Size of the font in points, it can be absolute or
  
  relative. Specifying SIZE5 sets the font size to
  5
  points. Specifying SIZE2 sets the font size 2
  
  points larger than that specified in the
  ltBASEFONTgt
  tag.

19
Character Tags ltBgtlt/Bgt tag

• The ltBgt tag displays the enclosed text in bold
  type

20
Character Tags ltIgtlt/Igt tag

• The ltIgt tag italicizes the enclosed text

21
Character Tags ltUgtlt/Ugt tag

• The ltUgt tag underlines the enclosed text.
• The ltUgt tag should be avoided because it will
  confuse users with hypertext, which is typically
  underlined.

22
Character Tags ltSTRONGgtlt/STRONGgt tag

• The ltSTRONGgt tag is used to strongly emphasize
  the enclosed text, usually in a bold font.

23
Character Tags ltBIGgtlt/BIGgt tag

• The ltBIGgt tag increases the size of the enclosed
  text.
• The exact appearance of the text depends on the
  browser and the default font size

24
Character Tags ltSMALLgtlt/SMALLgt tag

• The ltSMALLgt tag decreases the size of the
• enclosed text.
• The exact appearance of the text depends on the
  browser and the default font size

25
Character Tags ltSTRIKEgtlt/STRIKEgt tag

• The ltSTRIKEgt tag displays the enclosed text with
  a horizontal line striking through it.

26
Character Tags ltSUBgtlt/SUBgt tag

• The ltSUBgt tag displays the enclosed text as a
  subscript

27
Character Tags ltSUPgtlt/SUPgt tag

• The ltSUPgt tag displays the enclosed text as a
  superscript

28
Exampletag

• Bold
• ltBgtYour text goes here.lt/Bgt
• it forms bold text
• Italic
• ltIgtYour text goes here.lt/Igt
• this time italicizing it.

29
ExampleUnderline Strikethrough

• Underline
• ltUgtYour text goes here.lt/Ugt underlines the text. 
• Strikethrough
• ltStrikegtYour text goes here.lt/Strikegt
• draws a horizontal line across your text

30
ExampleFACE attribute

• ltFONT FACE"Comic Sans MS,Footlight MT
  Light,Times New Roman"gt
• your browser will try to find the first font on
  your system it will start searching for the
  second one if the first one is not there and
  failing that, it will resort to displaying the
  document in Times New Roman.
• ltFONT SIZE"-1" FACE"Courier New,Courier"
  COLOR"red"gtThis text is smaller and in a
  fixed-pitch font. It's also red.lt/FONTgt

31
ExampleHeading

• ranges from ltH1gt to ltH6gt, largest to smallest,
• The heading is aligned to the left by default
• The ALIGN attribute, which can take on the values
  RIGHT, CENTER or LEFT, can be added to modify the
  placement of the text.
• ltH1gtThis is a big heading that is
  left-aligned.lt/H1gt
• ltH5 ALIGNRIGHTgt And this is a small heading that
  is right-aligned.lt/H5gt
• This is a big heading that is left-aligned.
• And this is a small heading that is
  right-aligned.

32
List Tag ltULgtlt/ULgt tag

• The ltULgt tag encloses an unordered list of ltLIgt
  items. Typically unordered lists are rendered as
  bulleted lists.

33
List Tag ltOLgtlt/OLgt tag

• The ltOLgt tag encloses an ordered list of ltLIgt
  items. Typically ordered lists are rendered as
  numbered lists.
• STARTValue
• The value of the starting number in the ordered
  list
• TYPEOption (A a I i 1)
• Specifies how ordered items are to be marked. A
  
  uppercase letters. a lowercase letters. I
  
  uppercase Roman numerals. i lowercase Roman
  
  numerals. 1 Digits. The default is 1.

34
List Tag ltLIgtlt/LIgt tag

• The ltLIgt tag identifies list items in a ltDIRgt,
  ltMENUgt, ltOLgt or ltULgt list.

35
ExampleUnordered and ordered lists

• The unordered list tag creates a list of bullet
  points.
• An ordered list can be created in exactly the
  same way, by specifying ltOLgt ... lt/OLgt rather
  than ltULgt ... lt/ULgt.
• The OL tag supports the attribute TYPE with
  possible values A (A, B, C ... ), a (a, b, c ...
  ), I (I, II, III ... ), i (i, ii, iii ... ) as
  well as
• The default is (1, 2, 3 ... )
• The attribute START
• declares the number that the list begins with

36
ExampleUnordered and ordered lists

• E.g. 1
• ltULgt
• ltLIgtThis is an unordered listlt/LIgt
• ltLIgtIt uses bullet pointslt/LIgt
• lt/ULgt
• E.g. 2
• ltOLgt
• ltLIgtAnd this is an ordered listlt/LIgt
• ltLIgtIt uses numberslt/LIgt
• lt/OLgt
• Result
• This is an unordered list
• It uses bullet points
• And this is an ordered list
• It uses numbers

37
Table Tag ltTABLEgtlt/TABLEgt tag

• The ltTABLEgt tag is used to specify the beginning
  and ending of the table
• BORDERValue
• Specifies the width of the table border in
  pixels.
• WIDTHValue
• The width of the table in pixels or as a
  percentage
  of the display area.
• CELLPADDINGValue
• Specifies the space between table cells in
  pixels.
• CELLSPACINGValue
• Specifies the space between cell text and the
  cell
  border in pixels.
• BGCOLORColor
• Specifies a background color for the table.

38
Table Tag ltTRgtlt/TRgt tag

• The ltTRgt tag is encloses table cells within a
  single row.
• ALIGNOption (LEFT CENTER RIGHT)
• Specifies the horizontal alignment of text in the
  row.
• BGCOLORColor
• Specifies a background color for the header cell.

39
Table Tag ltTDgtlt/TDgt tag

• The ltTDgt tag encloses the text that will appear
  in an individual table cell.
• ALIGNOption (LEFT CENTER RIGHT)
• Specifies the horizontal alignment of cell text.
• BGCOLORColor
• Specifies a background color for the cell.
• COLSPANValue
• Specifies the number of columns the cell should
  
  span.
• ROWSPANValue
• Specifies the number of rows the cell should
  span.
• VALIGNOption (TOP MIDDLE BOTTOM)
• Specifies the vertical alignment of cell text.
• WIDTH Value
• The width of the cell in pixels or as a
  percentage of
  the width of the table.

40
ExampleTables attributes

• WIDTH and HEIGHT attributes
• either in pixels or as a percentage of the size
  your browser window
• For instance, ltTABLE WIDTH"50"gt
• declares a table that is half as wide as your
  browser window
• Resizing the window automatically resizes the
  table
• ALIGN attribute
• values LEFT, RIGHT and CENTER
• with LEFT as default
• it specifies the placement of the table within
  the browser window

41
ExampleTables attributes

• VALIGN attribute
• specifies the placement of the data within table
  data cells
• it takes on the values TOP, BOTTOM, BASELINE or
  CENTER
• with CENTER as default
• BGCOLOR
• specifies a solid background color for the table

42
ExampleTables tags

• Once you declare a table, you must declare each
  table row separately by using a pair of
• ltTRgt ... lt/TRgt tags
• declare the columns within a row as distinct
  table data cells by using a pair of
• ltTDgt ... lt/TDgt tags
• Table data cells must be nested within their
  respective table rows, which must in turn be
  nested within their respective table

43
ExampleTables tags

• Additional attributes supported by ltTDgt are the
  following
• NOWRAP attribute
• values YES or NO
• it dictates whether cell data wraps to fit the
  width of the cell
• COLSPAN and ROWSPAN attributes
• specify how many columns and rows the data item
  spans, in respective order
• The default for both attributes is 1.
• Note that each row must have the same number of
  cells

44
Example - Tables tags

• ltTABLE CELLPADDING"5" CELLSPACING"10
• BORDER"2" WIDTH"100" HEIGHT"100"gt
• ltTR ALIGN "CENTER"gt ltTDgtltSTRONGgtItem
  Onelt/STRONGgtlt/TDgt ltTD BGCOLOR"888fff"gtItem
  Two lt/TDgt
• lt/TRgt
• ltTR BGCOLOR"ffaaff"gt ltTD COLSPAN"2"gtItem
  Three, plus a
• descriptionlt/TDgt
• lt/TRgt
• lt/TABLEgt
• it produces

45
Graphic and Link Tags ltAgtlt/Agt tag

• The ltAgt tag marks and the beginning an end of a
  hypertext link
• HREFURL
• Indicates the target, file name or URL that the
  
  hypertext points to.
• NAMEText
• Specifies a name for the enclosed text, allowing
  it to be a target of a hyperlink.

46
Graphic and Link Tags ltIMGgt tag

• The ltIMGgt tag is used to insert an inline image
  into the document
• SRCDocument
• The source file of the inline image
• WIDTHValue
• The width of the image in pixels
• HEIGHTValue
• The height of the image in pixels
• BORDERValue
• The size of the border around the image in pixels
• HSPACEValue
• The amount of space to the left and right of the
  
  image, in pixels.
• VSPACEValue
• The amount of space above and below the image,
  in
  pixels.

47
Graphic and Link Tags ltIMGgt tag

• ALIGNOption (LEFT RIGHT TOP TEXTTOP
  MIDDLE ABSMIDDLE BASELINE BOTTOM
  ABSBOTTOM)
• Specifies the alignment of the image. Specifying
  an alignment of LEFT or RIGHT aligns the image
  with the left or right page margin. The other
  alignment options align the image with
  surrounding text.

48
Graphic and Link Tags ltAREAgt tag

• The ltAREAgt tag defines the type and coordinates
  of a hotspot within an image map
• COORDSValue 1, value 2
• The coordinates of the hotspot. The coordinates
  
  depend upon the shape of the hotspot
• Rectangle
• COORDSx_left, y_upper, x_right, y_lower
• CIRCLE
• COORDS x_center, y_center, radius
• POLYGON
• COORDS x1, y1, x2, y2, x3, y3,
• HREFURL
• Indicates the target, file name or URL that the
  
  hotspot points to.
• SHAPEOption (RECT CIRCLE POLY)
• The shape of the hotspot

49
ExampleHypertext Reference Anchor

• ltA HREF"http//www.sina.com/"gt My favorite link
  lt/Agt
• you can send e-mail by
• ltA HREF"mailtowilsonc_at_vtc.edu.hk"gt e-mail lt/Agt

50
Exampleanchor _name

• This allows you to link to different points in
  the page
• define a named anchor
• lta name"anchor"gt and lt/agt
• To link to this anchor, use the sign followed
  by anchor_name, as in
• lta href"anchor_name"gtGo to the named anchorlt/agt
• If the named anchor is on another page, specify
  the filename before the sign,
• lta href"filename.htmlnamed_anchor"gt

51
ExampleEmbed Image

• the image barney.gif in a directory called dinos
• ltIMG SRC"dinos/barney.gif HEIGHT100 WIDTH65 gt

52
ExampleImages as Hyperlinks

• Inline images can be used as hyperlinks just like
  plain text
• ltA HREF"openbook.html"gtltIMG SRC"open_book.gif"
  ALT"Open Book"gtlt/Agt

53
ExampleEmbed

• used to embed multimedia content
• such as sound, video, and VRML.
• The embedded multimedia document is declared
  through the use of the SRC attribute
• ltEMBED SRC"myvideo.avi"gt

54
Frame Tags ltFRAMESETgtlt/FRAMESETgt tag

• The ltFRAMESETgt tag marks the beginning and the
  end of a set of frames.
• .COLSList
• The size of each column in set of frames. Columns
  
  can be specified either in pixels, as a
  percentage of
  the display area or with an asterisks
  ()indicating
  that any remaining space be allotted
  to that column.
  e.g.COLS"40,25,"
• ROWSList
• The size of each row in set of frames. Rows can
  be
  specified either in pixels, as a percentage of
  the
  display area or with an asterisks ()indicating
  that
  any remaining space be allotted to that
  column.
  e.g.ROWS"40,25,"
• BORDERValue
• The size of the borders, in pixels

55
Frame TagsltFRAMESETgt ... lt/FRAMESETgt tags

• replace the ltBODYgt ... lt/BODYgt tags within an
  HTML document.
• They define a frameset within which HTML
  documents appear.
• The FRAMESET tag can take on the attributes COLS
  or ROWS
• each of which can specify the number and sizes of
  the frames to be included.
• Sizes can be specified as pixel values or as
  percentages.

56
ExampleltFRAMESETgt ... lt/FRAMESETgt tags

• The ltFRAMEgt tag specifies the name and source
  file of a particular frame.
• The SRC attribute defines the HTML file that will
  appear within that frame.
• The NAME attribute declares a name for the frame.
• This name can later be used as the target of a
  hyperlink, making the document specified by the
  hyperlink appear in that frame.

57
ExampleltFRAMESETgt ... lt/FRAMESETgt tags

• Finally, the FRAME tag can accept the SCROLLING
  attribute
• with the values YES, NO, or AUTO and
• the NORESIZE attribute
• with the values YES or NO
• Frames require the hypertext reference anchor tag
  to be used somewhat differently.
• When declaring an ltA HREFgt tag, apart from
  specifying the URL reference, it is necessary to
  also provide a TARGET attribute with a value
  referring to the name of the frame being targeted

58
ExampleltFRAMESETgt ... lt/FRAMESETgt tags

• For instance, in a FRAMESET that includes frames
  named navigation and body,
• an HTML document called target.html would be
  displayed in the body frame by clicking on a
  hyperlink defined as follows
• ltA HREF"target.html" TARGET"body"gtWhy don't you
  click here?lt/Agt

59
Frame Tags ltFRAMEgt tag

• The ltFRAMEgt tag defines a single frame within a
  set of frames
• SRCDocument
• Specifies the document or URL of the object to be
  
  displayed in the frame.
• NORESIZE
• Prevents users from resizing the frame.
• SCROLLINGOption (YES NO AUTO)
• Specifies whether scroll bars are visible. AUTO
  (the
  default) displays scroll bars only as needed.
• FRAMESPACINGValue
• Specifies the amount of space between frames, in
  
  pixels.
• NAMEText
• Label assigned to the frame.

60
Frame Tags ltFRAMEgt tag

• Text included between a pair of ltNOFRAMESgt ...
  lt/NOFRAMESgt tags ensures that all users will
  receive some form of HTML content.
• The text between a pair of tags will be ignored
  by frames-enabled browsers, but it will be
  displayed by all other browsers.
• Netscape Navigator and Internet Explorer are both
  frames-enabled.

61
ExampleFrames

• For instance, the following HTML code creates
• a column that is 20 as wide as the browser
  window on the left side,
• a 200-pixel wide column on the right side, and
• allocates the remaining space to the middle
  column.
• The leftmost column is then sliced into two rows,
  
• the top row being 250 pixels high and
• the bottom row inheriting whatever space is left
  of the column.

62
ExampleFrames

• ltFRAMESET COLS"30,,100"gt
• ltFRAMESET ROWS"40,"gt
• ltFRAME SRC"a.htm" NAME"A"gt
• ltFRAME SRC"b.htm" NAME"B"gt
• lt/FRAMESETgt
• ltFRAME SRC"c.htm" NAME"C"gt
• ltFRAME SRC"d.htm" NAME"D"gt
• lt/FRAMESETgt

63
ExampleFrames

• This produces

64
Form Tags ltFORMgtlt/FORMgt tag

• The ltFORMgt tag marks the beginning and end of a
  Web page form.
• ACTIONURL
• Specifies the URL to which the contents of the
  form
  are to be sent.
• METHODOption (POST GET)
• Specifies the method of accessing the URL
  indicated in the ACTION property.

65
Form Tags ltINPUTgtlt/INPUTgt tag

• The ltINPUTgt tag creates an input object for use
  in a Web page form.
• TYPEOption (CHECKBOX PASSWORD RADIO RESET
  SUBMIT TEXT TEXTAREA)
• Specifies the type of input object.
• CHECKBOX creates a checkbox.
• PASSWORD creates a text box which hides the text
  as
  the user enters it.
• RADIO creates a radio button.
• RESET creates a button that resets the form's
  fields
  when pressed.
• SUBMIT creates a button that
  submits the form when pressed.
  
• TEXT creates a text box.
• TEXTAREA creates a text box with
  multiple line entry
  fields.

66
Form Tags ltINPUTgtlt/INPUTgt tag

• NAMEText
• The label given to the input object.
• VALUEValue
• Specifies the information that is initially
  displayed
  in the input object.
• CHECKED
• Specifies that an input checkbox or input radio
  
  button is selected.
• ALIGNOption (LEFT RIGHT TOP TEXTTOP
  MIDDLE ABSMIDDLE BASELINE BOTTOM ABSBOTTOM)

67
Form Tags ltSELECTgtlt/SELECTgt tag

• The ltSELECTgt tag encloses a set of ltOPTIONgt tags
  for use in creating selection lists.
• NAMEText
• The name assigned to the selection list.
• SIZEValue
• The number of visible items in the selection
  list.
• MULTIPLE
• Allows the user to select multiple options from
  the
  selection list.

68
Form Tags ltOPTIONgtlt/OPTIONgt tag

• The ltOPTIONgt tag is used for each item in a
  selection list. This tag must be placed within
  ltSELECTgt tags.
• VALUEValue
• The value returned to the server when the user
  selects this option.
• SELECTED
• The default or selected option in the selection
  list.

69
Form Tags ltTEXTAREAgtlt/TEXTAREAgt tag

• The ltTEXTAREAgt tag creates a text box.
• NAMEText
• Specifies the name assigned to the text box.
• COLSValue
• Specifies the height of the text box in
  characters.
• ROWSValue
• Specifies the width of the text box in characters.

70
ExampleForms

• allow the user to enter information into a series
  of fields
• such as text fields, radio buttons, checkboxes,
  and pull-down menus
• this information can then be submitted either to
  an email address, or more regularly, to a CGI
  script that processes this information
• the ltFORMgt ... lt/FORMgt tag

71
ExampleForms

• ACTION attribute
• specifies the URL to which the data will be
  submitted
• METHOD attribute
• take on the values GET or POST
• with POST being most commonly used

72
ExampleForms

• The following tags must all be nested between a
  pair of ltFORMgt ... lt/FORMgt tags
• The ltINPUTgt tag
• it defines a field input format by taking on the
  TYPE attribute
• with one of the values TEXT, CHECKBOX, RADIO,
  SUBMIT, or RESET
• A TEXT field
• is a simple, one-line field

73
Example Forms

• A CHECKBOX
• allows more than one box to be selected at a time
• A RADIO button
• lets the user select one value among several
  options
• The SUBMIT button
• sends in a form with the current field values
• The RESET button
• sets all the fields back to their default values
• NAME attribute
• defines the field name for the INPUT tag
• VALUE attribute
• optional
• defines the default value for the field

74
ExampleForms

• ltSELECTgt ... lt/SELECTgt tag
• specifies a pull-down menu
• NAME attribute
• specifies the name of the field being declared
• A pull-down menu contains numerous options
• each of which is defined by an ... tag.
• The OPTION tag takes on a VALUE attribute,
• which defines the name of the field being
  declared.
• Each text string that appears in the pull-down
  menu goes between a pair of ltOPTIONgt ...
  lt/OPTIONgt tags.
• All ltOPTIONgt ... lt/OPTIONgt tags must be nested
  within a pair of ltSELECTgt ... lt/SELECTgt tags

75
Forms - ltTEXTAREAgt ... lt/TEXTAREAgt tag

• defines a scrollable, multi-line text field
• where the user can input ASCII text
• it can take on a NAME attribute
• which defines the field name
• The default value for the textarea is the text in
  between the ltTEXTAREAgt and lt/TEXTAREAgt tags
• The number of rows and columns can be defined
  through the use of ROWS and COLS attributes.
• The WRAP attribute
• which can take on the values PHYSICAL or VIRTUAL,
  automatically wraps text around when the end of
  the text area is reached

76
Forms - example

• lthtmlgt
• ltheadgtlttitlegtPersonal Information
  Formlt/titlegtlt/headgt
• ltbodygtlth2gtPlease tell me about yourselflt/h2gt
• ltform methodpost action"/path/program"gt
• ltbgtWhat's your name?lt/bgtltinput name"name"gt
• ltpgtltbgtAre you a man or a woman?lt/bgt
• ltinput type"radio" name"sex" value"male"gt
  Male
• ltinput type"radio" name"sex" value"female"gt
  Female
• ltpgtltbgtSelect the color(s) you likelt/bgt
• ltinput type"checkbox" name"color"
  value"red"gtRed
• ltinput type"checkbox name"color
  value"yellow"gtYellow

77
Forms example (cont.)

• ltinput type"checkbox" name"color"
  value"blue"gtBlue
• ltpgtltbgtWhat city do you live in?lt/bgtltinput
  name"town" value"Hong Kong"gt
• ltpgtltbgtPlease enter your comments in the text
  area belowlt/bgt
• lttextarea name"comment rows"3
  cols"40"gtlt/textareagtltpgt
• lthrgt
• ltinput type"reset" value"Clear Input"gt
• ltinput type"submit" value"Send Info"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

78
Forms - example

• This produces

79
Web Resources

• HTML reference sites
• A Beginner's Guide to HTML by NCSA at
  http//www.cs.ntu.edu.au/olc/www/www.html
• Web Communications HTML Form Guide at
  http//www.webcom.com/html/tutor/forms/
• LeJeunes HTML Table Tutorial at
  http//www.charm.net/lejeune/tables.html
• NCSAs HTML Forms Tutorial at http//info.netmar.c
  om/creating/forms.html
• MDWAs HTML Tutorial Form Examples at
  http//www.2kweb.net/html-tutorial/forms/examples/

80
Web Resources

• The HTML Writers' Guild at http//www.hwg.org
• The World Wide Web Consortium at
  http//www.w3c.org
• Netscape Corporation's DevEdge Online at
  http//developer.netscape.com/library/documentatio
  n/htmlguid/
• Microsoft Corporation's Site Builder Workshop at
  http//www.microsoft.com/workshop/default.as
• WebMonkey at http//www.webmonkey.com

81

• END OF HTML