This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
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.
More about using graphics in modern Web design.
Let’s go find some graphics! Go to any of these three sites:
- http://www.free-graphics.com/
- http://www.hellasmultimedia.com/webimages/
- http://www.freegraphics.com/
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:
red_flower.jpg.
Let’s say you’ve named it something really generic, like picture.jpg.
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.)
<img src="images/picture.jpg">
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>
The 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.
<div><img src="images/picture.jpg"></div>
The 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 img tag.
The 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 images folder.
More about images, including height, width, and other values.
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.
