How To Add An Image To A Web Page

In This Tutorial, I Show You How To Put An Image Into A Web Page

Photo Of Trylon And Perisphere

Do you know what this is?

Chances are, you didn’t see the Trylon and Perisphere when they were featured in the 1939 – ’40 New York World’s Fair. They had a unique beauty and grace which must have pierced the Flushing Meadows skyline. Unfortunately,they are long gone.

But you’re not here for an architectural history lesson. You want to know how to get an image into a web page. To ask it the fancy way, "How do you embed an image into a web document?"

Let’s Break This Down

First, you need an image in the .gif, .jpg or .png format. Can’t go anywhere without an image.

Next you need the code to embed the image into your page.

Here we go.

Code View

<img src="images/trylon.jpg" alt="Photo Of Trylon And Perisphere" />

It all gets started with the "img" tag. I’ll bet you can figure out what that stands for.

Next,comes the "src" (source attribute) to indicate where the image is stored. In this case, I’m using a subfolder called "images" where I keep all of my images. This subfolder is located in the same folder as the .html file for my web page.

In the subfolder my image’s file is called "trylon.jpg."

Lastly, I must use the "alt" attribute to provide an alternative text description which will be seen on the web page if the image is not seen or downloaded. In my example, it’s clear that there is a "Photo Of The Trylon And Perisphere," so the alternate text will not appear. But if someone were using a screen reader those words would be read aloud.

Browser View

Photo Of Trylon And Perisphere

Yeah, but…

How did I get those nice white and black borders around the image that appears at the top of the page? I used Cascading Style Sheets’ padding and border properties. That’s all I did.

What Are Some Other Things You can Do With Images?

As it turns out, there are two ways to use images in web pages and they are very different. The first is to embed them as you’ve just seen. You embed an image when the image conveys information to support what the page is about. Photos, illustrations, logos, and images containing text are instances of when to embed an image.

The other way is to use images for strictly decorative purposes. For instance, the white icon in the blue buttons on this page are decorative images that are NOT embedded in the page. I used the background property of CSS for this kind of image.

8 thoughts on “How To Add An Image To A Web Page

  1. I tried to add an image as you suggested above but it doesn’t show up. I did get a small black box with an x in it but no JPG. Could you suggest why this didn’t work/
    If you go to click classifieds on the bottom and then View Source, its on line 127.

  2. If I use any image from a specific folder of my PC then how to make this? Such as .. image name “visiting card” and it is a png file. I saved this image in a folder of H Drive name “my images”. Then what should I do? Because I’m in trouble.

  3. at what stage should I add my photo since I have followed all the steps but not knowing where to input the code for the image

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Happy And Start Learning HTML Right Now

Do The First Two Lessons For Free!!

Joy Of Code girl happy at her laptop

All Of My Free Web Design Tutorials