Web Programming
Last revised: November 26, 2011
| Instructor's Notes | |||
|
Web Concepts
PowerPoint Presentation Creating Web Pages |
|
Unit 1: Basic HTML
HTML basics including paragraphs, lists and images. |
|
|
Formatting Web Pages |
|
Unit 2: Formatting skills beyond the basics |
|
|
Creating Web Sites |
|
Unit 3: Organizing your web site and linking its pages. |
|
|
Cascading Style Sheets |
|
Unit 4: How to format web pages using Cascading Style Sheets in HTML. |
|
|
Tables (HTML) |
|
Unit 5: How to create tables using HTML. Includes merging cells and embedded tables. |
|
|
HTML Forms |
|
Unit 6: How to gather data from a user using a web form |
|
|
Using <div> For Layout |
|
Unit 6: How to use <div> tags (instead of tables) for form layout. |
|
|
Expression Web |
|
Unit 7: Using Expression Web to create web sites |
|
|
Expression Web Tables |
|
Unit 7: Using Expression Web to create tables |
|
|
JavaScript Basics |
|
Unit 8: Basic JavaScript Concepts |
|
|
JavaScript Functions |
|
Unit 9: Creating and calling functions and methods in JavaScript |
|
|
JavaScript Validation |
|
Unit 10: Using JavaScript to validate form inputs |
|
|
Regular Expressions |
|
Unit 11: How to use regular expressions in JavaScript to validate user entries |
|
|
JavaScript Arrays |
|
Unit 12: Declaring and using arrays in JavaScript |
|
|
Image Manipulation |
|
How to change existing images: format, size, cropping, transparency. Demo using Paint.Net |
| Recorded Lectures | |||
|
|
Assignment Questions | ||
Part 1
|
Thicker horizontal rules; div tags and floating images; Common nav bars; body tag background images revisited | ||
|
Part 2
|
2011-09-21: Resolution of HR spacing problem; UL bullet styles; overrides: external-embedded-inline; Creating a fixed nav bar (incomplete-see inclass sample for solution); CSS Validation | ||
|
|
Firebug | ||
|
Part 1
|
How to use the Firefox plugin Firebug to analyze HTML and CSS and to debug JavaScript | ||
|
|
Unit 2 - HTML Formatting | ||
|
Part 1
|
Inline, embedded and external styles. | ||
|
Part 2
|
CSS Review | ||
|
Part 3
|
HTML colors; Body styles; Paragraph styles; | ||
|
|
Unit 3 - Links | ||
|
Part 1
|
Links to pages in this site; Links to bookmarks within a page; Links to bookmarks on another page | ||
|
Part 2
|
Links to other sites; Links to bookmarks on other sites; Image links; Thumbnail links; Email links | ||
|
|
Unit 5 - Tables | ||
|
Part 1
|
Gardening Club Tables example | ||
|
|
Unit 6 - HTML Forms | ||
|
Part 1
|
Form tags; Text inputs; Password inputs; basic Form CSS techniques | ||
|
Part 2
|
Text Box; Placeholder; Text Area; Validating embedded CSS; Using HTMLTestForm.php; Check Box | ||
|
Part 3
|
Check boxes; Radio buttons; Field sets; Combo boxes; List boxes | ||
|
Part 4
|
Spacing non-input items; submit, reset, image and "button" buttons; autofocus; autocomplete; Data lists | ||
|
|
Unit 7 - Expression Web | ||
|
Part 1
|
How to use Expression Web (4) to create, edit and manage a web site | ||
|
|
Unit 8 - JavaScript Basics | ||
|
Part 1
|
script tag; Case sensitivity; Semicolons; Comments; Variables; Operators and Order of Precedence; prompt() function; $() function (getElementById); alert() function; Extracting data from form fields | ||
|
Part 2
|
Review; Embedding JavaScript in the HTML body; Firebug examples; confirm() method; Date class; Converting text to numbers; Converting text to Date | ||
|
Part 3
|
min-width attribute (applied to form); Relational operators; IF statements; ELSEIF; Firebug breakpoints; isDate; isNaN; Case (switch) statements | ||
|
Part 4
|
Loop concepts; Counter-control (FOR) loops in JavaScript; Accessing form object properties in JavaScript | ||
|
Part 5
|
Pre-Test loops; Post-test loops; Using loops to validate prompt input; isNaN and the empty string and null; isDate | ||
|
|
Unit 9 - JavaScript Functions | ||
|
Part 1
|
Anonymous vs Regular functions; Function concepts; parameters vs arguments; GetRandom function | ||
|
Part 2
|
Optional parameters; GetRandom with one parameter; average function (unknown number of parameters); using FormatNumber; using toTitleCase | ||
|
Part 3
|
Designing functions; functions and parameters; calling a function; | ||
|
Part 4
|
Functions with a variable number of parameters | ||
|
|
Unit 10 - JavaScript Form Validation | ||
|
Part 1
|
Connecting form buttons to JavaScript functions; Creating event handlers for buttons; "Button" buttons vs. "Submit" buttons; Form validation overview | ||
|
Part 2
|
Showing/hiding error markers; Setting error marker text; Checking for required fields; Checking for valid numbers; Range checking an integer; Formatting valid user inputs; Validation in HTML vs JavaScript | ||
|
Part 3
|
Input type "range"; onkeypress Event; Volker Tools onkeypress handlers; Validation in combination with onkeypress; Removing special characters (commas, etc) from user input | ||
|
Part 4
|
Validating date fields; Dealing with different date formats in different browsers | ||
|
Part 5
|
Validating a currency field (also CurrencyKeyPress); Ensuring a combo box item is selected; Ensuring a minimum number of list box items is selected; Ensuring a radio button is selected | ||
|
Part 6
|
Validating the entire form before submitting; Clearing the error markers when resetting the form | ||
|
|
Unit 11 - Regular Expressions | ||
|
Part 1
|
Regular expression concepts; Regular expression codes (JavaScript and others); Validating a section number using regular expressions | ||
|
Part 2
|
Validating zip codes with optional +4; Validating phone numbers with optional area codes; Validating credit card numbers; Validating hexadecimal values | ||
|
|
Unit 12 - JavaScript Arrays | ||
|
Part 1
|
Declaring arrays; Initializing arrays; Sensing undefined array elements; Accessing array elements (get, set); Using for loops to traverse an array | ||
|
Part 2
|
Pass by Reference vs. Pass by Value; Sorting arrays; Creating a custom compare function for sorting non-Strings; Linear search vs. Binary search | ||
|
Part 3
|
toString vs. join; Associative arrays; Multi-dimension arrays | ||
| Assignments | |||
|
|
Tickets |
|
Short assignments due at beginning of next class period. |
|
|
HTML and CSS |
|
Units 1-4:Assignment to create Help pages using HTML and CSS. |
|
|
HTML Tables |
|
Unit 5: Assignment to create tables using HTML |
|
|
Web Forms |
|
Unit 6: Assignment to create a basic web form. |
|
|
Firefox Firebug Lab Firebug Lab HTML (zipped) |
|
Unit 8: Lab demonstrating how to use the Firefox Firebug addon to help debug JavaScript |
|
|
JavaScript Basics |
|
Unit 8: Assignment to demonstrate basic JavaScript control structures |
|
|
JavaScript Functions Bar Graph Images |
|
Unit 9: Writing and incorporating JavaScript functions |
|
|
JavaScript Validation Assignment Starter Form |
|
Unit 10: Assignment to use JavaScript to validate an HTML form. |
|
|
Validating using Regular Expressions |
|
Unit 11: Using of regular expressions to validate strings |
|
|
JavaScript Arrays |
|
Unit 12: Modifying the functions assignment to implement arrays. |
| Evaluation Sheets | Evaluate your own assignments before turning them in. | ||
|
|
HTML and CSS |
|
Evaluation sheet for the HTML and CSS (Help System) project. |
|
|
HTML Tables |
|
Evaluation sheet for the HTML tables project. |
|
|
Web Forms |
|
Evaluation sheet for the Web Forms project. |
|
|
JavaScript Validation |
|
Evaluation sheet for the JavaScript Validation project. |
|
|
JavaScript Arrays |
|
Evaluation sheet for the JavaScript Arrays project. |
| Handouts | |||
|
|
Volker's JavaScript Tools |
|
Commonly used tools help solve your homework problems. |
|
|
HTML 5 Standards |
|
Standards to be used for XHTML development in this class. |
|
|
HTML 5 Validator W3C |
|
W3C web site that scans your XHTML file to ensure it complies with the standard |
|
|
CSS 2.1 Validator |
|
W3C web site that scans your CSS file to ensure it complies with the standard |
|
|
Image Manipulation |
|
How to change existing images: format, size, cropping, transparency. Demo using Paint.NET. |
| Programming Tips | |
| Develop PHP Website | Everything you ever wanted to know about HTML, CSS, PHP, MySQL, JavaScript |
| About.com JavaScript |
A ton of useful code samples Sign up for the free, weekly JavaScript newsletter |
| Other Tips | |
| HTML Color Information | Complete information on specifying colors in HTML (and a whole lot more) |
|
http://www.tips-tricks.com
http://www.geocities.com/SiliconValley/Campus/1924/index.html |
Tips for Html code and developing your own web page. |
| http://www.w3schools.com/tags/ | List of HTML tags and tips for how to use them |
| http://www.wdvl.com | Tons of web design tips |
| http://www.wdvl.com/Graphics/Images/ | Tips for adding images to web pages |
| http://www.pageresource.com | Tutorials for HTML, JavaScript and web design |
| http://www.wdvl.com/Authoring/Graphics/Tools/PSP/ | Tutorial for Paint Shop Pro 5 |
| Graphics | |
|
http://office.microsoft.com/clipart/?cag=1
http://screamdesign.daz3d.com/free.html http://www.jasc.com http://www.adobe.com http://www.iconbazaar.com |
Links to sites that will answer questions about adding graphics to your web page. |
| Java Scripts and Applets | |
|
http://javaboutique.internet.com
http://javascript.internet.com |
Links to sites with lots of JavaScript and Java applets you can use. |
| Web Servers / Hosts | |
|
Charter Communications
http://www.findmyfreehost.com http://www.free-web-space-finder.com http://www.freewebspace.net http://www.myfamily.com http://www.tripod.lycos.com http://geocities.yahoo.com/home http://smorgasbord.freeservers.com |
Links to sites that offer free web hosting. |
| www.fatcow.com | FatCow is the site I use to host this web site. It's not free though. It costs about $9 a month. That's not a lot to pay for unlimited web space, unlimited bandwidth, no ads, and your own URL (www.volkergaul.com) |
