How To: Put An Image Into A Web Page

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

---

Let's Break This Down

First, you need an image in the .gif or .jpg 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.

Browser View

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 about the width and height attributes? I could have written the above code as <img src="images/trylon.jpg" alt="Photo Of Trylon And Perisphere" width="99" height="150" />. Why didn't I do that?

Because the width and height of an image is a dimension best left for CSS too.

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 a purely decorative or design element. For instance, the bluish gradient image that is tiled on the left side of this page is a decorative image that is NOT embedded in the page. I used the background property of CSS for this kind of image.

Want To Learn More?

You're at the right place because I will teach you this and much more, one-on-one, in my online web design Workshop, Introduction To XHTML And CSS. Now here's the good news. You can start right now!!

If you want to learn more about CSS, then sign up for my Practical CSS online workshop launch list.