link to hitmill.com home page


Web Clipart Tutorial

Web clipart tutorial includes an introduction to images, coding an image for your Web page, where to find clipart on the Web, and Introduction to Graphics Software.

animated GIF image of frog

Coding The Image Tag

This Web clipart tutorial is for students who want to put an image onto a Web page using HTML. You will be using an image tag, <IMG SRC="" BORDER="0" HEIGHT="" WIDTH="" ALT="">
If you know the height and the width of the image in pixels, plug in those values between the quotes for the height and width. Your page in the browser window tends to load a bit faster with these numbers in place and if you have a broken image link, a space of those dimensions will be used and not distort your other content. The ALT="" contains information you want the viewer to see when they mouseover the image, such as a description of the image. In some browsers, with the images turned off, this ALT information can still be read. Last but not least is the path to the image, the SRC part of the image tag. Let me just say now that if you have ambitious plans for your site, place all your images into a folder called images. This way, calling an image file from another folder would give the SRC="" information or path to be "../images/imagename.extension". (Use one set of ../ for each folder you would have to back-up from to reach the images folder in your Web structure). If I am buried in the "Vacation" folder but have to back-out to "see" the images folder, then the path for the SRC="" information is simply "../images/imagename.extension". On the other hand if the image is in the same folder as where you will be calling it from, then the SRC="" information should be "imagename.extension".


What Types of Image Formats for the Web?

Images suitable are photographs in the .JPG (JPEG) format, or images in either the .JPG format or the .GIF format. See Web Images for more information about Web images. Recently, some browsers have also been able to display .BMP (Bitmap) images.


Free Background Textures


Finding Images, Public Domain
vs. Copyrighted Images

Start your specific image search by going to a search engine and typing a general category such as "animated gif" or "transparent gif" or "free jpg" and then when you find the return page you will be able to narrow your search.
Google has an image search engine where you can enter the exact type of image, such as "animated airplane" but you have to careful that any pictures you harvest from Web pages are not copyrighted. Write to the webmaster or someone at that web site and ask permission to use an image obtained in this manner. You may not just arbitrarily take images from other Web pages and use them -- you will be in violation of copyright law... use pictures and images in the public domain, OR ASK PERMISSION of the owner of the Website. When I have asked I have only been told "no" once in 3 years -- most people are pretty helpful. Give credit to any site whose images you are using with permission.


Getting the Image Onto Your Own Computer

Right click on the desired image and click Save As.Pick a spot on your computer in a folder to save the image to, such as the images folder for your site. The image will be copied to the location on your own computer that you specify. Using Web images takes a little practice but once you use clipart and images a few times it will seem very easy.


Web Images with Machine Embroidery and
Designing Your Own Images

I know of several people who routinely take an image from the Web, interface it digitally to an embroidery sewing machine, and stitch the image in color onto cloth. This is only part of the art of "machine embroidery". Many machine embroiderers also design their own images.
Read Introduction to Graphics Software. I use PhotoPaint, PaintShopPro, CorelDraw, and PhotoShop to design my own images. Other images I use from the public domain, from clipart sites. When images are located on other people's sites, or corporate sites, ask permission before using the image.
See also: Code An Image For Your Web Page and Web Images: An Introduction to Images.


Places on the Web to Find Clipart:

Animated GIF Sites


JPG Search



Tutorial: Optimizing Animated GIFs
Royal Frazier's GIF Software List
Google's Clipart Links
Steph's Gifs-n-Stuff Bullets, bars, welcome signs, Halloween, backgrounds, email, buttons and so much more. This is a "must visit" if you need free clipart.
Barbara Durhams GIF ART Studio ~has horizontal bars.
Image Archive Images plus many links to other image sites
3-D and SIRDS images
Clipart Connection.Com: Free Web Clipart A HiTMilL recommended site.
CLIPART.COM This is a great site!
Miningco.com clipart (About net)
Barry's Clip Art Server
Manual of Traffic Signs
Free Buttons and GIF Animations
Free Images at graphicsfactory.com




Updated 01 January 2007

© hitmill.com
All Rights Reserved