Welcome to Creationbangla-24 . কেমন আছেন বন্ধুরা? আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "HTML Hyperlink" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।
Link শব্দের অর্থ হলো যুক্তকরা, সংযোগস্থাপন করা, মিলন ঘটানো ইত্যাদি।
Hyperlink হচ্ছে ওয়েবসাইটের বা ওয়েবপেজের বিশেষ কোনো অংশের সাথে অন্য কোনো অংশের, একটি ওয়েবপেজের সাথে অন্য কোনো ওয়েবপেজের বা একটি ওয়েবসাইটের সাথে অন্য কোনো ওয়েবসাইটের সংযোগ ঘটানো।
-
Hyperlink সাধারণত তিন ধরণের হয়ে থাকে। যাথা:
- Internal Hyperlink: যদি একই ওয়েবপেজের মাঝে link করা হয় তবে তাকে Internal Hyperlink বলে।
- Local Hyperlink: যদি একই ওয়েবসাইটের মাঝে link করা হয় তবে তাকে Local Hyperlink বলে।
- Global Hyperlink: যদি একটি ওয়েবসাইটের বাইরে অন্য এক বা একাধিক ওয়েবসাইট অথবা ওয়েবপেজের মাঝে link করা হয় তবে তাকে Global Hyperlink বলে।
-
Hyperlink এর সুভিধা:
- বিভিন্ন File বা Document শেয়ার করা যায়।
- অন্য যেকোনো ওয়েব অ্যাড্রেস বা রির্সোসের সাথে ওয়েবপেজের সংযোগ ঘটানো যায়।
- Link এ ক্লিক করার মাধ্যমে ওয়েব সাইটের বিভিন্ন পেজে যাওয়া যায়।
- ইচ্ছা মতো লিংকের তালিকা তৈরি করা যায়। ফলে ব্যবহারকারী খুব সহজে অন্যান্য খুজে পায় এবং view বাড়ে।
- বিভিন্ন প্রয়োজনীয় বিষয়ে বিজ্ঞাপন দেয়া যায়।
- ছবি ব্যবহার করে লিংক তৈরি করা যায়, যা ব্যবহারকারির দৃষ্টি আকর্ষণ করে।
- শিক্ষা প্রতিষ্ঠানগুলোর সাথে সহজেই সংযোগ স্থাপন করা যায়।
- E-mail Address link করা যায়। যার মাধ্যমে E-mail আদান-প্রদান করা সহজ হয়।
-
Hyperlink এর অসুভিধা:
- যে Website থেকে Resource ব্যবহার করা হয় সেই ওয়েবসাইট যদি তাদের Document Delete করে তবে আপনি Resource এর সুভিধাগুলো পাবেন না।
- যদি অন্য কোনো ওয়েবপেজের, ইমেজের বা অন্য কোনো কিছুর সাথে লিংক করেন, আর যদি সেগুলো Delete বা Link Change করা হয় তবে সেগুলো প্রদর্শন করবে না।
- যদি URL(Uniform Resource Locator) টি খুব বেশি long হয় তবে প্রদর্শন করতে সমস্যা হতে পারে।
- যদি লিংকৃত ওয়েব সাইটের ব্যান্ড উইথড খুব কম হয় তবে প্রদর্শনে সমস্যা হতে পারে।
Hyperlink তৈরির ট্যাগ পরিচিতি ও গঠনরীতি।
Hyperlink তৈরি করার জন্য <a> (Anchor) Tag ট্যাগ ব্যবহার করা হয়। আর এই ট্যাগের অভ্যন্তরে href নামক একটি Attribute ব্যবহার করা হয়। তারপর ="#" Double Quotation এর মাঝে URL(Uniform Resource Locator), Name,id, E-mail address ইত্যাদি ব্যবহার করতে হয়।
Hyperlink তৈরি করার জন্য <a> (Anchor) Tag ট্যাগ ব্যবহার করা হয়। আর এই ট্যাগের অভ্যন্তরে href নামক একটি Attribute ব্যবহার করা হয়। তারপর ="#" Double Quotation এর মাঝে URL(Uniform Resource Locator), Name,id, E-mail address ইত্যাদি ব্যবহার করতে হয়।
- Internal Hyperlink এর গঠনরীতি: <a href="#id name"> Content </a>
- Local Hyperlink এর গঠনরীতি: <a href="page.html"> Content </a>
- Internal Hyperlink এর গঠনরীতি: <a href="URL"> Content </a>
- Mailing Hyperlink এর গঠনরীতি: <a href="mailto:E-mail address"> Content </a>
নিম্নে Hyperlink তৈরি করার জন্য কোডিং করে দেখানো হলো। আপনি চাইলে কোড বা লিংক পরিবর্তন করে এখানেই অনুশীলন করতে পারেন এবং Run Code Button এ ক্লিক করে উক্ত কোডের Output দেখতে পারেন । আবার আপনি চাইলে Copy Code Button. এ ক্লিক করে কোডগুলো কপি করতে পারেন এবং তা আপনার প্রয়োজনে ব্যাবহার করতে পারেন।
-
উপরিউক্ত Tag পরিচিতি ও তাদের কাজের বর্ণনা :
- <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type HTML5 Standard.
- <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
- <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েব পেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
- <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
- </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজের শিরোনাম বলে গণ্য হবে না।
- </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
- <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
- <a>Tag এর মাধ্যমে Hyperlink তৈরি করা হয়েছে।
- href নামের একটি অ্যাট্রিবিউট ব্যবহার করা হয়েছে যা লিংকটির Location বা গন্তব্য নির্দেশ করে।
- <br/> ট্যাগের মাধ্যমে একটি লাইন ব্রেক করা হয়েছে।
- <!--...--> Tag এর মাধ্যমে কোডের মধ্যে Comment করা হয়েছে। যদি প্রোগ্রামটি বড় হয় তাহলে কোডিং করার সময় step by step Comment লিখে রাখতে পারেন। আর যদি পরবর্তী সময়ে পেজটি update করতে চান তাহলে update করা সহজ হবে। এক্ষেত্রে পেজ প্রদর্শনে কোনো সমস্যা হবে না এবং পেজের মাঝে সেই Comment গুলো প্রদর্শনও করবে না।
- href Attribute এর পর একটি = চিহ্ন দিয়ে তারপর " " Double Quotation এর মাঝে আপনার প্রয়োজন অনুযায়ী id, page name, E-mail address ও URL ব্যবহার করবেন।
- Content এর জায়গায় আপনার ইচ্ছা অনুযায়ী Text দিবেন। অর্থ্যাৎ আপনি যে Text এর উপর ক্লিক করে প্রবেশ করতে চান সেই Text টি দিবেন। অবশ্যই Text টি <a> ও </a> ট্যাগদ্বয়ে মাঝে রাখতে হবে। অন্যথায় সেই Text এর উপর ক্লিক করে লিংক অনুযায়ী প্রবেশ করতে পারবেন না।
- Target Attribute এটা নির্দেশ করে যে, linked document টি কোথায় খুলতে হবে বা from টি কোথায় জমা দিতে হবে। তবে Hyperlink করার ক্ষেত্রে Target Attribute এর পর একটি = চিহ্ন দিয়ে তারপর " " Double Quotation এর মাঝে আপনার প্রয়োজন অনুযায়ী _blank, _self, _parent, Frame name ইত্যাদি value গুলো ব্যবহার করতে পারেন।
- _blank এটি ব্যবহৃত হয় নতুন ব্রাউজার উইন্ডোতে পেইজটি ওপেন করতে।
- _self এটি ব্যবহৃত হয় কারেন্ট উইন্ডোতে পেইজটি ওপেন করতে।
- _parent এটি ব্যবহৃত হয় parent frameset এ পেইজটি ওপেন করতে।
- _top এটি ব্যবহৃত হয় সম্পূর্ণ window তে পেজটি open করতে।
- _framename এটি ব্যবহৃত হয় উল্লেখিত নামের ফ্রেমটিতে পেইজটি ওপেন করতে।
- </a> Tag এর মাধ্যমে <a> ট্যাগ বন্ধ করা হয়েছে।
- id Attribute ব্যবহার করা হয় কোনো Element এর একটি unique পরিচয় নির্ধারণ করার জন্য। id Attribute এর পর একটি = চিহ্ন দিয়ে তারপর " " Double Quotation এর মাঝে আপনার প্রয়োজন অনুযায়ী Text ব্যবহার করবেন।
- </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
- </html> Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।
ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "HTML word abbreviation" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "HTML word abbreviation" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...
আপনার পোস্ট অনুযায়ী মোটামুটি সবই বুঝলাম কিন্তু ইন্সট্রাগ্রামে ব্যাগ লিংক করার পদ্ধতিটা জানতে পারী কি?
ReplyDeleteplease wait and Stay with us
ReplyDeletePost a Comment