Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
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.
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.
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>