Difference between revisions of "HTML:Images"

From mi-linux
Jump to navigationJump to search
m (Reverted edits by In6480 (Talk); changed back to last version by 0604502)
 
(24 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
==Foreword on Copyright==
+
[[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[HTML]] >> Images
  
−
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 [http://www.google.co.uk 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.
+
[[Category:HTML]]
 +
=Copyright=
  
−
''AND''
+
You can include images (and other multimedia) in your website if they meet the following criteria:
  
−
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.
+
==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).
  
−
==Introduction==
+
The [https://mi-linux.wlv.ac.uk/wiki/index.php/HTML:Multimedia Multimedia page ] provides information on graphics packages, file formats and how to prepare images (optimise and compress them) for the web.
  
−
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.
+
==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, as you do not own them. They are copyrighted, i.e. you do not have the rights to copy. However, there are web sites that contain copyright free images. They can be found on search engines such as Google.
  
−
==The Image Tag==
+
[http://www.freefoto.com/ FreeFoto.com], recommended by Cara Hughes (0615410), is the "largest collection of free photographs." The photographs can be used "use off-line in school projects, church services, cards, leaflets, etc." They are copyright free. I like the images because they have a high resolution and good quality. You can use them on your websites but you must provide the URL.
 +
 
 +
==Exceptions==
 +
You can contact the owner of a copyrighted image (or other 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==
 +
[[Image:Copyleft.png|thumb|right|100px|The copyleft logo]]
 +
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 [http://en.wikipedia.org/wiki/Copyleft 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.'''
 +
 
 +
 
 +
 
 +
=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)
 
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)
  
−
  <nowiki><H1>The use of image tags and hyperlinks</H1>
+
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
−
You can use a hyperlink to link to an image file like this <A href="http://uk.php.net/images/php.gif">IMAGE</A>
+
<HTML>
−
<BR>
+
  <HEAD>
−
<BR>
+
      <TITLE> put your title here </TITLE>
−
You can use the image tag to load the image into the page like this <IMG src="http://uk.php.net/images/php.gif">
+
  </HEAD>
−
  </nowiki>
+
  <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://mi-linux.wlv.ac.uk/logos/php.gif">IMAGE</A></P>
 +
    <P>You can use the image tag to load the image into the page like this <IMG src="http://mi-linux.wlv.ac.uk/logos/php.gif" alt="PHP Logo"></P>
 +
  </BODY>
 +
  </HTML></nowiki>
  
 
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.
 
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.
Line 28: Line 51:
 
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.
 
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==
+
=Bandwidth Stealing=
 +
 
 +
A common error amongst new web developers is to link to images stored on other servers and in other websites - not their own.  Look again at the code for our example above - see how the reference for the image is located on scit.wlv.ac.uk?
 +
 
 +
<nowiki><IMG src="http://www.scit.wlv.ac.uk/php.gif" alt="PHP Logo"></nowiki>
 +
 
 +
This example shows that we are including an image on our website that is stored somewhere else (on scit.wlv.ac.uk) - doing so, '''STEALS BANDWIDTH''' from scit.wlv.ac.uk.
  
−
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.
+
MOST website owners "host" their websites with a "website hosting provider" and pay for the amount of bandwidth they want to use - for example, £4 per month allows for 1 gigabyte of downloads with provider {X}.  When someone includes images in their sites that are hosted on someone else's server, they steal this bandwidth that has been paid for by the other site owner.
  
−
  <nowiki><IMG src="http://uk.php.net/images/php.gif" alt="This is a picture of the PHP logo"></nowiki>
+
THIS IS VERY BAD PRACTICE.
 +
 
 +
ALL images must be hosted within your own directories.  If you use images belonging to others (see Copyright above) you must save a copy of them into your own directories.
 +
 
 +
===[[HTML Good Practice]] 13 - Don't steal bandwidth===
 +
 
 +
=Naming Conventions=
 +
There are a number of issues regarding file and directory naming that you need to be aware of.  This is ABSOLUTELY CRITICAL when it comes to distributing, publishing or HANDING IN YOUR ASSESSMENTS.
 +
 
 +
==Relative and Absolute locations==
 +
It is possible to give an absolute address to an embedded image.  Look at our example:
 +
  <nowiki><IMG src="http://www.scit.wlv.ac.uk/php.gif" alt="PHP Logo"></nowiki>
 +
 
 +
Because we're stealing the bandwidth of scit.wlv.ac.uk, we give an absolute address to the image's location:
 +
<nowiki>http://www.scit.wlv.ac.uk/php.gif</nowiki>
 +
 
 +
When we transfer a copy to our local directories, the image reference might look like this:
 +
 
 +
''Windows file system example''
 +
<nowiki><IMG src="c:\documents and settings\student\My Websites\Website 1\images\php.gif" alt="PHP Logo"></nowiki>
 +
''Linux file system example''
 +
<nowiki><IMG src="/home/student/website/website1/images/php.gif" alt="PHP Logo"></nowiki>
 +
 
 +
In both these cases, if we send an archive (a ZIP or TAR file?) containing all our website components to someone else, even though we might remember to send the images, the receiver of the archive cannot decompress your archive and see your website correctly.
 +
 
 +
===Why?===
 +
When the browser reaches the line with the instruction to display php.gif (in the example above) it looks for a C: drive first, then a "documents and settings" folder and so on - the person receiving your site likely doesn't have the folder structure that you specify on their machine, meaning that
 +
 
 +
'''ALTHOUGH THE SITE LOOKS PERFECT ON YOUR MACHINE, IT WILL NEVER WORK CORRECTLY ON ANY OTHER MACHINE'''
 +
 
 +
===So how do you fix this?===
 +
With '''RELATIVE''' paths and filenames.  The directory structure in your code needs to be RELATIVE to the location of the webpage.  This is much easier to demonstrate that to explain in text.
 +
 
 +
Let's take our example again:
 +
<nowiki>http://www.scit.wlv.ac.uk/php.gif</nowiki>
 +
 
 +
Now let's take a local copy, and put it in this path ('''ABSOLUTE PATH'''):
 +
<nowiki><IMG src="c:\documents and settings\student\My Websites\Website 1\images\php.gif" alt="PHP Logo"></nowiki>
 +
 
 +
Now let's pretend we'll create a folder called "Website 1" and a page in that folder called "gallery.html" - in order to include the image, instead of using the ABSOLUTE path, we'll use the RELATIVE path to the image:
 +
<nowiki><IMG src="images\php.gif" alt="PHP Logo"></nowiki>
 +
 
 +
If we now move the site, ZIP up the site, transmit the site, publish it, as long as we keep a folder called "images" in our "website 1" folder, and keep our images in the "images" folder, we can do anything with the site without causing problems.
 +
 
 +
'''THIS IS AN IMPORT CONCEPT FOR YOU TO UNDERSTAND - please ask for help in understanding this if you are not sure.  If you don't understand this topic, it is likely you'll submit sites that are unusable by anyone other than you, and this will drastically affect any grade you might be awarded for your work.'''
 +
 
 +
==Case==
 +
Another important topic regarding image files is the case of the filename and the operating system you use.
 +
 
 +
In Windows Operating Systems, logo.jpg, logo.JPG and LOGO.JPG are treated as if they are all the same file - Windows is not sensitive to case.
 +
 
 +
ALL OTHER OPERATING SYSTEMS are sensitive to case, so logo.jpg, logo.JPG and LOGO.JPG will be treated as three different files.  Make sure the filename AND CASE of your images is exactly the same in your HTML as they are on your disk.
 +
 
 +
=ALT attribute=
 +
A 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 partially sighted users, or using a text-only browser, or with images turned off, 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.
 +
 
 +
<nowiki><IMG src="images/php.gif" alt="This is a picture of the PHP logo"></nowiki>
  
 
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.
 
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===
+
==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.
 
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.
+
==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.
  
−
  <nowiki>
+
  <nowiki><P style="text-align:right">
−
<IMG src="http://uk.php.net/images/php.gif" ALIGN="right">
+
  some text before
−
</nowiki>
+
    <IMG src="images/php.gif" alt="PHP Logo">
 +
  some text after
 +
</P></nowiki>
  
 +
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==
 
==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.  
 
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.  
  
−
  <nowiki>
+
  <nowiki><A href="http://uk.php.net">
−
<A href="http://uk.php.net">  
+
  <IMG src="images/php.gif" alt="PHP Logo">
−
<IMG src="http://uk.php.net/images/php.gif">  
+
</A></nowiki>
−
</A>
 
−
</nowiki>
 
  
−
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.  
+
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.  
  
−
  <nowiki>
+
  <nowiki><A href="http://www.scit.wlv.ac.uk">
−
<A href="http://www.scit.wlv.ac.uk">
+
  <IMG style="border:0px" src="images/php.gif" alt="PHP Logo">
−
<IMG src="http://www.scit.wlv.ac.uk/php.gif" BORDER=0>
+
</A></nowiki>
−
</A>
 
−
</nowiki>
 
  
−
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.
+
==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.
  
−
===[Matthew's Rule] 10 – Speech marks around attribute values===
+
<nowiki><BODY style="background-image:url(mybackground.jpg)"></nowiki>
  
−
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.
+
The URL you use must be a GIF/JPG/PNG file, or it won't work.  
  
−
==Using A Background Image==
+
If you don't want the image to repeat, try:
  
−
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.
+
  <nowiki>
−
 
+
background-image:url(mybackground.jpg);
−
  <nowiki><BODY background="http://www.scit.wlv.ac.uk/images/back2.jpg"></nowiki>
+
background-repeat: no-repeat</nowiki>
  
−
The URL you use for the value of the BACKGROUND attribute must be a GIF or JPG file, or it won't work.
 
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
*'''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.
  
−
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?=
  
−
==Ready to move on?==
+
If you're happy with the content in this section, try [[HTML:Tables]]
  
−
If you're happy with the content in this section, try [[06 - Tables]]
+
=Related Pages=
 +
<categorytree mode=pages>HTML</categorytree>

Latest revision as of 15:00, 12 July 2011

Main Page >> Website fundamentals >> Workbook >> 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).

The Multimedia page provides information on graphics packages, file formats and how to prepare images (optimise and compress them) for the web.

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, as you do not own them. They are copyrighted, i.e. you do not have the rights to copy. However, there are web sites that contain copyright free images. They can be found on search engines such as Google.

FreeFoto.com, recommended by Cara Hughes (0615410), is the "largest collection of free photographs." The photographs can be used "use off-line in school projects, church services, cards, leaflets, etc." They are copyright free. I like the images because they have a high resolution and good quality. You can use them on your websites but you must provide the URL.

Exceptions

You can contact the owner of a copyrighted image (or other 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

Error creating thumbnail: File missing
The copyleft logo

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.


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://mi-linux.wlv.ac.uk/logos/php.gif">IMAGE</A></P>
     <P>You can use the image tag to load the image into the page like this <IMG src="http://mi-linux.wlv.ac.uk/logos/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.

Bandwidth Stealing

A common error amongst new web developers is to link to images stored on other servers and in other websites - not their own. Look again at the code for our example above - see how the reference for the image is located on scit.wlv.ac.uk? 

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

This example shows that we are including an image on our website that is stored somewhere else (on scit.wlv.ac.uk) - doing so, STEALS BANDWIDTH from scit.wlv.ac.uk.

MOST website owners "host" their websites with a "website hosting provider" and pay for the amount of bandwidth they want to use - for example, £4 per month allows for 1 gigabyte of downloads with provider {X}. When someone includes images in their sites that are hosted on someone else's server, they steal this bandwidth that has been paid for by the other site owner.

THIS IS VERY BAD PRACTICE.

ALL images must be hosted within your own directories. If you use images belonging to others (see Copyright above) you must save a copy of them into your own directories.

HTML Good Practice 13 - Don't steal bandwidth

Naming Conventions

There are a number of issues regarding file and directory naming that you need to be aware of. This is ABSOLUTELY CRITICAL when it comes to distributing, publishing or HANDING IN YOUR ASSESSMENTS.

Relative and Absolute locations

It is possible to give an absolute address to an embedded image. Look at our example: 

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

Because we're stealing the bandwidth of scit.wlv.ac.uk, we give an absolute address to the image's location: 

http://www.scit.wlv.ac.uk/php.gif

When we transfer a copy to our local directories, the image reference might look like this:

Windows file system example 

<IMG src="c:\documents and settings\student\My Websites\Website 1\images\php.gif" alt="PHP Logo">

Linux file system example 

<IMG src="/home/student/website/website1/images/php.gif" alt="PHP Logo">

In both these cases, if we send an archive (a ZIP or TAR file?) containing all our website components to someone else, even though we might remember to send the images, the receiver of the archive cannot decompress your archive and see your website correctly.

Why?

When the browser reaches the line with the instruction to display php.gif (in the example above) it looks for a C: drive first, then a "documents and settings" folder and so on - the person receiving your site likely doesn't have the folder structure that you specify on their machine, meaning that

ALTHOUGH THE SITE LOOKS PERFECT ON YOUR MACHINE, IT WILL NEVER WORK CORRECTLY ON ANY OTHER MACHINE

So how do you fix this?

With RELATIVE paths and filenames. The directory structure in your code needs to be RELATIVE to the location of the webpage. This is much easier to demonstrate that to explain in text.

Let's take our example again: 

http://www.scit.wlv.ac.uk/php.gif

Now let's take a local copy, and put it in this path (ABSOLUTE PATH): 

<IMG src="c:\documents and settings\student\My Websites\Website 1\images\php.gif" alt="PHP Logo">

Now let's pretend we'll create a folder called "Website 1" and a page in that folder called "gallery.html" - in order to include the image, instead of using the ABSOLUTE path, we'll use the RELATIVE path to the image: 

<IMG src="images\php.gif" alt="PHP Logo">

If we now move the site, ZIP up the site, transmit the site, publish it, as long as we keep a folder called "images" in our "website 1" folder, and keep our images in the "images" folder, we can do anything with the site without causing problems.

THIS IS AN IMPORT CONCEPT FOR YOU TO UNDERSTAND - please ask for help in understanding this if you are not sure. If you don't understand this topic, it is likely you'll submit sites that are unusable by anyone other than you, and this will drastically affect any grade you might be awarded for your work.

Case

Another important topic regarding image files is the case of the filename and the operating system you use.

In Windows Operating Systems, logo.jpg, logo.JPG and LOGO.JPG are treated as if they are all the same file - Windows is not sensitive to case.

ALL OTHER OPERATING SYSTEMS are sensitive to case, so logo.jpg, logo.JPG and LOGO.JPG will be treated as three different files. Make sure the filename AND CASE of your images is exactly the same in your HTML as they are on your disk.

ALT attribute

A 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 partially sighted users, or using a text-only browser, or with images turned off, 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="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="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="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="images/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-image:url(mybackground.jpg)">

The URL you use must be a GIF/JPG/PNG file, or it won't work.

If you don't want the image to repeat, try: 

 background-image:url(mybackground.jpg);
 background-repeat: no-repeat


  • 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

Related Pages

<categorytree mode=pages>HTML</categorytree>

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=HTML:Images&oldid=6686"