HTML Images

To insert images into a document you use the <img> tag, and then the src and alt attribute.

<img src="URL to Image" alt="description of image (this helps people with disabilities or browsers which don't display graphics)">

There are several image formats: the common ones are GIF, PNG and Jpeg. GIF is simple to use as it takes less time to load pages and is compressed.

Sponsored Links

The code looks like this:

<img src="/upfiles/Images/favicon.png" alt="favicon" />

Image Dimensions

You can also set the image size inline. Here you specify the width and height so it looks like this:

<img src="/upfiles/Images/favicon.png" width="100px" height="50px" alt="favicon"/>

You can also set the default image size in a CSS sheet. Most styling now should be done in a CSS sheet.

Image Links

It is also possible to link images. In this case simply wrap the <img> tag with a link tag so it looks like this:

<a href="https://www.thecodingguys.net"><img src="/upfiles/Images/favicon.png" width="100px" height="50px" alt="thecodingguys favicon"/></a>

Title attribute

The title attribute will show a small tool tip for the image. For example, if you hover over the social network images above they will show a tool tip.

<img title="favicon" src="/upfiles/Images/favicon.png" />

Example

<img alt="thecodingguys favicon" title="favicon" src="/upfiles/Images/favicon.png" style="width: 24px; height: 24px;"/>

Output

thecodingguys favicon