# Adding Images

## What We'll Be Building!

![](https://3764443643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1CV_PDi4uSEWhb3GlC%2F-MBVk4OxCpH8ZrgdpNLY%2F-MBVmOpm-UvJl4fHZ2k-%2F5.JPG?alt=media\&token=17b575f4-256b-4517-bcb2-0bfecd3a185e)

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.

{% code title="funny\_cat.html" %}

```markup
<!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>

```

{% endcode %}

### 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 like`src=" "`.  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.
