Link - Don't Embed
If you're a teacher building a Web site for your class, or you're just getting into building a Web site, there are many WYSIWYG ("What you see is what you get" - pronounced "whiz-ee-wig") programs that let you build websites without using html (hypertext markup language) code. But it's good to know some of the basics of html. More of that in an upcoming Tech Tip. Kids today know html code (although they may not know that they do) since it's the way they "pimp" their MySpace or their Facebook sites. If they know what they're doing, so should you.
But if you're trying your hand at building a Webquest, or some type of site that uses photos, it's very tempting to simply click "insert," then "picture," and then browse your folders to find the picture you want to include in your site. The problem? You've embedded the photo into the page you're building. If it's a large photo, like a .jpeg or .jpg file that you've taken with your digital camera, it could be very large, and take a long time to display is someone is using a dial-up connection.
If you must embed a photo, the preferred picture format to use is a .gif file. jpegs and jpgs can be converted into gifs rather easily, but sometimes, they lose their quality when you convert them. jpg's larger sizes allow great detail to be translated into photos you can print with excellent results in large format (like 8 x10s or larger), but when they're converted into small files that load quickly on a computer screen, much of the detail information is lost, resulting in a "grainy" looking picture.
If you want to photo to load quickly and still retain the quality of the jpg, you could "link" to those photos. Open an online account with a photo hosting service (like Photobucket at http://www.photobucket.com). Then, you can upload jpgs to that site. Each photo gives you four different html code "tags" that you can then use to include your photos in emails, Web sites or eNewsletters. You can copy the code that's most appropriate for your needs, and then paste it into your Web page.
But don't paste it into your WYSIWYG page - you won't get the picutre...you'll get the code that makes up the link to your picture. You must find the place in the html code where you can paste the code you just copied.
On most Web creation programs, if you highlight the text right before where you want your picture to appear, you can then click a tab to view the html code (some programs call it "view source," others just have a tab that says HTML. Check your program's "Help" file to see how you can see the html code of the page your working on). If the text has been highlighted, it should be highlighted on the html code as well. Left click at a point following the highlighted text to create an insertion point, then "right click" to display the edit menu, then choose "paste" to paste your html code for the picture into the html page.
If you're working off-line, you will probably see a box with a red "x" in it, which idicates that the browser has created a space for the photo, but since the computer is off-line, the photo can't be accessed. Once you've published your site, or get connected to the Internet, you should be able to see that photo.
But what if it's too big or too small? If it was embedded, it could simply be resized. However, the size of the file would remain the same, and the load time would be just as slow. A future Tech Tip will tell you how to tackle this task.
© Michael V. Ziemski, Instrumediatech, 2008 (Original Publication Date: 20080211)
Back to Tech Tips index
|
