GRA2131C - Basic HTML - Part 2

ASSIGNMENT PARAMETERS:  You will be creating a very, very long blog post for this assignment.

1.) Follow the directions to create each new shape or object using Dreamweaver
2.) Create a screenshot of your Dreamweaver window (hold down Shift + Command + 3 on a Mac to create a screenshot) and post the screenshot image under the code you just pasted into your Assignment 02 blog post
3.) Create the next shape
5.) Create a new screenshot of the NEW HTML code you have created in Dreamweaver, go to your Assignment 02 post, edit the post by pasting in the new code under your existing code(s)
6.) Create a new screenshot of this new shape, post the screenshot under the new code, and UPDATE your blog post
7.) Rinse, repeat, etc., until all of the shapes have been created
8.) Post a screenshot of your work that shows both:

- each shape you've created 

- and the HTML code in the screenshot. 

If your screenshot does not show the HTML code, please copy and paste the code underneath each image of the shape you've created.

ASSIGNMENT - Create the following items:

canvas_assign_02A.html
- create a single line that runs from the upper l.h. corner of your canvas to the lower r.h. corner of your canvas. Make that line (the context.colorStyle) = 'rgb(0, 255, 0)' and the context.lineWidth = 5 pixels thick


canvas_assign_02B.html
- create a single line that runs in a downward angle from the uppermost l.h. corner of your canvas to the exact middle of the bottom edge of your canvas and then continues upward to the uppermost r.h. corner of your canvas. Make that line (the context.colorStyle) 'rgb(255, 255, 0)' and make the context.lineWidth = 10 pixels thick


canvas_assign_02C.html
- create a single angled 30 pixel wide line with the Hexadecimal color #6633cc with round end caps
  - that starts 50 pixels from the l.h. edge and is 50 pixels from the top edge of your canvas
  - ends 50 pixels from the r.h. edge of your canvas and is 50 pixels from the top edge
  - and has the bottom-most point (x1, y1) centered and 50 pixels above the bottom of your canvas


canvas_assign_02D.html
- create a single 5 pixel wide line colored 'rgb(255, 102, 51)' that forms a triangle starting at a point 75 pixels from the l.h. edge of your canvas and 50 pixels from the top edge of your canvas, then continues to a point 50 pixels above the bottom edge of your canvas and is perfectly centered horizontally, then continues to a point 75 pixels from the r.h. edge and 50 pixels from the top edge of your canvas, and ends at the starting point. Fill the triangle with the color 'rgb(255, 255, 50)'


canvas_assign_02E.html
- create a square that is 400 pixels wide that starts at a point 50 pixels from the l.h. edge and 50 pixels from the top edge. Create a 5 pixel border that is any HEXADECIMAL color blue you desire with a fill that is any HEXADECIMAL color orange you desire. Create a second square that is 400 pixels wide that ENDS at a point 50 pixels from the r.h. edge and 50 pixels from the bottom edge. Create a 10 pixel border that is any color green you desire and fill it with any color red you desire


canvas_assign_02F.html
- create a rectangle that is 600 pixels wide and 400 pixels high that starts at a point 50 pixels from the l.h. edge and 50 pixels from the top edge. Create a 10 pixel wide border that is any RGB color yellow that you wish. Create a gradient fill inside the rectangle that starts as the color #ff3300 and ends as the color #6600ff


canvas_assign_02G.html
- create a rectangle that is 600 pixels wide and 400 pixels high that starts at a point 100 pixels from the l.h. edge and 100 pixels from the top edge. Create a 10 pixel wide border that is any RGB color green that you wish. Create a gradient fill inside the rectangle that starts as the color #ff3300 and ends as the color #6600ff. Add any HEXADECIMAL color red as part of the gradient fill that is exactly in the middle of the #ff3300 color and the #6600ff color


canvas_assign_02H.html
- create a rectangle that covers the entire canvas
- create a linear gradient inside the rectangle with color stop 1 as hexadecimal color 0000CC and color stop 0 as RGB color (27, 161, 226)
- create a triangle that lays on top of the rectangle using the following var coordinates:
   - x is 100 pixels from the left hand edge of the canvas and y = 100
   - x1 is 100 pixels from the right hand edge of the canvas and y1 = y
   - x2 is perfectly centered across the width of the canvas and y2 is 100 pixels from the bottom of the canvas
   - calculate coordinates x3 and y3 on your own
   - fill with ffff00 and add a 1 pixel border stroke of ffff33



Post a screenshot of your work that shows both 

- each shape you've created 

- and the HTML code in the screenshot. 

If your screenshot does not show the HTML code, please copy and paste the code underneath each image of the shape you've created.