How to add an image in html

If you are using a program like WordPress or Blogger/Blog Spot, you’ve seen image tags before.

Let’s build one for our website.

<img src=” ” />

That is an image tag. It’s self contained.
‘img’ stands for image and ‘src’ stands for source.

So where is the source of your image?

Remember at the beginning of this tutorial I asked you to create 2 folders?
One for your html files and a second within that folder called images.
You will need to put an image into the folder called images.

It is very important to have these 2 folders setup in this way, if you do not, this code will not work.

Click the download icon to download the image :  

Between the <body> and </body> tags type: <img src=”./images/littleGuy.png” />

 

NOTE! the . before the / – that’s very important.

Click Save.

Go to your html file.

Double click on index.html

Your web browser will popup and you should see this:

 

This is a great start!

Considering you’ve only been programming for …… mmmm ….. what?  A half hour tops!

Let’s do some more >>>