HTML Basics:
Icon: FrontPage More Images

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

In this lesson you will inspect the IMG tag more carefully. You will look at the attributes that FrontPage configures. Later you will learn about other attributes for IMG.

Download Time

Download time gets longer and longer as you add more images to the page. When should you stop? That depends.

  • Connection speed: How fast do you think your viewers can download your page and images? 28.8 kps, 56 kps, faster?

  • Importance: Are your images necessary to understanding what you are saying with this page?

Faster is better! People start getting impatient if it takes longer than 30 seconds to download your page and its graphics unless they really want to see them.

Some sites must use lots of images and interested viewers have more patience. For example, a gallery of art works or a page that diagrams a scientific process. (Or many of these lesson pages!)


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: More Images in FrontPage

 Icon Step-by-Step

What you will learn: to insert multiple images
to create spaces between images
how download time increases with each image

 Start withClass disk, 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.

    Code: <p><img border="0" src="carla.jpg" width="219" height="270"></p>

    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.

    Dialog: Page Options | Color codingFrontPage 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.


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.

TipIf 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. Image with several spaces at rightPress the spacebar several times.

  3. Code: height="212">&nbsp;&nbsp;&nbsp;&nbsp; </p>Open the HTML code again. and scroll to the IMG tag. For each time you pressed the spacebar the is a non-breaking space   &nbsp; .

    TipAny sequence of spaces in your HTML code collapses to only 1 space when you view your page in a browser. Only by using  &nbsp; 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. Image with several spaces at rightSwitch 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. Code: height="270">&nbsp;</p>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. Code: height="270"> </p>Check the HTML code again for the paragraph to be sure you removed all but one space.
  9. Switch back to Normal view.
  10. Class disk 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 Button: Image 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. hector8.htm with two photosClick 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 Button: Image the Picture button again.

  8. Insert the photo of Rosa using the path a:\my docs\web\rosa.jpg

    hector8.htm with picture of RosaIf 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. Class disk Save. [hector8.htm]

In a later lesson you will reduce the horrendously high download times by replacing these images with correctly sized ones.