Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.

Color Values Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

Color Table This table shows the result of combining Red, Green, and Blue light sources:.

Color Names A collection of color names is supported by most browsers.

16 Million Different Colors The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least different colors.

Backgrounds The tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: The lines above all set the background-color to black.

Exercise- Change background color to yellow

Background The background attribute specifies a background-image for an HTML page. 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.

Exercise- Insert a picture as background (File is available in my web site) file name: school logo

HTML Images The Image Tag and the Src Attribute In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag. 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 syntax of defining an image:

The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author- defined text: 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.

Exercise- Insert an image (school logo)