Images 

Dr Andres Baravalle

Examples

• Aligning images
• Centering images
• Background image, centered
• Background image, pattern
• Using an image as border (basic)
• Using an image as a border (medium)
• Using an image as a border (advanced)
• Images and border
• Image and border shadow

Lab activities

Activity #1

Open the Moodle site for this module and complete the lab activities for "Images".

Activity #2

1. Create a new web page incorporating a few paragraphs of text related to Roy Lichtenstein. You can use wikipedia as a starting point, and do not forget to use the cite and blockquote tags appropriately
2. Set a title
3. Use a search engine of your choice to retrieve one or more image of Roy Lichtenstein's work - you will use that image in the next activities.

Activity #3

• Create a web page with the Roy Lichtenstein text and one images on each side of the text
• Set the margins (15px for top and bottom, 20px for left and right)

Activity #4

• Create a web page with the Roy Lichtenstein images on the top right corner
• Add the text below

Activity #5

• Create a page with the Roy Lichtenstein text in a separate div
• Center the div; the div shouldn't use more than 75% of the available space
• Use one of the images as a background fixed image in the top right corner

Activity #6

• Use Paint or any other basic photo editor to crop your picture into a square
• Create a circle border around the image; set a blurred border

This work

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License (what does it mean? you can copy/modify/redistribute this content).