A Beginner's Tutorial to HTML - Lesson 4 Graphics shows how to place graphics on your page
A Beginner's Tutorial to HTML - Lesson 4 Graphics shows how to place graphics on your page!
{short description of image}

HTML Tutorial:
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7

·

·

·
html tutorial
Garvick Com

A Beginner's Tutorial to HTML

Lesson 4
Graphics

Image <img> tag The image tag allows you to place graphic images on your web pages. The attributes are:·
  • <src>. This attribute is mandatory, it specifies the source of the image.
  • <align=top|bottom|middle|left|right>. Controls how the image aligns with the surrounding text.
  • <height=?> and <width=?>, where "?" is the size in pixels. These attributes are beneficial because they tell the browser the size of the graphic, speeding up loading time.
  • <hspace=?> and <vspace=?>, where "?" is the size in pixels. This tells the browser to leave the specified amount of white space on the left and right side "hspace" or on the top and bottom "vspace" of the image.
  • <border=?>, where "?" is the size in pixels. Specifies the size of the border surrounding the image. The default is "border=2". Use "border=0" if you don't want any border at all..
  • <alt="text">, where "text" is whatever text you specify to best describe the graphic image. This is very important to non-graphical web browsers and to browsers with automatic graphic loading turned off.

image of a bumblebeeThis is a sample of an image with the attributes "align=right height=72 width=72 hspace=25 alt=bumblebee". When you look at the image in the browser window, notice the box with the word "bumblebee", this is the "height" and "width" tags as well as the "alt" tag in action. If you want to have a look, click on the reload button (Netscape) and then watch the image of the bee.·
The code used looks like this: <img src="a_5bumbl.gif" align=right height=72 width=72 hspace=25 border=0 alt=bumblebee>·

|  Lesson 1 (Learning the Basics) | Lesson 2 (Adding Color)  | Lesson 3 (Formatting Documents) |
Lesson 4 (Graphics) |  Lesson 5 (Linking Text & Graphics) |  Lesson 6 (Lists) |
| Lesson 7 (Tables) | Back to HTML Tutorial |

·

Garvick Home | Free Recipes | Shopping Mall | Annual Events | Vancouver BC

 

Site Map | Garvick's Privacy Policy