Embed Size (px)
Citation preview
Anatomy of a Request URLhttp://www.vtmug.org/cgi-vtmug/GETMBR?MbrID=VALANCE_J
http://www.vtmug.org/
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
http://www.myCompany.com/
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
<table style=“border:none; color:blue”>
• Inside the <head> element of an HTML page
<head>
<style type=“text/css”>
table { border:none; color:blue }
</style>
</head>
• In an external CSS file
<head>
<link rel="stylesheet" type="text/css”
href=“siteStyle.css" />
</head>
What is Meant By Cascading?Multiple Styles Will Cascade Into One
Cascading Order:• Browser default
• External style sheet
• Internal style sheet (inside the <head> 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 Syntaxselector { 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 integerx = “Now I’m a string”; // x is string
• Same for functions:function foo() {
if (inputOK()) return true; // booleanelse 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).
