Chapter 6:- HTML Images and Colors

by admin | April 09th 2012 | elearning, HTML & Internet | 2,571 Comments

HTML Images

With HTML you can display images in a document.

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.

To display an image on a page, you need to use src attribute. Src stands for “source”. The value of the sre attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

<img src=”url”>

The URL points to the location where the image is stored. An image named “boat.gif” located in the directory “images” on www.rgcsm.org” has the URL :http://www.rgcsm.org/images/boat.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.

Example:

<HTML>

<HEAD><TITLE> Working with Images </TITLE></HEAD><BODY Background=”images/textural.gif “>

Controlling Image Borders! <CENTER>

Image without a BORDER 

<IMG Src = “images/corp.gif”> 

 Image With BORDER =3 

<IMG Border=3 src=”images/corp./gif”> 

</CENTER>

</BODY>

</HTML>

The Alt Attribute

The alt attribute is used to define an “alternate text” for am image. The value of the alt attribute is an author-defined text: <img src=”boat.gif” alt=”Big Boat”>

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 you document for people who have text-only browsers.

Example:

<HTML>

<HEAD><TITLE> Working with Images </TITLE></HEAD> <BODY Background=”images/textural.gif”>

 Use of ALT attribute <CENTER>

Available Image: javacup.gif 

<IMG Src=”images/javacup.gif”> 

Unavailable Image: javac.gif – Without the ALT Attribute 

<IMG>Src=”images/javac.gif”> 

Unavailable Image: javac.gif – With the ALT Attribute set to “Java” 

<IMG Alt=”The Java Cup” Src=”images/javac.gif”> 

</CENTER>

</BODY>

</HTML>

Basic Notes – Useful Tips

If an HTML file contains ten images – eleven file are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

Image Tags

Tag	Description.
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area insidean image map

Example: Controlling image size:

<HTML>

<HEAD><TITLE> Working with Images </TITLE> </HEAD>

<BODY Background =”images/textural.gif”>

Controlling Image Sizes! <CENTER>

Normal Image Size 

<IMG Src=”images/computer.gif”>BR>

Image With Size <Height And Width) Set To200 

<IMG Height =200 Src=”images/computer.gif Width=200> 

</CENTER>

</BODY>

</HTML>

Example:

Setting image alignment

<HTML>

<HEAD><TITLE>Working with Image </TITLE> </HEAD>

<BODY Background=”images/textural.gif”>

 Image Aligned Left 

<IMG Align=Left Src=”images/sctonly2.gif”> Silicon Chip Technologies, 

We Specialize In Corporate Training, Software Development and Placements. Our Training Program and Software Development include Web Based Commercial Applications and Commercial Application Development using Database.

 Image Aligned Right 

<IMG Align=Right Src=”images/sctonly2.gif”> Silicon Chip Technologies, <BR>

We Specialize In Corporate Training, Software Development And Placements. Our Training Program and Software Development include Web Based Commercial Applications and Commercial Application Development using Database.

</BODY>

</HTML>

HTML Background

A good background can make a Web site look really great.

Backgrounds

The <body>tag has two attributes where you can specify background. The background can be a color or an image.

Bgcolor

<HTML>

<HEAD><TITLE>Working with Image </TITLE> </HEAD>

<BODY Background=”images/textural.gif”>

 Image Aligned Left 

<IMG Align=Left Src=”images/sctonly2.gif”> Silicon Chip Technologies, 

 Image Aligned Right 

<IMG Align=Right Src=”images/sctonly2.gif”> Silicon Chip Technologies, 

</BODY>

</HTML>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.

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 until it fills the entire browser window.

The URL can be relative (as in the first line above) or absolute (as in the second line above).

Note: If you want to use a background image, you should keep in mind:

Will the background image increase the loading time too much?
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page?
Will the background image look good when it is repeated on the page?
Will the background image take away the focus from the text?

Basic Notes – Useful Tips

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web consortium (w3c) has removed these attributes from its recommendations.

Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

HTML Colors

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values

HTML colors can be defined as 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) and the highest value is 255 (hex#FF).

The table below shows the result of combining Red, Green, and Blue light sources

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(,2550,0)
	#00FF00	rgb(0,255,0)
	#000FF0	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#COCOC0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

W3C Standard Color Names

W3C has listed 16 color names that will validate with an HTML valuator.

The color manes are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Cross-browser Color Values

Some years ago, when most computers only supported 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different “reserved” fixed system colors (about 20 each).

We are not sure how important this is now, since most computers today have the ability to display millions of different colors, but the choice is left to you.

HTML Color Values

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values

HTML 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 of the light sources is 0 (hex#00). The highest value is 255 (hex#FF).

Turn Off the Red

If you turn off the Red light completely, there are 65536 different combinations of Green and Blue (256*256) to experiment with.

Click here to see some of these combinations of Green and Blue.

Turn On the Red

By setting the Red light completely, there are 65536 different combinations of Green and Blue (256*256) to experiment with.

Click here to see some of these combinations of Green and Blue.

16 Million Different Colors

The combination of Red, Green, and Blue values from 0 to 255 gives a total of core than 16 million different colors to play with (256*256*256).

Most modern monitors are capable of display at least 16384 different colors.

Chapter 6:- HTML Images and Colors

Navigation