Difference between revisions of "HTML:Images"
| (21 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
| + | [[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[HTML]] >> Images | ||
| + | |||
[[Category:HTML]] | [[Category:HTML]] | ||
=Copyright= | =Copyright= | ||
| Line 5: | Line 7: | ||
==Images you own== | ==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) | + | 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 [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. | ||
==Images you find on the WWW== | ==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 | + | 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. |
| − | + | [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== | ==Exceptions== | ||
| − | You can contact the owner of a copyrighted image (or | + | 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== | ==Evidence== | ||
| Line 22: | Line 26: | ||
'''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.''' | '''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= | ||
| Line 34: | Line 40: | ||
<BODY> | <BODY> | ||
<H1>The use of image tags and hyperlinks</H1> | <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:// | + | <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:// | + | <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> | </BODY> | ||
</HTML></nowiki> | </HTML></nowiki> | ||
| Line 160: | Line 166: | ||
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. | 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. | ||
| − | <nowiki><BODY style="background:url( | + | <nowiki><BODY style="background-image:url(mybackground.jpg)"></nowiki> |
The URL you use must be a GIF/JPG/PNG file, or it won't work. | 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: | ||
| + | |||
| + | <nowiki> | ||
| + | background-image:url(mybackground.jpg); | ||
| + | background-repeat: no-repeat</nowiki> | ||
| + | |||
*'''TIME TO PRACTICE''' | *'''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?= | |
If you're happy with the content in this section, try [[HTML:Tables]] | If you're happy with the content in this section, try [[HTML:Tables]] | ||
| − | Related Pages<categorytree mode=pages>HTML</categorytree> | + | =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
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>
