HTML Working with Images - Alternatives to Images
(Page 2 of 4 )
Sometimes, for whatever reason, an image may not appear on a page. Maybe it wasn't linked properly or maybe you forgot to upload the image to the server. Or maybe the the link you put in the src attribute is no longer there; who knows what crazy thing you did. Normally the visitor will just see a large red x in lieu of the image you intended. You can, however, choose to display some text if your image is not there (or even if the image is there; if the image does work, whenever the user hovers over the image, a tool-tip with text will appear), like so:
<html>
<body>
<p>
Here is a sample image:
<img src="sample.gif"
width="144" height="50" alt=”Here is a sample image”>
</p>
<p>
Here is the same image, only bigger:
<img src="sample.gif"
width="288" height="100" alt=”Here is an example of the same image, only larger”>
</p>
<p>
Here is the same image, only smaller:
<img src="sample.gif"
width="77" height="50" alt=”Here is yet another example of the same image only smaller”>
</p>
</body>
</html>
Aligning Images
You can determine where your image appears within text by using the align attribute:
<html>
<body>
<p>
This image
<img src="sample.gif"
align="bottom" width="48" height="48">
is bottom aligned
</p>
<p>
This image
<img src ="sample.gif"
align="middle" width="48" height="48">
is aligned in the middle
</p>
<p>
This image
<img src ="sample.gif"
align="top" width="48" height="48">
is aligned to the top
</p>
<p>
<img src ="sample.gif"
width="48" height="48">
Here an image appears before the text
</p>
<p>
Here the image appears after the text
<img src ="sample.gif"
width="48" height="48">
</p>
<p>
Image left aligned:
</p>
<p>
<img src ="sample.gif"
align="left" width="48" height="48">
</p>
<p>
Image right-aligned:
</p>
<p>
<img src ="sample.gif"
align="right" width="48" height="48">
</p>
</body>
</html>
Next: Setting an Image as the Background >>
More HTML Articles
More By James Payne
