Key Points

1
Key Points 3/19/02

• Semester Project
• HTML Review
• Scripts, Applets, and General Purpose Programs
• Forms

2
Semester Project

• We have provided for 7 assignments during the
  semester.
• Each of them address a specific aspect of making
  a web page
• Site map layout and page design
• Creating a shell web site using frames
• Implementing stylesheets
• Adding links, images, and imagemaps (imagemaps
  are optional)
• Using lists and tables
• Using forms
• Using scripts and applets
• The semester project is simply to put it all
  together.
• Not intended to be new work, but make sure the
  old work is complete enough.

3
Semester Project Deliverables

• Due date Thursday April 18, 2002
• Earlier is OK.
• Later is not OK.
• Deliverables
• Repository contains all pertinent information
  about your web site.
• An online web site that I can view.
• The address of the home page of the website (the
  address of each page must be in the repository).

4
Introduction to HTML (review)

• HTML Hypertext Markup Language
• HTML is a very weak language (basically nil).
• Not designed to do computation.
• HTML is designed specifically to specify how web
  pages are to be displayed.
• HTML requires a program, called a browser, to
  display the web page
• Netscape and Internet Explorer are browsers.
• Each browser will display web pages differently

5
Structure of HTML (review)

• HTML uses tags to suggest how to display items on
  a page
• Learning HTML is really about learning how to use
  the tags.
• Makes it easy to do useful pages quickly.
• Most tags come in pairs
• lttaggt starts the action
• lt/taggt stops the action
• Example ltHTMLgt begins all html documents and
  lt/HTMLgt ends them
• Example ltcentergtTitlelt/centergt will center the
  word Title on the page.
• Some tags do not come in pairs
• ltbrgt is a line break, causing the display to
  continue on a new line
• lthrgt inserts a horizontal rule (line) across the
  page.

6
Summary of HTML Tags (Incomplete)

• The Fours basic tags
• ltHTMLgtltHEADgtltTITLEgtltBODYgt or ltFRAMESETgt
• Text Positioning and Styling
• ltBRgt ltHRgt ltPgtltCENTERgtltLEFTgtltRIGHTgt
• ltBgtltIgtltUgtltH1gtltH2gtltH3gtltH4gtltH5gtltH6gtltH7gt
• ltFONT COLOR FACE SIZEgt
• Images -ltIMGgt
• Hyperlinks - ltAgt
• Organization
• ltOLgtltULgtltDLgt
• ltTABLEgt

7
Going Beyond HTML

• Pure HTML is relatively static
• No computational power
• Display only
• Very little interaction between the viewer and
  the web page
• Common Gateway Interface (CGI)
• A standardized interface used to allow HTML to
  interact with other software programs.
• HTML has been designed to interface with more
  powerful programming languages
• JavaScript used to run scripts of code within
  an HTML document.
• Java used to run applets, or programs associated
  with the HTML document and run on the viewer's
  computer.
• Perl A popular language to write general purpose
  programs that run on a machine other than the
  viewer's computer. Uses CGI.
• Many others most languages can interact with
  HTML via CGI.

8
Single Computer Operation

• A computer is basically composed of memory, a
  processor, and hardware to interface with humans
  (monitor, keyboard, mouse).

9
Single Computer Operation

• The processor retrieves programs and data from
  the memory and displays program results to the
  monitor.

Data1
10
HTML with a Single Computer

• The processor retrieves the browser and web page
  from memory and displays the results on the
  monitor.

index.html
11
HTML with the Internet

• The biggest change is that now memory is
  (essentially) infinite.

INTERNET Programs And Data
index.html
12
Effects of the Internet

• Your browser requests data (html pages typically)
  to be transferred from other machines to your
  machine.

INTERNET Programs And Data http//w.x.y.z/
http//w.x.y.z/
13
JavaScript Behavior

• JavaScript runs within the web page.

INTERNET
Index.html

14
Java Behavior

• Java applets run on your machine external to the
  web page.

INTERNET
Index.html

15
Perl Behavior

• Perl scripts do not run on your machine at all
  (Note This is true of general purpose programs,
  of which Perl scripts is an example).
• The FORM tag is used to send data to the Perl
  script.

INTERNET
???????

16
Drawbacks to the Internet

• Access to the Internet obviously has benefits
• Infinite supply of memory
• Infinite supply of processors
• The biggest single drawback to Internet access is
  loss of SECURITY
• An (essentially) infinite number of people MAY
  have access to your machine.
• An (essentially) infinite number of people MAY
  have access to your data.

17
Maintaining Safety

• Allowing arbitrary programs to run on your
  machine allows anyone to damage your machine or
  data.
• Rules have been put in place to reduce the risk
• To protect YOU, Java applets cannot read or write
  to your files.
• To protect YOU, JavaScript scripts are limited to
  reading and writing to "cookie" files. Cookie
  files are small files that can store information.
  They cannot be run as programs.
• To protect OTHERS, access to Perl scripts must be
  stored in a special place, typically called the
  cgi-bin.

18
The ltFORMgt Tag

• ltFORMgt
• ACTION DETERMINES WHAT APPLICATION WILL PROCESS
  THE DATA
• CLASS - SPECIFIES STYLE WITH A PREDEFINED CLASS
• ENCTYPE - DATA ENCODING TYPE
• METHOD - SPECIFIES HOW THE DATA SENDS DATA TO THE
  SERVER ("POST" OR "GET")
• NAME - NAMES THE FORM (USEFUL FOR JAVASCRIPT)
• ONRESET - ASSOCIATES SCRIPT WITH FORM RESET
• ONSUBMIT - ASSOCIATE SCRIPT WITH FORM SUBMISSION
• STYLE - SPECIFIES STYLE (AS FROM A STYLESHEET)
• TARGET - DIRECTS RESULT OF FORM OUTPUT TO A FRAME

19
Methods of Allowing Input to forms

• There are 12 predefined mechanisms to input data
  to a from
• BUTTON - DISPLAYS TEXT AND CAN BE CLICKED TO
  INITIATE SCRIPTS
• CHECKBOX - CAN BE CHECKED ON AND OFF. YOU
  USUALLY SUPPLY DESCRIPTIVE TEXT TO GO WITH IT.
• FILE -
• HIDDEN -
• IMAGE - LIKE A BUTTON, BUT YOU CAN USE AN IMAGE
  FILE.
• PASSWORD - LIKE TEXT BUT INPUT IS NOT VISIBLE
• RADIO - LIKE A CHECKBOX, BUT ROUND.
• RESET - BUTTON ALLOWING ENTIRE FORM TO BE RESET.
• SUBMIT - BUTTON ALLOWING FORM DATA TO BE
  SUBMITTED VIA CGI.
• TEXT - BASIC TEXT INPUT (ONE LINE).
• ltSELECTgt - DROP DOWN MENU OF ITEMS TO SELECT.
• ltTEXTAREAgt - MULTILINE TEXT

20
The ltINPUTgt Tag

• ltINPUTgt
• ACCEPT DETERMINES WHAT APPLICATION WILL PROCESS
  THE DATA
• ALIGN - SETS ALIGNMENT
• BORDER - ALLOWS A BORDER TO SURROUND THE INPUT
  DEVICE
• CLASS - SPECIFIES STYLE WITH A PREDEFINED CLASS
• CHECKED - PRE-CHECKS CHECKBOX INPUT TYPES
• MAXLENGTH - SETS MAX INPUT LENGTH FOR TEXT INPUT
  TYPES
• NAME - NAMES THE DEVICE (USEFUL FOR JAVASCRIPT)
• ONBLUR
• ONCHANGE
• ONCLICK
• ONFOCUS
• ONSELECT
• SIZE - SETS DISPLAY SIZE OF TEXT INPUTS
• SRC - SOURCE OF AN IMAGE BUTTON
• STYLE - ALLOWS STYLES TO BE SET
• TYPE - SETS TYPE (IE TEXT, BUTTON, RADIO)
• VALUE - SETS AN INITIAL VALUE OR DISPLAY