Intermediate HTML

1
Intermediate HTML

• Joshua S. SimonCollective Technologies

2
Overview

• Adding multimedia and graphics
• Creating and formatting tables
• Creating and processing forms
• Working with CGI

3
Adding multimedia and graphics

• Issues
• Using static graphics
• Using image maps
• Using movies
• Using sounds

4
Issues with multimedia and graphics

• 1k is about 1 second at 14.4kbps
• Color depth affects file size
• HTTP 1.0 is stateless

5
Using static graphics

• IMG tag (no /IMG)
• SRC specifies image source URL
• ALT specifies alternate text for non-graphics
  users

6
Example of static graphics

• ALTCT logo
• Generates the picture shown below.

7
Other options to IMG

• ALIGN aligns the image along the LEFT CENTER or
  RIGHT of the screen
• BORDER defines the border width around the image,
  in pixels
• LOWSRC provides a low-resolution source URL to
  load first for slow-connection users

8
Other options to IMG, continued

• HSPACE defines the horizontal space between the
  image and text, in pixels
• VSPACE defines the vertical space between the
  image and text, in pixels
• HEIGHT defines the initial image height, in
  pixels
• WIDTH defines the initial image width, in pixels

9
Using image maps

• An image map is a graphic element with embedded
  links
• Click a spot on the map and jump to the URL
  hidden
• Two kinds
• server-side
• client-side

10
Server-side image maps

• Adds the ISMAP tag to IMG
• BORDER0ISMAP
• Requires a map file and program (imagemap) on the
  server

11
Client-side image maps

• Adds the USEMAP tag to IMG
• Map container included in HTML document

12
Combining both

• BORDER0ISMAP USEMAPmapname
• MAP container in two places
• HTML document, in container
• Server, in mapfile_on_server

13
Map file or container

• Both the container (client-side) and the file
  (server-side) for the map look like
  HREFurl

14
Using animated graphics

• Using GIF89a animations
• multiple images in same GIF file
• browser loops through images in sequence
• Using plug-ins
• Macromedia Shockwave is most common
• http//www.macromedia.com/
• requires plug-in in the browser to be useful

15
Using movies

• Formats include
• MPEG -- Internet standard (works on all 3 big
  platforms)
• QuickTime -- Apples format (doesnt work on
  Unix)
• Windows AVI -- Microsofts format (doesnt work
  on Mac, dont know about Unix)

16
Referencing movies

• Click here todownload
  and playmy movie.

17
Using sounds

• Formats too many to list
• Many are platform specific
• Click here todownload
  and playthe sounds.

18
Creating and formatting tables

• The TABLE container defines a table
• The TR container defines a row
• The TD container defines a data cell
• The TH container defines a header cell
• The CAPTION container defines a table caption

19
TABLE options

• BORDER defines the width of the border, in pixels
• CELLPADDING defines the space between the cell
  border and the cell text
• CELLSPACING defines the space between the table
  border and the cell border
• WIDTH defines the table width in pixels or in a
  percentage of the screen

20
TR options

• ALIGN aligns along LEFT CENTER or RIGHT
• VALIGN aligns along TOP MIDDLE or BOTTOM

21
Cell options (TD, TH)

• ALIGN aligns along LEFT CENTER or RIGHT
• VALIGN aligns along TOP MIDDLE or BOTTOM
• BGCOLOR defines the cell background color, in
  rrggbb

22
Cell options continued

• COLSPAN causes the cell to span multiple columns
• ROWSPAN causes the cell to span multiple rows
• NOWRAP causes text not to wrap within a cell
• WIDTH defines the cell width in pixels or in a
  percentage of the table

23
Captions

• The CAPTION container aligns with the center of
  the table
• Either on top of or below the table (not to left
  or right)
• Inside the TABLE container
• Can contain valid HTML tags
• Will not cause table width to increase

24
Sample table

• Month Revenue
  January ALIGNRIGHT245,000

25
Table results
26
Creating and processing forms

• Created with the FORM container
• Options
• ACTION -- the URL of the script to process when
  the form is submitted
• METHOD -- the means of exchanging information

27
GET method

• Sends variables in namevalue pairs encoded in
  the URL
• http//server/cgi-bin/program.cgi?namevaluename
  value
• Queries are bookmarkable

28
PUT method

• Sends variables in namevalue pairs in the data
  stream
• http//server/cgi-bin/program.cgi
• Queries are not bookmarkable

29
Form fields

• INPUT -- Single lines of text, passwords,
  checkboxes, radio buttons, submit and reset
  buttons
• SELECT -- Pop-down menus
• TEXTAREA -- Free-form text

30
INPUT TYPETEXT

• NAME -- Name of the variable
• SIZE -- Size of the field to display
• MAXLENGTH -- Maximum allowed length
• VALUE -- Default value to display

31
INPUT TYPEPASSWORD

• Just like TEXT except keystrokes are starred out
• Sent in the clear on the wire -- not encrypted

32
INPUT TYPEHIDDEN

• Hidden variable used to pass information between
  scripts or pages
• NAME -- Name of the variable
• VALUE -- Value of the variable

33
INPUT TYPECHECKBOX

• Multiple choice selections (select m of n)
• NAME -- Name of the variable
• CHECKED -- Specified to check the default box

34
INPUT TYPERADIO

• Single choice selections (select 1 of n)
• NAME -- Name of the variable
• CHECKED -- Specified to check the default button

35
INPUT TYPERESET

• Button to clear form (return to default values)
• NAME -- Name of the variable
• VALUE -- Default text of the button

36
INPUT TYPESUBMIT

• Button to submit form
• Executes URL specified in FORM ACTION
• Uses method specified in FORM METHOD
• NAME -- Name of the variable
• VALUE -- Default text of the button

37
INPUT TYPEIMAGE

• Just like SUBMIT except an image is used
• SRC -- source file of the image
• Any other IMG tag option is valid here

38
SELECT container

• MULTIPLE allows users to select more than one
  item
• SIZE specifies how many entries to show at once
  (default is 1)
• Options specified with OPTION tag
• Default option(s) specified with OPTION SELECTED
  tag

39
TEXTAREA container

• Provides a free form text box
• NAME -- Name of the text area
• ROWS -- Number of rows to display
• COLS -- Number of columns to display

40
Submitting a form

• Converts variables into namevalue pairs
• Escapes special characters
• Builds URL based on ACTION and METHOD
• Access the generated URL

41
Escaped characters

• \t 09 Tab
• ! 20 Exclamation point
• _ 21 Underscore
• 22 Quotation mark
• 23 Hash mark
• 24 Dollar sign
• 25 Percent sign
• 26 Ampersand
• 27 Apostrophe
• 2B Plus sign
• 7E Tilde (only sometimes)

42
Processing the form

• Script runs
• Converts escaped characters back to normal
• Assigns namevalue pairs back into variables
• Does its processing
• Produces output

43
Working with CGI

• Your script must return something to the browser,
  usually HTML
• MIME headers
• Content-Type text/html
• Content-Length 1243
• Blank line
• HTML code

44
References

• CGI specificationhttp//www.rhnet.net/docs/cgi/
  overview.html
• HTTP specificationhttp//www.w3.org/pub/WWW/Prot
  ocols/
• HTML specificationhttp//werbach.com/barebones/

45
Questions