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

html link বা a tag এর ব্যবহার... Link অর্থ যুক্ত করা। আর একটি ওয়েব পেজের সাথে আরও একটি পেজকে যুক্ত করাই হচ্ছে link এর মূল কাজ।  যেকোন ওয়েব পেজে link করার জন্য a tag, যাকে anchor ট্যাগ...
এইচটিএমএল ট্যাগ – html tag ও html attributes... আমাদের আজকের আলোচনার বিষয় এইচটিএমএল ট্যাগ ( html tag ) ও এট্রিবিউট নিয়ে।  এর আগের আর্টিকেল এ আমরা জেনেছিলাম কিভাবে এইচটিএমএল দিয়ে Hello World লিখা যায়...
b এবং strong ট্যাগ – HTML এ টেক্সট বোল্ড বা... আজকের আলোচনায় জেনে নিবো কিভাবে  HTML এ টেক্সট বোল্ড বা মোটা করে ।  HTML এ টেক্সট বোল্ড বা মোটা  করার জন্য b  কিংবা strong ট্যাগ ব্যবহার করা হয় । তো নি...
HTML nav ট্যাগ ও nav ট্যাগের ব্যবহার... সাধারণত HTML nav ট্যাগ ন্যাভিগেশন লিংকগুলির একটি সেটকে নির্ধারণ করে থাকে। যেমন ধরুনঃ কোন একটি সাইটে সাথে আরও একটি সাটের  লিংক করবেন কিংবা আপনার web pa...
ওয়েবসাইটে Youtube ভিডিও অ্যাড করবো কিভাবে... ইতি পূর্বে আমরা আলোচনা করেছি কিভাবে ওয়েবসাইটে গুগল ম্যাপ প্রর্দশন করা যায়। তারই ধারাবাহিকতায় আজকে আমরা আলোচনা করবো কিভাবে Youtube এর ভিডিও ওয়েবসাইটে প...
HTML এ সুপারস্ক্রিপ্ট ও সাবস্ক্রিপ্ট কিভাবে করে (s... একটি ওয়েবপেজে গানিতিক কিংবা রাসায়নিক সমিকরন অথবা সাংকেতিক চিহ্ন যোগ করার জন্য Subscript কিংবা Superscript এর প্রয়োজন হয়। গণিতের এর ক্ষেত্রে Superscrip...

You may also like...

Leave a Reply

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

error: Content is protected !!