Lesson #4 -- HTML One Step at a Time

Lesson #4

Example HTML Code

<html>
<title>Page Title</title>
<body>
<img src="graphics/htmlttm.gif" width=120 height=40 border=0 alt="TEXT HERE"> :

</body>
</html>

Example HTML Code as it would be rendered.

Example HTML Code

<html>
<title>Page Title</title>
<body>
<img src="graphics/htmlttm.gif" width=120 height=40 border=0 alt="TEXT HERE" align=left> Here is a bunch of text that will wrap around the right side of the image that is to the left -- thanks to our wonderful align=left attribute. Notice the words are up against the side of the image -- no hspace is being used here.

<img src="graphics/htmlttm.gif" width=120 height=40 border=0 alt="TEXT HERE" align=right> Here is a bunch of text that will wrap around the left side of the image that is to the left -- thanks to our wonderful align=right attribute. Notice the words are up against the side of the image -- no hspace is being used here.

<img src="graphics/htmlttm.gif" width=120 height=40 border=0 alt="TEXT HERE" align=left hspace=10> Here is a bunch of text that will wrap around the right side of the image that is to the left -- and thanks to the hspace=10 attribute the text is not touching the image.

<img src="graphics/htmlttm.gif" width=120 height=40 border=0 alt="TEXT HERE" align=left hspace=30> This should be showing the effect of hspace=30 as opposed to the hspace=10 which is just above. Here is a bunch of text that will wrap around the right side of the image that is to the left -- and thanks to the hspace=10 attribute the text is not touching the image.

</body>
</html>

Example HTML Code as it would be rendered.

Here is a bunch of text that will wrap around the right side of the image that is to the left -- thanks to our wonderful align=left attribute. Notice the words are up against the side of the image -- no hspace is being used here.

Here is a bunch of text that will wrap around the left side of the image that is to the left -- thanks to our wonderful align=right attribute. Notice the words are up against the side of the image -- no hspace is being used here.

Here is a bunch of text that will wrap around the right side of the image that is to the left -- and thanks to the hspace=10 attribute the text is not touching the image.

This should be showing the effect of hspace=30 as opposed to the hspace=10 which is just above. Here is a bunch of text that will wrap around the right side of the image that is to the left -- and thanks to the hspace=10 attribute the text is not touching the image.

<img>: Used to display a graphic (gif or jpg) image or video clip.

src=URL: The src gives the address for the source of the graphic. This can be a relative url or an absolute url. A relative url would be something like "imagename.gif". In this case the browser assumes that the image is on the same machine and in the same directory as the partent page. The absolute url would be the full address. Something like "http://www.newbie.com/graphics/newttl.gif".

width=120: This tells the browser the width of the image. This allows the browser to finish calculations on the page design even before the image is fully downloaded.

height=60: This tells the browser the height of the image. This allows the browser to finish calculations on the page design even before the image is fully downloaded.

align=left: This is useful in situations where you would like to have text wrap around an image on the right hand side of the picture. By using align=left the image is pushed to the left of the page and the text will flow around the image on the right.

align=right: This is useful in situations where you would like to have text wrap around an image on the left hand side of the picture. By using align=right the image is pushed to the right of the page the text will flow around the image on the left.; There is also align=middle|top|texttop|absmiddle|baseline|bottom|absbottom. These attributes I don't use. HTML page layout is not an exact science. The sooner you learn that, get down to laying in the broad strokes and leaving the fine detail work to chance and the vagaries of different browsers the better off you'll be. You can spend hours make a graphic appear just in the exact right spot on your page only to discover that not everyone using the same screen resolution you use, nor do they use the same browser you do.

ALT="text": This is an extremely important and overlooked attribute. This will tell tell the browser what text to paint on the screen for those folks what can't see the picture. Important for blind and other-abled browsers. This information is also being picked up by some search engines that catalog images on the web.

border=value: This attribute tells the browser how wide to make a box around the image if it is being used as a hypertext link. Yes a picture can be used as a hypertext link. More on that later. For the most part I use border=0 so that there is none of the disturbing wrap around borders on my image links. If I wanted a border on my image I would put one on.

hspace=value: This is a marvelous attribute for making a little breathing room around an image -- so that the words don't but right up to it. A little white space is inserted.

vspace=value This attribute will ad white space to the top and bottom of an image. This way text wrapping under a picture will not touch it.

lowsrc=URL: I don't use this. Too fancy for me and only supported by a few browsers. I leave it as an exercise for you to learn how search engines work so you can find a more complete reference on how this attribute works.

dynscr=URL: I don't use this at all. Never. Why? Because it only works on MSIE. Since this attribute is only supported by MSIE I don't have much to say about it. I refuse to make use of any attribute that is only supported by MSIE. Basically this is their way of displaying video. A better way is to utililize one of the many plugins such as RealPlayer.

ISMAP ( & USEMAP="name"): This attribute will define an image as a server-side image map. Please refrain from using image maps if you can. They are not that easy for other-abled browsers to read.