Home‎ > ‎ICT Programming‎ > ‎Assignments Fall 2012‎ > ‎

HTML - images

posted Oct 2, 2012, 6:08 PM by Jon Hamlin   [ updated Apr 21, 2015, 10:14 AM ]

PLACING IMAGES ON YOUR WEB PAGE

 The basic format is quite simple. It is:

<IMG SRC="image.gif">

where "image.gif" represents the name of the image.

The chain at the top of this lesson:


was put there with this command:

         <IMG SRC="hrchain.gif">

  1. I called my image "hrchain" standing for Horizontal Rule Chain because it can be used to replace an <HR> or Horizontal Rule command. There are many places on the web where you can find line images to replace horizontal rules. Just take a little time and do a search for them in your favourite search engine. For example, try searching for "free horizontal line images".
  2. IMG stands for "image" (IMaGe). It means that an image will be placed here. The IMG tag is used to insert images within the text. These are often called "inline" images.
  3. SRC stands for "source" (SouRCe). It is an IMG attribute that tells the browser where the source for the image is, that is, the name of the image and where to find the image. Thus the SRC attribute specifies the name and location (URL) of the image file. It can be a relative or an absolute URL. The image should be located in the same directory as the web page it is to appear on. Since no directory is given, the source is assume to be the current directory - the directory of the web page.
  4. "hrchain.gif" is the complete name of this image and this name follows the same format as your HTML document names. That is, you have the name (in my case it is "hrchain"), a dot, and then the suffix ("gif").

IMAGE ATTRIBUTES

SIZE ATTRIBUTE

You can change the size of an image using the height and width tags. Keep in mind however that if the original size of the image is quite small and your increase the display size greatly, the image quality will appear quite grainy or blurry.

<img src="smiley.gif" alt="Smiley face" height="42" width="42">


ALT ATTRIBUTE

The alt="_____"  attribute is used to add a written description of the image. This useful for visually impaired people who have a computer program that can read these tags to help them understand what's on the screen. This is also the text that will be displayed if the image fails to load for whatever reason.

BORDER ATTRIBUTE

The BORDER attribute is used to place (or eliminate) a border around the image. The BORDER attribute commands the browser to draw a border of an indicated size around the image. A border is often used when the image is a link to show clearly that the entire area bounded by the border is a hyperlink. Otherwise, it is often used as BORDER="0" (quotes are optional) to turn it off - that is, no border.

This example has a border value of "2"

 

ALIGN ATTRIBUTE

 The ALIGN attribute is used in conjunction with placing text around the image. That is, ALIGN controls the alignment of the image with respect to text. To see these attributes in action, please SWITCH to NOTEPAD or to a similar text editor, and type in the following HTML document. I want you do some experimenting with it.
<HTML>
<HEAD>
<TITLE>HALL RENTAL</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4>
Please call for rates<HR>
</BODY></HTML>

Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see:

See example below:

ABOUT OUR HALL

We are wheelchair accessible.

Please call for rates

USING AN IMAGE AS A LINK

 When you want to turn something into a link, whether it be an image or whether it be a word, phrase or sentence, you need the HREF attribute which basically says "this web page is where we are linking to" when someone clicks on the image or words.

Here is an example of using an image for the link. Please SWITCH to NOTEPAD or to another text editor, and type in the following HTML document:

<HTML>
<HEAD>
<TITLE>IMAGE AS A LINK</TITLE>
</HEAD>
<BODY>
<H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40" HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head home</H4><HR>
</BODY></HTML>

After you have typed in the document, save it, and then SWITCH to your browser and load it. This is what you should see:

Click on the button to head home


THUMB-NAIL IMAGES


With thumb-nails, you offer a very small version of each image (each small image is called a thumb-nail). A visitor to your web page can then click on any thumb-nail to see the larger, original version. Thumb-nails allow for easier viewing of all the images, allow for smaller web pages and allow for faster loading of the pages. Using thumb-nails also allow the visitor to be in charge of what he or she wants to see.

USING ONLY ONE IMAGE FOR EACH OF YOUR THUMB-NAILS

This is often the preferred method as you are offering the same image twice with the thumb-nail image being displayed with the use of the WIDTH and HEIGHT attributes. This is a much faster and more efficient method of loading images because the larger image that will be displayed has already been loaded into the browser's cache and ready to be displayed at any time. A cache is where a browser keeps a memory of images and pages while they display them.

Here is the command line that uses only one image to load both the thumb-nail and the original full size image.

<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>

Here is this statement in action. Again you can use the same procedures as before to display the image in full size, save the image, and return BACK to this spot.

BACKGROUND IMAGES

This code will give you a single image background

<html>
<body background="bgimage.jpg">
<h1>Hello world!</h1>
</body>
</html>

This code will give you a repeating background pattern

<html>
<head>
<title>How to place a pattern as your website background</title>
</head>
<body style=”background-image:url(pattern.gif); background-repeat:repeat”>
</body>
</html>

Note: The best repeating backgrounds come from images that can be seamlessly tiled - you can find images like that here



Comments