HTML:Images
Copyright
You can include images (and other multimedia) in your website if they meet the following criteria:
Images you own
If you create your own images (digital photographs, scanned analogue photographs, or using a graphics package) you can include them in your website ONLY IF your images do not contain copyright images themselves (i.e. you cannot photograph something which is copyrighted and claim you own the copyright for the image)
Images you find on the WWW
If you find images on the WWW, just because they are freely viewable on the WWW, does not mean that they are free to use - you can view the images, but you cannot "reuse" them - you do not own them.
Visit Google or a similar search engine and search for Copyright Free Images or similar variations of the search phrase to find images you can use freely - don't forget to provide evidence to support your usage.
Exceptions
You can contact the owner of a copyrighted image (or oher multimedia) to seek their permission to use the image. The owner will want to know who you are, and what you intend to do with the image. In most cases (but not all) copyright owners are happy for students to reuse images for academic/educational purposes (i.e. for assessments)
Evidence
If you own your images, you should include a copyright statement declaring that you own the images on your site. You might like to think about a Copyleft statement instead?
If you obtain permission from a copyright owner to use their images, you should include a statement along the lines of "usage of image/s by express permission of {owner}" and be prepared to show the evidence (an email?) that proves you have permission, and A REFERENCE TO WHERE THE IMAGE WAS TAKEN FROM
In any website assessment you are expected to provide this evidence. Failure to do so will result in your images being treated as copyrighted images, used without permission, and will likely impact your grades for any assessment.
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)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> put your title here </TITLE>
</HEAD>
<BODY>
<H1>The use of image tags and hyperlinks</H1>
<P>You can use a hyperlink to link to an image file like this <A href="http://uk.php.net/images/php.gif">IMAGE</A></P>
<P>You can use the image tag to load the image into the page like this <IMG src="http://uk.php.net/images/php.gif" alt="PHP Logo"></P>
</BODY>
</HTML>
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.
Bandwidth Stealing
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 use CSS to remove it.
<A href="http://www.scit.wlv.ac.uk"> <IMG style="border:0px" src="http://www.scit.wlv.ac.uk/php.gif" alt="PHP Logo"> </A>
Using A Background Image
To use an image as a background for your page, you can add CSS to the STYLE attribute of the BODY element. Images will be tiled unless other attributes are set.
<BODY style="background:url(http://www.scit.wlv.ac.uk/images/back2.jpg)">
The URL you use must be a GIF/JPG/PNG 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 HTML:Tables
