Html Images

The HTML tag for inserting images on web page is <img>. Using img tag we can insert images from our website source or from external source. To define the source of images, img tag uses an attribute src. The syntax of img tag is <img src="source of image here">.

As we can see from above syntax of img tag that it does not have an ending tag. Img tag is like line break tag <br> where there is no need to use the closing tag, but rather we use a forward slash to close the tag.

Example of HTML Image Tag

<img src="my_image.jpg" />


<img src="http://www.cramerz.com/images/cramerz_logo.gif" />

Image Tag Attributes

Image tag comes with a number of attributes. We have used one attribute so far - src. Lets use some other attributes of <img>

Image with Alignment

Align attribute is for aligning an image left, right, center; bottom, top, middle

Example of image aligh right and aligh left

<img src="my_image.jpg" align="right" />


<img src="my_image.jpg" align="left" />

Border Around Image

Ever wondered how to put a border around an image? Well its really simple. By just adding a border attribute to image tag we can have our nice borders around an image. The border of an image is specified by a numeric value mostly in pixels (px), for example border=2px

Example of Image with border

<img src="my_image.jpg" border="1px" />


<img src="my_image.jpg" border="3" />

<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow

 

---