HTML Basics:
Icon: FrontPage Express 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: the little footprint icon icon-footprint in the table of contents on the right and the Class disk icon for the Class disk, 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
    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: Inline Images in FPX

 Icon Step-by-Step

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

 Start withClass disk, Icon: FPX 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: Image the Insert image button and type the path   a:\my docs\web\pyramids.tif  in the From file: textbox. Note that the TIF format is in the drop list of file types. So FPX should be able to open it.

    Whoops! An icon for a broken image Icon for a broken image appears instead of the pyramids. The TIFF image format is one of many that come in different versions. FPX apparently does not understand this particular one.

    Warning Sadly, knowing that the file format is usually an acceptable one does not always guarantee that the software can handle the image file.

  3. Select the broken image icon and remove it by pressing the DELETE key.
  4. Click Button: Image the Insert image button and click the Browse button. The Image dialog appears. The contents of the web folder should be displayed.
    If not, navigate to the floppy drive and then to the
    web folder. If necessary, change the File type box to show GIF and JPEG.


  5. Text: pyramid image in front of "the pyramids in Eygpt"Select the image pyramids.gif and click the Open button.

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

  6. Text: smaller pyramids image in front of "the pyramids in Egypt"Resize the image until the line spacing is back to normal.
  7. Add a space, if necessary, to have a blank space on each side of the pyramids.
  8. 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".
  9. Click on Button: Image the Insert image button and click the Browse button.
  10. From the Image dialog, select the image china.jpg and click the Open button. Way too large!

  11. 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 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. You will probably need to put a blank space on one side of the image for good spacing.

  12. Look at the estimated loading time. It is up to 109 seconds.
    There is one more image to insert, for now.
  13. Place your cursor at the left end of the last paragraph.
  14. Text: mailbox to left of 'Please send me email..."Click on Button: Image the Insert image button and type in the path a:\my docs\web\Mail.gif  

    Warning Once your web page is on a server, your capitalization may be important. On a Unix server, for example, the filename mail.gif is not the same as Mail.gif. Typing the name with the wrong case can mean it will not show up on the page! It is less confusing to keep all of your file names in lower case. If you use FPX to upload your pages, it will automatically make all filenames lower case and will change the paths in the HTML code to match.

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

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