Web Development 101 Presented by John Valance

Anatomy of a Request URL GETMBR?MbrID=VALANCE_J cgi-vtmug/ Path to the program (may be mapped by the web server setup) GETMBR Program name (may be mapped by the web server setup ) ? Delimiter (separates program name from the parameter list) MbrID=VALANCE_J Query string (i.e. parameters the program can access)

Query String pathToMyProgram/MYPROGRAM? variable1=value1&variable2=value2&variable3=value3…

What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to help separate content from presentation. Styles are normally stored in Style Sheets – a list of presentation attributes that together define the style of a page or an entire site. External Style Sheets are stored in.css files External Style Sheets can save you a lot of work, since site-wide style changes can be made in one file. Multiple style definitions will cascade into one

Where can Styles be specified? Inside a single HTML element Inside the element of an HTML page table { border:none; color:blue } In an external CSS file <link rel="stylesheet" type="text/css” href=“siteStyle.css" />

What is Meant By Cascading? Multiple Styles Will Cascade Into One Cascading Order: Browser default External style sheet Internal style sheet (inside the tag) Inline style (inside an HTML element) If two rules conflict at the same level, the last one specifed wins. Note: Multiple external style sheets can be referenced inside a single HTML document.

CSS Syntax selector { property1: value1; property2: value2} -or- selector { property1: value1; property2: value2 } Selector: an HTML tag name (e.g.: H1, TABLE, BODY) Or a custom class name that applies to any HTML element Property: A specific presentation attribute to be modified (e.g., color, font-weight) Value: How the presentation attribute should be modified (e.g. red, bold)

What is JavaScript? It isn’t Java! (but similar syntax, based on C). Runs on the client-side only Scripting language for web browsers All browsers have built-in JavaScript interpreter – you don’t buy it or install it. Interpreted at run-time (as page loads) Loosely typed language; this is legal (though not advisable): x = 3 + 5;// x is integer x = “Now I’m a string”;// x is string Same for functions: function foo() { if (inputOK()) return true; // boolean else return ‘Error in input’; // string }

What can a JavaScript Do? Manipulate the HTML document after it has been sent to the browser in a myriad of ways Manage the user’s experience Validate input data Handle events –mouse clicks or cursor movement into/out of fields, for example Control Dynamic HTML –make things move around, appear and disappear) Read and write HTML elements Open & close windows, and communicate between windows. Read and write cookies Many more uses

Tips for Web Development Get someone who knows web development, and ideally RPG, to guide your project and mentor your staff. Understand the concepts and bookmark online references and examples for each language - you'll never remember it all, and it's always changing. Get a designer or someone with artistic ability to create your styles and layout (not a programmer). Strive for simplicity and functionality (i.e. readability) in style - don't try to show off. Use sans-serif fonts. They are much easier to read on a screen. 12pt Arial by default ( not 10pt Times Roman ). Use neutral/pastel colors on white background as standard. Use bright colors for exceptions (errors, notices).