Although the majority of a web page is informational text, images really improve the look of 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 Image Element
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.
Although not mandatory its good practice to get into the habit of also including the width and height attributes when using the <img> tag to avoid flicker on page load.
Creating A Webpage
Lets create a webpage for our image tag to see what it does!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- Copy and paste the following code into the document.
<!DOCTYPE html> <!-- Introduction to Semantic Tags --> <html lang="en"> <head> <title> HTML Semantic Tags </title> </head> <body> <h2>Wow That Pie Looks Good!</h2> <p>Nothing Beats Chicken pie</p> <img src="http://htmldoctor.info/images/chickenpiesmall.webp" alt="Chicken Pie" width="150" height="100"> <h2>More Image Attributes</h2> <p>Well A Bigger Chicken Pie Might!</p> <img src="http://htmldoctor.info/images/chickenpiesmall.webp" alt="Same Image But Bigger" width="300" height="200"> </body> </html>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
formattags.htmlfile to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.
After doing either of these you should see a similar webpage in your browser to the following screenshot:
Ok there's a lot going on here so lets go through the attributes and what they do.
Mandatory Attributes We Used
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 HTML5 Reference section.
Lesson 8 Complete
In this lesson we learned about how to add imagery to our web pages using the <img> tag and some of its attributes.
In the next lesson we learn how to get from A to B using links.
The <img> image tag