?? ???? HTML? Area Tag? ?? ?? ?????. ?? ??? ??? ?? ???? ???? ???? ? ????? ??? ? ??? ?????? ??? ????? ?????. ?? ??? ???? ?? ?? ???? ???? ? ??? ???. ??? ???? ?? ?? ??? ??? ? ??? ?????.

??

?? ??? ??? ????.

<area alt="text" class=" " coords=" " shape> ;

???? ????? ?? ?? ?? ???? alt? ?????.

• class:???? ??? ??? ?????.
• coords: ??? ?? ? ??? ????.

??? ?? ??? ??? ????.

<img  src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" html name alt="HTML? ?? ??" >
<map name=" name">
<area shape="shapeName1" coords="x,y coordinates" href="html%20linkPath">
<area shape="shapeName2" coords=" x,y coordinates " href="htmllinkPath">
</map>

??: ?? ?? ??? ?? ? ????? XHTML? ?? ? ?????. ??? ? ?? ??? ??

HTML?? ?? ??? ??? ??????

?? ???? ??? ??? ????. ???? ??? ?? ??????.

1. ???? ???? ????? ??? ?? ??? ??? ???? ???.

<img src="/static/imghw/default1.png" data-src="edu.jpg" class="lazy" alt="HTML? ?? ?? logo"> // image from the saved folder. Also, we can get from the web URL directly and map with <map> tag.</map>

??? ??? ???? ?? ? ?? ????? src ??? ?? ?????.

2. ??, #map ??? ???? ?? ??? ???. ? ??? ???? ?? ??? ? ?? '#' ??? ?? ?????(?? ?? =” #map”). Mapname? HTML? ?? ??? ??? ????? ???.

??? ?? ??? ????? ??? ?? ??? ?? ???? ???? ??? ?? ????. ????? ?? ?? ??? ??? ???(? ??)? ??? ??? ??? ?????.

3. ??? ??? ??? ?????.

<area shape="rect" cords='…….href=""?' alt="">
href comes with alt attribute by default.

??

????? HTML ???? ????? ????? ??? ???? ? ??? ?? ?? ??? ??? ????. ???? ???? ?? ??, ??? ?? ??, ??? ?? ? ? ?? ??? ????. ?? ??? ??? ??? ??? ??? ?? ?? ??? ???? HTML 5?? ? ?? ??? ??? ????.

1. ??? ??

2. Standard Attributes

The description of these attributes has already been discussed in the previous article.

• Access key
• class
• dir
• id
• Style
• lang
• id
• tab index
• title.

3. Global Attributes

• onmouse down
• onmouse up
• onmouse over
• onmouse move
• onmouse out
• on focus
• on blur
• onkey press
• onkey down
• onkey up.

Examples to Implement Area Tags in HTML

Below are examples of implementing area tags in HTML:

Example #1

In the below example, I have created a jpg image diary.jpg. When u execute the code, the hand tool moves over the image at the specified cords; when you click on it, it directs you to the page rr.html.

Code:

<img  src="/static/imghw/default1.png" data-src="diary.jpg" class="lazy" html alt="HTML? ?? ??" >
<map name="Diary">
<area shape="rect" coords="94,91,189,193" href="rr.html">
</map>

Code: rr.html

hello

 Online tutorial Class

Output:

Example #2

Code:

<img class="logo lazy" src="/static/imghw/default1.png" data-src="edu.jpg" alt="HTML? ?? ?? logo"    style="max-width:90%"  style="max-width:90%" html>
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="HTML? ?? ??">
<area shape="rect" coords="297,7,407,54" href="rr.html" alt="Welcome">
</map>

Code: rr.html

hello

 Online tutorial Class

Code: sha.html

hello

 Welcome to the Page

Output:

The Output below shows the logo of HTML? ?? ??; clicking the word BA directs to the page Hello page.

Example #3

Code:

<img src="/static/imghw/default1.png" data-src="new.png" class="lazy" alt="HTML? ?? ??" border="0" html>
<map name="Protocols">
<area shape="Poly" coords="74,0,113,29,98,72,52,72,38,27" href="https://www.manageengine.com/network-monitoring/what-is-snmp.html%22" alt="SNMP Tutorial" target="_blank">
<area shape="rect" coords="22,83,126,125" alt="FTP Tutorial" href="https://www.techtarget.com/searchnetworking/definition/File-Transfer-Protocol-FTP" target="_blank">
<area shape="circle" coords="73,168,32" alt="http Tutorial" href="https://www.webopedia.com/TERM/H/HTTP.html" target="_blank">
</map>

Explanation of the above program: In this example, we have created an image map using the image file called new.png, which has three clickable areas declared within it using the tag. The first clickable area is a polygonal shape that links to the SNMP page called www.managengine.com. The second clickable area is a rectangular shape that links to the FTP page called www.searchnetworking.com, and finally, the last clickable area is a circle that links to an HTTP page called www.webopedia.com.

Output:

Output:

Conclusion

Therefore, we have seen how the area tag is used in active areas in switching to the pages with brief information explaining how to use the tag in clickable areas with syntax and demo examples.

? ??? HTML? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!