HTML Course

 

Page 7 : Images II

  • Resizing Images

  • Adding height and width attributes to your images, will resize the image to your liking. Also adding the exact height & width of your image, without resizing it, will speed up the load time of the image on your Web Page.

    Click Here For A Tool To Find Out Image Sizes

    HTML Attribute
    Effect

    HEIGHT="number"
    Specifies the height of the image in pixels

    WIDTH="number"
    Specifies the width of the image in pixels

    Here is an example on the placement of these attributes within your image code. I will be using the exact image size to aid in the loading of the image on our Web Page.

    <IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALT="sunset">

    If the exact height and width is not known. Then add either the width or the height alone. The browser will figure the missing attribute on it's own.

  • Aligning The Image
  • You can control how images align on your Web Page. By default everything on the document aligns to the left. Here are the attributes for alignment of images.

    HTML Attribute
    Effect

    ALIGN="bottom"
    Aligns the bottom of the image with the
    baseline of the current line

    ALIGN="left"
    Allows an image to float down and over to the left margin. Subsequent text wraps to the right of the image

    ALIGN="middle"
    Aligns the baseline of the current line with
    the middle of the image

    ALIGN="top"
    Aligns the text with the top of the tallest
    item in the line

    ALIGN="right"
    Aligns the image with the right margin and wraps the text aound the left

    HSPACE="number"
    Controls the horizontal space around the
    image in pixels

    VSPACE="number"
    Controls the vertical space around the
    image in pixels

  • Centering The Image
  • Centering the image requires the use of two tags. The <CENTER> and </CENTER>

    This is how it would be used in your document:

    <CENTER>
    <IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALT="sunset">
    </CENTER>

  • Aligning The Image To The Right
  • The alignment tags are nested within the image code.
    This is how it would be used in your document:

    <IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALIGN="right" ALT="sunset">

  • Aligning The Image To The Left
  • Text and images automaticlly default to the left. The ALIGN="left" tag is use in conjunction with text.
    This is how it would be used in your document:

    <IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALIGN="left" ALT="sunset">

  • Using The HSPACE And VSPACE
  • The HSPACE and VSPACE will put blank space around your images. This will keep your text from being right up close to your images. I will show the HSPACE tag for horizontal spacing but the VSPACE tag is used in the same way to have some vertical spacing around your image.
    This is how it would be used in your document:

    <IMG SRC="aruba.jpg" HEIGHT="361" WIDTH="251" ALIGN="left" HSPACE="40" ALT="sunset">

    You Will See Some Example Pages Using Alignment Tags On The Next Page.