Web Images 

  • .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.

    • Place an image on page

    <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

    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>

    To get an image to align to the right, you could use the ALIGN tag.

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

    Aligning Text with Images

    Sometimes, of course, you won’t want an image to stand all by itself. Instead, you will want to incorporate it into other elements of your Web page. One neat thing that you can do is wrap text around an image. This means that the text automatically places itself around an image that you place on the page. Believe it or not, you have already learned all the tags and attributes necessary to do this. See how this text wraps around the image of the computer? All I had to do was use this tag:

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

    If you want your image to justify to the right, simply use this tag:

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

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

    Whew! This tag is getting pretty long, isn’t it? I added two new attributes. The HSPACE attribute stands for "horizontal space", and it creates horizontal space between the image and the text, measured in pixels. You can make the space as big or as small as you want to. The VSPACE stands for "vertical space", and it creates vertical space between the image and the text. Look at the difference.

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

    This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image.

    One More Attribute

    Here’s a neat trick, the ALT attribute. If you are using Internet Explorer right now, move your mouse over this image:

    Hi there!

    Did you see the little box that popped up that said, "Hi there!"? Here is how I did it:

    <IMG SRC="images/computer.gif" ALT="Hi there!">

    Changing Image Size

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

    Here is the same image with a height and width of 200 pixels.

    <IMG SRC="images/computer.gif" HEIGHT="200" WIDTH="200">

    And here is the same image with a height and width of 50 pixels.

    <IMG SRC="images/computer.gif" HEIGHT="50" WIDTH="50">

    <IMG SRC="images/computer.gif" HEIGHT="25" WIDTH="150">

    <IMG SRC="images/computer.gif" HEIGHT="250" WIDTH="80">

    Using an Image as Background

    <BODY BACKGROUND="image.gif">

    ____________________________________________________________________________________________________

    Page 4

    Lessons

    Web Design II

     
    Make a Free Website with Yola.