Jan's Working with the Web

Step-by-Step: Replace Image

---

What you will learn:

to check download time to edit image SRC to add ALT text in code to add TITLE text in code

---

 Start with:  ,  hector9-Lastname-Firstname.htm, resource files

To reduce the loading time you should use images that are already the size you need. With a graphics program you can reduce the size of an image and save it as a new file. In your web project2 folder you will find alternate images that have already been resized.

Each image should have ALT text which tells what the image is or what its function is. You can include descriptions of the image if that is important.

Word Wrapping in Notepad: As you edit existing text or tags, the word wrapping will change. Notepad does not change the wrapping in the whole document like more advanced programs do. It can look quite odd when just a few characters wind up on a line by themselves in the middle of a paragraph! Your own document may not match the screen shots at all since the width of the window changes the wrapping.

To make Notepad refigure the wrapping, turn Word Wrap off and then back on again. (View > Word Wrap)

Save As

1. With Notepad showing hector9-Lastname-Firstname.htm, from the menu select  File  >  Save as .
   
2. Use the name   hector10-Lastname-Firstname.htm  to save the page to the web project2 folder on your Class disk.

---

Check Download Time

While File Explorer can tell you the total of the file sizes of what has to download to see a web page, it cannot tell you how long it will take. Most HTML editing software includes a feature to estimate the download time, but Notepad and other text editors do not. There are several online services, however, that can help with this.

1. If necessary, open a File Explorer window to show the files in the web project2 folder and then its subfolder HTML on your Class disk.
   
2. Add up the total of all the file sizes for the images and the HTML file
   Hint: Hold the CTRL key down and click on each of the image files in the folder HTML. The total will show at the bottom of the window.
      carla.jpg
      ricardo.jpg
      rosa.jpg
      pyramids.gif
      china.jpg
      Mail.gif
   
3. Add that total to the file size for hector9-Lastname-Firstname.htm.
   
4. Using the values below, calculate how long it will take to download all of the parts needed to see the page.

   Note: Download speeds are measured in Kilobits per second (Kbps) or Megabits per second (Mbps). File sizes are measured in bytes, Kilobytes (KB), or Megabytes (MB). A byte is 8 bits.

   • Option 1:  Do the math yourself for the speeds below:
     • 28.8 Kbps
     • 56    Kbps
     • 128  Kbps
     • 256  Kbps
     • 512  Kbps
     • 600 Kbps
     • T1 = 1.544 Mbps = 15440 Kbps
       

     How to Calculate: Take your total file size in Kilobytes and multiple by 8 to get the value in Kilobits. Divide by the speed in Kilobits per second (Kbps). The results is your answer in seconds.

     [No, you cannot get away from math and still talk about technology! ]

   • Option 2:  Search online with words like estimate download time to find an online download speed calculator, like Download Calculator
     
5. Compare the file sizes of carla.jpg and carla2.jpg and also other similar pairs of images in this folder.
   

   All of the images except Mail.gif have an alternate file with a 2 in the name.

   How much faster do you think the page will download when using correctly sized, smaller files?

6. Add up the total of the file sizes for the alternate files along with the HTML page and Mail.gif:
      carla2.jpg
      ricardo2.jpg
      rosa2.jpg
      pyramids2.gif
      china2.jpg
      Mail.gif
      hector9-Lastname-Firstname.htm
   
7. Recalculate the download speed.
   The speed should be faster using these smaller files. How much faster? Was your guess a good one? 

   Note: Speeds in an online calculator are rounded, so anything under 1 sec. may show up as zero seconds.

---

Edit Image SRC

To change an image change the SRC attribute of the IMG tag.

1. Switch to Notepad, showing the code for hector10-Lastname-Firstname.htm.
   
2. Edit the file names in all of the IMG tags except for Mail.gif to add a 2, like  carla.jpg  to  carla2.jpg . 

   These new images were sized so that the images line up nicely, having about the same height.

3. Edit the dimensions in the IMG tags to use the dimensions from File Explorer for their actual width and height.
   

   For example, carla2.jpg is 170 x 212.

4. Save. 
   [hector10-Lastname-Firstname.htm]

5. Switch to your browser and Refresh.
   The three photos should line up neatly with the same heights.

---

Add ALT Text

All IMG tags should include the ALT attribute. This text shows in most browsers when the image is not available for some reason or when the page is read aloud by screen reader software.

Some older browsers, like IE8 and earlier, show the ALT text in a screen tip when the mouse hovers over the picture. That is not what any HTML standard calls for, which is why most browsers don't do it! The TITLE attribute for an image is what will show as a screen tip. But a TITLE attribute is NOT required.

1. Switch back to Notepad.

2. Inside the IMG tag for  carla2.jpg , type  alt="Photo: Carla and Hector Chavez"  
   Be careful to leave a space between each of the attribute/value combinations.
   
3. Add your own (appropriate) ALT text for the other images, including the mail box image at the bottom. 
   Think carefully. If the image is missing, what do you want your reader to know about what is supposed to be there? There is a difference between merely decorative images and images that include information!
   
4. Save. 
   [hector10-Lastname-Firstname.htm]

---

Add TITLE Text

The TITLE attribute for an HTML element lets you add text that will show when the mouse hovers over the element. This works in all current browsers. The text can be just a short identification of the picture, or a paragraph explaining more about the picture. Keep in mind - screen tips vanish after a short time. It get's annoying very quickly if there is too much to read before the screen tip vanishes!

1. Inside the IMG tag for carla2.jpg, type title="Our anniversary trip to the World Cup! Such fun!!"
   

   

   The IMG tag is getting long!
   
2. Add your own (appropriate) TITLE text for the other images - Ricardo, Rosa, pyramids, China, and mail box.

3. Save.
   [hector10-Lastname-Firstname.htm]

4. Switch to your browser and Refresh.

5. Hover over each photo and make sure the screen tip shows what you meant for it to show.