Basic HTML: Images
Note that I show the html in orange with a courier font for clarity about what you would actually type to use the command. <img> has additional parameters - consult a good guide for the complete list.
to display this image use this code:
alt="A Tea Pot" border="1"
where the attributes are:
- the pathname to the file WHICH MUST BE ON YOUR SERVER
- The words you want to show if the person isn't using images. Be as brief and descriptive as you can
- the thickness in pixels of the line around the image - 0 for no border
- use this if you want to flow text around the image - left to slide the image left, etc.
- the display height of the image in pixels - if this doesn't match the image you may get distortion
- the display width of the image in pixels - if this doesn't match the image you may get distortion
Note - self closing tag
This tag does not have a closing tag, or rather, it includes its closing tag in the tag itself since it cannot contain other tags. Hence the /> that completes the <img> command.
Another Note - image sizes
To avoid distortion of the image always display the image in its actual size. See below what happens if I accidently mistype the horizontal element:
If I change the width to 200 here's the code:
<img src="teapot.gif" alt="A Tea Pot"
border="1" align="left" height="111"
In order to display the image the size you want - ALWAYS RESIZE TO THE SIZE YOU WANT TO SEE IT ON THE WEB. If you don't, the web is forced to resize it - Photoshop or other photo editing products do a MUCH better job of resizing your image than the web does on the fly. We will learn about resizing images later in the term.