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>

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

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

উপরের কোড এ দেখুন 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

ওয়ার্ডপ্রেস ট্যাগ কি ও কিভাবে ওয়ার্ডপ্রেস ট্যাগ ব্... ওয়ার্ডপ্রেস ট্যাগ (Tag) কি ক্যাটেগরির মতো ওয়ার্ডপ্রেস ট্যাগ ও এক ধরনের টেক্সনমি ( taxonomy ) এবং এটিও ব্যবহার করা হয় ওয়ার্ডপ্রেস ক্যাটাগরি -র মতো পোস...
HTML p ট্যাগ ও p ট্যাগের ব্যবহার... সাধারণত HTML p ট্যাগ কোন সাইটে লেখা প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়ে থাকে। p tag আসলে paragraph represent করে ।  যেমন অনেক সাইটে কন্টেন কিংবা আর্ট...
html link বা a tag এর ব্যবহার... Link অর্থ যুক্ত করা। আর একটি ওয়েব পেজের সাথে আরও একটি পেজকে যুক্ত করাই হচ্ছে link এর মূল কাজ।  যেকোন ওয়েব পেজে link করার জন্য a tag, যাকে anchor ট্যাগ...
HTML article ট্যাগের ব্যবহার – article ট্যাগ... article ট্যাগ হচ্ছে বহুল ব্যবহৃিত ট্যাগ কোন সংজ্ঞা বা প্রবন্ধ লেখার ক্ষেত্রে ।  article এর বাংলা হচ্ছে প্রবন্ধ এবং এটি আসলেই সে কাজেই ব্যবহার হয় HTML ...
HTML address ট্যাগ এর ব্যবহার... কোন তথ্য বা নথির যোগাযোগের ক্ষেত্রে address ট্যাগ ব্যবহার করা হয়। আবার ওয়েব পেজে কোন ঠিকান লেখবার জন্যও address ট্যাগ ব্যবহার করা হয়ে থাকে। ধরুন, আপনি...
b এবং strong ট্যাগ – HTML এ টেক্সট বোল্ড বা... আজকের আলোচনায় জেনে নিবো কিভাবে  HTML এ টেক্সট বোল্ড বা মোটা করে ।  HTML এ টেক্সট বোল্ড বা মোটা  করার জন্য b  কিংবা strong ট্যাগ ব্যবহার করা হয় । তো নি...
এইচ টি এম এল কি একটি ওয়েব পেজের মূল গঠন তৈরি করতে HTML ব্যবহার করা হয়ে থাকে। এইচ টি এম এল হচ্ছে মার্কআপ ল্যাঙ্গুয়েজ, HTML প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। HTML এর ফুল ফ...
ওয়েবসাইটে গুগল ম্যাপ যোগ করবো কিভাবে... অনেক সময় কিছু কিছু ওয়েবসাইটে ভিজিট করার সময় আমরা Google Map দেখে থাকি। আমরা অনেকেই জানি Google Map ব্যবহার করে রোড়ম্যাপ, লোকেশন ট্র্যাক সহ অনেক ধরনের ...
Html দিয়ে কিভাবে Table তৈরি করবেন... HTML Table সাধারণত একটি ওয়েবপেজে ব্যাবহার করা হয়। Table ব্যাবহার করে আমরা অনেক ডাটা কলাম সারিবব্ধ ভাবে সাজাতে পারি। এইচটিএমএল টেবিল তৈরি করার আগে আপনা...
ওয়েবসাইটে Youtube ভিডিও অ্যাড করবো কিভাবে... ইতি পূর্বে আমরা আলোচনা করেছি কিভাবে ওয়েবসাইটে গুগল ম্যাপ প্রর্দশন করা যায়। তারই ধারাবাহিকতায় আজকে আমরা আলোচনা করবো কিভাবে Youtube এর ভিডিও ওয়েবসাইটে প...

You may also like...

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।