Aligning the Image with Text
Here are some examples to show what can be done. Each one has the image inserted into the first paragraph of your cafe.htm file using the <IMG> tag:
- edit your copy so that the first paragraph includes the image tag with its attributes - SRC, ALIGN, HEIGHT and WIDTH - and compare your results with the ones shown
The first one is this:
<P><IMG SRC="images/hamburg.gif" ALIGN="right" WIDTH=84 HEIGHT=87>Alice Cooper lived in the Rockies in the middle of the last century and was one of the pioneering women of the region. She was respected, and sometimes feared, by those who knew her. Alice was hard working and determined to make something of her harsh surroundings. She didn't suffer fools gladly. The country at that time was just opening up and lawlessness was commonplace.</P>
...which appears as...
The next one is...
<P><IMG SRC="images/hamburg.gif" ALIGN="left" WIDTH=84 HEIGHT=87>Alice Cooper lived in the Rockies in the middle of the last century and was one of the pioneering women of the region. She was respected, and sometimes feared, by those who knew her. Alice was hard working and determined to make something of her harsh surroundings. She didn't suffer fools gladly. The country at that time was just opening up and lawlessness was commonplace.</P>
...which appears as...
So you can align the image to the left or right side of the screen. Instead of 'left' and 'right' you can also use 'middle', 'top' and 'bottom' as attributes in the tag but, again, it has to be said that the results might be a little unpredictable in different browsers.
The image of the hamburger is called hamburg.gif from which we can see that it is in .GIF format. One of the useful features of .GIF images is that you can make the background transparent if you have a suitable graphics program...here we have a different version of the file called hamburgt.gif
<P><IMG SRC="images/hamburgt.gif" ALIGN="right" WIDTH=84 HEIGHT=87>Alice Cooper lived in the Rockies in the middle of the last century and was one of the pioneering women of the region. She was respected, and sometimes feared, by those who knew her. Alice was hard working and determined to make something of her harsh surroundings. She didn't suffer fools gladly. The country at that time was just opening up and lawlessness was commonplace.</P>
...which appears as...
Positioning an image on your page can be a problem. You can align it left or right but if you want more precise control, then you might need to consider putting it into an 'invisible' table. More about tables later, though. For most purposes, aligning it left or right is good enough.
You can put a border around the image...
<IMG SRC="images/hamburgt.gif" ALIGN="right" WIDTH=84 HEIGHT=87 BORDER=3>
...which appears as...
The number 3, by the way, is the number of pixels for the width of the border. If you want to make sure that there is NO border - some browsers will try to put one in - then specify BORDER=0 in your tag. It's a good idea to always do this as a matter of routine.
To create some space around your image you can include VSPACE and HSPACE attributes ('V' for 'vertical' and 'H' for 'horizontal') and give each a number - in pixels - to specify how much space to leave...
<IMG SRC="images/hamburgt.gif" ALIGN="right" WIDTH=84 HEIGHT=87 BORDER=0 HSPACE=20 VSPACE=20>
...which appears as...
Finally, you should be sensitive to potential viewers of your page. People with older or slower equipment are not going to thank you if your image file(s) take forever to download and will likely not bother to wait. Simplicity is often the key here if you want people to look at your pages.
On the same theme, some people browse the web and set their browser NOT to load images on account of the time it takes.
If they want to view a particular image they'll click on it. In order to help those people it's considered polite to include a comment which gets displayed where the image would normally go - if they want to see it, they can click it.
An example...
<IMG SRC="images/hamburgt.gif" ALIGN="right" WIDTH=84 HEIGHT=87 BORDER=0 ALT="a hamburger">
We would recommend that whenever you use graphics you should include the WIDTH and HEIGHT attributes. They are optional but if your browser can see how much space to set aside for the graphic in advance then your pages are likely to appear much faster and your viewers won't be watching a blank screen while their machine waits for the graphic to download. Unfortunately, this happens all too often and you are advised that it is not the way to best impress your visitors!
The next section provides some background information which you may wish to skim and come back to later on...