Lesson 7 :- Using Images and Backgrounds
(430 reads)
Using the Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only
and it has no closing tag.
In HTML to display an image on a page, you need to use the src attribute. Src
stands for "source". The value of the src attribute is the URL of
the image you want to display on your page.
The html syntax of defining an image:
<img src="url">
The URL points to the location where the image is stored. An image named "logo.gif"
located in the directory "images" on "http://compbuy.co.uk/webdesign/"
has the URL: http://compbuy.co.uk/webdesign/themes/DeepBlue/images/logo.gif.
The browser puts the image where the image tag occurs in the document. If you
put an image tag between two paragraphs, the browser shows the first paragraph,
then the image, and then the second paragraph.
Using the Alt Attribute
The html alt attribute is used to define an "alternate text" for an
image. The value of the alt attribute is an author-defined text:
<img src="logo.gif" alt="Logo">
The "alt" attribute tells the reader what he or she is missing on
a page if the browser can't load images. The browser will then display the alternate
text instead of the image. It is a good practice to include the "alt"
attribute for each image on a page, to improve the display and usefulness of
your document for people who have text-only browsers.
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.
Bgcolor
The bgcolor attribute sets the background to a color. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background color to black.
Using Background
The background attribute sets the background to an image. The value of this
attribute is the URL of the image you want to use. If the image is smaller than
the browser window, the image will repeat itself until it fills the entire browser
window.
<body background="clouds.gif">
<body background=" http://compbuy.co.uk/webdesign/clouds.gif">
| 
