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;"/>