Images
Placing an Image on Your Web Page
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 attribute which can be use determine its placement, size, and appearance. For example:
<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.
Note: If you wish to make the image a link, nest it inside an <a> element. If you do this, some browsers will place an unattractive blue border around your image. To eliminate this border, set border="0" in your <img> element.
You should always include @alt in your <img> element for accessibility purposes. Readers who do not use visual browsers will not be able to see your image, so it is important to provide an alternative text description for the image. In some browsers, this description appears as a pop-up when you move the mouse cursor over the image. In the past, web designers have exploited this behaviour to create pop-up notes with extra, rather than alternative, information. The makers of Firefox point out that that is not the purpose of @alt and try to enforce its use for alternative text only. As a result, Firefox displays the alternative text only if the image cannot be displayed.
Image Source Paths
In the example above, the image is taken from a local source. That is, the src attribute contains a path to the image file on the same server as your web page. It is called a relative path. In the example, the image file is located inside a folder called "images", and the "images" folder is located inside the same folder as the web page file (index.html). You can also include a full web address (called the absolute path):
<img src="http://www.csun.edu/~my_account/images/myImage.gif" alt="My Image" width="100"
height="100" align="center" border="1"/>
If you can access images on your web page with the absolute path, it stands to reason that you can also access images on other people’s web pages this way. All you have to do is enter a URL on their server in place of the one on your server. This creates a decision for you. Do you put the image file on your server and point to it from your web page, or do you point to the source document on someone else’s server from your web page? Each method has advantages and disadvantages.
Say you find an image of the Beowulf manuscript on a web site called "Beowulf.com". You could copy the image file from that web site, upload the file to your server, and then point to it in your web page. An advantage of this method is that you don’t have to worry about the author of "Beowulf.com" moving or removing the image. If you linked directly to "Beowulf.com", and the path to the image location was moved there, the image would no longer display on your web page. On the other hand, copying images may in some cases be illegal. Before you can do this, you must make sure that the image is in the public domain.
Finding Your Image’s Source
Whichever approach you take, you must first find the path to the image file. One way to do this is to select View Source, View Source Code, or similar in your browser. This will allow you to see the web page’s HTML code. By looking at it, you should be able to locate the name of the image file. Let’s take an example, you see an image of the Beowulf manuscript on the web page at "http://www.beowulf.com/index.html". You view the source code and you see the following:
<img src="images/beowulfMS.jpg" />
Here you can see the local path to the image on the "Beowulf.com server". So you should be able to load the image directly into your browser by adding the protocol and domain at the beginning:
http://www.beowulf.com/images/beowulfMS.jpg
If this works, you now have the absolute path to the image file, and you can use it in your own web page:
<img src="http://www.beowulf.com/images/beowulfMS.jpg" alt="My Image" width="100" height="100"
align="center" border= "1"/>
Searching for a the image path in a web site’s source code can be a bit time consuming, especially if the file name is not intuitive. One way around this to right-click (Macintosh control-click) on the image. You will see an option like "Save Image As…". Click on that, and your browser will try to save the image according to the filename in the source code. Now that you know the file name, it will be a lot easier to find the path to it in the web page’s source code. If you are planning to point to the original file on someone else’s server, click cancel.
Some browsers make it even easier to find an image’s source path. In Firefox, when you right-click you have an option to "Copy Image Location". This puts the complete URL into your clipboard, and you can just paste it into your own code. Internet Explorer does not have this function.
Alternatively, if you want to copy the file and upload it to your server, go ahead and save the file after selecting "Save Image As…". You will need to upload it to your server before you point to it in your web page.
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.