Download presentation
Presentation is loading. Please wait.
1
Linking With Graphics INP150: Basic HTML March 25, 2002
2
Image Tags <IMG SRC=“nameofimage.gif” />
3
Text Browsers or Lost Images
<img src=“nameof image.gif” alt=“image of 1793 Cent -- Click for Dealers” /> Lost images Explanation Vision impaired users
4
Height and Width If the real dimension are specified it loads faster than one without the dimensions <img src=“nameofimage.gif” width=“75” height=“150” />
5
Aligning Images Aligns an image and wraps text above around and below the image <img src=“nameofimage.gif” align=“right” width=“40” height=“125” /> Values left or right top texttop middle absmiddle baseline bottom absbottom
6
Borders and Graphics Specifies thickness in pixels of graphical border drawn around an image <img src=“nameofimage.Gif” width=“50” height=“125” border=“0” />
7
Space around Graphics Specifies vertical and horizontal space around an image. This is used with aligned images so the text will be padded and not but up against an image, created a crowded look. <img src=“nameof image.gif” align=“right” width=“40” height=“125” vspace=“5” “hspace =5” />
8
Backgrounds To add a background image to your page specify an image in the body tag: <body background=“nameofimage.gif”> … </body> bgcolor=“#ffffff” Not mutually exclusive
9
Clickable Images Making an image clickable
<a href=“nameoffile.html”><img src=“nameofimage.gif” /></a> with or without borders <a href=“nameoffile.html”><img src=“nameofimage.gif” border=“0” /></a> To go to another site: <a href=“ src=“nameofimage.gif” /></a>
10
Animation Animation has to do with the structure of the file you have, not HTML Take the graphic just like any non-animated graphic and put it in your page the same way we have been discussing.
Similar presentations
