View
17
Download
0
Category
Preview:
DESCRIPTION
Linking With Graphics. INP150: Basic HTML March 25, 2002. Image Tags. . Text Browsers or Lost Images. Lost images Explanation Vision impaired users. Height and Width. - PowerPoint PPT Presentation
Citation preview
Linking With GraphicsLinking With Graphics
INP150: Basic HTMLINP150: Basic HTML
March 25, 2002March 25, 2002
Image TagsImage Tags
<IMG SRC=“nameofimage.gif” /><IMG SRC=“nameofimage.gif” />
Text Browsers or Lost Text Browsers or Lost ImagesImages
<img src=“nameof image.gif” <img src=“nameof image.gif” alt=“image of 1793 Cent -- Click alt=“image of 1793 Cent -- Click for Dealers” />for Dealers” />• Lost imagesLost images• ExplanationExplanation• Vision impaired usersVision impaired users
Height and WidthHeight and Width
If the real dimension are specified If the real dimension are specified it loads faster than one without the it loads faster than one without the dimensionsdimensions
<img src=“nameofimage.gif” <img src=“nameofimage.gif” width=“75” height=“150” />width=“75” height=“150” />
Aligning ImagesAligning Images Aligns an image and wraps text above around Aligns an image and wraps text above around
and below the imageand below the image• <img src=“nameofimage.gif” align=“right” <img src=“nameofimage.gif” align=“right”
width=“40” height=“125” />width=“40” height=“125” />– ValuesValues
» left or rightleft or right» toptop» texttoptexttop» middlemiddle» absmiddleabsmiddle» baselinebaseline» bottombottom» absbottomabsbottom
Borders and GraphicsBorders and Graphics
Specifies thickness in pixels of Specifies thickness in pixels of graphical border drawn around an graphical border drawn around an imageimage• <img src=“nameofimage.Gif” <img src=“nameofimage.Gif”
width=“50” height=“125” width=“50” height=“125” border=“0” /> border=“0” />
Space around GraphicsSpace around Graphics
Specifies vertical and horizontal space Specifies vertical and horizontal space around an image. This is used with around an image. This is used with aligned images so the text will be aligned images so the text will be padded and not but up against an padded and not but up against an image, created a crowded look.image, created a crowded look.• <img src=“nameof image.gif” <img src=“nameof image.gif”
align=“right” width=“40” height=“125” align=“right” width=“40” height=“125” vspace=“5” “hspace =5” />vspace=“5” “hspace =5” />
BackgroundsBackgrounds
To add a background image to To add a background image to your page specify an image in the your page specify an image in the body tag:body tag:• <body <body
background=“nameofimage.gif”> … background=“nameofimage.gif”> … </body></body>– bgcolor=“#ffffff”bgcolor=“#ffffff”
– Not mutually exclusiveNot mutually exclusive
Clickable ImagesClickable Images
Making an image clickableMaking an image clickable• <a href=“nameoffile.html”><img <a href=“nameoffile.html”><img
src=“nameofimage.gif” /></a>src=“nameofimage.gif” /></a>– with or without borderswith or without borders
– <a href=“nameoffile.html”><img <a href=“nameoffile.html”><img src=“nameofimage.gif” border=“0” /></a>src=“nameofimage.gif” border=“0” /></a>
• To go to another site:To go to another site:– <a <a
href=“http://www.nameofsite.com”><img href=“http://www.nameofsite.com”><img src=“nameofimage.gif” /></a>src=“nameofimage.gif” /></a>
AnimationAnimation
Animation has to do with the Animation has to do with the structure of the file you have, not structure of the file you have, not HTMLHTML• Take the graphic just like any non-Take the graphic just like any non-
animated graphic and put it in your animated graphic and put it in your page the same way we have been page the same way we have been discussing.discussing.
Recommended