By now you know enough to write a very nice, text-based Web page. That’s nice, but it sure is a little dull. As you know, it is the ability of the World Wide Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Primer, you'll learn how to place an image on a page and do some useful things with images.

A Beginner’s Lesson on Web Images

There are two basic formats for images you will find on the World Wide Web. Each is denoted to the browser by a different suffix.

  • .gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have always said "jif", like the peanut butter. This stands for Graphics Interchange Format. The format, invented by Compuserve, is very popular because it is simple. A .gif image is simply a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily. These .gif files are great for images that are not photographs. For any other image that you can think of, a .gif is probably the best format.

  • .jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it "folds it up and puts it away". Don’t worry about the technical information about .jpgs. The important thing to remember is that for Web designers, this is the best format to use for photographs.

    The names of all of the images that you will use on your Web pages will end with one of these two suffixes. For example, an image of a duck might be called duck.gif, and a photograph of your friend might be called myfriend.jpg.

    Here are a couple of useful tips for naming images:

    • Only use letters, numbers or the underscore symbol ( _ ) when naming an image.
    • Do not use capital letters.
    • Do not put spaces in the name.

    By following these rules, you will make it easy for all browsers to load your images.

    The Images Folder

    This is a great time to talk about storing images. Until now, all we’ve done is put text on a page. You do not actually place an image into your HTML code. Instead, you store images outside of your HTML page, and when you want an image to appear on your page, you will tell the browser in HTML to go out and find the image to place on your page. Because of this, if you start placing a lot of images on your pages, you will start collecting a lot of images. It is important to store them in an organized way. I would strongly recommend creating an "images" folder.

    Stop reading this lesson for a minute. I’d like you to find the directory where you are currently storing your Web pages. Click FILE-->NEW-->FOLDER and create a folder named "images". This is where you will keep your stored images.

    Storing an Image

    Storing an image is quick and simple. Let’s practice. Now before you start, make sure that you have created your "images" folder. Now follow these steps:

    • Right click on the image of the computer below.
    • Select "Save Picture As" or "Save Image As">.
    • A dialog box will appear. Where it says "file name", give the image the name of "computer". Where it says "Save As Type", make sure that it says "GIF". If it does not, click the little arrow on the right and select "GIF".
    • Where it says "Save In:" at the top of the page, browse your computer and find the "images" folder that you created earlier.
    • Click the "Save" button. That’s it! The image has been saved.

    If you would like to, go back to your "images" folder to make sure that your "computer" image is there. Wasn’t that easy?

    Plagiarism: Don’t Do It!

    Now before we continue, you now see how easy it is to copy images from the Internet. You can go to any Web site on the Internet and copy an image using the steps listed above. Obviously, it is illegal for you to take credit for someone else’s work, so be careful when making decisions about images to use on your Web pages. Copying an image on your Web page without properly citing your source is illegal. It is a form of plagiarism, and if caught, you can be arrested and fined. To prevent yourself from breaking the law, please choose one of these options:

    • Use graphics from Web sites that explicitly give you permission to use their art. There are hundreds of sites like this. One that I like is www.clipartconnection.com. You simply type in a search word (like "soccer" or "butterfly") and you will see a page full of images that you can download and use for free, without having to cite your source. Trust me, you have lots of choices here. If you don’t believe me, go on the Internet and start a search for "free clip art" and see what you come up with.

    • If you want to use an image from a Web site that does not explicitly give you permission to use their images, you must do one of the following things:

      • Write to the Webmaster responsible for that site, and ask for written permission to use the image on your page, or…

      • Next to or underneath the image, provide the title or description of the image, the URL of the image, and the date that you downloaded it. (Example: "Landon Donovan scores a goal", http://www.sjearthquakes.com/images/donovan.gif, 17 September 2004).

      Great, now how do I place an image on my page?

      Good question. Believe it or not, you can place an image on your page with one simple tag. Here is the format:

      <IMG SRC="images/computer.gif">

      Here's what’s happening:

      • IMG stands for "image." It tells the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag. It’s that simple!
      • SRC stands for "source." This is an attribute. It's telling the browser where to go to find the image.
      • images/computer.gif is the location of the image. Since we are good Web designers and we have created an "images" folder, the first part of your location should be images/. Then you’ll type the name of the image, followed by a dot and the suffix (usually .gif or .jpg).

      Placement On The Page

      Now let’s learn how to place an image on the page. The default is justified to the left. That means if you write an image tag on your Web page (like the example above), the image will show up on the left side of the page.

      If you want to have an image placed in the center of the page, you can use the <CENTER> and </CENTER> tags that you already know. So the HTML code would look like this:

      <CENTER><IMG SRC="images/computer.gif"></CENTER>

      Finally, to get an image to align to the right, you could use the ALIGN tag. Wait a minute. Doesn’t that sound familiar? Remember when we used the ALIGN attribute to work with the P tag? Well, this attribute works the same way with the IMG tag. So if you went this route, the HTML code would look like this:

      <IMG SRC="images/computer.gif" ALIGN="right">

      •  

       
       
       
       
       
       
       
      Make a Free Website with Yola.