এ লেসনে আমরা HTML Hyperlink নিয়ে আলোচনা করবো। আমরা যেসব সাইট ব্রাউজ
করি সব সাইটেই লিংক থাকে। এক পেইজ থেকে আরেক পেইজে যাওয়ার জন্য বা এক সাইট
থেকে আরেক সাইটে যাওয়ার কাজে লিংক ব্যবহৃত হয়।
লিংক হল একটি শব্দ , শব্দের সমষ্টি বা ছবি যাতে ক্লিক করে বর্তমান ডকুমেন্ট থেকে অন্য ডকুমেন্ট বা অন্য কোন সেকশনে যাওয়া যায়।
যখন কোন লিংকে কার্সর নেয়া হয় তখন কার্সর ছোট একটি হাতের আকার ধারন করে।
লিংক হল একটি শব্দ , শব্দের সমষ্টি বা ছবি যাতে ক্লিক করে বর্তমান ডকুমেন্ট থেকে অন্য ডকুমেন্ট বা অন্য কোন সেকশনে যাওয়া যায়।
যখন কোন লিংকে কার্সর নেয়া হয় তখন কার্সর ছোট একটি হাতের আকার ধারন করে।
HTML এ লিংককে <a> ট্যাগ দিয়ে প্রকাশ করা হয়।
<a> ট্যাগ দুভাবে ব্যবহৃত হতে পারে:
- href এট্রিবিউটের মাধ্যমে অন্য ডকুমেন্টে যাওয়ার লিংক তৈরী করার জন্য।
- name এট্রিবিউটের মাধ্যমে একই ডকুমেন্টের অন্য সেকশনে যাবার লিংক তৈরীর জন্য।
HTML Links syntax:
<a href="url">Link Text</a>
উদাহরণ:
<a href="http://webdebd.blogspot.com">বেসিক ওয়েব ডিজাইন</a>
href এট্রিবিউট দিয়ে সাইটের গন্তব্য নির্দেশ করা হয়। উপরের কোডটা লিখে রান করলে এমনটা দেখাবে:
বেসিক ওয়েব ডিজাইন
এতে ক্লিক করলে বেসিক ওয়েব ডিজাইন নামক সাইটে প্রবেশ করবে।
লিংক হিসেবে শুধু লিংক নয় ছবি বা কোন HTML Element ও ব্যবহৃত হতে পারে।
HTML Links- Target attribute:
Target এট্রিবিউট দ্বারা সাইটটা ব্রাউজারের কোথায় ওপেন হবে তা নির্দেশ করা হয়। একটি নতুন ট্যাবে না ওপেন করা ট্যবে ওপেন হবে তার নির্দেশ দেয়া হয়। যেমন:
<a href="http://www.prothom-alo.com" target="_blank">Prothom alo</a>
এই লিংকে ক্লিক করলে এটি একটি নতুন ট্যাবে ওপেন হবে।
HTML Links- Title attribute:
Title এট্রিবিউট ব্যবহার করলে লিংকে কার্সর যাওয়ার সাথে সাথে সেখানে টাইটেলে দেয়া লেখাটা ভেসে ওঠে।
<a href="http://www.prothom-alo.com" target="_blank"title="প্রথম আলো">Prothom alo</a>
এই কোডটা লিখে রান করলে যে লিংক তৈরী হবে তাতে কার্সর নিলে "প্রথম আলো " লেখাটা ভেসে উঠবে।
HTML Links- Name attribute:
Name এট্রিবিউট ব্যবহার করা হয় একই ডকুমেন্টে বা পেইজের অন্য কোন সেকশনে যাবার কাজে। যেমন:
<html>
<body>
<a href="#c4">See also chapter 4</a>
<h2>Chapter 1</h2>
<p>This is chapter one</p>
<h2>Chapter 2</h2>
<p>This is chapter two</p>
<h2>Chapter 3</h2>
<p>This is chapter three</p>
<h2><a name="c4">Chapter 4</a></h2>
<p>This is chapter four</p>
</body>
</html>
এই কোডগুলো লিখে রান করে দেখুন তাহলে ব্যপারটা বুঝতে পারবেন। লিংকে যদি ভুল থাকেও তবু স্ক্রিপ্ট রান হবে এবং এতে ক্লিক করলে পেজের ওপরে চলে যাবে।
নিয়মিত প্র্যাকটিস করুন দেখবেন সব সহজ লাগছে। নিজের মনে যা আসে তাই কোড করুন দেখবেন আপনার কোডিং জ্ঞান দিন দিন বেড়েই চলেছে।
পূর্ববর্তী পোস্ট
<a> ট্যাগ দুভাবে ব্যবহৃত হতে পারে:
- href এট্রিবিউটের মাধ্যমে অন্য ডকুমেন্টে যাওয়ার লিংক তৈরী করার জন্য।
- name এট্রিবিউটের মাধ্যমে একই ডকুমেন্টের অন্য সেকশনে যাবার লিংক তৈরীর জন্য।
HTML Links syntax:
<a href="url">Link Text</a>
উদাহরণ:
<a href="http://webdebd.blogspot.com">বেসিক ওয়েব ডিজাইন</a>
href এট্রিবিউট দিয়ে সাইটের গন্তব্য নির্দেশ করা হয়। উপরের কোডটা লিখে রান করলে এমনটা দেখাবে:
বেসিক ওয়েব ডিজাইন
এতে ক্লিক করলে বেসিক ওয়েব ডিজাইন নামক সাইটে প্রবেশ করবে।
লিংক হিসেবে শুধু লিংক নয় ছবি বা কোন HTML Element ও ব্যবহৃত হতে পারে।
HTML Links- Target attribute:
Target এট্রিবিউট দ্বারা সাইটটা ব্রাউজারের কোথায় ওপেন হবে তা নির্দেশ করা হয়। একটি নতুন ট্যাবে না ওপেন করা ট্যবে ওপেন হবে তার নির্দেশ দেয়া হয়। যেমন:
<a href="http://www.prothom-alo.com" target="_blank">Prothom alo</a>
এই লিংকে ক্লিক করলে এটি একটি নতুন ট্যাবে ওপেন হবে।
HTML Links- Title attribute:
Title এট্রিবিউট ব্যবহার করলে লিংকে কার্সর যাওয়ার সাথে সাথে সেখানে টাইটেলে দেয়া লেখাটা ভেসে ওঠে।
<a href="http://www.prothom-alo.com" target="_blank"title="প্রথম আলো">Prothom alo</a>
এই কোডটা লিখে রান করলে যে লিংক তৈরী হবে তাতে কার্সর নিলে "প্রথম আলো " লেখাটা ভেসে উঠবে।
HTML Links- Name attribute:
Name এট্রিবিউট ব্যবহার করা হয় একই ডকুমেন্টে বা পেইজের অন্য কোন সেকশনে যাবার কাজে। যেমন:
<html>
<body>
<a href="#c4">See also chapter 4</a>
<h2>Chapter 1</h2>
<p>This is chapter one</p>
<h2>Chapter 2</h2>
<p>This is chapter two</p>
<h2>Chapter 3</h2>
<p>This is chapter three</p>
<h2><a name="c4">Chapter 4</a></h2>
<p>This is chapter four</p>
</body>
</html>
এই কোডগুলো লিখে রান করে দেখুন তাহলে ব্যপারটা বুঝতে পারবেন। লিংকে যদি ভুল থাকেও তবু স্ক্রিপ্ট রান হবে এবং এতে ক্লিক করলে পেজের ওপরে চলে যাবে।
নিয়মিত প্র্যাকটিস করুন দেখবেন সব সহজ লাগছে। নিজের মনে যা আসে তাই কোড করুন দেখবেন আপনার কোডিং জ্ঞান দিন দিন বেড়েই চলেছে।
পূর্ববর্তী পোস্ট
No comments:
Post a Comment