HTML/JavaScript Lesson Material 
(Note: Subject to change)

Lesson 1 - HTML Tags, Text Editors 

• htmllesson1.ppt
• Lesson Plan
• Handouts
• Activity 1

• htmllesson2.ppt
• Lesson Plan
• Warm up (review)

Raw Materials for theTrainPage
• Handouts
• Colors
• Graphics
• Graphic Hints
• Activity 2
• character.html

• htmllesson3.ppt
• Lesson Plan
• Warmup - Tigers!
• tigers.htm
• Questions/activities for Tiger Page
  
• Handouts
• SampleClipArt.doc (to practice graphic conversion)
  
• Netscape Composer Instructions (Mac)
• Netscape Composer Instructions (Windows)
• Activity 3
• Cow.HTML
  
• Other Materials for the Cow Pages

• htmllesson4.ppt
• Lesson Plan
• Warm up (review)
• Get pictures for animated GIF from this page
  
• Handouts
• Sample Image Map
• Activity 4
• SouthAmerica.htm
  
• Selected maps of South America

• htmllesson5.ppt
  
• Warm up (review)
• MyBody.html
• Eye.html
• Handouts
• Tables
• Nose.html
  
• tables.htm
• tableexamples.html
  
• Relative Addressing
• Frames
• Former SOE Homepage (frames sample)
• Frames in an Online Text (Teaching with Technology)
• Activity 5
• left.htm
• right.htm
• Web Site Map Document in Word format (540sitemap.doc)
  

• htmllesson6.ppt
• Lesson Plan
• Warm up
• WASHINGTON.HTML
  
• Sample Cascading Style Sheets Page
• Cascading Style Sheets/HTML Comparison
• Hex/RGB Conversion for Colors
• Web Design Ideas
• Background Changer (try out some background graphics)
• Tables with Background Colors
• Free Website Templates (downloaded from the web)
  
• Template1
• Template2
• Template3
  
• Activity 6

• Warmup (work on your project index page)
  
• CSSCompare.html
  
• programming.ppt
• flowchart.doc (Word document)
  
• Activity 7 (Word document)
  

Lesson 8 - Introduction to JavaScript

• Warmup - Download the Tags/JavaScript Quiz and answer as many questions as  possible. There will be a few questions we haven't covered yet.  Use the links from previous lessons to assist you.
  
• javascriptlesson1.ppt
• JavaScript Overview
• Samples of JavaScript
• scroller.htm
• clock.htm
• statusbarclock.htm
  
• fans.htm
• mouseover.htm
• changeimage.htm
• slideshow.htm
• timeofday.htm
• greet.htm
  
• popup.htm
• menuoflinks.htm
• dateinpage.htm
• mathgame.htm
• Fun with Buttons!
• Activity 8

• Instructions JSMathDrill.doc (Word document)
• Web page to download and modify (JSMathDrill.html)
• See variations on this JavaScript in Lesson 10
  

• Warm Up - ICT Testing Survey - Online Survey Example
  
• javascriptlesson2.ppt
• formslesson.ppt
  
• Forms.html
  
• JavaScriptReference.doc
  
• Handouts
• Forms with JavaScript
• Good Sources for JavaScript Samples
• The JavaScript Source
• JavaScript City
• Online Test Sample (emails name & score)
• Online Test Sample (simpler, no email, shows correct answers)
  
• JSMathDrillForms.html (math drill using FORMs)
  
• JSWordDrillForms.html (word drill using FORMs)
  

• JavaScript Revision Practice
  
• Hangman - U. S. Presidents (adapted from The JavaScript Source)
  
• Hangman - Number Words (adapted from The JavaScript Source)
• Typing Test (adapted from The JavaScript Source)
• Random Haiku (poetry)
  
• Storyteller ("mad lib") from The JavaScript Kit
• Online Test Sample (simpler, no email, shows correct answers)

• Online Piano (OnlinePiano/onlinepiano.html)
  
• Samples of web page interactivity
• Instructions and Examples of Interactivity using JavaScript http://www.cpcug.org/user/houser/javascript/ 
• CSUDH Chemistry Dept.  http://chemistry.csudh.edu/lechelpcs/lechelpintrocsn7.html
• Interactive educational sites by Jo Edkins http://gwydir.demon.co.uk/jo/index.htm 
• Interactive math activitieis http://www.cut-the-knot.com/Curriculum/index.shtml
• Vocabulary Quizzes with Pictures http://www.manythings.org/vq/
• Interactive Quizzes for ESL Students http://a4esl.org/q/j/project.html
• Interactive pages for young children http://www.geocities.com/Athens/Parthenon/8142/
• Interactive activities about prairies http://www.bellmuseum.org/distancelearning/prairie/
  
• Periodic Table http://www.dreamwv.com/primer/page/s_pertab.html
• Amby's Education Resources (some JavaScript and Java applets)  http://amby.com/educate/
• Visual Calculus http://archives.math.utk.edu/visual.calculus/6/series.5/
• JavaScript for science courses http://www.geol.uni-erlangen.de/javascript/
• Interactive Maze Game http://www.people.fas.harvard.edu/~night/StraightArrow/StraightArrow.html
• Interactive statistics links http://members.aol.com/johnp71/javastat.html
• English Grammar Quizzes using JavaScript http://a4esl.org/q/j/
• Interactive Music Lessons http://courses.wcupa.edu/frichmon/omea/
• JavaScript games – some are educational http://www.sunncity.com/Games/type.asp?type=javascript
  
• JavaScript samples, science education http://education.jlab.org/indexpages/elementgames.html
  
• online games, quizzes and crosswords http://www.sholay.com/newkids/games/main.htm
  
  
• Activity 12 - Find something in the list above (or in a search) that you could use in your website project as an "external link" (goes to an existing page on the web)
  

Extra things you might need to know (RTF document)

Helpful Resources

HTML Information

• Specific course objectives for HTML
• Requirements for HTML project
• Grading rubric for HTML project
• Web Primer
• Movies and Sound in Web Pages
• HTML Tag References
• http://www.htmlhelp.com/reference/wilbur/overview.html
• http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/
• http://html-tags.info/
• http://www.devx.com/projectcool/Article/19816
• http://www.htmlcodetutorial.com/
  
• Netscape Communicator/Composer Guides
• NetscapeCommunicator/Composer Tutorial for Windows
• Netscape Communicator/Composer Tutorial for Mac
• Links to Web Development Info 
• http://webmonkey.wired.com/webmonkey/
• http://www.pageresource.com/
• http://www.webdevelopersjournal.com/
• http://www.wdvl.com/Authoring/Tutorials/
• http://www.w3schools.com/default.asp
• Cascading Style Sheets Resources
• http://www.w3.org/MarkUp/Guide/Style
• http://www.w3.org/Style/CSS/learning
• http://www.w3.org/Style/Examples/011/firstcss
• http://www.htmlhelp.com/reference/css/ (several links)
• http://www.pageresource.com/dhtml/indexcss.htm (tutorial)
• http://www.wdvl.com/Authoring/Style/Sheets/ (links to samples)
• http://www.w3schools.com/css/default.asp (tutorial)
• http://www.westciv.com/style_master/academy/css_tutorial/
  
• Web Graphics Information
• http://faculty.millikin.edu/~moconner/Graphics/Graphics.html
• http://www.espressographics.com/text/webgraphics.html
• http://www.efuse.com/Design/web_graphics_basics.html
• http://www.webreference.com/dev/graphics/
• http://www.web-source.net/graphics_basics.htm
• http://www.widearea.co.uk/designer/
• http://www.kodak.com/US/en/digital/dlc/book1/chapter1/index.shtmlJavaScript Information

• JavaScript City  http://www.javascriptcity.com/
• The JavaScript Source  http://www.javascriptsource.com/
• JavaScript Tutorials/Samples  http://javascriptkit.com/javaindex.shtml
• JavaScript Guide  http://www.javascriptguide.com
• Dave's Tutorials (including JavaScript)  http://www.davesite.com/webstation/

Copyright Information

• The Copyright Site http://www.benedict.com/
• Stanford University CopyrightSite   http://fairuse.stanford.edu/
• CSUDH CyberLawSitehttp://www.csudh.edu/infortech/Pubs/Cyberlaw.htm
• The DigitalMillenium Copyright Act  http://www.loc.gov/copyright/legislation/dmca.pdf
• PT3 Grant Copyright Links http://www.csudh.edu/soe/faculty/pt3/copyrightb.html

Web Site Design

• 10 Top Mistakes inWeb Designhttp://www.useit.com/alertbox/9605.html
• 10 Good Deeds inWeb Design http://www.useit.com/alertbox/991003.html
• Websites that Suck  http://www.websitesthatsuck.com/
• Web Design Principles  http://mason.gmu.edu/~montecin/webdesign.htm
• Web Design Tips  http://werbach.com/web/page_design.html
• WWW InformationQuality Library  http://www.ciolek.com/WWWVL-InfoQuality.html
• 26 Web Design Tips http://webdesign.about.com/library/weekly/aa071900a.htm
• Dan's Web Tips  http://www.dantobias.com/webtips/
• LittleThings Make a Difference http://projects.edtech.sandi.net/staffdev/tpss99/finepoints/inde x.htm

Evaluating Web Sites

• From Now On listof web evaluation sites  http://www.fno.org/webdesign.html
• Web Rubrics from CyberBee  http://www.cyberbee.com/guides.html
• Rubric Construction Sethttp://www.landmark-project.com/classweb/rubrics/
• Links to MANY web evaluation tools  http://www.vuw.ac.nz/~agsmith/evaln/evaln.htm
• Even more web evaluation links  http://school.discovery.com/schrockguide/eval.html
• Links to online evaluation (sites, courses, etc.)  http://www.csudh.edu/soe/tbe518/evalonline.htm
• WWW Information Quality Library  http://www.ciolek.com/WWWVL-InfoQuality.html

Web Accessibility Sites

• Section 508 Checklist (Accessiblity Law) http://www.webaim.org/standards/508/checklist
• Web Accessibility Hints  http://www.ataccess.org/rresources/webaccess.html
• Creating Accessible Websites (for the Disabled) http://www.itpolicy.gsa.gov/cita/wpa.htm
• Web Accessibility Guidelines/Techniques http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
• IBM's Guidelines for Web Accessibility  http://www-3.ibm.com/able/accessweb.html
• Resources for Accessible Web Design http://library.uwsp.edu/aschmetz/Accessible/pub_resources.htm