Jan's Working with the Web

Step-by-Step: More Images

---

What you will learn:

to add spaces to insert multiple images with space between

---

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

Save As

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

---

Add Spaces

Shortly you will be inserting images of the two children, Ricardo and Rosa, on the same line as the image of Hector and Carla. You need some space between the images. In the browser it can be hard to tell how many spaces you have and why they are there.

Images wrap too: If the pictures need more space than the window allows, they will wrap just like text does. If the image is larger than the window at maximum size., the browser will show horizontal and vertical scrollbars, as needed.

1. Click to the left of the IMG tag to put the cursor on the same text line.
   
2. Press the spacebar exactly 12 times.
   The existing text moves over to the right, of course.
   
3. Save.
   [hector8-Lastname-Firstname.htm]
   
4. Switch to your browser and view hector8-Lastname-Firstname.htm.
   The image of Hector and Carla did not move over 12 spaces! Does it look like it moved over any at all? If you were watching very carefully, you saw the image move over just one space.
   

   Collapsing white space: Any sequence of spaces in your HTML code collapses to only 1 space when you view your page in a browser.

5. Switch back to Notepad.
   
6. Delete the blank spaces to the left of the IMG tag.
   
7. Type     to the left of the  < that starts the IMG tag.

   Each   creates a space that will show in the browser.

   The letters for this code come from the words non-breaking space. You can create as many spaces as you like with this code.
   

8. Save.
   [hector8-Lastname-Firstname.htm]
   
9. Switch back to the browser and Refresh the window.
   

   The image scoots over 3 spaces. This is enough to see

   Hurrah! You have learned a way to precisely control the white space in a line of text or images.

   Problem: Image did not move over
   Check the Address bar. Are you viewing hector8 or are you still showing hector7?
   Solution: Edit the address to show hector8-Lastname-Firstname.htm from your Class disc.

10. Save.
    [hector8-Lastname-Firstname.htm]

---

Insert More Images with Space Between

Now you can insert the photos of Ricardo and Rosa.

1. Switch back to Notepad.
2. Click in the line with the IMG tag to put the cursor in that line.
3. Press the END key to be sure the cursor is at the end of the line with the photo.
   
4. If the cursor is not directly to the right of the final > in the IMG tag, delete the extra spaces.
5. Press the space bar once.
   
6. Add the photo of Ricardo using the path for the source HTML/ricardo.jpg
    <img src="HTML/ricardo.jpg">
   
7. Press the space bar once after the new IMG tag.
   
8. Add the photo of Rosa.
   <img src="HTML/rosa.jpg">
   
   
9. Save.
   [hector8-Lastname-Firstname.htm]
   
10. Switch to your browser and Refresh.
    Whoops. The pictures of Ricardo and Rosa do not fit on the line with Hector and Carla.
     
    To resize this with code (not the best plan) you need to know the original sizes and do some arithmetic.
     
11. Open or return to a File Explorer window that shows the contents of your Class disk - the folder HTML.
    
12. Click on ricardo.jpg and find its dimensions.
    
13. Find the dimensions for rosa.jpg.
    
14. Calculate new dimensions that are half of the originals for both images.
    (Just divide the width and the height by 2.)
    
15. Return to Notepad and add the width and height attributes to the image tags. Use the values you calculated.
    Note, if you mix up the width and the height, the image will be deformed.
    
16. Save.
    [hector8-Lastname-Firstname.htm]
    
17. Return to your browser and Refresh. 

    Hmm. Not very attractive yet! Ricardo's picture is way too tall and Rosa is too tiny.

Resizing with a graphics program gives you more control. Smaller files reduces the download time also. You will fix these pictures in a later lesson!