To make an image appear on a Web page, the code of the page must indicate where the image can be found on the Internet. The most widely-accepted image file formats on the Web are gif and jpg but the png file format is gradually gaining more support among contemporary Web browsers.
Type the code below into any text editor and save it with the name "lesson14.html" in your "mySite" folder. There is a new tag at the top of the document. Read on to learn all about it. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 14: Placing Images</title>
</head>
<body bgcolor="white">
<h1>Placing Images</h1>
<p>Here is a picture of Dr. Estrella.</p>
<p><img src="http://www.makepages.com/images/estrella.jpg" alt="Picture
of Dr. Estrella" width="240" height="320" /></p>
</body>
</html>
Like the <br /> and <hr /> tags, the <img /> tag is a self-closing tag in XHTML. The src attribute indicates the location of the image on the internet. In the assignment above, a full URL is used because you do not yet possess any images in your "mySite" folder. If you did have a copy of my picture in your "mySite" folder, you could use the following code instead.
<img src="estrella.jpg" alt="Picture of Dr. Estrella" width="240" height="320" />
More likely, however, you would store the image file in an images folder located inside your "mySite" folder. In that case you would use the following code.
<img src="images/estrella.jpg" alt="Picture of Dr. Estrella" width="240" height="320" />