PGTUTOR.COM
You are here: HOME >> HTML tutor >> Lesson 9
HTML tutor- Lesson 9

You can also insert images on your pages using HTML. The image tag <img> does not have an end tag. In the src attribute of img tag you sprcify the url or the address of the image.

Now imagine that you want to use the following image on your website. Right click on the picture and save it in the same directory in which you have your HTML file (mypage.html). Save it as ryu.jpg.

ryu

Now try out the following code: 

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

View your webpage here

Two other attributes related to the image tag are width and height. So add the following to your image. You must add this attribute to like up to HTML 4.01 guidelines. 

<body>
<img src="ryu.jpg" width="134" height="265">
</body>

To find the dimensions of your image, you can try photo editors or graphics viewers like Paint Shop Pro.

Sometimes the browser can't load the images on a website for one reason or another. Then all the viewer to your website will see is a big "X" instead of the image. For that reason it is best to include the alt attribute with the image. Now the viewer knows what sort of image he was supposed to see on the website. 

<body>
<img src="ryu.jpg" width="134" height="265" alt="ryu">
</body>

Now the viewer knows what sort of image he was supposed to see on the website.

NOTE: Use images with caution. Avoid using images that have animation because they take a long time to load. Don't use too many images on a page unless you necessarily have to. People nowadays are getting less and less impatient. If your website doesn't open within a reasonable time, your visitor will leave your website and look for another resource.

<< BACK NEXT >>
PgTutor - The easy way to make a website ...
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25



PGTUTOR is an award winning website. In the past 2 years, we've won over 20 legitimate awards. Go to our awards page to verify for yourself.



You're not taking a risk when buying our products. If for any reason you're unsatisfied with the quality of our product(s), we'll refund your money. Also, you get to keep the product you bought.