HTML for beginners

HTML for beginners
Lesson 9
More "img" Attributes

Before we get into more detail, let's make sure our codes match. In the previous lesson you were told to experiment with the last paragraph. Make your last paragraph match the one below again, then we'll move on.

<html>
<head>
<title>My first page</title>
</head>

<body bgcolor="00ffff">


This is my first web page. 
My page is getting bigger.



This is a whole new paragraph.



<img src="Image2.jpg">



<img src="Image2.jpg"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.



<img src="Image2.jpg" align="right"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.


</body>
</html>

I will show you the various attributes, then we'll experiment with them a little.

Here are the various "img" tag attributes and what they are for.

src - says where the image is, the source for the image (required)
align - where to align the image in relation to whatever else is with it
border - what size border to show around the image
alt - text to show if the browser doesn't display images (also appears on mouseover for most browsers)
height - specifies the height of the image
width - specifies the width of the image

There are more attribute possibilities, but we have enough here to do pretty well anything we want.

Let's move on a little quicker by adding 2 attributes at a time. Add the red code here and see what you get.

<html>
<head>
<title>My first page</title>
</head>

<body bgcolor="00ffff">


This is my first web page. 
My page is getting bigger.



This is a whole new paragraph.



<img src="Image2.jpg">



<img src="Image2.jpg" border="1" alt="Image 2"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.



<img src="Image2.jpg" align="right"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.


</body>
</html>

See the thin border? Place your mouse over the 3 images and see what the difference is with the one that has the "alt" attribute. If you do not see the "alt" text when you mouseover, your browser likely doesn't support this feature.

To see what "alt" does if a browser doesn't show images, make the change below. While we are at it, change the border to 10.

<html>
<head>
<title>My first page</title>
</head>

<body bgcolor="00ffff">


This is my first web page. 
My page is getting bigger.



This is a whole new paragraph.



<img src="Image2.jpg">



<img src="Image3.jpg" border="10" alt="Image 2"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.



<img src="Image2.jpg" align="right"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.


</body>
</html>

There is no Image3.jpg so instead we just get an empty box with the name we gave that image.

Change the 3 back to 2, and the 10 back to 1, then add what is shown below.

<html>
<head>
<title>My first page</title>
</head>

<body bgcolor="00ffff">


This is my first web page. 
My page is getting bigger.



This is a whole new paragraph.



<img src="Image2.jpg">



<img src="Image2.jpg" border="1" alt="Image 2" height="100" width="200"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.



<img src="Image2.jpg" align="right"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.


</body>
</html>

The "height" and "width" didn't seem to make a difference, did they. Let's change them then and see what happens.

<html>
<head>
<title>My first page</title>
</head>

<body bgcolor="00ffff">


This is my first web page. 
My page is getting bigger.



This is a whole new paragraph.



<img src="Image2.jpg">



<img src="Image2.jpg" border="1" alt="Image 2" height="50" width="200"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.



<img src="Image2.jpg" align="right"> 
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.


</body>
</html>

Do you like what happened? Play around with the height and width a little. Make it taller, shorter, wider, narrower. Make all 3 images different sizes if you want. Play around with the code any way you want because when we go to the next lesson, we will start with a whole new page. Keep your index.html page because we will be linking to it.

After you've played around for a while, read the following notes.

About the height and width attributes:

By including these details, pages can load faster because they know how much space to reserve for the images. Your browser will position everything where it belongs and download the images on it's own time.
Do not show thumbnail images to link to the full size image by just using the full size image with reduced height and width values. The main purpose of thumbnail images is for a faster download preview of full size images. Therefore thumbnails should actually be a reduced version of originals.
Make sure your height and width values are right, otherwise as you saw earlier, your image will be distorted. You can make them different if you want the distortion.

One more fun thing you can do with images.

See where your code says <body bgcolor="00ffff">?
Change it to <body background="Image2.jpg"> and see what that does.

Your background doesn't have to be just a simple color. With this new background you can hardly read the text though, so let's try something a little more useful as a background. Save the following image as background.jpg in the same directory as your code and other images. After you have done that, change your background image to background.jpg. It'll look a little nicer.

The background image can be any jpg or gif image of any size. The image is automatically repeated horizontally and vertically to fill the screen. If you have any images you think would make a nice background, copy it to your working directory and change the background image to it.

Now it's time for the most important tag of all. Without it you can only have a 1 page website. The link tag.

The link tag

Premier Website Solutions
Hosting, Design, and Domain Registration

Hosting Design Registration

General Help Contact Client FAQ's

Home Page

Read client testimonies.

Tell a friend about this site.

About Us

This website is designed and hosted by Premier Website Solutions