Let's face it one of the main reasons for wanting to create a website is to place certain photographs or animations on your own website, well normally you'll need a good paint program such as Adobe Photoshop, or JASC Software's Paint Shop Pro in order to create animations, but a scanner or camera will help you get your photographs onto your pc's hard drive, but no matter which you use, you will still require knowledge of HTML to get them onto your site.

What you'll need to know first is that they are mainly 2 formats for pictures or animations normally used on websites, these are JPG or GIF. JPG is used mainly to compress your pictures so that they don't slow your uploading of your pages down (which turn visitors away), so JPG's come in handy when thinking of placing your pictures on your website. GIF's however are normally used when creating animations, using transparency to help towards making a good effect on your website. Most GIF's tend to be large, depending on what they do, but you can use an online GIF Cruncher such as the link to one I have on this page, you may also crunch JPG's there too (best not too try and crunch your pics too small or they will get distorted).

Before I take you through the HTML part of things to get your pictures or animations onto your website, a good thing to note down, is the width and height of your pictures or animations, this will help when adding your HTML code to get them online. To find out the width and height of your pictures, simply open them up and right click onto them, then choose properties, then check next to Dimensions, width is the first number there and height the 2nd, they're both measured in pixels, as all JPG's and GIF's are.

Ok now onto the more important things, the HTML Coding, placing your picture on your page is really a simple thing to do, I know I know, 'yeah right simple for you maybe', you're probably thinking, but truly it is. Firstly you'll need a picture, if you don't have one, then right click onto the Anastacia picture below and left click onto 'Copy' and paste it into the same folder as your website is saved to. Now that you have a picture of Anastacia and wish to add it to your page, then you'll need to place this line command in your notepad...

<img src="anastacia[1].jpg" width="102" height="97" alt="Anastacia">

This is what you will see after adding that code above,



Note when you move your mouse over the picture, it displays the name Anastacia, this is because you added the alt="Anastacia" to the command line, this is incase people don't see the picture online, they will know it's Anastacia in this case, you can also add a link to the command line in the same way as you did before, by adding a simple <a> tag to the front of that command line, like so...

<a href="http://www.anastacia.com">
<img src="anastacia[1].jpg" width="102" height="97" alt="Anastacia"></a>

Because it has now been added to the command line, this would now allow you to go directly to anastacia.com by left clicking onto the picture.


Wondering how you can move the picture across to the middle of your page?

<center><a href="http://www.anastacia.com">
<img src="anastacia[1].jpg"
width="102" height="97" alt="Anastacia"></a></center>

Ok here's how to set it to the right of the page,

<a href="http://www.anastacia.com"><img src="anastacia[1].jpg" width="102" height="97" alt="Anastacia" align="right"></a>

You do the exact same thing when using a GIF's in replace of JPG's, just simply replace the file names.