Working with HTML image tags




HTML PAGE DESIGN LINKS
html page design
Basic html forms
Text and font tags
html tables
Image tags
Javascript
Web hosting
Free tracking




This page explains basic code attributes for the html image tag.
Using a picture as a link.
Attributes explained on this page src, align, border, alt, width, height, hspace, vspace.
Web pictures for the beginner and first time webmasters.

Some Html code basic rules :
  • As a general rule Html does not care about letter case (capital and lower case letters)

  • Lower case is recommended as more advanced page design is now all lower case.
    File names are an exception. PICTURE.jpg is not the same as picture.JPG on some servers

  • To insert images on your Html page you use the image tag

  • Each image tag is enclosed with brackets <img>
    The image end tag is forbidden for HTML 4.01
    For complete rules and the very latest in html code and HTML 4.01 Specifications
    Visit www.w3c.org
    The World Wide Web Consortium
Putting a picture on your web page

For LOCAL images (images hosted on the same host and url as the page )
The src attribute uses the folder name of your image to locate the picture.
The image below is hosted on this site in a folder named images.
Below is the code that displays this image.



<img src="images/bird.jpg">
For online REMOTE images (images not hosted on the same url as the page being displayed)
The src attribute uses the url of the image followed by a  / and the image name .jpg .gif ect...

<img src="http://someplace.com/imagename.jpg">
HTML for adding a border to an image on your page
A one pixel border


<img src="images/bird.jpg" border="1">
 A 5 pixel border


<img src="images/bird.jpg" border="5">
HTML to align your image with text on your page
The align attribute in the
code below.
Places the image
to the left of your text.



<img align="left" src="images/bird.jpg" border="1">
 The align attribute in the code below.
Places the text starting
at the bottom of the image
<img align="bottom" src="images/bird.jpg" border="0">
HTML to define your image width and height
Width and height are generally in pixels
The browser will still place and size the image if these attributes are omitted.
However for smooth page loading defining image width and height, helps
with the appearance of a page.


<img src="images/bird.jpg" width="90" height="95" border="0">
Setting the wrong image size can give unwanted results
As seen in this example


<img src="images/bird.jpg" width="190" height="25" border="0">
HTML to define the space between your image and text
hspace= Specifies the amount of empty space between
the image and other objects, or text on the sides of the image.
vspace= Specifies the amount of blank space on the top and bottom.

<img align="left" src="images/bird.jpg" hspace="15" vspace="15" border="0">


Image with no space set

<img align="left" src="images/bird.jpg" hspace="0" border="0">
bird Image tag with all attributes above plus the alt= which is for a text description
of the picture for users that cannot display images,disabled users and others

<img align="bottom" src="images/bird.jpg" width="90" height="95" hspace="15" vspace="15" alt="bird" border="5">
HTML to use an image as a link
  Click Me

Image link		 You can use images as links to send visitors to another site, or another page on a site.
Clicking on the image of the bird to the left will take visitors
where they can find a cute bird figurine.
<a href="http://www.ebay.com">
<img src="images/bird.jpg" width="90" height="95" border="0"></a>
Above is the code for using an image as a link to a website url.
Home page  Back to top of page

Copyright © 2004 2011 FunwithyourPC
Contact Us