Images for Web Pages

Note: Most of the links have been removed from this page.

You might expect that images can be embedded directly into a web page. But unless you use something like SVG (Scalable Vector Graphics) or Canvas, you will need to use <img src="graphic_filename.extension">. (Extensions for photos are often .jpg or .jpeg)

The image file will need to be somewhere accessible on the Internet (for example, the same internet account as your web page). Of course, when you develop offline, your image can be on your computer as well—although you will be the only one able to see it (and maybe your cat).

Add an image to a web page

  1. Open up a fresh web page file. Remember to add some identifying part of your name to the front of the file name and to any web pages you create.
  2. Here's a butterfly image on this page:
    The tagging looks like this: <img src="one_butterfly.gif">
  3. Find an image either online or on your own computer. If you need help downloading an image from the Internet, just holler. (Hint: hover over an image, right-click, and select something like Save Image As.)
  4. To keep your life simple, save that image in the same folder on your computer as your web page.
  5. Somewhere in the body of your web page, enter <img src=" graphic_filename.extension "> with the name of your image.
  6. Save this file.
  7. Double-click on your web page and check it out.

Experiment with some common settings for the display of an image

  1. Be sure always to add an ALT element within your img tag: for example: <img src="my_granny.jpg" alt="My grandmother, Rose Massey">. ALT attributes do not display when you run your mouse pointer over them; the TITLE tag does. Add that to Granny: <img src="my_granny.jpg" alt="My grandmother, Rose Massey" title="My grandmother, Rose Massey">
    According to w3schools, "The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader."
  2. Save this file and continue.
  3. Exeriment with the dimensions of your image setting in the SRC tag: WIDTH and HEIGHT, for example, width: 50%; height: 50%;. The tagging for Granny might look like this: <img src="my_granny.jpg" alt="My grandmother, Rose Massey">
  4. Save this file and continue.
  5. Add a border to surround the image: <img src=" my_granny.jpg " alt="My grandmother, Rose Massey">: for example, style="border: 1px solid black". Now the complete tagging will look like this:
    <img src="my_granny.jpg" alt="My grandmother, Rose Massey" width="50%" height=50%" title="My grandmother, Rose Massey"; style="border: 9px solid yellow">
    Notice something odd in this tagging: it uses = (equal signs) and no ; (semicolons) until we get to the STYLE tag. That's because old-style tagging is used until we get to STYLE; a semicolon followed by CSS-style thereafer.
  6. Save this file and continue.

Link to an image elsewhere on the Internet

  1. Make sure you can link to an image somewhere else on Internet. You'll need to be online and to include the full path and URL in the img tag: for example,
    <img src="http://mcmassociates.io/htmlcss/images/galaxy_core.jpg" alt="Galaxy Core";>
    To get the full URL, hover over the image, right-click, and if you are using Firefox, select Copy Image Location to get its URL or Save Image As to get the image on your computer.
  2. Save this file and check it out.
    You'll notice that the image of the Milky Way is huge. You can use 20% for both width and height to get it under control. But experiment with specific PX values like width="400px" height="100px" — that distorts it. Space–time run amok! If you are using Firefox, right-click on the image and select View Image Info. You'll see that the Milky Way images is 700px × 394px.

Position graphics with the float tag

  1. Experiment with "floating" your graphic:
    <img src="my_granny.jpg" alt="My grandmother, Rose Massey" style="float: right; width: auto; height: auto">
    Change right to left and see that effect. You can't float "center." Instead, use this style declaration: img {display: block; margin-left: auto; margin-right: auto;}.
  2. Save this file and continue.

Add a graphic to the background of your web page

  1. Experiment with making this image (opens in a separate browser) the background of your web page, using this tagging:
    url.('seascape.jpg'); background-repeat: no-repeat;">
    This seascape.jpg image happens to be pretty big, big enough to fill a large screen bacground: 1600 pixels by 1200 pixels. To check the size of an image, right-click on it and sselect Properties. If you want this seascape.jpg, let me know.

    See CSS Backgrounds (opens in a separate browser) for other settings you may need for webpage backgrounds.
  2. w3schools' HTML Images (opens in a separate browser) page has some other interesting variations you might want to test out: image maps (clickable areas of a graphic) and the picture element (for different screen sizes like mobile phones and tablets).

Useful Graphics Skills

Three skills you should be comfortable with (these links open in a separate browser):

Related Information

Maintained by admin@mcmassociates.io.