IT581: Practicum in Web Development, Summer 2015 (Hybrid)

Lab07, Work with images

Due 11:59pm on July 18. No extention.

Save the practice page

The basic HTML for the assignment has already been saved in a practice page. Save a copy of the page. You may change the name to something shorter if you wish. However, Do NOT use spaces in the file name.

There is a screenshot of the finished product at the end of the page. Click on it to see an enlargement.

Determine the location of the images

here is a page with three images on it. If you right-click on an image and choose properties, you can find out the URL of the image as well as its width and height. You can save the images or use URLs(http://wyrd.hood.edu/~dong/it581/s2015/labs/ace.jpg and http://wyrd.hood.edu/~dong/it581/s2015/labs/grover.jpg and http://wyrd.hood.edu/~dong/it581/s2015/labs//bessie.jpg) for this execise.

Add images

  1. In the first section, the image should be inline in a paragraph. The height and width should be half or (one fourth as described in the lab_07_start.html) the original.
  2. In the second section, the image should be the only content in the middle paragraph. The height and width should be one-fourth the original. Center the image by centering the text for that paragraph only.
  3. In the third section, the image should be the first thing in the paragraph. It should be floated to the left. The dimensions should be the same as the original.
  4. Be sure to provide alt text for the images.

Add styles

  1. All the images should have a dashed thick red border.
  2. All the images should have a left and right margins of 15px, a top margin of 0, and a bottom margin of 5px.
  3. The h2 headings should have a solid thin grey border and silver background color
  4. The center paragraph in the second section (the one with the bunny image) should be styled with centered text alignment.

  5. The third image should be floated to the left.

Validate your page

When you are finished, be sure to validate your finished page. (W3C online validation service). Submit your work to the blackboard.

Comments to: dong@hood.edu
Last Modified: 16 July 2015. 17:14