HTML Image Code
Adding Images to a Page

Images can really bring your page alive and give your visitors a much better chance at sharing your passion, knowledge and experience.  If you write a travel, cooking, gardening or other how-to site, you'll know all about how important images are to enhance your writing.

But even if your site is about business, debt management, accountancy or any other subject that not immediately calls images to mind, you can improve the readability of your pages by adding images and graphics.

Yet, many novice webmasters shy away from adding images. Some think that images - especially for more abstract subjects - are difficult to find or that they are very expensive. Others worry about copyright. But I've also often been told that it's too tricky, that's it's a hassle to fit images into a page. And that's not at all true. So here's some basic HTML image code to make decorating your webpages a breeze.

Prepare Your Image

Before you can use the image, you need to upload it to the image library on your web hosting account. (Almost each web hosting company has a slightly different way of doing this, so please check with yours.)

Your hosting company may specify:

  • maximum image file size ... if your image is too big, it won't upload. Shrink it first using your normal photo editor or my current favourite tool, Photoscape, which you can download free.

  • file naming convention ... make sure you follow your hosting company's instructions to the letter, or your images will not display. The instructions often include not using capital letters, using underscores between words and choosing the file extension correctly. .jpg and .gif are the most commonly used file types.

  • file location ... this is the place where your image is saved to. Note this down carefully, as you'll need this when specifying the HTML image code.

Add Your Image to the Page

HTML image code is very easy to use, as long as you don't forget any of its component parts. It's easiest if you keep an HTML image code template handy on a notepad and just change out the image name and sizes as you need them before inserting the code where you want to add the image on the page.

Unless you change your web hosting company, the URL (or web address) or your image library should not change.

HTML image code looks like this:

<img src="" alt=”image title” align=”right” width=”xxx” height=”xxx” hspace=”10” vspace=”10”>

img is the opening tag for image code

src specifies the source location of the image. This should be the graphic library of your site as specified by your hosting company.

alt is a very useful tag. Here you’re telling Google and the other search engines what the image is about. Make sure you name it correctly and include a keyword. I usually also use it to attribute copyright if the image is not my own.

align specifies if the image is placed flush with the right or left margins. You can also use the <style=“float:right;”> and <style=”float:left;”> commands. To center an image, place it inside paragraph tags, using this as the opening tag... <p style="text-align:center;">image code here</p>

width and height specify the size of the image on the page. The size is in pixels. If you're using SBI!, then a normal block built page is currently 745 pixels wide. The navbar is 140 pixels wide. You only really need to specify either width or height. The system keeps the aspect ratio between width and height and displays accordingly.

hspace and vspace specify the horizonal and vertical space between the image and the text close by. You want to use these if you have text wrapping around an image. If the image is as wide as the page, you can leave these tags out. I tend to use 10 pixels to create white space around my images. Alternatively, you could use style="margin: 10px;", which does the same thing and is placed instea of hspace and vspace.

And there you have it ...
some simple HTML Image Code for adding an image to your page.
Return from HTML Image Code to learn HTML Basics.