CS 100 - Lab 6

CS 100 - Computer Literacy, Fall 2004

Lab 6

This lab assignment will have you create a simple HTML page that will contain images.

HTML Images

IMAGES: <img> - attributes: src, alt, border, height, width, hspace, vspace, align

The <img> tag allows a picture to be displayed on a web page. The src attribute is used to specify the file that contains an image. This file can be specified using its filename if the images is in the same directory as the html file using this tag, or the file can be specified using the URL of the image. Images should be in the GIF or JPG format. There may be other formats acceptable to some Web Browsers, but GIF and JPG are the most common. An example of using the <img> tag is as follows.

     <img src="picture.jpg">

<img> Attributes

ALT attribute - allows for text to be displayed in case the image is not loaded. This text should be descriptive of the image. For example:
```
    <img src="elephant.jpg" alt="Elephants in Kenya">
```
BORDER attribute - Places a border around the image. The value given specifies the width in pixels of the border.
```
     <img src="picture.jpg" border=10>
```
HEIGHT and WIDTH attributes - Allows the user to specify how big the image is to be displayed. The size is given in pixels. Normally either height or width is used, but not both. When both height and width are used, the picture may get distorted if the proper height to width ratio is not maintained.
```
     <img src="picture.jpg" width=200>
     <img src="picture.jpg" height=250>
```
HSPACE and VSPACE attributes - Allows the user to specify how much space should be placed around the image in either the horizontal or vertical direction. The space is given in pixels.
```
     <img src="picture.jpg" hspace=15>
     <img src="picture.jpg" vspace=5>
```
ALIGN attribute - This attribute is used when you want to have the image placed in the middle of some text. The various values of this attribute specify where the image should appear in relation to the text. The text is normally aligned with the bottom of the image. You can use the values of top and center to align the test at the top of the image or at the center of the image.
```
     <img src="picture.jpg" align="center">
```

To find the URL's of an image in a web page

When viewing a Web Page in Internet Explorer, you can use the menu option "Privacy Report" under the "View" drop-down menu to check out the HTML source files for the current document. THis will give the URLs of all files used for the web page including the URL of any image.

You can make a copy of an image by clicking the RIGHT mouse button when over an image and selecting the "Save Image as..." option from the pop-up menu. This will save the image to the current machine that you are using. You may have to transfer the image (via FTP or some other method) to get it to your UNIX account.

Lab Assignment 6

Due: Friday 10/8/2004 by 8:00 am

Select an image from the CS 100 Image Page.

Create a web page to display the following information:

A title of CS 100 Lab 6
A heading of CS 100 Lab 6
An unordered list containing your name, Net-ID, Time of Lab
A link to the CS 100 Image Page.
The image that you selected from the CS 100 Image Page
The image resized to display nicely on the web page.
The image stretched or smooshed. Make it small enough to display nicely on the web page.
An image link using the image you selected to link to Brookfield Zoo's web page at http://www.brookfieldzoo.org

Your web page must have text near each image explaining how that image is being used to meet the requirements for this lab.

Use the UNIX turnin command to electronically hand-in your html file using the project name of lab6. To submit the file in <filename> for lab6, the turnin command is entered as:

     turnin -c troy -p lab6 <filename>