Use the <img /> tag to place an image on your web page.
<img src="sunset.gif"/>
1. Image src
- Above we have defined the src attribute.
- src stands for source, the source of the image or more appropriately, where the picture file is located.
- There are two ways to define the source of an image. First you may use a standard URL. As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods.
- The location of this picture file is in relation to your location of your .html file.
URL Types:
| Local Src | Location Description |
| src="sunset.gif" | picture file resides in same directory as .html file |
| src="../sunset.gif" | picture file resides in previous directory as .html file |
| src="../pics/sunset.gif" | picture file resides in the pic directory in a previous directory as .html |
2. Alternative Attribute
- The alt attribute specifies alternate text to be displayed if for some reason the browser can't find the image , or if a user has image files disabled.
- <img src="http://example.com/brokelink/sunset.gif" alt="Beautiful Sunset" />
3. Image Height and width
- To define the height and width of the image , rather than letting the browser compute the size, use the height and width attributes.
- <img src="sunset.gif" height="50" width="100">
4. Vertically and Horizontally Align Images
- Use the align and valign attribute to place images within your body,tables,or sections.
1. align (Horizontal)
1.right 2.left 3.center
2. align (Vertical)
1.top 2.bottom 3.center
- Below is an example of how to align an image to the right of a paragraph.
- <p>This is paragraph 1, yes it is..</p>
- <p><img src="sunset.gif" align="right" >The image will appear along the ...isn't it?</p>
5. Images as Links
- Images are very useful for links and can be created with the HTML below.
- <a href="http://www.xyz.com/"><img src="sunset.gif"></a>