Resources

//CSS: Applying styles using IDs
//CSS: Positioning

Hidden Agenda

• Get more comfortable with using multiple image elements together
• Use ids to manipulate specific HTML elements
• Position things around the screen
• Hint: don't spend too long on this one! Save your best skills for the hand-in assignment.

Saving your work

Use Save as... to save this empty template as "1.06S-ConstructAPicture-LastName.html" in your Computer Programming 12 directory.

The assignment

Create a scene by positioning the following Khan Academy images in an HTML page using CSS. Use IDs and CSS Positioning to arrange things in an interesting way.

All images begin with: https://www.kasandbox.org/programming-images/cute/

For example: <img src="https://www.kasandbox.org/programming-images/cute/BrownBlock.png">

BrownBlock.png

ChestClosed.png

ChestLid.png

ChestOpen.png

DirtBlock.png

DoorTallClosed.png

DoorTallOpen.png

GrassBlock.png

PlainBlock.png

RampEast.png

RampNorth.png

RampSouth.png

RampWest.png

Rock.png

RoofEast.png

RoofNorth.png

RoofNorthEast.png

RoofNorthWest.png

RoofSouth.png

RoofSouthEast.png

RoofSouthWest.png

RoofWest.png

Star.png

StoneBlock.png

StoneBlockTall.png

TreeShort.png

TreeTall.png

TreeUgly.png

WallBlock.png

WallBlockTall.png

WaterBlock.png

WindowTall.png

WoodBlock.png

Extend and expand

There are plenty of other images out there on the internet.

Link to them and add them to your palette of building blocks!

You can find other linkable images here