Inserting an image in the HTML file
This
is done with the tag <img src="directory/imagename.type"
width="number of pixels" height="number of pixels">.This
tag is placed in the HTML file, where the image has to appear. As in the
example of the directory
of "LovelyMaps" for placing the "logo.gif" on the
"index.html" file the description is: <img src="images/logo.gif"
width="50" height="51">. The result is the placement
of the logo. Animated GIF's are placed in the same way.
Action
Start
up the Text Editor and open the HTML file of "LovelyMaps" you
worked on before. Save the logo of "LovelyMaps" in the directory
"images" you already created in an earlier exercise. The logo
can be saved by placing the pointer in your browser on the logo of "LovelyMaps"
and pressing the right mousebutton. Use the option "Save Picture
as..." and indicate the directory in which the file has to be saved
(this is the procedure for MS Windows). For Apple Macintosh users: point
on the image, press "control" and click the mouse at the same
time, select "Save this image as ...". Give it the name: logo.gif.
In
the HTML file you have to type the command-line for placing the image
in-between the <body></body> tags. Save the file and open
it in the browser.
Border around the image
Some
browsers will show a blue line around the image. When inserting the command
border="0" after the height="51" the line will disappear.
Positioning of the image
HTML
has limited options for positioning of elements. Standard placement is
on the left-side of the browsers window. The image can be positioned on
the left or right hand side by inserting the command align="left"
or align="right". When using these commands in combination with
a text block, the image will be placed on the indicated side of the text.
Text will be wrapped around in the free space.
For positioning also additional parameters are available: vspace="number
of pixels and hspace="number of pixels" which will place white
space around the image.
Alternative text
Some
browsers do not support images or sometimes the "surfer" decides
not to see images (to increase speed of browsing). To tell these people
that a certain image is used an extra command can be added to the image
tag. The command alt="name of image" will display the "name
of image" in the browser. Most browsers
will use the "alt" text to display in a pop-up text that appears
when you move the mouse over the image.
Action
Open
the HTML file of "LovelyMaps" and add the commands just learned
to the image tag. Also have a look at the effect when changing the number
of pixels for height and width.
Set an "alt" text and see if it displays in the pop-up message.
 |
||
 |
 |
 |
 |