area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ

map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি ul, ol ট্যাগের মধ্যে অবশ্যয় li ট্যাগ ব্যবহার হয়। ঠিক একি ভাবে map ট্যাগের মধ্যে area ট্যাগ ঢুকবে। আমরা আসলে দুটো ট্যাগ নিয়ে আলোচনা করবো map এবং area ট্যাগ

area ট্যাগ ও map ট্যাগের ব্যবহার

map এ area ট্যাগ ব্যবহার করে ম্যাপিং করা হয় । ছবির বিভিন্য অংশ গুলো লিংক করা যায় map tag ও area tag ব্যবহার করে । নিচের ছবিটি দেখুন । পৃথিবী ও চাঁদ কে বোঝানোর জন্য দুটি বৃত্ত আকা হয়েছে । এবং আমাদের ইচ্ছা যে পৃথিবী ও চাঁদ কে আমরা লিংক করবো অন্য পেজের সাথে ।

 

 

উপরের ইমেজে Earth এর বৃত্তে মাউচ নিয়ে যান , দেখবেন কোন লিংক নেই । একই ভারে Moon এর উপারেও নেই । কিন্তু আমরা চাচ্ছি লিংক করতে । দেখুন নিচের ইমেজ টি । দেখবেন যে Earth circle এর উপর মাউস নিয়ে দেখাচ্ছে Earth এবং মাউচ পয়েন্টার টি পরিবর্তন হয়ে হাতের মতো ধারন করেছে । ঠিক একই রকম Moon এর ক্ষেত্রে ও ।

 

Earth Moon

 

area এবং map ট্যাগের উদাহরণ

চলুন আগে দেখে নেয়া যাক উপরের এরিয়া ও ম্যাপ ট্যাগ ব্যবহৃত ইমেজের কোড গুলো দেখে নেই ।

 <img src="Earth-moon.jpg" usemap="#earthmoonmap">
 <map name="earthmoonmap"> 
    <area shape="circle" coords="142 142 125" alt="Earth" href="#"> 
    <area shape="circle" coords="404 148 59" alt="Moon" href="#"> 
 </map>

Try it now

এবার ধাপে ধাপে আলোচনা করে নেয়া যাক কার কি কাজ।

ট্যাগ এট্রিবিউট ব্যবহার ব্যাখ্যা

উপরের কোড এ দেখুন map ট্যাগ এর এট্রিবিউট আকারে আছে name ও  এট্রিবিউট ভেলু আকারে আছে। আবার এর map ট্যাগের উপরে img tag দিয়ে একটি ইমেজ নেয়া হয়েছে এবং এর একটি এট্রিবিউট  usemap আছে যার ভেলু (#earthmoonmap) map ট্যাগ এর এট্রিবিউট ভেলু  (earthmoonmap) একই। শুধু usemap এর ক্ষেত্রে একটি # সাইন দেয়া আছে । এর মাধ্যমে map ট্যাগ টি কোন image এ কাজ করবে তা ঠিক করে দেয়া হয়।

<area shape="circle" coords="142 142 125" alt="Earth" href="#">

এবার আশা যাক area ট্যাগ এর বিভিন্য এট্রিবিউট গুলো নিয়ে । area ট্যাগের পুরো এট্রিবিউট লিস্ট নিয়ে পরে আলোচনা করছি । আগে আলোচনা করি shape ও coords নিয়ে । এরা রিলেশনাল কারন shape এর ভেলুর উপর নির্ভর করে coords এর ভলু কতগুলো হবে । যেমন এপরের লাইন এ shape attribute এর ভেলু circle থাকায় coords এর ভেলু তিন টি ( প্রথম টি x axis, দ্বিতীয় টি  y axis আর শেষেরটি circle radius প্রকাশ করে ) । যদি shape attribute এর ভেলু  rect হত, তাহলে coords এর ভেলু চার টি হত ।

area ট্যাগের এট্রিবিউট গুলো

Attribute Value Description
alt text Alternate Text নির্দেশ করে একটি এরিয়ার এবং লাগবেই যদি href attribute টি থাকে area ট্যাগ এর সাথে
coords coordinates এরিয়া ট্যাগ টি কতখানি এরিয়া জুরে থাকবে তা বলে দেয় এবং এর ভেলু গুলো নির্ভর করে shape attribute এর উপর । উপরের উদাহরন টি দেখুন
download finename যদি এরিয়া ট্যাগ দ্বারা আবদ্ধ অংশে ক্লিক করলে কোন ফাইল ডাউনলোড করাতে চাই, তাহলে এই এট্ট্রিবিউট ব্যবহার হয় ।
href URL বলে দেয় কোন পেজে যাবে এরিয়াতে ক্লিক করলে
hreflang language_code বলে দেয় এরিয়াতে ক্লিক করলে যে পেজে যাবে তার ভাষা
media media query বলে দেয় এরিয়াতে ক্লিক করলে যে পেজে যাবে সেটি কোন media / devise এর জন্য optimize করা ।
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer prefetch
prev
search
tag
বলে দেয় এরিয়াতে ক্লিক করলে যে পেজে যাবে সেই পেজ এবং এই পেজের মধ্যে সম্পর্ক কি
shape defaul
rect
circle
poly
ঠিক করে দেয় এরিয়ার ধরন কেমন হবে ।
target _blank
_parent
_self
_top
framename
ঠিক করে দেয় নতুন লিংকটি কিভাবে ওপেন হবে, যেমন _blank থাকলে নতুন ট্যাব ওপেন করে ওপেন হয় ।
type media_type ঠিক করে দেয় target URL এর মিডিয়া টাইপ কি হবে ।

Related Post

ওয়েবসাইটে গুগল ম্যাপ যোগ করবো কিভাবে... অনেক সময় কিছু কিছু ওয়েবসাইটে ভিজিট করার সময় আমরা Google Map দেখে থাকি। আমরা অনেকেই জানি Google Map ব্যবহার করে রোড়ম্যাপ, লোকেশন ট্র্যাক সহ অনেক ধরনের ...
Html দিয়ে কিভাবে Table তৈরি করবেন... HTML Table সাধারণত একটি ওয়েবপেজে ব্যাবহার করা হয়। Table ব্যাবহার করে আমরা অনেক ডাটা কলাম সারিবব্ধ ভাবে সাজাতে পারি। এইচটিএমএল টেবিল তৈরি করার আগে আপনা...
HTML hr ট্যাগ ও hr ট্যাগের ব্যবহার... সাধারণত HTML hr  ট্যাগ কোন ডকুমেন্ট কিংবা কোন লাইনে ব্যবহার করলে নিচের দিকে লম্ব রেখা তৈরি হয়। hr tag আসলে Horizontal Line কে বুঝায়। অনেক সময় কিছু সাই...
html এ DOCTYPE html কেন ব্যবহার হয়... শুরুতেই বলে রাখা ভালো  কে সম্পূর্ন ট্যাগ বলা হয় না।  ব্যাবহার করা হয়ে থাকে  html এর কোন ভার্সন সেইটাকে বোঝাতে।  এইচট...
HTML এ div ট্যাগ ও div ট্যাগের ব্যবহার... HTML এ একটি নির্দিষ্ট অংশকে আলাদাভাবে স্টাইল কিংবা ব্লক আকারে তৈরি করবার জন্য সাধারণত div ট্যাগ ব্যবহার করা হয়ে থাকে।  আমরা যখন একটি ওয়েবসাইট ভিজিট কর...
ওয়েবসাইটে Youtube ভিডিও অ্যাড করবো কিভাবে... ইতি পূর্বে আমরা আলোচনা করেছি কিভাবে ওয়েবসাইটে গুগল ম্যাপ প্রর্দশন করা যায়। তারই ধারাবাহিকতায় আজকে আমরা আলোচনা করবো কিভাবে Youtube এর ভিডিও ওয়েবসাইটে প...

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *