Warning: include(http://www.studio6000.com/tutorside.htm) [function.include]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/studio60/public_html/html/lesson13.php on line 17

Warning: include() [function.include]: Failed opening 'http://www.studio6000.com/tutorside.htm' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/studio60/public_html/html/lesson13.php on line 17

Images

A very effective part of enhancing a web page is done through adding images.

Let's go ahead and save the following picture in the same directory in which you have saved your web page. To do this, first, let your mouse hover over the image. Then press the right click on your mouse. Then click on Save picture as. Save it as flower.jpg. Be sure to save it in the same directory that your mypage.html web page is in. The actual dimensions of this image is 150 x 200.

To add an image we'll need to add the img tag.

<body> <img> </body>

Then we need to add the source attribute along with the image name. This lets the browser know where it could find the image as well as the image name.

<body><img src="flower.jpg"></body>

Image tags do not need closing tags.

You can also adjust the height and width of a image by adding in the height and width attributes. If you do not add these attributes the default settings will be whatever the actual size of the image is.

<body><img src="flower.jpg" height="200" width="150"></body>

You can make an image larger or smaller by changing the values of the height and width. Let's make the picture we have just inserted smaller.

<body><img src="flower.jpg" height="100" width="75"></body>

Now the picture should look like this:

You can also set the border of an image:

<body><img src="flower.jpg" height="100" width="75" border="5"></body>

Now the picture will look like this:

If you change the value of the height without changing the value of the width proportionately the image will be distorted. Look at the following example:

<body><img src="flower.jpg" height="125" width="200"></body>

Your probably wondering to yourself, why would I want to do that. Well let me show you how useful that tool can be.

Look at the following picture -->

It's just a red dot 1x1 pixels.

Here are some examples of how the image will appear if you adjust the width and height.

Code Result

<img src="dot.gif" height="3" width="50">

<img src="dot.gif" height="5" width="100">

<img src="dot.gif" height="10" width="200">

<img src="dot.gif" height="50" width="50">

<img src="dot.gif" height="50" width="100">

Next Lesson