Screen capture, images & tags

Grab a screen image with any computer
(well, Macs & PCs anyway)

On a Macintosh you take a picture of the whole screen with the shortcut keys COMMAND-SHIFT-3, or capture part of the screen with COMMAND-SHIFT-4. The picture appears as a numbered picture.png file on your desktop.
(There is also a utility named "Grab" in Applications/Utilities on the hard drive, but the two keyboard shortcuts may be all you need.)
With Windows, you can do almost the same thing: To make a copy of the active window, press ALT+PRINT SCREEN. To copy the entire screen as it appears on your monitor, press PRINT SCREEN. On Windows, the picture is stored in the Windows clipboard. Open Photoshop or another imaging program and choose "EDIT... PASTE" to see your captured image. (You could even paste it into Microsoft Word.)
When in doubt: On either kind of computer, go to the help system and search for "screen picture" or "screen picture shortcut."

Whichever computer you have, don't rely on HTML to resize your images. Use Photoshop or another image editor to crop, resize and save the image for Web use as a JPG or GIF file. To make your pages load faster, use the smallest file size that doesn't show signs of deterioration on screen. JPG is often better for detailed images; GIF for large areas of solid colors. You can preview both in the "save for Web" four-panel display in Photoshop.

Don't just put an image on your page without giving credit to its creator, linking back to its source, or writing a caption, if that will help the viewer.
Any significant image on your website, such as a screen snapshot in a site review, should have "alt text" in its "img" tag to give some information to users of non-graphical browsers. This is even more important when you use a text-image to deliver essential information, such as the name of your site. (See the example on the right.) Search engines like Google can't read JPG files, but they do read "alt text." You also can include a "title" inside the image tag; it will appear as a "tooltip" when you roll a mouse over the image. Try it! (See the source code of this page for an example. Thanks to Robert Ostrowski for the image from an early draft of his page.)

How to place images on your pages
- See W3Schools html images section, which shows how to use "align=" to push an image to the right or left of the text.
- See its CSS "float" tutorial for an alternative technique. The CSS approach is especially useful when you have several images being treated the same way. Float also can be used to align other page elements, such as text columns and menus.

Reminder: You can use "View... Source" or "View... Page Source" with any browser to peek at the HTML code of any page, including this one, to see how the tags work.