Image-ine This

Adding images to a web page can make it more interesting for your audience. When we say "images" we mean things such as pictures, clip art, and buttons. Whether you are sharing your interests through images or using them to sell a product, they are definitely a must for every page.

There are several important things to remember when you're adding images.

  • Don't clutter your page. We know there are a ton of cool images you'd like on your page...But if you have a lot of pictures, think about ways to put them on different pages or thumbnail them.
  • Save your images to the same directory/folder or subdirectory as the web page you are putting it on.
  • Size your images. Give them a height and width. This will help browser to download your page more quickly.
  • Use the Alt tag to make your page more accessible.
  • Don't be afraid to align your images and text.
  • Basic Inserting

    • <img src="file_name.jpg">



    The HTML code looks like:

    <img src="music.jpg">

    Back to Top
    Sizing

    You might have noticed the previous picture was a little large. How's this?



    The HTML code looks like this:

    <img src="music.jpg" width=350 height=210>
    Back to Top
    Image Alternative

    What happens if someone is reading your page from a text-only browser or cannot download your images? Then all your effort in inserting images has been for nothing?! Not quite. By using the alt tag you can substitute that image with something meaningful. Place your mouse cursor on the previous pictures for a couple of seconds. Then place it on the picture below. Notice something?

    Girlstarters learning about math in music.

    The HTML code looks like this:

    <img src="music.jpg" alt="Girlstarters learning about math in music" width=350 height=210 >
    Back to Top
  • Aligning Text

    • Sometimes you want to align the text with the image to have less empty space on your page.

    Girlstarters learning about math in music.

    This picture was taken at the first Girlstart Summer Camp of 2000. We learned about how mathematics is used to describe music. Some of the girls even brought in their own instruments!




    The HTML code looks like this:

    <img src="music.jpg" alt="Girlstarters learning about math in music" width=250 height=140 align="right">
    <p>This picture was taken at the first Girlstart Summer Camp of 2000. We learned about how mathematics is used to describe music. Some of the girls even brought in their own instruments!</p>

    Back to Top