Basics of HTML Part #3 is good to know before continuing on with this tutorial!

Today we're going to talk about the img tag and the src attribute. This very important because this element allows us to input images in our web page and also input images from another web server or folder on our web server.

The Image Tag

There is something different about this <img> tag is that the closing tag is not </img>. This is known as a self-closing element or an empty element. These empty elements contain attributes only and no closing tag.

The "src" attribute

To properly display an image on a web page, we need the src attribute (which stands for source) which contains the relative or absolute link to the image you wish to attach. Without this attribute we would not be able to display an image because there would be no source.

Standard Hosting

The syntax for the img element is as follows:

<img src="url" />
<!--The image above-->
<img src="http://www.atomicpages.net/images/standard.jpg" />

Se have our basic syntax for the image element and the example provided is points toward the image location which has an image name of "standard.jpg" which is in the folder "images" on "http://www.atomicpages.net"
that has the URL of "http://www.atomicpages.net/images/standard.jpg".

The image element will place the image where ever the <img> is place. If that happens to be in the middle of a paragraph or in some arbitrary place on your web page, then it will be placed where ever the element is placed in your source code.

The "alt" Attribute

The alt attribute is important to have for a few reasons.

First, this alt attribute will display the text if a visitor on your web site has images turned off or they are using a text-only browser. This will accurately tell the user what they are missing if the page cannot load the images. Note: the alt attribute is not used as an image description or a summary of what the image is or what it is about.

Second, the alt attribute is good to have for Search Engine Optimization (SEO). Web bots that crawl your web site cannot see the images.

Third, the addition of the alt attribute will make your web page W3C compliant and your web page will validate when checked by the W3C HTML Validator.

Here is an example of useage for the alt attribute:

<img src="url" alt="Alternative text" />
<!--Example-->
<img src="http://www.atomicpages.net/images/standard.jpg" 
alt="Standard Hosting" />

"height" and "width" attributes

Height and Width attributes can be used in the place of inline css or css in general. These attributes specify the dimensions of the image. These attributes will usually come after the src attribute. The syntax is as follows:

<img src="url" height="in px" width="in px" alt="" />
<!--Example-->
<img src="http://www.atomicpages.net/images/standard.jpg" 
height="148" width="300" alt="Standard Hosting" />

The height and width attributes define the image size in terms of pixels (px) without you having to write px after the integer.

Alliteratively, you can use inline css to define an images dimensions like so:

<img src="http://www.atomicpages.net/images/standard.jpg" 
style="height:148px; width:300px; alt="Standard Hosting" />

Images and Links

In Basics of HTML Part #3 we discussed links and anchors. We can actually combine links and images to make clickable images that will take us to a larger image or another place on our web page.

Consider the following code:

<img src="http://www.atomicpages.net/images/standard.jpg" 
height="148" width="300" alt="Standard Hosting" />

This will correctly display the image we want; however, if we wanted to make this image one that was clickable then we would do the following:

<a href="http://www.atomicpages.net/hosting.php">
<img src="http://www.atomicpages.net/images/standard.jpg" 
height="148" width="300" alt="Standard Hosting" />
</a>



This would make the image clickable and once you clicked on the image it would take you to http://www.atomicpages.net/hosting.php If we wanted to use an image that would link to another image or a larger image then we would do the following:

<a href="url to different/larger image">
<img src="url to image you want to display" height="" width="" alt="" />
</a>
<!--Example-->
<a href="http://www.atomicpages.net/images/standard.jpg">
<img src="http://www.atomicpages.net/images/standard-small.jpg" 
height="74" width="150" alt="Standard Hosting" />
</a>

Click

Be Sociable, Share!