HTML Basics:
Icon: FrontPage Express 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 FPX 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.

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
    FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
            icon-footprintInsert Image
            icon-footprintMore Images
            icon-footprintInline Images
            icon-footprintReplace Image
            icon-footprintImage Link
                Align & Space
            icon-footprintAlign Images
                Image Issues
            icon-footprintSave to New Location
            icon-footprintSave Non-Web Image
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: More Images in FPX

 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, Icon: FPX hector7.htm, resource files

View IMG Tag

FrontPage Express 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. From the menu select  View  |  HTML...
  2. Scroll the code in the window to see the IMG tag.

    Code: <p><img src="carla.jpg" width="314" height="393"></p>

    FrontPage Express placed the basic IMG tag between the P tags.

    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. A pixel is the smallest dot that can be displayed on your monitor screen.

    FPX color codes the tag names in purple, attributes in red, and the values in blue. This is certainly easier than typing that tag yourself!

  3. Close the code window.


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 space at the rightPress the spacebar several times.
    Hmmm. Notice where the cursor is now. No matter how many times you pressed the spacebar, only one space was created! This is certainly not like a word processor!
  3. Code: height="212"> </p>Open the HTML code again. ( View  |  HTML... ) and scroll to the IMG tag. There is just a single space between the end of the IMG tag and the closing paragraph tag </p>.

    TipAny sequence of spaces in your HTML code collapses to only 1 space when you view your page in a browser.

    Oddly, there does not seem to be a way to create more spaces Using FPX buttons or menus. There is a way to do it with the HTML code, however- if you type carefully.

  4. Code: height="212">&nbsp;&nbsp; </p>Type between the  >  that ends the IMG tag and the  <  that starts the closing paragraph tag, the characters &nbsp;&nbsp;

    Each &nbsp; creates a space. The letters for this code come from the words non-breaking space. 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.

  5. Image with 2 spaces at rightClose the HTML window.
  6. Scroll back to the image and press the END key to be sure your cursor is at the end of the line.
  7. Press the left arrow key 3 times. It should now be directly next to the picture. You cannot count spaces by looking at a page, but you can count using the arrow keys.
  8. Code: height="212"> </p> Press the DELETE key twice to remove two of the spaces. This leaves just one space to the right of the image again. This time you do not really need much space between the photos.
  9. Check the HTML code again for the paragraph to be sure you removed all but one space. ( View  |  HTML... )
  10. Close the HTML window.
  11. 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 Insert image 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. 

    hector8.htm with two photos

  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 Button: Image the Insert image 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.

    Look at the new estimated loading time - 92 seconds. This is getting bad!

    hector8.htm with picture of Rosa


  9. 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.