HTML Basics:
Inline Images

Step-by-Step: Inline Images in FPX

---

What you will learn:

to insert inline images what a broken image looks like

---

 Start with:  , 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. In the paragraph about Travel, put your cursor to the left of "the pyramids in Egypt".
    
2. Click 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 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.

   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 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. 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. 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. Move your cursor to the left of "the Great Wall of China".
    
9. Click on 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. Resize 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. Click on the Insert image button and type in the path a:\my docs\web\Mail.gif  

    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. Save as  hector9.htm  to the web folder of your Class disk.