2. Lesson Objectives
By the end of this lesson:
All students will be able to add an image to an
HTML document
Most students will be able to alter the size that an
image is displayed in HTML
Some students will be able to use two images
and create a rollover
3. Starter
You need to copy some images into your
HTML folder
It is IMPORTANT that they only go in this
folder and nowhere else – OTHERWISE they
will not work!
4. How to add an image...
Adding an image in HTML
is more complicated than it
sounds, but the best way
to learn is to try it for
yourself.
Type in the code that has
been provided
Save your work as
image.htm and then
preview your work in
internet Explorer
If you manage to do this,
try changing the size of the
border of the image – what
happens?
<html>
<body>
<h2>Alan Shearer is a
legend</h2>
<img border="0"
src="shearer.jpg"
alt=“shearer2" width="304"
height="228" />
</body>
</html>
5. How to set the size of an
image...
It is better to set the size of
the image you wish to use
to make sure that it
displays properly
You can see that you have
already set the width and
height of the image you
have used
Try changing the size of
your image to make it
much bigger, what
happens?
<html>
<body>
<h2>Alan Shearer is a
legend</h2>
<img border=“0”
src=“shearer.jpg”
alt=“shearer2” width="304"
height="228" />
</body>
</html>
6. Using rollover images...
A nice feature of some
websites is the use of
rollover images
A rollover image is when
the user scrolls over the
image and it changes to a
different image
Change your code to
match the code shown
Save it as rollover.htm and
then test it in Internet
Explorer
<html>
<body>
<h2>Alan Shearer is a legend</h2>
<a href="#" >
<img src="shearer.jpg"
<img border="0" src="shearer.jpg"
width="304" height="228"
onmouseover="this.src='shearer.jpg'"
onmouseout="this.src='shearer2.jpg'"
/></a>
</body>
</html>
7. Your task...
Using your Newcastle.htm file that you have
been working on, you need to:
Add the Newcastle1.jpg Image to your webpage
Set the size of the image to be 250 x 188
Use the Newcastle2.jpg and Newcastle3.jpg
Images to create a rollover image
Save your work and preview it in Internet
Explorer to see if everything works
8. Plenary...
You have just done something pretty
complicated in creating a rollover image, but
what do you think are the problems with using
a rollover image on a webpage?
Update you HTML tag table to describe the
following:
Onmouseover
Onmouseout
9. Summary
In this lesson you have:
Added an image to an HTML document
Altered the size that an image is displayed in
HTML
Used two images to create a rollover
