How to Use Images in HTML

Learn to add pictures into HTML code.

Difficulty: Moderately Easy

Instructions

1. 

   Add picture: (Blue) "img src" defines the image source. In the quotes you put the web path to the image. If you do not put a path, but just put the file name, it will look in the same directory as the html file only. You can use a slash to identify a sub-directory that exists in the same directory as the html file as seen in the example.

2. 

   Size: (Orange) width and height are used to change the size of the picture in pixels. It is always best to change it proportionally to the original file. For example, if the picture is 800x600, you can change it to 400x300 and it will look the same, just smaller. If you make it 400x400, it will be stretched widthwise.

3. 

   Alternate Text: "alt" is used to specify alternate text. This text will appear if for some reason the image file is not accessible.

4. 

   Buttons: (Green) A button is just a picture that has a hyperlink referenced to it so that when you click on the picture, you are redirected to the URL. Use the "a href" function as shown in the example.
   Look at this article for more details.
   http://www.ehow.com/how_2102636_write-html-hyperlink.html

5. 

   Background: (Red) The background is one of the options in the body command. A background is specified by "body background" and the referencing the location of the picture to be used just like with other pictures.

[hoosier436]

on 9/17/2009 Thank you.. after looking for an answer over the couple of days.. this works perfectly.. I greatly appreciate it...

[hi2ufrmdeb]

on 4/2/2009 Great article, Thanks