HTML Basics:
Icon: FrontPage Express Insert Image

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

Inserting an image looks simple. There are some pitfalls, however, that can sabotage you.

  • Images are separate from the HTML file. This is different from word processing documents. When you move a web page, you must also move the image files or else change the paths to images.

  • Changing the size of an image on the page does not change the size of the image file itself. The whole file downloads, no matter how small it looks on the page.

  • Some WYSIWYG editors will "help you out" when you resize an image with the mouse. When you save the page, the program resizes the image and overwrites the original image. The original image is gone forever.


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: Insert Image in FPX

 Icon Step-by-Step

What you will learn: to insert an image
to resize an image by dragging

 Start with:  Class disk, Icon: FPX hector6.htm, resource files

You will use FrontPage Express to put some images on Hector's page. You must know the path to the image files in order to use them on an HTML page.

Copy Image Files

To keep things simple, you will first copy the images for Hector's page into the web folder on your Class disk, where you are saving the different versions of the page.

Full FloppyHow to handle a full disk
You may need to remove some files from your floppy disk to have enough room for the images. If you want to start using a new floppy disk, copy hector6.htm from the floppy disk to the hard drive. Put a new blank floppy disk in the drive and move hector6.htm to the new floppy.

  1. Download the  resource files for HTML Basics. Extract the files to a folder on your hard drive. This will create a folder HTML with two subfolders.
  2. Save the files in the web/HTML folder to your floppy disk.

Save as

  1. Class diskWith FrontPage Express showing hector6.htm, from the menu select  File  |  Save as .
  2. Use the name   hector7.htm  to save the page to the web folder on your Class disk. Now your changes will not overwrite the previous version and your images will use relative paths instead of full paths.
  3. Check the estimated load time on the Status bar. Remember this number.

Insert Image: Other Location

You will insert a photo of Hector and his wife Carla.

  1. Dialog: Image - Other Location tab - carla.jpgMove your cursor to the end of the paragraph in the section My Family and press ENTER to create a new line.
  2. Click Button: Image the Insert image button. A dialog opens with the tab Other location showing.
  3. Type the path  a:\my docs\web\carl.jpg  (Type exactly as shown, please.)
    This image will be of Hector and his wife Carla.

  4. Click the button OK. Whoops. The button is grayed out so you cannot click! This means the path must be wrong. There is no file of that name at that location. It is the filename that is not right.
  5. Dialog: Image - from file = carla.jpgEdit the path so that the filename is carla.jpg. Now OK button is available. Spelling is so important!

  6. FPX showing hector7.htm - carla.jpg Click on OK. After a short wait while the computer accesses the floppy disk, the image appears in the page.

    It is much too large for this page!


    TipProgressive JPEG images (which reveal themselves in stages) may not display correctly in FPX. But the saved page will display the image correctly in a browser.

  7. Check the estimated load time on the Status bar. It now says 40 sec. Status bar shows 40 sec. load time Quite a change for just adding one image!

Resize with Mouse

After a picture has been inserted in FrontPage Express, you can change its display size. You may need to resize more than once, especially if the image is bigger than the window.

Of course, dragging in FPX to resize an image does not actually change the image's file size. Once you decide on what size works well on your page, you should use a graphics program to create an image that is that size.

  1. Resize handleClick in the image somewhere to select it. Handles (small black squares) appear at the corners and halfway along each edge.
  2. Dragging upper right corner of carla.jpgDrag the handle at the upper right down and left until the image is a more reasonable size. The pointer should have the shape Pointer: Diagonal Resize.


    hector7.htm with resized image carla.jpgWhen you release the mouse button, there may be a short wait while the computer calculates. Then the image will be shown in its new size.

    You can only drag the handle as far as the edge of the window. You will probably need to drag at least twice since so much of the image is not visible in the window.

    Warning If you drag with a handle that is not at a corner, the image will be distorted since only one dimension will change.

  3. Class disk Save the page with the same name [hector7.htm] by clicking the Save button.