Karl Kasca

Inserting an image into a Web Page is straightforward, but the formatting and placement of images can be tricky, depending on what software program you are using. Given this, there are a few basic things you should know and beyond that it's up to your knowledge and/or software, programmers, or programming.

Action Steps

1. Open the HTML document you wish to edit using your HTML editing software



1. Note: For this example, we'll use the free KompoZer program.



2. Either select:



1. Insert > Image (from the menu), or the



2. Image icon on the toolbar (Insert Image)



3. Under the "Location" tab of the Image Properties dialog box which comes up:



1. Enter the Image location, or browse your hard drive for the image file, in the dialog box.



1. Note: To have the image appear when the HTML document is on the web, you'll need to link to a web location (URL) for the image file, e.g., http://www.increaseonlineprofits.com/public/images/ShinyBlueArrowRight.gif  



1. See the related article on "How to Upload a File (or Image) to your Website" so you'll have a file on your site you can link to.



1. Enter the Alternative Text (Alt Text) for the image.



1. This is text that visually impaired people can read with text readers, instead of viewing the image itself.



1. Be descriptive enough that reading the text alone would make sense to you even if you couldn't see the image, e.g.,



2. "Image of Shiny Blue Arrow pointing to the Right"



2. Alternative text (Alt Text) is also great to use because it's indexed by Google and other search engines.



3. You should also do this to comply with W3C Web Content Accessibility Guidelines and the law (US Section 508 of the Rehabilitation Act of 1973):



1. See: Web accessibility: IBM Web Accessibility Checklist, W3C Web Content Accessibility Guidelines (WCAG) and US Section 508, or http://www-03.ibm.com/able/guidelines/web/ibm508wcag.html.



4. Under the "Dimensions" tab of the Image Properties dialog box:



1. Choose the size of the image (either Actual or Custom, in pixels)



1. Trick #1: If you're not sure what size in pixels, check "Constrain" and type a number (smaller or larger than the original number of pixels) and then hit your Tab key...and KompoZer will automatically adjust the height.  Then hit OK and see what the image looks like in your HTML file and adjust from there.



2. Trick #2: If the image is too large (in visual size and file size) and you need to make a smaller file, just adjust the image size in KompoZer by left-clicking on the image and dragging one of the corners to the right size.  
   Then take a screen shot of the image with SnagIt or Jing and save the smaller file and then go back to step #1 and insert this new image.



5. Under the "Appearance" tab of the Image Properties dialog box:



1. For Spacing: Enter numbers in pixels if you want a border (space or solid) around the image.



2. For Align Text to Image: Click the down-arrow and choose where you want the Text to flow. Think about what you want your arrow to be pointing at and then where the text should be located.



6. Under the "Link" tab of  the Image Properties box:



1. Enter the link to the website URL, named Anchor, Email Address, you wish to go to when the image is clicked.



7. Click on the "Advanced Edit" button in the Image Properties box:



1. Click the Attribute drop-down and choose "Align".



1. Click the Valuedrop-down and choose Top, Middle, Bottom, Left or Right.



1. In the example Video (below), I'll choose Right, so you'll see the arrow move from the default position on the left of the HTML document.



1. Note & Trick: If you want to know what the image position is set at you can view the image in "Source" (HTML code) in KompoZer and see what value is there.  At that point you can simply type in the position you want the image to be in, e.g., if it shows "Right" you can just type in "Left", then save the HTML document and go to Normal view to see the new position of the image.

Video of How to Insert an Image into a Web Page

ARTICLE DATE: 11/28/08
REVISED DATE:

Related Articles

·  How to Build an Opt-In Page ·  How to Create a Sign-up Box Using AWeber's Web Form ·  How to Upload/Transfer/FTP Files to Your Website Server ·  How to Find, Download, and Edit an Image ·  E-Newsletters - The Basics

#bottom_spacer# height=1 ALT="">