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.
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.
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.
In the next lesson we learn how to get from A to B using links.
The <img /> image tag