Class Number 14024
Tues., Thurs. 4:00-6:45
Jerome Richfield 319
Office: 803 Sierra Tower
Telephone: 677-0901
E-mail: scott.kleinman@csun.edu
The code to include an image is
<img src="images/myImage.gif" alt="My Image" />
The two attributes of the <img> element given here are src, which gives the image's source, and alt, which gives an alternative text description of the image for readers who are unable to see the image. The <img> element has a number of other elements which relate to its placement, size, and appearance:
<img src="images/myImage.gif" alt="My Image" width="100" height="100" align="center" border= "1"/>
This will make the image 100 pixels high by 100 pixels wide and place the image in the centre of the screen. It will also give it a 1 pixel border.
Finding your Image's Source
If you are using an image from another web site, you must find its source. The easiest way is to use Firefox as your browser. Right-click on the image and select "Copy Image Location". Then go to your HTML code and paste the result into the src attribute of your <img> element. If you use another browser, it's a bit trickier. If you right-click, you may get an option such as "Save Image As...". Selecting this will get you the name of the image file, but you will then have to reconstruct the path.
There are two methods of including an image in a web page. One method is to make a copy of the image file, place it on your server, and then use the src attribute to indicate the path to it. The second method is to place the path to the image file on another server in the src attribute. Each has its advantages and disadvantages.
Notes on Method 1
Notes on Method 2
Making Thumbnails
By using the width and height attributes of the <img> element, you can make the image appear smaller than its original form so that it fits in a small area of your page. This may result in a loss of detail. However, you can place the <img> element inside an <a> element, which will make it into a link to a full-sized version of the image. In this case, your smaller image is called a thumbnail.
To make a thumbnail, simply use your src path in the href attribute. For instance, if myImage.gif is a 200 x 200 pixel image, the code for your thumbnail might be:
<a href="images/myImage.gif">
<img src="images/myImage.gif" alt="My Image" width="100" height="100" align="center" border="1"/>
</a>
Readers who click on the image will see an empty web page with a full-sized image. If you wanted to, you could link to another web page containing the image, instead of directly to the image file. In this case, you could provide other information on the page.