Learning HTML: Dealing with Images

This is the third article in this Learning HTML series. In the first article, you learned how to handle basic code to display text in a browser. In lesson two, you learn how to handle tables. In this article we'll discuss images.

But first, I want to pass my words of encouragement on to an 11 yr. old fan of TechTrax, Cassandra, who is following along with this series, studying to learn HTML. Good luck to you, Cassandra; I look forward to someday viewing your first web site! <smile>

The basics of handling images are pretty simple. You just add a link to the image, wherever you want it to appear on the page. But there are a lot of options you can use. So let's get started and see how far we can get.

Setting Up Your Folders
To insert an image, the tag could be as simple as: <img src="myPic.gif">. Img obviously stands for Image. Src stands for Source. And although you can use a tag as simple as this, there are several other optional arguments you can add to the code and many reasons why you should make your tag a little more detailed.

For starters, if you're planning to create a web site with html pages and images, it's wise, and also common, to create a subdirectory called images where you'll store the images for your site. If you're site were to get rather large, you might want to section that simple layout even further. But we'll assume you're working on a personal site and it won't be very large for now.

Hit Windows + E to open Windows Explorer. Or you can right click your Start button and click Explore. Create yourself a new directory for these practice web pages. I like to keep all my web sites together, so I name them all WEB_[SiteName]. Replacing the SiteName with the name of the actual site. Create your own main level folder for your sample web site. Then click within that directory and create a new subdirectory called images.

Now you need to add a few images into the image directory so you'll have something to practice with. If you don't have any photos or graphics handy, you can easily go to any web site, find a few pictures you like, right click on them and save each to your computer. Be sure to save it to your web's new images directory.

Note! If you have trouble finding decent pictures to use, Greg is a pilot so we have a lot of average size, scenic photos at www.mousetrax.com/winds.html. Or you might prefer to grab some fun dog, cat or horse pictures. You'll can find those on our PetLovers page at www.mousetrax.com/pets.html. Feel free to gather up some sample photos from our pages.

Inserting an Image
With your sample photos safely tucked away in your images folder, we can get on with the coding. Open a blank code page in your editor. Be sure to save this page to the top level of the web directory you just created.

Add the image code below to your page. This will add a picture. Change the file name to match your image file. Remember to add your image subdirectory name; however, don't add the full path (such as c:\myWeb\images\myPic.jpg) because your html pages and images subdirectory will eventually end up on some web server under their local path name. So you want to keep the path relative and only include the path for any subdirectories within your web site. Your code will look something like this:

<img src="images/myPic01.jpg">

To view your work, open your browser. Click File/Open and find this html page. Select it and you should now see your picture in the viewer.

Did your picture show up?

Yes? Congrats! Here's mine:

Or did your view look more like this:

If your image didn't display properly, chances are that you have a typo in the code. It's clear by the attempted image that the browser knows you planned to display an image here. But if it didn't show up, it's time to proof your code to make sure it's correct. Check all those equal signs and quotations. It's easy to miss a quote! If that's not the problem, open Windows Explorer again and make sure the you used the correct image name and that the file is actually in your images directory.

The Alt Tag
Before we go any further, I want to cover one, very important option that you need to keep in mind.

Move your mouse over the picture you just displayed in your browser. Did anything happen? No? And when a person visits your web site with a screen reader, that's exactly what they hear—nothing! If you were blind and surfing the web with a screen reader, when you'd hit this page, your reader would just say something like: image. But it wouldn't provide any further information about the image. Wouldn't you be curious to know what image is displayed on the page?

There's an optional argument available to the image tag, called the Alt Tag, that allows you to add a text description to the picture. You should always use the Alt Tag. It can provide a lot of information to web surfers who, for whatever reason, don't have the ability to view images in their browser. And with today's technology getting better and better, there are more and more blind users taking to the Internet every day.

Back in the days when the World Wide Web was in it's infancy, bandwidth was low. Most of the first browsers didn't have the capability to view graphics. Later, new browsers began to hit the market that could display graphics. However, even if you had a browser that could display an image, most users still didn't have enough speed to download an image file without a 10 minute wait. So the Alt Tag was popular.

You could turn off your browser's image viewing capability so you could save your valuable bandwidth for downloading the text from the web page. If an image was on the page, it wouldn't automatically be downloaded. Instead, you'd see the Alt Tag information displayed telling you, in text, information about the image. That is, if the web developer took the time to add that information to the Alt Tag. But in those days, it was a standard practice to do so.

You could then read that description and decide whether you wanted to view the picture. If you did want to download it for viewing, you would right click the image and choose Show Picture. Then you'd go make a sandwich while the picture was downloading.

Most browsers still have the capability to not download images. If you click Internet Options/Advanced in Internet Explorer, you'll see these Picture options. And if you click the question mark button [?] on the top of the dialog box (for Help) and click on the Show Picture option, you'll get an explanation of its purpose. See the image below for details.

I'd assume it's fairly rare that this option is used much anymore. Most folks probably don't even know it's there! Bandwidth is faster and browsers got better, so most surfers don't think much about not viewing all the graphics. However, there are still people in areas where bandwidth isn't that great. And since most commercial web sites contain tons of advertising graphics, I'm sure there are people who opt not to download them all automatically. And blind surfers appreciate sites that remember to provide Alt Tag details so they're not left out in the cold when it comes to seeing what's on a site.

Note! Using an Alt Tag is particularly important to label navigational images. Say you have an image that doesn't load or your user can't see. If there's no Alt information, the user will have no clue that the image is a tag that, when clicked, will help them go to some other location. If you add Alt Tag information such as: "Click to return to the previous page." or "Go Back", it provides important information. Also, adding tags to your site navigation buttons, such as "Click this button to go to our Site Map" can be the difference between a user with a screen reader exploring your site or going someplace else!

It's very simple to add Alt Tag information. You just add it within the image tag as I've done below:

<img src="images/myPic01.jpg" alt="Image: Picture of my dog Cassy getting some good Northwoods sniffies in Wisconsin.">

Modify your sample page to add some Alt Tag information to your picture. Just add alt= and type whatever description you want to provide between quotation marks. Now save your page and switch to your browser. Remember to hit F5 to refresh the view, thereby pulling up the revised code. Your picture won't appear any different. However, now move your mouse over the picture and see what happens!

If you entered the code properly, you should now see the description for the picture when you move your mouse over the image.

If you were unable to view the picture, you would either see the text displayed on the page or your screen reader would tell you what the text says. This would allow your mind's eye to get a feel for what information is being displayed on the page.

Resizing
You should set the width and height setting arguments in your image tag, so your picture size will be controlled. You'll need to have some type of photo program that will display the size information of your original image. Once you know it's size, you can change the size arguments, if you needed to modify the display.

Note! I'm well aware that many folks now use HTML editors that allow you to simply click Insert/Photo, so there's no need for you to be concerned with all these specific codes. But as I said in lesson one, using a WYSIWYG (what you see is what you get) editor that spares you from the code, means you'll have no idea how to read or use raw code. If that doesn't bother you, fine. But I prefer to teach the code. So I'm writing these articles assuming those who are reading it also prefer to know how the code works. Hence the details.

Once you know the size of your image, you can subtract an equal percentage from both the width and height to get a properly proportional change. My original picture above happens to be 351 x 236. Note that these measurements are in pixels. Pixels are tiny squares and are one of the measurements for which your screen size is calculated.

I want to reduce the picture size by 50%. So I'll subtract half of my original size. Then I'll add these adjusted measurements to my image tag, as shown below:

<img src="images/myPic01.jpg" width="175" height="118" alt="Image: Picture of my dog Cassy getting some good Northwoods sniffies in Wisconsin.">

As you can see in the image below, Cassy is a little smaller now.

Note! If your editor allows you to select the picture and drag it to resize it, be sure to hold down the Shift key so the resizing will be constrained. Thereby assuring the height and width are adjusted evenly. If you don't hold down the Shift key to constrain the picture, you could end up with something other than what you planned!

Alignment
There are several settings you can add to adjust the alignment of the image on your page. Images can be aligned vertically or horizontally. Below are several images showing how I'm changing the pictures alignment on the page by adjusting the alignment argument within the image tag.

• Bottom
  <img src="images/myPic04.jpg" width="115" height="78" align="bottom" alt="Cassy and Greg enjoying an afternoon in the Northwoods.">
  
  
  
  
• Middle
  <img src="images/myPic04.jpg" width="115" height="78" align="middle" alt="Cassy and Greg enjoying an afternoon in the Northwoods.">
  
  
  
  
• Top
  <img src="images/myPic04.jpg" width="115" height="78" align="top" alt="Cassy and Greg enjoying an afternoon in the Northwoods.">
  
  
  
  
• Default
  If you enter an image tag within a line of text and don't add any alignment code, the default location will be along the text baseline, at the left of the text.
  
  <img src="images/myPic04.jpg" width="115" height="78" alt="Cassy and Greg enjoying an afternoon in the Northwoods.">
  
  
  
  
• Left
  If you wanted the text to wrap along the left side, you could add the left alignment tag.
  
  <img src="images/myPic04.jpg" width="115" height="78" alt="Cassy and Greg enjoying an afternoon in the Northwoods." align="left">
  
  
  
  
• Right
  The right align tag, obviously, does the reverse.
  
  <img src="images/myPic04.jpg" width="115" height="78" alt="Cassy and Greg enjoying an afternoon in the Northwoods." align="right">
  
  

Special Displays
There are a few other cool things you can do with basic image codes. You can insert an image in a table; but more importantly, you can insert an image into a table cell background. This way you can easily add text over the picture. You can add an image to your page background to add a texture to your site. And you can add a hyperlink to an image so when the user clicks the picture, they're taken to another location.

I'll end this lesson by showing you how to create these three effects.

1. Cell Background
   Create the table code as you learned in lesson two. Add the image to the background argument within the cell (<td>) tag. If you have a photo editing program, you might want to lighten the photo and lower the contrast so the text will be easier to read against that background.
   
   <table width="35%" border="0" cellspacing="2" cellpadding="2" height="208">
       <tr>
           <td valign="top" background="images/myPic06.jpg">
               <p>
               <font face="Arial, Helvetica, sans-serif" size="4">
                   Cassy enjoying her<br>
                   first swimming lesson <br>
                   during our vacation <br>
                   in Wisconsin.
               </font>
               </p>
           </td>
       </tr>
   </table>
   
   
   
   
2. Page Background
   You can add an image to the background of your web page. This can give a nice feel to your page. However, a major mistake that inexperienced designers often do is to use an image that doesn't allow the text to be easily read. Use caution if you use a background page image.
   
   If you need a background image, you can create your own. Just create a small square JPG or GIF image. It will be tiled across the background to fill in the page. Or there are many on the web you can use. Just use your favorite search engine to search for "backgrounds" or "web page backgrounds." When you find one you like, right click it and save it to your hard drive. Then move it to your images directory and link it to the page, as shown below.
   
   <body background="images/SampleBackground_02.jpg">
   
          
   
   Although you only need to add the body background tag, the code below shows the full page tags, so you'll see where this tag belongs.
   
   <html>
   <head>
   <title>Untitled Document</title>
   </head>
   <body background="images/SampleBackground_01.jpg">
   
   <P>
        You would add the information for your page in this area.
   </p>
   

   </body>
   </html>
   
   Combination Sample: If you visited our many photo pages on www.MouseTrax.com/winds.html, you'll notice that I display our photos by using a two column table. I put the pictures in cells down the left column and add narration text in the right. I then add a background image to the page, but I set the background for the table cells to a light, solid color. This creates a nice effect. It adds a little feel to the page, such as the paw print background for Cassy's "Dog in the Woods" pictures. Yet the solid color in the table helps to ensure the text is easily readable.
   

3. Image Hyperlinks
   In lesson one, I showed you how to add text to a page and link it to another page by adding a hyperlink. You can also use an image as a hyperlink.
   
   To link an image to another web page or site, just wrap the image tag within a hyperlink tag.
   
   <a href="http://www.mousetrax.com" target="_blank">
         <img src="/images/Mtrax_by.jpg" width="150" height="61" border="0" alt="Click here to go to MouseTrax.com">
   </a>
   
   If you click the image below, you'll go to www.MouseTrax.com. And if you mouseover the image, you'll see the Alt Tag information that tells you this is a link. If you were using a screen reader, your reader would advise you of this fact.
   
   
   
   Notice that there is a border around the image. Linked images tend to default to be displayed with a border. I don't want that border, to I'll add a border="0" tag within my image tag.
   
   
   
   The border is now gone.
   
   Also note that I've added target="_blank" into the hyperlink tag above. This will cause the hyperlinked page to open inside a new browser window. This will help to insure that if surfers click a link while reading your site, they won't get lost on the web. The original browser will remain open to your site, helping your visitors easily return to their original location.

Well, that's it for this lesson. Have fun practicing and we'll see you next month!