|
|||||||
|
|
|
|||||
|
|
|||||||
|
Adding a picture to your site is really very simple. In this part of the tutorial you will learn how to add a picture, resize, and position it. Now, let's start by getting the picture on your page.
The basic code for adding a picture is: <IMG SRC="url of picture"> That's it! Now let's break it down a bit. The "IMG SRC" means "Image Source". Basically it's asking where is the picture you want to display? The second part, "URL of picture", is the location of the picture. So, if you have a picture uploaded to your files, the URL would be: http://www.yoursite.com/picture.jpg Be sure to add the file extension, (.jpg, .gif, .bmp) or your browser will not recognize the code. Here is an example:  See, the code we used for this picture is: <IMG SRC="http://www/coralason.freewebspace.com/help/images/planet.gif"> The URL is where on this site the picture is actually located. Pretty simple huh. Now let's work on resizing the picture. You remember that planet picture you just saw right, now let's shrink it a bit. In order to do this, we have to add the "Height" and "Width" attributes to the basic tag. It'll look like this: <IMG SRC="URL of picture" HEIGHT="*" WIDTH="*"> Notice how the picture is much smaller now. That's because I changed the Height and Width attributes. The height of the picture now is "134" and width is "200". When you resize a picture, it remains clear and recognizable so long as you make it smaller. The larger you make it, the more distorted it becomes. Now you can add a picture and resize it. Next comes positioning. The tag attribute is "Align". So, for example, with the planet picture that we just modified, let's move it to the right. Our code would then look like this" <IMG ALIGN="RIGHT" SRC="URL" HEIGHT="134" WIDTH="200"> And it would look like this:
Your browser's default alignment is to the left. Unless you change it, the picture will always sit to the left. You could position it to the left, right or center. Now you can add a picture, resize it and position it. Let's move on to adding a picture to a link! |