Basic HTML: Images

go to: Structure | Text | Tables | Links | Images |

Try it yourself

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:

<img src="teapot.gif" alt="A Tea Pot" border="1"
align="left" height="111"
width="107" />

where the attributes are:

src

the pathname to the file WHICH MUST BE ON YOUR SERVER

alt

The words you want to show if the person isn't using images. Be as brief and descriptive as you can

border

the thickness in pixels of the line around the image - 0 for no border

align

use this if you want to flow text around the image - left to slide the image left, etc.

height

the display height of the image in pixels - if this doesn't match the image you may get distortion

width

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"
width="200" />

 

 

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.

go to: Structure | Text | Tables | Links | Images |