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.

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