Picture Files

Images can get fiddley - try and follow directions closely

The img tag <img> defines an image that will appear on a web page

<img> has two parts - the source of the picture file and alternate text in case the image does not show. Unlike inserting a picture on Power Point- you will NOT see your image in the Notepad file.

<img> tells the computer "Hey, go look for this file and show it"

HINT: Save your Image files in the SAME FOLDER as your HTML File. You are giving the computer directions to locate the file and the EASIEST way to do that is to have them saved in the same file.

Go to the internet and save two different pictures of your favorite fruit or vegetable, sadly french fries count for this moment in time.

RULE #22 - change your picture file name to ONE WORD (always be in control of the name of a file you save)

Inside the body of you webpage add the following code

Filename apple.png

<img src="apple.png" alt = "A Red Apple">

Hey computer the source of my image is the file named apple.png 

If that image file is corrupted show the alternate text of "A Red Apple"

Now save and go check out your web page

TIP: If the image does NOT appear but there is a small image ICON on your screen, then you misspelled your file source name.

TIP: For a JPEG file format, try a file extension of JPG and JPEG

This is the icon you get from a typographical error in the file name

You can add some additional formatting to modify the size of the image. Theses measurements are in PIXELS

<img src="apple.png" alt = "A Red Apple">

becomes

<img src="apple.png" alt = "A Red Apple" height  = "50" width = "50">

TIP: Did you spell height correctly?

No play around with the height and width of your pictures to get comfortable with the tags and the measurements.