HTML Basics:
Icon: FrontPage Inline Images

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

Images that are on the same line as text are called inline images. The spacing between lines of text must expand to hold the whole image.

These lessons have lots of inline images.

Examples: icon-footprint Footprint icon in the table of contents
 andClass disk Class disk icon, which is at the beginning of a step where you save your work.

Notice how the space between the lines above expanded to hold the Class disk icon. It is taller that the line height. Later you will learn how to change the way images line up with text.


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: Inline Images in FrontPage

 Icon Step-by-Step

What you will learn: to insert inline images
what a broken image looks like

 Start withClass disk, hector8.htm, resource files

Inline images

The photos of the family were put in a paragraph of their own. You can put photos inside a paragraph with text. It will look awkward unless the image is very small. The line spacing will increase to hold the image. Hector wants to put a small clipart image of the pyramids and an image of the Great Wall of China into the Travel paragraph.

  1. Link: the pyramids of EgyptIn the paragraph about Travel, put your cursor to the left of "the pyramids in Egypt".
  2. Click Button: Picture the Picture button and type the path   a:\my docs\web\pyramids.tif  in the File name: textbox.  Whoops. The dialog blinks and changes the file display but it does not insert the image.  Why? There is no image with this path. The file is in the HTML folder inside web.

    WarningThe TIF format is in the drop list of file types but it is one of many formats that come in different versions. A program (FPX for example) may not be able to handle all of the variations. Sadly, knowing that the file format is usually an acceptable one does not always guarantee that the software can handle the image file.

  3. Navigate in the Picture dialog to the web hector and open it. Is the image pyramids.tif already selected? If not, scroll the list and select it.

    Dialog:Picture with pyramids.tif

    In some cases, only the TIF file is shown. There should be many more images displayed than this. Apparently FrontPage is showing just the match to what you typed, like in a search page.

    TipWhen you don't see what you expect in a file list, look at the textbox that shows the file types. You may need to switch to a different file type to see what you are looking for.

  4. Text: pyramid image to left of "the pyramids in Eygpt"Click on the Insert button.

    Some cute little pyramids appear in the sentence. The spacing between the lines enlarged to hold the image.

  5. Text: smaller pyramids image in front of "the pyramids in Egypt"Resize the image until the line spacing is back to normal.

    TipIf the sentence wraps to a new line just after the image, put the cursor at the right of the image and press DELETE once. This should remove the line break. Now your image and its matching text are together. It looks much better that way.

  6. Add a space, if necessary, to have a blank space on each side of the pyramids image.
  7. Text: image of Great Wall to left of "the Great Wall of China"Move your cursor to the left of "the Great Wall of China".
  8. Click on Button: Picture the Picture button and select the image china.jpg and click the Open button. Way too large!

  9. Text: small image of Great Wall of ChinaResize the image to get the line spacing back to normal. Hmmm. The image does not look like much at this size!

    If necessary, add a space so that there is one blank space on either side of the image.

  10. Look at the estimated loading time. It is up to 110 seconds.
    There is one more image to insert, for now.
  11. Place your cursor at the beginning of the last paragraph.
  12. Text: mailbox to left of 'Please send me email..."Click on Button: Picture the Picture button and type in the path a:\my docs\web\hector\Mail.gif   or select this file from the dialog file list.

    WarningIn Windows your capitalization does not matter. Once your web page is on a server, your capitalization may be important. Unix is a very common operating system for web servers. On a Unix server the filename mail.gif is not the same as Mail.gif. So, typing the name with the wrong case means it will not show up on the page!
    RECOMMENDATION: Keep all of your file names in lower case. It's less confusing.

  13. Class disk Save as  hector9.htm  to the web folder of your Class disk.

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