HTML:Images

Foreword on Copyright

Before you begin experimenting with images, realise that the images you find on the Internet are not necessarily available for copying - just because they are public does not mean you can take them, copy them, and reuse them on your own sites - to do so infringes the copyright of the owner. There are many sites on the Internet that provide Copyright Free Images for public reuse. Visit Google or a similar search engine and search for Copyright Free Images or similar variations of the search phrase to find stuff you can use for free.

AND

you must reference the source of any images you use in any websites for assessment purposes. A hyperlink to the original image location is best shown underneath each image your websites that you have not created yourself.

Introduction

The use of images or pictures in web pages can be functional, in that they serve a purpose, like the distribution of technical designs or materials, or merely cosmetic, to improve the appearance of a web page by including artwork. Either way, the use of the graphics is highly important in any web page design.

The Image Tag

The IMAGE tag is used in a similar way to the hyperlink, but the fundamental difference is that where a hyperlink links to a file, and can be used to link to a image file, the image tag loads the image file into the document at the point where it is specified. This is more easily explained in the following example (remember to include the full web page standard structure in the creation of this example)

<H1>The use of image tags and hyperlinks</H1>
You can use a hyperlink to link to an image file like this <A href="http://uk.php.net/images/php.gif">IMAGE</A>
<BR>
<BR>
You can use the image tag to load the image into the page like this <IMG src="http://uk.php.net/images/php.gif">

If you click on the IMAGE link, the picture will load in a separate page, where by using the image tag, the image is loaded into the current page.

NOTE: The IMAGE tag is one of the rare few tags that do not have a closing tag.

It is important to note that web browsers only display particular types of images by default. Usually, you SHOULD use JPEG files (.jpg), PNG files (.png), or GIF files (.gif) in a web page. If you have other image types you would like to use, you can download free image conversion tools from Internet software pages.

ALT text

Another critical attribute that is required for ALL images in any of your web pages is the ALT attribute. The ALT attribute described what the image is, and is used in many applications. If your viewer cannot see images in their browser, for example, the value of the ALT attribute (also known as the ALT text) is shown in place of the image. Users with visual difficulties use technology when browsing the web that reads ALT text out loud so that the user knows what the image is.

<IMG src="http://uk.php.net/images/php.gif" alt="This is a picture of the PHP logo">

Try the example above and hover over the image with your mouse pointer – see how the ALT text is shown in what is called a tool tip.

TITLE attribute

If you are using a non-MS web browser, you'll have noticed that there was no "tool tip" in the above examples. The W3 specification for HTML insists that ALT text is available for all images. MS Browsers use this ALT text in the "tool tip", so even those who can see the image, can hover over it for it's description via the alt text.

However,

All other desktop browsers use the TITLE attribute to describe an image, not the ALT. The TITLE attribute text will be shown in Firefox and other browsers, not the ALT text.

However,

The title text is optional, the ALT text is compulsory. If in doubt, include them both so that all browsers will behave the same.

HTML Good Practice 9 – ALT text on all images

Every image must have ALT text set. Failure to do this will result in a significant reduction in grade for any assessed work.

Alignment

In order to change the position of an image, you must change the position of the container that holds the image, not the image itself.

Imagine that the image is in a frame. Once you've put a picture in a frame, you can position the frame anywhere on your wall - the image itself does not move within the frame, only the frame moves.

<P style="text-align:right">
   some text before
     <IMG src="http://uk.php.net/images/php.gif" alt="PHP Logo">
   some text after
</P>

The example above shows an image, being placed in a paragraph, and the "right" alignment of the paragraph using the style attribute.

Using an Image as a Link

It is possible to have an image as a link instead of text. The web community is split on whether or not this is good practice. Some argue that all hyperlinks should be blue, underlined text so that all users know instantly what is and is not a link. Others argue that as long as images are used appropriately and with supporting attributes, they are equally viable as links. Below is an example of how to use an image as a hyperlink.

<A href="http://uk.php.net">
  <IMG src="http://uk.php.net/images/php.gif" alt="PHP Logo">
</A>

The image is now click-able. The blue border shows that this is a hyper-linked image, and whilst this is one way that helps a user know what is and is not a hyperlink, it is not visually appealing in most cases. If you wish to remove this border, you can set the BORDER attribute with a value of zero.

<A href="http://www.scit.wlv.ac.uk" border=0>
  <IMG src="http://www.scit.wlv.ac.uk/php.gif" alt="PHP Logo">
</A>

Did you notice that this is the first time we have used a VALUE of attribute without putting speech marks/quotes around it? You need to put values of attributes in quotes every time unless the value is just a number, no text or symbols. In these cases, no speech marks are required.

HTML Good Practice 10 – Speech marks around attribute values

Always include speech marks around attribute values unless the value is a number only, with no symbols or text. Failure to do this correctly will likely reduce your grade.

Using A Background Image

To use an image as a background for your page, you can add a BACKGROUND attribute to the BODY and set the value of the attribute to any image you want. Images will be tiled unless other attributes are set.

<BODY background="http://www.scit.wlv.ac.uk/images/back2.jpg">

The URL you use for the value of the BACKGROUND attribute must be a GIF or JPG file, or it won't work.

TIME TO PRACTICE

Images are significant aspects of web pages. Use the techniques we have looked at in this chapter extensively before progressing. Add relevant images to the "long text web page" you have been using in your examples.

Ready to move on?

If you're happy with the content in this section, try 06 - Tables