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.

Matthew's Rule 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

It is possible to use a number of alignment tags to manipulate the position of the image, in a similar way to text. If you use ALIGN="right" attribute of the IMAGE tag, as shown below, the image will align with the right-hand side of the page. Using "center" will center the image, if there is nothing else on the same line. In our example above, the text that starts "You can use the image..." is on the same line as the image, and stretches past the centre position, therefore the image will get as close to the centre as possible, but will not display on top of the text. Experiment with this, and add text before and after it to see what happens.

 <IMG src="http://uk.php.net/images/php.gif" ALIGN="right">

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"> 
 </A>
 

The image is now clickable. The blue border shows that this is a hyperlinked 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">
 <IMG src="http://www.scit.wlv.ac.uk/php.gif" BORDER=0>
 </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.

[Matthew's Rule] 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