Comp25: Images

Images are an integral part of a website. An image is a vague term that means many different things and serve many different purposes:

a photograph
a drawing or artwork created in a program like Paint or Photoshop
a "button" with words on it
a symbol or icon used for decoration or to help navigation

Images can also be very tricky. There are a lot of factors that can get in the way like the file format of the picture, its size, whether or not it is transparent, animation, alignment with text, etc. We'll start of easy and get more complicated as we need to.

Inserting an Image

Adding an image to our website is similar to the tags we have learned already. Let's add a logo to the top of our example webpage:

<html>
<head>
    <title>This is a great page!</title>
</head>
<body>
    <img src="logo.gif">
    <h1> Hello World! </h1>
    <p> This is my <b>first webpage</b>! Isn't it great? </p>
</body>
</html>

We've added one line to our example, an <img> tag. Much like <a>, the <img> tag has an attribute that is required called "src" (short for source). This is where we specify the image that should be loaded.

In this example we have a file on our website called "logo.gif".

Just like the <a> tag, we need to be careful about the filename. We must specify the correct file extension and remember that it is case sensitive. We must also surround the filename in quotes.

There is no ending tag for image, so we don't need to type </img>. We still call the image an element, though.

Using an Image as a Link

Anything surrounded by a <a> tags becomes a link. That applies to images just as much as text. Consider this example:

<a href="http://www.pacifictigers.com"><img src="tigers.gif"></a>

The image is between <a> tags and is therefore a link to the Pacific Tigers homepage.

The Alt Tag

It is often helpful to add a caption to a photo that appears when the visitor "mouses over" the image. This is especially helpful for people on mobile devices (which may not download images to save time) or people who are sight-impared (and use software to read the webpage to them).

Here's how that works:

<img src="tigers.gif" alt="Pacific Tigers Logo">

Simply enough, the "alt" attribute lets you specify the text which appears. Remember to surround it in quotes.

Image Border

You can quickly give the entire image a border by using an attribute called "border". It looks like this:

<img src="tigers.gif" border=5>

That "5" says to surround the image with 5 pixels on all sides. There are more advanced ways to do this using Styles.

Image Size

Changing the size of an image can be a difficult process unless you are a graphics designer and have the right tools. But there are some quick and easy ways to change the size of an image: the height and width attributes.

<img src="tigers.gif" height=25 width=50>

This takes the image and resizes it to exactly 25 pixels high and 50 pixels wide.

Finding Images and Using Them

If you find a image on your website you should first save the image to your website folder. When you see the image in your browser, right-click on it and choose "Save Picture As". Make sure it goes into the right folder and take special note of its filename and extension. If you do not see the "Save Picture As" option, getting that image will be tricky.

A great source to find pictures is Google Images. You can go here and enter search terms for the image you are looking for.

Sometimes an image saved from the web can be "stubborn" and not work properly in your page. Try opening the image in Paint or Photoshop, saving it over the original, and refreshing your browser window.

Please be aware of copyright issues when using images from another source.

Next... Colors