graphichead.gif (2644 bytes)


       Most people today are very familiar with the World Wide Web, and quite a few of them have used the Web in one way or another.  Most people have some idea of the history of the Internet [evolving from a military research project, to a scientific/university-oriented arena, and finally becoming the commercial juggernaut it is today].  But most people aren't aware of the tremendous changes the Internet has undergone visually.  Let's take a quick peek, shall we?

       So, how do you get images for your webpages?  If you draw or paint--or take photographs--you could use a scanner to make digital copies of your work ...or do your drawing on a computer.  Those copies or creations could be saved as files on a computer, and your images could then be displayed on your webpages.  The pictures you brought in this morning have been--or will be--scanned and saved as files, and you will be able to use those.  If you have access to a digital camera, the images taken with it can be downloaded directly to a computer, saved as files, and then used on webpages.  These are the best kinds of sources, because personally created work is copyrighted by you, and you can use it freely without worrying about copyright infringement.

       Okay, he said the magic words, copyright infringement.   Just what does that mean?


       We're about to copy a few images from the Web, and put them on your homepage.   Rest assured, these images are available for your use, they are public domain images.  The process is very simple, so pay attention while we do this the first time, and you'll never have a problem with it again.
lion.jpg (15989 bytes) tiger.jpg (14483 bytes) teddies.jpg (24573 bytes)
Lions and tigers and bears, oh my!

       Point [with your mouse pointer...on the screen] to the image above you want to copy.  When your mouse pointer is touching it, click and hold down the mouse button. [PC users--click and hold down the right mouse button], and choose Save Image As... from the drop down menu.  A dialog box will pop up, click on the folder you want to store the image in [or just choose the destop and drag the image into a folder later].  Give the image a new name if your wish, but make sure you keep the same file extension.   Example--You want to save an image named Jar_Jar_Binks.jpg, but you just want to call it goofy. Type in the name goofy.jpg, then save it.  If you type just goofy, the browser won't know what kind of image it is.  If you name it goofy.gif, it may also confuse it.  If your browser doesn't recognize the image, or the image is corrupted [damaged] in some way, all you'll see is something like this.

       That's it.  You've saved an image.


       Placing the image on your Webpage is almost as easy.  Open your template.html file in SimpleText.  Find the spot on the page where you want the image to appear.   Type in this code

<IMG SRC="name_of_image.jpg"> 

       Insert the name of the image in place of name_of_image, put a period, then add the correct type of image file jpg [sometimes seen as jpeg] or gif, and your image will appear at that spot on the page.  There are some other attributes we could add to the IMG tag, which will enhance the way images are displayed, but we'll get to those later.

Click here to go Back to Tuesday's schedule.

This page was last edited on June 18, 2001.

URL = http://teachertech.rice.edu/Materials/GT2001/East/day02/graphics1.html

 


These pages were developed through GirlTECH, a teacher-training program sponsored by the Center for Excellence in Education (CEEE) with support  from the National Science Foundation through EOT-PACI.
Copyright   Michael Sirois, GirlTECH, June 2001.

last edited, ms  6-18-2001, 20:54.