Inserting an Image into a Website with HTML

There three elements that make up a website, images, text and links. Although you could make a simple text and link website, adding images can make your website more appealing to the eye and allow you to show your readers what cannot be easily conveyed in words. The ability to add text to your website also allows you to create photo galleries, slideshow, and profile pictures. When uploading your image files to your webhost account it is a good idea to keep all you images in an "images" file for organization purposes. You can insert images from your site or from other sites on the web as long as you have the url for the image file.

It is important to understand copyright law when it pertains to images on the internet. If you are linking a photo from another site or copying and pasting it into your file, you must make sure that you either have rights to the image or that the image is open source. I am not a copyright expert and advise you to proceed with caution. You can face serious fines if you use an image that you have no authority to use. A rule of thumb I use is to only use images and graphics I produce, or images and graphics that are expressly labeled as open source.

The html tag used to insert an image into your website is a singular tag. That means that it does not contain an open and closing tag. There are three main elements to an image tag, the image file source, image size, and alternate text.

The image file source would be either the exact file name within your site, or the exact url of the image held in a different site on the internet. For example, if you have an image of a dog with a file name of "dog.jpg" in the "images" file of your site the file name would be written as "images/dog.jpg". If this file was held on a different site on the internet the source file would be "http://othersite.com/images/dog.jpg".

When creating an image to post on a website it is important to make the image file large so that all the important details of the image are captured. However, if your image is 100 pixels by 1000 pixels it would cover your entire page. You can resize you image by defining the width and height. For example, if you wanted to resize your image to 100x100 pixels you would write it as width="100" height="100".

The alternate text is text that would appear if the image failed to load. The alternate text also allows you to add key words for search engine optimization. Search engines like Google index your site based on the text in your site. However, if a page has little text, alternate text will allow the search engines to index your site page based on the key words inserted in your image alternate text. It is important that you do not neglect adding alternate text to your images. To add alternate text to the image you would type alt="dog". The entire text would be written as follows...

It is important that the elements of the code are included as shown with the /> included for xhtml otherwise you will get the dreaded "image cannot be displayed" warning when loading your website.