Tutorials

Learn web design and programming with our free video and text tutorials.

HTML/XHTML Image Tutorials

How To Insert Images Into Web Pages

The <img> tag is used to insert a images in HTML documents. The src attribute must be included within the <img> tag to display the image and the value of the src attribute is the URL of the image that you want to be displayed.

The <img> tag is a self-enclosing tag, which means that in order for any HTML documents that have images within the HTML document itself the tag must end with an blank space followed by a forward slash (/) and then followed the ending greater than bracket (>).

The HTML code below shows you how to insert an image into an HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>

<p>
<img src="image.jpg" alt="this is some alternate text" />
</p>

</body>
</html>

The code above produces the image below.

this is some alternate text

How To Display Attribute Text

The text that is entered within the value of the alt attribute is displayed on the web page if the image is not displayed.

The alt attribute must be included within any <img> tag within an HTML document in order for it to validate as XHTML 1.0 Strict.

The HTML code below shows you how to add the alt attribute to an image in an HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>

<p>
<img src="image.jpg" alt="this is some alternate text" />
</p>

</body>
</html>

How To Link To Images

To link to an image in an HTML document, place the <img> tag within the starting <a> and the ending </a> tags.

The HTML code below shows you how to link to an image in an HTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>
<p>
<a href="http://webdevelopmenttutorials.com/">
<img src="image.jpg" alt="this is some alternate text" />
</a>
</p>
</body>
</html>

The code above produces the linked image below.

this is some alternate text

How To Adjust the Height and Width of Images

NOTE: You can adjust the height and width of individual images in HTML documents by including the height attribute and width attribute within the <img> tag, however, the recommended way to adjust the height and width of images in HTML documents is through the use of CSS.

To adjust the height and width of images in an HTML document include the width attribute and height attribute within the <img> tag. The value of each attribute is the dimension that you specify.

The HTML code below shows creates 3 images. Each image has different dimensions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
</head>
<body>

<p>
<img src="image.jpg" width="80px" height="80px" alt="this is some alternate text" />
</p>
<p>
<img src="image.jpg" width="160px" height="160px" alt="this is some alternate text" />
</p>
<p>
<img src="image.jpg" width="80px" height="240px" alt="this is some alternate text" />
</p>

</body>
</html>

this is some alternate text

this is some alternate text

this is some alternate text