Examples Given in Lectures

Unit B

For each one of these examples - be sure to "View Source" to see how they are written!

• ex01.html - Basic HTML structure, Heading
• ex02.html - Paragraph, Bold, Emphasis
• ex03.html - Preformatted Text
• ex04.html - Links, Special Characters
• ex05.html - Lists, unordered, ordered, definition
• ex06.html - Image tag
• ex07.html - Image tags and text
• ex08.html - Basic Table
• ex09.html - Table with boarder, width, height, spacings
• ex10.html - Table with a blank cell
• ex11.html - Table using colspan
• ex12.html - Table using 'th' tag - table header
• ex13.html - Table using rowspan
• ex14.html - Coloring cells in the table
• ex15.html - Table and aligning elements within the cells
• ex16.html - Image maps

Cascading Style Sheets Examples

• ex17.html - Embedded Style Sheet
• ex18.html - Linked Style Sheet | And here is the style-sheet it links to -> style.css
• ex19.html - Style Rules
• ex20.html - Margins Left and Right
• ex21.html - Margins Top and Bottom
• ex22.html - Font Style : Text emphasis and strong
• ex23.html - Font Family
• ex24.html - Div's
• ex25.html - Links in CSS : Hover, Active
• ex26.html - Not using style sheets

Unit C

Dynamic HTML and Javascript

• ex27.html - Button, and Pop-up Alert
• ex28.html - Button, Input Box, and Pop-up Alert

Unit D

Drawing in Processing

• Drawing Shapes by points (ByPoints)
• Drawing Shapes by dimensions (ByDimensions)
• Changing color of the stroke and fill (StrokeFill)

Event-Loop and Conditionals in Processing

• Setup/Draw Program - Nothing changes, why? (StaticSetupDraw)
• Dynamic Setup/Draw Program - ellipse follows mouse, leaves trails (DynamicSetupDraw)
• Refresh Setup/Draw Program - ellipse follows mouse, no trails (RefreshSetupDraw)
• Conditional Setup/Draw Program - ellipse only appears when mouse is pressed (ConditionalSetupDraw)

Complex Conditionals, Making a Button (Lab D2)

• GreaterThanConditional - testing for being on the right side of a line
• LessThanCondition - testing to be above a line
• LessThanAndGreaterThan - tesing two conditionals AND'd together
• WithinARectangle - looking at the limits of a rectangular area
• WithinARectangleDone - only appearing within a rectangular area
• WithinARectangleAndPressed - only appearing with the mouse button is pressed within a rectangular area
• ClearButtonDone - a completed clear button
  • ClearButtonStep0 - start with a paint brush
  • ClearButtonStep1 - draw a clear button
  • ClearButtonStep2 - see the limits of the clear button, what are the limits in the conditional?
  • ClearButtonStep3 - completed limits, how do you refresh the screen?
• ProjectSkeleton - a skeleton of a project for you to fill out
• TrackingMouseXY - the ProjectSkeleton with a prinln printing Mouse's X and Y coordinates
• Example Final Lab D Sketch - paint brush, drawable area, and a clear button

Unit E

Introduction to using Variables

• Anatomy - how to declare, and add values to variables
• ChangeValues - change the values of variables
• PrettierPrint - println with text messages
• ShortHandNames - declare and initialize variables together, better variable names
• Variables - doing math with variables

Using Variables to Switch States in Programs

• TwoShapes - using a variable to keep track of which shape is selected
  • TwoShapesStep1 - add two shape buttons
  • TwoShapesStep2 - add conditionals to react to clicking on those buttons; store a value in the whichShape variable
  • TwoShapesStep3 - add the conditional that draws the shape when the mouse is pressed
• ThreeShapes - same as two shapes above, but just added a third shape

Using Variables to Animate Things in Programs

• IntegersFloats - notice the difference between using an integer and a float in this animation
• WidthHeighArea - small demonstration of the use of the width and height variable

Unit F

Programmer Defined Functions

• House Program - final program from F3's Programmer Defined Functions Tutorial
• HouseMouse - house follows the mouse
• HouseLoop - using a while loop to draw a row of houses
• HouseAnimated - house is animated with time
• HouseAnimated2 - 2 houses are animated with time