This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Adding Images to Your Page
Want to add an image to your page itself? Here’s how you do it.
We’re going to visit three of the largest free graphics providers on the Internet, where you get to choose one (or more) graphics, free for you to download and put on your page.
Note: Many modern designers, especially professional and commercial designers, don’t use such flashy, splashy graphics on their pages as you’ll see on some of the free graphics pages. They prefer more subtle and lower-key effects with their images. But you’re designing this page for yourself. You use what you like.
Let’s go find some graphics! Go to any of these three sites:
All of these sites make their graphics free for you to use. Sometimes they ask you to link back to them. That’s the norm on the Internet, and is not only best practice, but common courtesy as well. We’ll do that in a bit.
Spend some time – as much as you want, really – poring through the kajillion graphics on this site. For now, just pick one. We want to learn how to get them on our site properly. If you want to strew graphics all over your site by the handful, that’s your decision, but I’ll just lead you through posting one.
Got a graphic? Here’s the (usual) way to download one, if you’re not already aware: right-click it, click “Save Picture As” or “Save Image” or whatever choice your menu gives you, and save it into your
images folder. You’ll probably want to change the name from whatever the site calls it, usually something like
4562482111574woof.jpg or some other string of incomprehensible gibberish. Go ahead and rename it, but:
- don’t, don’t, don’t change the file extension – leave a GIF as a GIF, a JPG as a JPG, and a PNG as a PNG; and
- name it something that is all one word – no spaces. Trust me, your browser (and your visitors’ browsers) will appreciate it. If you must use more than one word, don’t separate them with spaces, use the _ instead, like this:
Let’s say you’ve named it something really generic, like
Here’s the code for putting it into your Web page. Let’s put it right above this line of code, so it will be on the bottom of your page. (You can move it to where you like after you learn how to get it on your page.) Above this line of code:
<a href="#top">Top of Page</a>
copy and paste this code. (Change
picture.jpg to the name of your image.)
This is the
img tag. Like our friend the
br tag, it is one of the very few “standalone” tags in HTML; in other words, it doesn’t need a closing tag. It closes itself.
<img>DON’T DO THIS. There’s no such thing as a </img> tag!</img>
src stands for source.
If you don’t see your image, and you get an empty box or a rectangle with an ugly red X, your
src is wrong. Check to see that you’ve written the value correctly. Getting your file structure organized keeps this from happening, mostly.
Since we’re learning best practices, we’re going to put this image tag inside of another, special tag, the
div tag. Don’t worry about what a
div is right now, you’ll learn about it later.
img tag does best inside another tag (specifically
block elements, but you don’t know about those yet). You can also use
<p> </p> tags to enclose an
src portion of that string of code is the source of the image, telling the browser where to find the image — in this case, inside your
Making Our Graphics Accessible
Like our links, our graphics need to have tags added to them for blind and disabled users. Here’s what we add:
<div><img src="images/picture.jpg" title="name of the graphic" alt="a short description of the graphic"></div>
Why both title and alt? Two reasons: because the tags have different functions for screen readers and other assistive devices, and because different browsers show either the title or the alt information when you "hover" over them with your mouse.
There’s another way to add descriptive text to your image, called LONGDESC. If you need to give a fairly long description of a particular image, you’d use the LONGDESC tag to add a link to a separate Web page to give that information. We’re not going to get into that here.
You’ve just scratched the surface of placing images in Web sites, but don’t worry, there’s plenty more with images (both background and standalone) coming down the pike.
Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours. Why the example code is not exactly like the code you’re generating.