HTML - Using Images

When you add an image to your site, you are linking to an image and creating a relative link. The image tag does not require a closing tag

Image tag:

• <img>

Image attributes:

• src: the path to the image
• alt: the alternative text, this will display when the picture is downloading and is read by screen readers
• width: specify the width you wish the picture to display in the browser
• height: specify the height you wish the picture to display in the browser
• border: to add a border to the image. NB if you make an image into a link, you must include border="0" or a border will displayed automatically
• align: to make the text next to an image wrap next to it (only with left and right variables) - if image is aligned to right, the text will wrap to the left, and vice versa. There is an example here to look at.

You can center an image by using the <center> img details here </center> tag. Note spelling.

Example of code for adding an image;

<img src="logo.gif" alt="BAEC logo" width="160" height="120">

If the image is in a different folder, you will need to include the path to it eg if it is in the images folder the code would be:

<img src="images/logo.gif" alt="BAEC logo" width="160" height="120">

To make it appear in the center of the page:

<center>
<img src="logo.gif" alt="BAEC logo" width="160" height="120">
</center>

Information about the types of images etc used on web pages

To turn an image into a link add the  <a href> code to the <img> code as follows:

<a href="http://www.bromleyadulteducation.ac.uk" target=_"blank"
<img src="logo.gif" alt="BAEC logo" width="160" height="120" border="0">
</a>

 email me | top