Sunday, 28 August 2016

HTML Images, Image Maps, Colors elements

02:32    No comments

HTML Images
We can insert Image on a web page using HTML img Element.

Attribute of IMG element
  • class- indicates a class name for an element
  • dir- indicates direction of text, like left-to-right or right-to-left
  • id- indicates unique id for an element
  • lang- indicates language code for the content in an element
  • style- indicates an inline style for an element
  • title- title for an element
  • src- specifies the url or location of the image.
  • alt- specifies the alternate text to be used if the web browser cannot render the image.
  • height- specifies the height of the image.
  • width- specifies the width of the image.
  • ismap- indicates that the image is used as an image map.
  • usemap- associates an element with an image map.
Ex:
<!Doctype Html>
<html>
<head><title>images</title></head>
<body>
<h1> Displaying Image</h1>
<img src="home.jpg" alt="Image not found" />
</body>
</html>
If Image is not found than following screen will appear.
Using Image as a Hyperlink
<!Doctype Html>
<html>
<head><title>images</title></head>
<body>
<h1> Displaying Image</h1>
<a href="http://www.webtechomaster.com"
<img src="home.jpg" alt="Image not found" />
</a>
</body>
</html>

Image Maps
It allows you to link multiple web pages with the single image.
Sections will be defined in the image which will act as a hyperlink.

Example:

<!Doctype Html>
<html>
<head><title>Image Map</title></head>
<body>
<h1> Image Maps</h1>
<img src="home.jpg" usemap="#homemap" height="180" width="180"/>
<map name="homemap">
<area shape="rect" coords="0,0,90,130" href="http://www.webtechomaster.com" />
<area shape="circle" coords="190,160,130" href="http://www.technicalstuf.com" />
</map>
</body>
</html>

Colors
Colors can be used to show different text color, setting background color and many other places.

We can apply colors in the web page with the help of
  • Color Names
  • Hex Values
  • RGB Configuration
Color Names
We can use the color in a web page by using its name.

Hex Values
We can also use hexadecimal number to represent a color. It contains 6 digits or 3 byte number.
Byte 1 represent the red color
Byte 2 represent the green color
Byte 3 represents the blue color

RGB Configuration
The process of displaying colors by using different combination of red, green and blue is known as the RGB configuration. In this configuration, the value of each color (red, green, blue) ranges from 0 to 255 in decimal.

<!Doctype Html>
<html>
<head><title>Colors</title></head>
<body>
<h1 >Colors</h1>
<p style="color: Black">Black</p>
<p style="color: Silver">Silver</p>
<p style="color: Gray">Gray</p>
<p style="color: Maroon">Maroon</p>
<p style="color: Red">Red</p>
<p style="color: Purple">Purple</p>
<p style="color: Fuchsia">Fuchsia</p>
<p style="color: Green">Green</p>
<p style="color: Lime">Lime</p>
<p style="color: Olive">Olive</p>
<p style="color: Yellow">Yellow</p>
<p style="color: Navy">Navy</p>
<p style="color: Blue">Blue</p>
<p style="color: Teal">Teal</p>
<p style="color: Aqua">Aqua</p>
</body>
</html>





0 comments:

Post a Comment