Example report structure

Other examples of the structure of a report are the report specifications for this course.

Example web pages — HTML & CSS

1. A basic starting structure for a web page.
2. Underground Airways Example
   • Text and html tags no style elements
   • Embedded styles
   • External styles
3. Cascade example
4. Multi-column page layouts
   1. Two column page layout with the page header in the right column
   2. Two column page layout with the page header across the top of both columns
   3. A web page that displays a page with sections containing from 1 to 4 columns
   4. The BlueRobot Layout Resevoir
           Examples for 2- and 3-column layouts. Examples show interesting style sheets.
5. Drop down sub-menu creation
   1. Creating one-level sub-menu with CSS simplistic styles here.
   2. Creating multi-level sub-menus with CSS here.
   3. The Line25 tutorial for the previous example is here
   4. Creating one-level sub-menu with Javascript is here.
6. An example form that posts to a script that displays all posted information in a table.

Javascript examples

1. Calculator web pages
   1. A simple calculator to do two number arithmetic
   2. A calculator found on the internet
2. Spaceling CSS & Javascript example
   1. spaceling_text.html — text only; not easy to read
   2. spaceling_html.html — Structural layer: text with added HTML tags; can read the page but it does not look presentable
   3. spaceling.html — the complete page; CSS makes the page look good
   4. spaceling.css — the stye sheet
   5. spaceling.js — the Javascript that makes the page dynamic
3. Example creating object literals is here.
4. Example creating Javascript classes
   • methods as true methods
5. Choice statements
   1. Using if statements here.
   2. Using switch statements here.
6. Loop statements
   1. Using for statements version 1, incorrect algorithm, and correct but bad design algorithm here.
   2. Using for statements version 2,correct but bad design algorithm, and properly designed algorithm here.
   3. Using while statements here.
   4. Using do-while statements here.
   5. Using for-in statements here.
7. Handling errors try, catch and throw here.
8. String comparison here.
9. Regular expressions here.
10. Check a phone number with a regular expression here.
11. Using the canvas element
    • Draw a line on a canvas here..
    • Rectangle moves across the canvas here.
    • An analog clock here.
12. Examples using the Domain Object Model
    • An example web page showing a list of the upper level nodes in its HTML element structure.
    • Get display stats: by clicking a button, the computer screen height, width and colour depth is displayed as a new paragraph at the end of the existing content
    • Examples showing how mouse events invoke Javascript functions tha change HTML elements
      • Example 1 Uses Javascript to create every element to be displayed
      • Example 1 Uses Javascript to create a DIV element and changes the innerHTML with a single string.
      • Example 1 Uses jQuery t o create the HTML elements to be displayed
    • Reading files has a browse button where you can select a file to display. A text file is displayed in red, showing how styles can be changed. An image file is displayed in a newly created img element. All other files replace the file-text display area with an error message.

jQuery examples

1. Drop down menu with jQuery control is here. Example from Chapter 7 of Javascript & jQuery: the Missing Manual
2. Slide-in dashboard is here.
3. Multilevel push menu is here.