HTML বাংলা টিউটোরিয়াল পর্ব-০৯

এইচটিএমএলে লিংক-এর ব্যবহার

আসসালামু-আলাইকুম ।
আশা করি আপনারা সবাই ভাল আছেন। আজকে আমি আপনাদের মাঝে হাজির হলাম HTML বাংলা টিউটোরিয়াল পর্ব-০৯ নিয়ে । এই সাইটের ফেসবুক পেইজে লাইক দিতে ভুলবেন না।

বাংলা টিউটোরিয়াল ফেসবুক পেজ

লিংক ব্যবহারের সিনট্যাক্সঃ

এইচটিএমএলে লিংক বা হাইপার লিংকের কাজ হচ্ছে কোন লেখা বা ইমেজের উপর ক্লিক করলে জাম্প করে অন্য পেইজে নিয়ে যাওয়া । ওয়েবসাইটে এটা খুন গুরুত্বপুর্ণ বিষয় । লিংক ব্যবহারের নিয়ম হচ্ছে-

একটি উদাহরণ দিলে হয়তো ভালভাবে বুঝতে পারবেন।
উদাহরণঃ
<html>
<head>
</head>
<body>
<a href="www.bangla-tune.blogspot.com">Bangla Tutorial</a>

</body>
</html>
কোডটুকু লিখে link.html নামে সেভ করে ব্রাউজারে রান করান। দেখবেন Bangla Tutorial লেখার উপর ক্লিক করলেই আমার ব্লগ সাইটে চলে যাবেন।

আপনি চাইলে লোকাল লিংক করতে পারেন এই লিংক ট্যাগের মাধ্যমে। সাইট বানানোর সময় আপনাকে অনেক লোকাল লিংক ব্যবহার করতে হবে। এক পেইজ থেকে অন্য পেইজে যেতে লিংক ব্যবহার করতে হবে।
উদাহরণঃ
<html>
<head>
</head>
<body>
<a href="mozilla.html"> Mozilla Firefox</a>
</body>
</html>
প্রথমে কোডটুকু test.html নামে সেভ করুন। তারপর একই ফোল্ডারে অর্থাৎ যেখানে ফাইলটি আছে সেখানে নিচের কোডটি লিখে mozilla.html নামে সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<title>Link</title>
</head>
<body>

Features: 
The Mozilla Firefox includes the following features.
Mozilla Firefox gives the internet user to tabbed browsing.
Mozilla Firefox gives the opportunity to spell checking.
It gives us to incremental find.
It has opportunity to live bookmarking and smart bookmarking.
It gives the internet user a download manager for any file to download.
It also gives a private browsing system.
Mozilla Firefox gives location-aware browsing (also known as geo location) based on a Google service.
It has an integrated search system that uses Google by default in most localization.
Functions can be added through extensions, created by third party developers, of which there is a wide selection, a feature that has attracted many of Firefox's users.

</body>
</html>
এবার test.html নামের ফাইলটি ওপেন করেন । এখানে Mozilla Firefox লেখাটির উপর ক্লিক করলেই আপনি mozilla.html নামের পেইজে চলে যাবে।

লিংকে টার্গেট এট্রিবিউটের ব্যবহারঃ

লিংক করার সময় আমরা নির্দিষ্ট করে দিতে পারি যে কিভাবে লিংক্ টি ওপেন হবে। এই কাজটি করার জন্য আমাদের লিংক ট্যাগের মধ্যে টার্গেট এট্রিবিউট ব্যবহার করতে হবে।
এটি ব্যবহারের নিয়ম হচ্ছে-
target="_blank"
উদাহরণঃ
<html>
<head>
</head>
<body>
<a href="www.bangla-tune.blogspot.com" target="_blank">Bangla Tutorial</a> 
<a href="www.bangla-tune.blogspot.com" target="_self">Bangla Tutorial</a> 
<a href="www.bangla-tune.blogspot.com" target="parent">Bangla Tutorial</a> 
<a href="www.bangla-tune.blogspot.com" target="_top">Bangla Tutorial</a> 
</body>
</html>
কোডটুকু test.html লিখে নামে সেভ করুন।এখন প্রত্যেকটি লিংকে ক্লিক করলেই বুঝতে পারবেন যে ব্ল্যাংক, সেলফ বা পেরেন্ট এর কাজ কেমন হবে।

ইমেজে লিংক তৈরিঃ

অনেক সময় আমাদের ইমেজের মধ্যে লিংক তৈরি করতে হয়। ইমেজের মধ্যে লিংক দেওয়ার নিয়ম হচ্ছে-
<a href="আপনার কাঙ্ক্ষিত লিংক">
<img src="ইমেজের লোকেশন">
</a>

উদাহরণঃ
<html>
<head>
</head>
<body>
<a href="www.bangla-tune.blogspot.com">
<img src="Flower.jpg">
</a>
</body>
</html>
কোডটুকু নামে লিখে ব্রাউজারে রান করান। এবার একটি ইমেজ দেখতে পাবেন। ইমেজে মাউস দিয়ে ক্লিক করলেই উপরের দেওয়া লিংকে আপনি চলে যাবেন ।

আপনি যতটুকু শিখবেন তা সবার মাঝে ছড়িয়ে দেওয়ার চেষ্টা করুন। এই পর্বে কোন বিষয়ে বুঝতে সমস্যা হলে কমেন্ট করুন। আমার পক্ষে যতটুকু সম্ভব সমাধান করার চেষ্টা করব। পেইজটি শেয়ার করতে ভুলবেন না। নিজে জানুন এবং অন্যকে জানাতে সাহায্য করুন। নিচে শেয়ার করার জন্য বিভিন্ন অপশন আছে যেমন ফেসবুক, টুইটার, গুগল প্লাস ইত্যাদি।
আজ আর নয়। পরের পর্বের আমন্ত্রণ জানিয়ে আজকের মত বিদায় বন্দুরা।
ধন্যবাদ সবাইকে।

HTML বাংলা টিউটোরিয়াল পর্ব-১০
HTML বাংলা টিউটোরিয়াল পর্ব-১১
HTML বাংলা টিউটোরিয়াল পর্ব-১২
HTML বাংলা টিউটোরিয়াল পর্ব-১৩

Bangla Tutorial

Pages

Monday, April 4, 2016