HTML XHTML Image Code Tutorials

How to insert an image into a web page

The code below shows you how to insert an image into a web page.

<!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" lang="en">

<head>
<title>Web Development Tutorials.com</title>
</head>
<body>
<p>
<img src="yourimage.jpg" border="0" width="244" height="33" atl="some text" />
</p>
</body>
</html>

The code above inserts the image below.

The <img> tag is used to insert an image into a web page. The <img> tag should include a src attribute that specifies the location and name of the image file. The value of the src attribute must be enclosed in quotation marks.

HTML, XHTML and the image tag
HTML does not require the <img> tag to be closed, however, XHTML does require the <img> tag to be properly closed. The <img> tag can be properly closed by inserting a forward slash (/) before the closing bracket (>) and with a blank space preceding the forware slash.

How to adjust the width and height of an image

Every image on a web page has a specific width and height. If the width and/or height is not specified, the image will be displayed on the web page at its full width and/or height.

The width attribute is used to specify the width of an image and the heigth attribute is used to specify the height of an image.

How to add alternate text to an image

Alternative text is diplayed on a web page when an image is not available or when the mouse is hovered over an image. The alt attribute is used to display alternative text to an image. The value of the alt attribute can be any text that you want, typically a description of the image.

Use the text editor below to practice what you have learned.

How to use an image as a link

The code example below shows you how to use an image as a link.

<!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" lang="en">

<head>
<title>Web Development Tutorials.com</title>
</head>
<body>
<p>
<a href="myimage.jpg"> <img border="0" src="image.jpg" width="244" height="33" /></a>
</p>
</body>
</html>

The code above produces the image below which is used as a link.