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 iframe ট্যাগ ও iframe ট্যাগের ব্যবহার... সাধারণত iframe ট্যাগ ব্যবহার করে একটি ওয়েবসাইটের মধ্যে অন্য একটি ওয়েবসাইট কিংবা ওয়েবপেজ ভিউ করানো হয়ে থাকে। ধরুন, আপনি কোন একটি ওয়েবসাইট অন্য কোন ওয়েব...
html ol ul tag ও li tag এর ব্যবহার... HTML এর মধ্যে দুই ধরনের লিস্ট তৈরি করা যায় প্রথমটি হচ্ছে অর্ডারড লিস্ট এবং দ্বিতীয়টি আনঅর্ডারড লিস্ট। আন অর্ডারড লিস্ট হচ্ছে ul ( Unordered list ) এবং...
HTML abbr ট্যাগ ও abbr ট্যাগের ব্যবহার... HTML ট্যাগটি কোন সংক্ষিপ্ত ওয়ার্ডের ক্ষেত্রে ব্যবহার করা হয়ে থাকে। ধরুন আপনি BCC কোথাও ব্যবহার করবেন যার পুর্ণ রুপ হচ্ছে Bangladesh Compu...
b এবং strong ট্যাগ – HTML এ টেক্সট বোল্ড বা... আজকের আলোচনায় জেনে নিবো কিভাবে  HTML এ টেক্সট বোল্ড বা মোটা করে ।  HTML এ টেক্সট বোল্ড বা মোটা  করার জন্য b  কিংবা strong ট্যাগ ব্যবহার করা হয় । তো নি...
HTML base ট্যাগ ও base ট্যাগের ব্যবহার... সাধারণত একটি ডকুমেন্টের সমস্ত ইউআরএল বা ঠিকানা গুলির জন্য এ্কটি ডিফল্ট URL ও এর টার্গেট ঠিক করা হয়ে থাকে base ট্যাগ দিয়ে  । base ট্যাগ ব্যবহার করা হয় ...
এইচ টি এম এল কি একটি ওয়েব পেজের মূল গঠন তৈরি করতে HTML ব্যবহার করা হয়ে থাকে। এইচ টি এম এল হচ্ছে মার্কআপ ল্যাঙ্গুয়েজ, HTML প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। HTML এর ফুল ফ...

You may also like...

Leave a Reply

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

error: Content is protected !!