HTML Cheat Sheet

Images

Overview

Time to have something other than text on our site! First things first we will need an image, you can just download this one:

Image of a cat

To download it, right click it and click 'save image as', then navigate to your website directory and save it there as cat.gif.

To create an image we use an img tag, with a special src attribute which contains the name of our image.

Examples

In the example below there's a few things to note, we've included the images name 'cat' as well as its file extension/type '.gif'.

There are many different types of extension such as .jpg and .png, if you're having trouble getting your image to work make sure you have the right extension.

It's also worth noting that images do not need a closing tag.

HTML

<img src='cat.gif'>

RESULT

If you specify an image that doesn't exist you'll get an ugly box.

HTML

<img src='thisdoesntexist.gif'>

RESULT

Resizing Images

We can add width and height attributes to scale our image.

HTML

<img src='cat.gif' width="40">
<img src='cat.gif' width="40" height="100">

RESULT

Image sourced from Pusheen, http://pusheen.com/