CSC 105

Examples of Specific Techniques

 

The examples at the bottom of this list may incorporate techniques not yet covered in class. There may be bugs in these examples; please notify me if you find one. Many demonstrate a specific technique but are not much to look at otherwise. Examples worthy of special note as particularly good examples are marked with an asterisk.

Contents

  1. Basic HTML
  2. Style Sheets
  3. Page Formatting (see also Tables and Frames below)
  4. Tables and Area Maps
  5. Frames
  6. PHP
  7. Dynamic HTML
  8. Document Object Model
  9. JavaScript
  10. JavaScript Objects
  11. JavaScript Loops and Arrays
  12. Forms
  13. Multimedia
  14. Maintaining State (Cookies, etc.)
  15. JQuery

    Basic HTML

  1. A skeletal HTML document
  2. A more fleshed-out HTML document
  3. Some additions to the example above
  4. Special characters in HTML documents (accented letters, etc.)
  5. Your course home page (should be named index.html and placed directly in the public_html directory of your course account.

    6. Style Sheets

  6. A web page with style and without
  7. The course home page with no style or alternate style [CSS files: original, alternate. Best viewed in Firefox.]
  8. Simple navbar image replacement
  9. * More sample navbar styles using a simple unordered list: Unstyled, Horizontal, Menu-style, Green Line, Minitabs, Finger, Clouds
  10. Style for links
  11. Examples of image alignment: old style and using css
  12. An outline using style sheets
  13. Use of style sheets to add a background image
  14. Style-sheet positioning
  15. Z-index control via CSS
  16. * Effect combining background images and z-index
  17. Drop caps using :first-letter pseudoclass
  18. Photo cropping via CSS
  19. Another way to crop: Clip rectangle control via CSS
  20. Using free online web fonts

    21. Page Formatting & Layout

  21. * Sample page example, from initial div structure (view source to see), div structure with base layout but no content, to final fixed layout. Also see the unstyled content and final boxes visualization
  22. * Flex layout version of example above (resize browser window to demonstrate)
  23. * Some basic flex grid examples: One, Two, Three
  24. Formatting using various methods: CSS positioning with <div> blocks, tables (old), frames (old)
  25. CSS position demo
  26. A CSS layout example, with two variant layouts: One, Two
  27. Two columns
  28. Another CSS positioning example, showing a seamless look.
  29. * Floating blocks of text and graphics
  30. Centering tables (and other elements, too)
  31. * Layout ideas: One, Two, Three. If you use Dreamweaver, it has a lot more sample layout options to choose from as you create a new file.

    32. More HTML: Tables and Area Maps

  32. A simple table
  33. A table with cells spanning multiple rows and columns
  34. A hidden table gives two-column text
  35. Use of an area map
  36. * A split image arranged in a table
  37. Style sheets for tables

    38. Frames

  38. A basic set of frames
  39. The same set of frames, with some JavaScript improvements
  40. Frames/noframes example, with a navbar that appears only in noframes mode.
  41. * Seamless frames/noframes transitions.
  42. An example of an internal frame, with JavaScript improvements
  43. A Web "magazine", showing some uses of internal frames
  44. A remote control, using frames

    45. Dynamic HTML

  45. Dynamically changing style properties via the DOM: original page; dynamic behavior added.

    46. Note: the next seven items below use javascript to swap images and create a rollover effect. Although there are cases where this technique is required, more often a similar effect can be achieved more easily using the CSS :hover pseudoclass as seen in this example and these ones.

  46. Very basic rollovers (see note above)
  47. Improved rollovers using a function (see note above)
  48. * Swapping multiple images on a rollover
  49. Using rollovers to influence behavior
  50. A rollover with preloading of images
  51. Rollover navigation bar
  52. Navigation bar with dynamic motion effects
  53. Other dynamic mouseover effects
  54. Image fade rollover effect, using CSS
  55. * A slide show, using the interval timer
  56. A slide show with controls
  57. A slide show with more complex controls
  58. A double slide show using the interval timer
  59. Two ways to make page elements appear and disappear
  60. Drop-down menus: one, two, three, *four.
  61. Basic popups
  62. Thumbnail popups: basic, intermediate, advanced
  63. How to annoy the user...
  64. An interactive story, using layers with dynamic visibility changes,
  65. A dynamic color picker
  66. * Dynamic content display (using visibility controls)
  67. A dynamic index (built from scratch)
  68. Dynamic HTML to produce flying text and image
  69. Flying text that changes, built upon the previous example
  70. * Dragging elements with the mouse
  71. Sparkling letters
  72. Keyboard control
  73. * A complete JavaScript application: tic-tac-toe
  74. * Another JavaScript application: Conway's angel

    75. Document Object Model

  75. Automatic last update notice.
  76. Using the document object to change colors
  77. Window size (and other useful properties)
  78. Putting window size to use.
  79. Some other uses of the window object
  80. A script that displays object properties
  81. General cross-browser DOM
  82. General cross-browser DOM in an external script file
  83. Sampler of changes via cross-browser DOM
  84. Some uses of the navigator object
  85. Using the window.open method to create a popup window
  86. Dynamic HTML to produce moving text
  87. Dynamic HTML to change the text of a link. Using buttons (easiest); Partial cross-browser version (no Netscape 4.x); Fully cross-browser version

    88. JavaScript

  88. Basic JavaScript examples: #1, #2, #3.
  89. Some simple JavaScript commands
  90. Display the current time using Date() (older version here.)
  91. Use of the if...else construct
  92. A simple password scheme.
  93. A variant password scheme using an if.
  94. Use of the while loop construct to check for a password
  95. Use of the switch construct
  96. * More on variable content: if/else, multiple if/else, switch
  97. Calling an external JavaScript
  98. Logical operators in Javascript
  99. Review of some Javascript statement types
  100. Using functions to organize scripts and avoid unnecessary duplication
  101. * Example using functions of increasing flexibility: no arguments, one argument, two arguments.
  102. Functions that return values
  103. Another example of use of functions
  104. Example of events
  105. Timing events
  106. Example of variable scope
  107. Use of dialog boxes
  108. Using an external JavaScript file to include a header

    109. JavaScript Objects

  109. Examples of some objects
  110. Date object and arrays
  111. Functions and the Image object
  112. Using the Math object

    113. JavaScript Loops and Arrays

  113. A table of sines, using a simple loop
  114. A checkerboard, using a pair of nested loops
  115. Motion animation using loops
  116. Using a loop to add elements to a page (advanced DOM)
  117. An introduction to arrays
  118. Using a loop to go through arrays in the document object model
  119. Associative arrays and using arrays to store history
  120. Pieces on the checkerboard can be kept track of using a 2D array

    121. Forms

  121. A form, showing all the basic input types
  122. A form, demonstrating various form events
  123. Javascript and forms (external page from the University of Washington)
  124. Another form, whose results are interpreted using JavaScript, including an external script for form processing. (Note: .js files are best viewed in Firefox.)
  125. Using Smith's PHP remailer with method="post"
  126. JavaScript with menus and radio buttons
  127. A generic form processor: direct the results of any form to this address and you will see a table of the form results.
  128. Preventing accidental form submission
  129. Dynamic form checking (order form)
  130. * A quiz
  131. Dynamic content display: form and results

    132. Multimedia: Sound, Video, and Graphics

  132. * HTML5 Canvas examples: One, Two, Three, Four, Five
  133. Some canvas flags
  134. * Another canvas example, showing meters.
  135. Using canvas for a dynamic background.
  136. A visible timer bar
  137. * Sound effects, including audible roll on/off
  138. Page with background music. Use with caution!
  139. Simple media, with examples of different encodings
  140. Older multimedia examples (HTML 4 and prior)

    141. Maintaining State (Cookies, etc.)

  141. Quick test of basic cookie functionality in your browser
  142. A page that displays all currently active cookies in a table (for debugging)
  143. A cookie explorer that will let you set a cookie with any key/value pair. Uses an external JavaScript file cookie.js which you may want to copy. (Note: .js files are best viewed in Firefox.)
  144. Basic use of cookies: a page that stores information in a cookie, and another page that reads the information.
  145. Similar example (older): a page that stores preferences in a cookie, and another page that reads those preferences.
  146. * User preferences stored using cookies.
  147. A page that saves form values to cookies, a form to send it some information, and a page to display the cookie that was set.
  148. Cookies with set expirations
  149. Example of the use of hidden frames (a somewhat dated technique)
  150. Cookies to store data gathered over time
  151. A systematic approach to state maintenance: intro page, script file
  152. Using the variable-saving script package: start page

    153. JQuery

  153. Page formatting via JQuery.
  154. Form input widgets via JQuery.