HTML Basics:
More Images

Step-by-Step: More Images in FrontPage

---

What you will learn:

to insert multiple images to create spaces between images how download time increases with each image

---

 Start with:  , hector7.htm, resource files

View IMG Tag

FrontPage creates a basic IMG tag for you when you use the Insert image button. Later you will use the Image Properties dialog to set other attributes.

1. Switch to HTML view.
    
2. Scroll the code in the window to see the IMG tag.

   

   FrontPage placed the basic IMG tag between the P tags.

   When the BORDER attribute is set to a number larger than 0, a black border will show around the image. The width of the border is the number in pixels. A pixel is the smallest dot that can be displayed on your monitor screen.

   The width and height are for the size that you set by dragging. Your numbers are probably different. That is not a problem.

   The width and height dimensions are in pixels.

   FrontPage colors the tag names and attributes in blue and the values in black. This is certainly easier than typing that tag yourself! You can change the default color choices in the Page Options dialog. Menu  Tools  |  Page Options |  Color coding
    

3. Switch back to Normal view.
    

---

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. It can be hard to tell how many spaces you have.

If the pictures need more space than the window allows, they will wrap just like text does.

1. Click to the right of the image and put the cursor on the same text line.
    
2. Press the spacebar several times.
    
   
    
3. Open the HTML code again. and scroll to the IMG tag. For each time you pressed the spacebar the is a non-breaking space     .

   Any sequence of spaces in your HTML code collapses to only 1 space when you view your page in a browser. Only by using    can you add actual spaces to the display.

   The  &  ampersand and the  ;  semicolon are just as important as the letters! Do not leave anything out. You can create as many spaces as you like with this code.
    

4. Switch back to Normal view.
    
5. Scroll back to the image and press the END key to be sure your cursor is at the end of the line.
    
6. Press the left arrow key enough times to be directly next to the picture. You cannot count spaces by looking at a page, but you can count using the arrow keys.
    
7. Press the DELETE key enough times to remove all but one of the spaces you added. For this page you do not really need much space between the photos.
    
8. Check the HTML code again for the paragraph to be sure you removed all but one space.
    
9. Switch back to Normal view.
    
10. Use the menu  File  |  Save as  to save the page as hector8.htm in the web folder of your Class disk.

---

Insert More Images

Now you can insert the photos of Ricardo and Rosa.

1. Press the END key to be sure the cursor is at the end of the line with the photo.
    
2. Click on the Picture button.
    
3. Insert the photo of Ricardo using the path a:\my docs\web\ricardo.jpg
    
4. Resize the image by dragging it to the same height as the picture of Hector and Carla.
    
5. Click to the right of the photo of Ricardo and press the spacebar once to add a blank space.
    
6. Look at the status bar for the estimated loading time = 87 seconds! This is s-l-0-w.

    

7. Click on the Picture button again.
   
    
8. Insert the photo of Rosa using the path a:\my docs\web\rosa.jpg

   If your window size is small or you are using 640 x 480 resolution, Rosa's photo may wrap below the first two. This image seems to be nearly the same height as the others, so you can leave it as it is for now.
    

9. Look at the new estimated loading time - 92 seconds. This is getting bad!
    
10. Save. [hector8.htm]