HTML Basics:
Icon: FrontPage 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 in the HTML code.

  • 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. You must be prepared!


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

 Icon Step-by-Step

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

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

You will use FrontPage 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.

  1. Download the resource files for HTML Basics and extract the files to your hard drive. This will create a folder HTML with two subfolders. The total size is 880 KB. You will be copying some of these files to the webIcon: web folder hector.  If you have put the web on your Class disk, you may run short of space at some point since a floppy disk can only hold 1.44 MB. You will need only the webIcon: web folder hector from now on for HTML Basics, so you may move or delete the previous pages.

    Full FloppyHow to handle a full disk

Open Existing Web

To keep things simple, you will first copy the images you will be using on Hector's page into the web hector on your Class disk.

  1. Button: Open - expandedOpen FrontPage.
  2. Click the arrow beside the Open button. Select Open Web...

  3. In the Open dialog, navigate to the web hector or type the full path to the web,
      a:\my docs\web\hector  for the floppy disk or http://localhost/hector
    Message: Server error: There is no web named...TipError: If your Class disk is not in the floppy drive and you type a path to it, you will get an error message.

  4.  FrontPage with the web hectorClick on OK. FrontPage loads the selected web.


Import Files: Copy & Paste

In a previous lesson you learned how to import files into a web with a dialog. This time you will copy and paste. It can be easier to find the files you want in a large Explorer window instead of the small space in a dialog.

  1. Folder List of web hectorafter resource files copiedOpen an Explorer window to the the folder HTML on your hard drive to which you extracted the resource files.
  2. Select all the files and copy.
  3. Switch to FrontPage and click on the web name hector at the top of the Folder List.
  4. Paste. The files are copied to the web hector.
    On your floppy disk this may take several minutes since writing to a floppy is rather slow.

Save As

Students often find that they need to back up and start a lesson over. To make this easier to do, you will be saving your web page under a different name in each lesson. This is not the way most people work in the real world! However, it is a good idea to keep separate copies of your work at different stages of the creation process. This can save you if your file gets corrupted along the way.

  1. Class diskIn FrontPage open hector6.htm by double-clicking it in the Folder List.
  2. From the menu select  File  |  Save as .
  3. Use the name   hector7.htm  to save the page to the web hector. Now your changes will not overwrite the previous version. Your images will use relative paths instead of full paths.
  4. Check the estimated load time on the Status bar. Write this number down.

Insert Image: Dialog

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

  1. Move your cursor to the end of the paragraph in the section My Family and press ENTER to create a new line.
  2. Dialog: PictureClick Button: Image the Picture button. The Picture dialog appears and show the last folder used.
  3. Type the path  a:\my docs\web\carl.jpg  (Type exactly as shown, please.)
    We want an image of Hector and his wife Carla.

  4. Click the button Insert. Whoops. A message appears. It's not all that helpful. The actual problem is that no file of that name is at that location. The filename is the part that is wrong.

    Message: Folder is not accessible...

  5. Click on OK in the message box.
  6. Dialog: Image - carla.jpgEdit the path so that the filename is carla.jpg. Spelling is so important!

  7. FrontPage showing hector7.htm - carla.jpg Click on Insert. 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!

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

Resize with Mouse

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

  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.

WarningFile size: Dragging in FrontPage to resize an image did not actually change the image's file size. You have just changed the way the image is displayed.