Assignment 5 — Working with Images

This assignment for this week describes how to work with images within your website, the best formats to use for different types of images, examples of using tools you can use to modify images, and how to create links using images.

To insert an image on your web page, you use the <img> element. Previous lessons described the basics of using the src attribute to identify the image:

<img src="somefile.jpg"/>

However, you can use some additional attributes to provide additional information about your image, including:

• alt - provides a description of the image in the case that the image cannot be displayed
• width - specifies the width of the image in pixels
• height - specifies the height of the image in pixels

For example, if you wanted to use all of these attributes, the <img> tag would be as follows:

<img src="somefile.jpg" height="200" width="400" alt="The college stadium during a rainstorm."/>

The <img> element is an inline element, so if you want to include it on its own line, you need to include it within a paragraph.

You can use a variety of different formats for an image, including gif, jpg, and png, Each format has its own strengths and weaknesses.

You can include a image within an <a> element so that the reader can click a picture to navigate to a new web page. For example, if you had a image of a cat and wanted it to open up the Wikipedia entry for cat you could construct the link like:

<p><a href="https://en.wikipedia.org/wiki/Cat"><img src="cat.jpg"/></a></p>

For more information, see Chapter 5 of the Head First HTML and CSS book.

HTML elements:

Working with Images

Gimp Demonstration

Tasks:

1. Read and complete the exercises from Chapter 5 of the Head First HTML and CSS book.
2. Watch the video for resizing graphics using Gimp (unless you have another graphics program that you would prefer to use).
3. Create a folder named Chapter 5.
4. In your Chapter 5 folder, create your customized versions of the following files:
   • index.html that embeds at least 5 thumbnail images
   • a thumbnail folder with at least 5 thumbnail images
   • an image folder with at least 5 images
   • an html page for each image that embeds the image
5. Ensure that all of your links work correctly and display the appropriate image file when clicked.
6. Upload the contents of your Chapter5 folder to your website.
7. Zip your Chapter5 folder and name the file yourName_chapter5.zip.
8. Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.

Your assignment should demonstrate:

• Creating a web page that includes at least five thumbnail images of pictures.
• Creating web pages for each thumbnail that shows a larger version of the image.
• Revising the content (text and images) in the html files to be your own content, instead of that provided by the book.
• Making each of the thumbmail images into a link that opens up the web page containing the larger image.
• Creating a folder that contains all of the thumbnail images.
• Creating a folder that contains all of the larger images.
• Creating a folder that contains all of the html files that show the larger images.
• Ensuring all <a> elements and <img> elements use relative paths to point to files or images.
• Uploading the project to your website.

By 10/23

Note: Project 1 is also due this week.

Example assignment:

Chapter 5 example