ImagesS2C Home « Images

Although the majority of a web page is informational text, images really improve a web page. So liven up your web pages with images and see how well placed images can really enhance a web page. Basic image use is the topic of this lesson and the practical sees us adding some imagery to our web page.

The <img /> Tag

The <img /> tag is a self closing tag used to create an area on the page to hold the referenced image. The src and alt attributes are mandatory when using the <img /> tag.

Open the file with Notepad we created and tested in Lesson: 6 Ordered and Unordered Lists

You saved the file to your computer in the C:\_HTMLBasics folder as lesson_6_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents:


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Basic HTML Lesson 7 - Images
</title>
</head>
<body>
<h1>Images and Image Attributes</h1>
<h2>Wow That Pie Looks Good!</h2>
<p>Nothing Beats Chicken pie</p>
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />
<h2>More Image Attributes</h2>
<p><strong>Well A Bigger Chicken Pie Might!</p>
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Same Image But Bigger" 
     width="300" 
     height="200" />
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_7_webpage.html and close the Notepad.

save images

Viewing Our Changed File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

images

Required Attributes

Ok there's a lot going on here so lets go through the attributes and what they do.

The src attribute is mandatory whenever using the <img /> tag and specifies the URL of the image (the actual location where the image is stored).

The alt attribute is mandatory whenever using the <img /> tag and specifies an alternate text for the image (provides information if the image cannot be loaded).

Optional Attributes We Used

In the screen image above we used the same image but it appears in two sizes.

The width attribute is optional when using the <img /> tag and specifies the width of the image (you can make the image narrower or wider).

The height attribute is optional when using the <img /> tag and specifies the height of the image (you can make the image taller or shorter).

For a complete list of all the attributes available use the HTML Reference section.

Play around with the width and height attributes and see what results you get.

Lesson 7 Complete

In this lesson we learned about how to add imagery to our web pages using the <img /> tag and its mandatory attributes src and alt

We also manipulated the image using some of the <img /> tags optional attributes width and height.

Related Tutorials

HTML4 Advanced Tutorials - Lesson 3 - Interactive Images

CSS Intermediate Tutorials - Lesson 1 - Backgrounds

What's Next?

In the next lesson we learn how to get from A to B using links.

HTML4 Reference

The <img /> image tag

go to home page Homepage go to top of page Top