Adding Images

What We'll Be Building!

Texts are fine, but a picture is worth 1000 words. We're going to learn how to use images in your web pages now.

To add an image to you HTML page you must use the 'image' tag.

The image tag is written as: <img>

Tag Attributes

HTML tags can have attributes. Attributes provide information the tag can use in a variety of ways.

Image Tag Attributes

Image tags have 2 attributes that should be included when using them.

  • alt - Tells the image tag what to display if it can't get the image it should show.

  • src - Tells the image tag where to find the picture it's supposed to show.

funny_cat.html
<!DOCTYPE html>
<html>
    <body>
        <h2>HTML Image</h2>
        <img src="https://miro.medium.com/max/1280/0*RVC3MtVpPyWtEddF.jpg" alt="funny-cat" width="500" height="600"/>
        <img alt="Alternate title shows up if image can't load" src=""/>
    </body>
</html>

Exercises

Copy and paste the above code into an html document and name it funny_cat.html. Using that document complete the exercises below:

  1. Add an image to your funny_cat.html page, using the example above as a reference.

  2. Try replacing the content of the src tag with a blank space, so your tag looks likesrc=" ". Refresh the page and see what happens. Make sure your alt tag has something in it.

  3. Try adjusting the values in your width and height tags. Refresh your page and see happens.

  4. Go to the internet and find an image you'd like to display. Create an image tag for that image.

PreviousFormatting TextNextLists

Last updated

Was this helpful?