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.
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.
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.
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.