html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Basics

Lesson 7 - 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 opening <body> and closing </body> tags.


<body>
<h1>Images and Image Attributes</h1>
<h2>Wow That Pie Looks Good!</h2>
<p>Nothing Beats Chicken pie</p>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />
<h2>More Image Attributes</h2>
<p><strong>Well A Bigger Chicken Pie Might!</p>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Same Image But Bigger" 
     width="300" 
     height="200" />
</body>

Reviewing Our Changes

Ok with the changes cut and pasted into the file, your HTML code should now look like the code below.


<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://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />
<h2>More Image Attributes</h2>
<p><strong>Well A Bigger Chicken Pie Might!</p>
<img src="http://htmldoctor.info/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.

notepad

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.

notepad

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 HTML4 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 1/2 Intermediate Tutorials - Lesson 1 - Backgrounds

What's Next?

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



Ordered and Unordered Lists  << Prev           Next >>  Links

HTML4 Reference

The <img /> image tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>