techhoneyadmin

HTML Area Tag Shape Attribute

August 15, 2013 by techhoneyadmin

The HTML Area Tag Shape attribute defines the shape of the area, within an image, that can be clicked.

In other words we can say that by using the HTML Area Tag Shape Attribute we define the shape of clickable area within an image.

HTML Area tag Shape Attribute is always used with the HTML Area Coords Attribute to define the shape, size and even the placement of the area.

Syntax of HTML Area Tag Shape Attribute

<area shape=”default|rect|circle|poly”>

HTML Area Tag Shape Attribute Values

HTML Area Shape Values	Description
default	Specifies that the entire region within an image is clickable
Rect	Specifies a rectangular clickable region within the image
Circle	Specifies a circular clickable region within the image
Poly	Specifies a polygonal clickable region within the image

Example of HTML Area Tag Shape Attribute

HTML Area Tag Shape Attribute code

Output


Click on the shapes to watch them:

<img alt="Shapes" src=" HTMLAreaTagEx.gif" usemap="#shapemap" width="145" height="126" />
<map name="shapemap">
<area coords="25,30,12" shape="circle" href="Circle.jpg" target="_blank" type="image/gif" />
<area coords="62,30,82,40" shape="rect" href="triangle.jpg" target="_blank" type="image/gif" />
<area coords="115,35,10" shape="circle" href="star.jpg" target="_blank" type="image/gif" />
</map>

Click on the shapes to watch them:

Shapes

Here in the above HTML Area Shape Attribute example we can see that we have defined the “Circle” and “Star” containing image areas as “Circle” format and the area having the triangle as “Rect” format.

HTML Area Tag Shape Attribute Supporting Browsers

S. No.	Browser	Supported(Yes/No)
1	Internet Explorer	Yes
2	Firefox	Yes
3	Google Chrome	Yes
4	Opera	Yes
5	Safari	Yes

HTML Area Tag Type Attribute

August 15, 2013 by techhoneyadmin

HTML Area Tag Type Attribute defines the MIME type of the linked resource or webpage.

HTML Area Tag Type Attribute is used only when the HTML href attribute is also used in the HTML area tag.

Syntax of using the HTML Area Tag Type Attribute

<area type="MIME_type">

The HTML Area Tag Type Attribute can have the following values:

HTML Area Type Attribute Value	Description
MIME_type	Defines the MIME type of the linked resource or webpage.

Please visit http://www.iana.org/assignments/media-types to see complete list of standard MIME types.

Example of using HTML Area Tag Type Attribute

HTML Area type attribute code

Output

Click on the shapes to watch them:
<img alt="Shapes" src=" HTMLAreaTagEx.gif" 
usemap="#shapemap" width="145" height="126" />
<map name="shapemap">
<area coords="25,30,12" shape="circle" href="Circle.jpg" 
target="_blank" type="image/gif" />
<area coords="62,30,82,40" shape="rect" href="triangle.jpg" 
target="_blank" type="image/gif" />
<area coords="115,35,10" shape="circle" href="star.jpg" 
target="_blank" type="image/gif" />
</map>

Click on the shapes to watch them:

Shapes

Here in the above HTML Area Type Attribute example, we are telling the browser that the linked resource or webpage is having image or gif type.

HTML Area Tag Type Attribute Supporting Browsers

S. No.	Browser	Supported(Yes/No)
1	Internet Explorer	Yes
2	Firefox	Yes
3	Google Chrome	Yes
4	Opera	Yes
5	Safari	Yes

HTML Anchor Tag Shape Attribute

August 15, 2013 by techhoneyadmin

The HTML Anchor Tag Shape attribute <shape> defines the shape of the link, within an image or object, which can be clicked.

In other words we can say that by using the HTML Anchor Tag Shape Attribute we define the shape of clickable area within an image or object.

HTML Anchor Tag Shape Attribute is always used with the HTML Anchor Tag Coords attribute to define the shape, size and even the placement of the link in the area.

HTML Anchor Tag Shape Attribute Syntax

<a shape=”default|rect|circle|poly”>

HTML Anchor Tag Shape Attribute Values

HTML Anchor Tag Shape Attribute Values	Description
Default	Specifies that the entire region within an image is clickable
Rect	Specifies a rectangular clickable region within the image
Circle	Specifies a circular clickable region within the image
Poly	Specifies a polygonal clickable region within the image

HTML Anchor Tag Shape Attribute Example

HTML Area Shape attribute Code

Output

<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif" alt="Shapes"
usemap="#shapemap" width="145" height="126">
<map name="shapemap">
<a shape="circle" coords="25,30,12"  href="Circle.jpg"
target=_blank>
<a shape="rect" coords="62,30,82,40"  href="triangle.jpg"
target=_blank >
<a shape="circle" coords="115,35,10"  href="star.jpg"
target=_blank >
</map>

Click on the shapes to watch them:

Shapes

Here in the above HTML Anchor Tag Shape Attribute example we can see that we have defined the “Circle” and “Star” containing image areas as “Circle” format and the area having the triangle as “Rect” format.

HTML Anchor Tag Shape Attribute Supporting Browsers

S. No.	Browser	Supported(Yes/No)
1	Internet Explorer	No
2	Firefox	Yes
3	Google Chrome	No
4	Opera	Yes
5	Safari	No

HTML Bdo Tag Dir Attribute

August 15, 2013 by techhoneyadmin

HTML Bdo Tag Dir Attribute is used to give direction to the text within the HTML Bdo Tag.

HTML Bdo Tag (<bdo>) stands for bidirectional override.

The HTML Bdo Tag is used to overrule the existing direction of text in any HTML resource or webpage.

HTML Bdo Tag Dir Attribute Syntax

<bdo dir=”rtl|ltr”>
Some text here
</bdo>

HTML Bdo Tag Dir Attribute Example

HTML Bdo Tag Code	Output
<p> This text is left to right </p> <p><bdo dir="rtl"> This text is right to left </bdo>	This text is left to right This text is right to left

In the HTML BDo Tag example output, we can see that the text “This text is right to left” is actually rendered from right to left because we have wrapped the text in HTML Bdo Tag and have used the value of “dir” attribute as “rtl”.

Notice the use of “dir” attribute to orient the text from right to left.

HTML Bdo Tag Dir Attribute Values

HTML Bdo Tag Dir Attribute Value	Meaning
rtl \| ltr	Rtl stands for right to left orientationLtr stands for left to right orientation

HTML Bdo Tag Dir Attribute Supporting Browsers

S. No.	Browser	Supported(Yes/No)
1	Internet Explorer	Yes
2	Firefox	Yes
3	Google Chrome	Yes
4	Opera	Yes
5	Safari	Yes

HTML Blockquote Tag Cite Attribute

August 15, 2013 by techhoneyadmin

The HTML Blockquote Tag <blockquote> Cite Attribute is used to classify the URL of the resource from where we are quoting text or information in the HTML Blockquote Tag.

HTML Blockquote tag is a closed tag and needs closing HTML Blockquote Tag </blockquote>.

Note: Browsers usually tend to indent the elements and text within the Blockquote HTML Tag.

HTML Blockquote Tag Cite Attribute Syntax

<blockquote cite=”URL”>
Some text from other resource
</blockquote>

HTML Blockquote Tag Cite Attribute Example

HTML Blockquote Tag Cite Attribute Code

Output

<h1> Computer </h1>
<p>
Below is the quote from 
Wikipedia Website on Computer
</p>
<blockquote cite="http://en.wikipedia.org/wiki/Computer">
A computer is a general purpose device 
that can be programmed to carry out 
a finite set of arithmetic or logical operations. 
Since a sequence of operations can be 
readily changed, the computer can solve 
more than one kind of problem.
</blockquote>

Computer

Below is the quote from Wikipedia Website on Computer

A computer is a general purpose device that can be programmed to carry out a finite set of arithmetic or logical operations. Since a sequence of operations can be readily changed, the computer can solve more than one kind of problem.

The above HTML Blockquote Tag Cite Attribute example renders the text (taken from Wikipedia Website) in an indented form as we have wrapped the content in HTML 5 Blockquote Tag.

Also, note the usage of the Blockquote HTML Tag’s Cite Attribute.

HTML Blockquote Tag Cite Attribute Values

HTML Blockquote Tag Cite Attribute Value	Description
URL	Defines the location of the resource being quoted.

HTML Blockquote Tag Cite Attribute Supporting Browsers

S. No.	Browser	Supported(Yes/No)
1	Internet Explorer	Yes
2	Firefox	Yes
3	Google Chrome	Yes
4	Opera	Yes
5	Safari	Yes