[an error occurred while processing this directive]
Go to Bottom Nav - December 15, 2017 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Exercise Goals

Exercise five introduces images to your web pages. Here are some goals for the exercise.

  • Learn how to obtain and/or make web images.
  • Learn the strengths and weaknesses of .jpeg, .gif, and .png image file types.
  • Learn how to use the img tag to place an image on your web page.
  • Learn the reasons for using the height, width, and alt attributes.

In short, create a web page and place an image on it using the image tag. Link to and from your index.html or "home" page. Upload the HTML and image files, reproof and validate the pages. Fill out the exercise feedback form and you are done.

Youtube demo of exercise five: http://youtu.be/1-v43yHzUfs

Remember to take Quiz 5 and contribute to the topic related discussions on Blackboard Learn+ as well.

Details

  1. Create another HTML page. Name the file as you wish and save it with your other HTML files on your hard drive. Use the HTML5 skeleton with validator buttons below, or write your own.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>


<p>
<!-- validator code using text links -->
<a href="http://validator.w3.org/check?uri=referer">Validate HTML</a>
&nbsp;|&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a>
<!-- end validator code using text links -->
</p>
</body>
</html>


  1. Obtain or make (depending on your skills) an image you would like to place on your page. There are plenty of web sites that offer free images; please use those rather than stealing an image. Here are some ideas for finding free images and a couple of sites that will make free custom images. Make sure the image file type is either .jpg, .gif, or .png.

    You may have more than one image for this page. However, your total aggregate file size for all images on the page must be less than 80K. This will give me a download time of not more than 30 seconds for your page using my slow connection. More than that, I might not stick around.
  2. Using a relative path and the image tag, place the image on your page. Be sure to use all the required (by your instructor) image tag attributes: src, alt, height, and width.
  3. Write a paragraph describing how/where you obtained your image and add it to your page. If you found a particularly fun free image site, include a link to it and a brief description.
  4. Add a link on your page back to your "home" or index.html page.
  5. Add a link to this exercise from your index.html page.
  6. Upload the files, both HTML and image, up to the server. Your image files must be uploaded as "raw data" rather than as text. Most (s)ftp clients will have an "automatic" checkbox to choose for uploading; it will usually upload the images correctly. Keep the same relative locations between the files so your links still work.
  7. Retest all your pages; make sure the images view correctly and that your links work correctly.
  8. Validate with no errors your new page, make sure your index.html page still validates.
  9. Fill out the exercise feedback form and you are done.

Conclusion

Images can add a wonderful touch to your pages. They can set the visual tone of a site; from button down corporate to garage band grunge.

As with most things, moderation is the key to images. The challenge is to maximize the beauty of your artistic vision while keeping your image file sizes to a minimum. This keeps your viewer fulfilled rather than drumming their fingers waiting for your page to download.

Exercise Grading

Exercise Five is worth fifteen points. Here is the grading breakdown.

15 Total Points
The exercise is complete and validates with no errors. The exercise feedback form is completed on time.
-3 Points
The exercise is complete but has some validation errors.
-3 Points
The exercise is uploaded but does not work (i.e. image doesn't show or link doesn't work).
-3 Points
The exercise feedback form is not filled out.
0 Total Points
Exercise not done at all.

[an error occurred while processing this directive]

Find Exercise Five Feedback Form on Blackboard

Exercise feedback forms not available between semesters.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu