And here we have an image. Yay! Images! They're really quite simple. Still pictures and animated ones work the same way. The best two formats are .gif and .jpg (or .jpeg) files. The tag is <IMG> and the two main extra attributes are SRC (short for "source") and ALT ("alternative"). For the SRC part, you have two options. For both of them, you need to either own the image (eg you scanned in your senior picture) or get permission from the person who does (email the owner of the website where you found it).
Go ahead and copy this image. To do this, right-click on it and choose "Save Image As..." Navigate to your folder (My Computer, S: drive, Students, CS107, username) and save it there. Call it "bernie.jpg".
An even better strategy is to have a separate folder for images. From the desktop, go to your folder and create a new folder called "images". Move bernie.jpg into that folder. When you save any other images, keep them there.
If you saved the image from another site to the server, or to a disk, or it's somewhere on your side of things, you merely need to mention where it is in relation to the directory of that webpage. This is the exact same thing as with links. With your image called "bernie.jpg" the SRC="bernie.jpg". But because you have a seperate directory for images, and likely directories with that one, your source for a high school prom photo could be SRC="images/winter_1999/buck_and_sue3.gif" and so forth.
Put the "Roll out the barrel" photo on your new page. Find the lyrics online from google.com (search "roll out the barrel lyrics" for example) and put them underneath it.
The other option is direct borrowing. This method tells the viewer's computer to go to some other website and go through its files and pull the picture from there. If the page you're borrowing from shuts down, so does your image! This is not a very common method for producing images. Let's say you want to do it anyway, and really like google.com's logo. View the source for the page and look for the <IMG> tag. Notice that the location of the image is within a subdirectory of google.com. Our source would then be:
<IMG SRC="http://www.google.com/images/title_homepage4.gif">The <IMG> tag also does not close.
What is the folder called that google.com uses to store its images? You probably have to scroll to the side on the source code to find this.
The ALT tag helps people with broswers that are text-only (ie can't show graphics) and helps when you fuddle your picture location and nothing shows up.
Try typing in an <IMG> tag with a phoney image location and something in the ALT. (Use double quotes!)
The text you typed in for ALT shows up, the user knows what sort of thing would have come up, and you've earned a saving grace and still have a shot at "savy".
You can also regulate the height and width of an image. Check out the google logo's tag again. It shows a WIDTH="305" and HEIGHT="115". The numbers are in pixels, and those numbers should give you a general idea of proportions. If you don't regulate the size, an image can be much too large or too small. Here's the same picture, but with the dimensions of the google logo. Notice how it is distorted.
There is also a link attatched to this demented thing. See how, in the code, there is simply the <A> anchor tag around the <IMG> tag. If you put a caption in, and you want that to be a link as well, just insert it before you close the anchor.