আগের পর্ব গুলোঃ
HTML Hyperlinks কে সংক্ষেপে HTML Links বলে। বর্তমাব পেইজ থেকে অন্য পেইজে বা একই পেইজের অন্য জাগায়র সাথে লিঙ্ক তৈরি করতে HTML Links ব্যবহার করা হয়। HTML Link ব্যবহার করার জন্য <a> ট্যাগ ব্যবহার করা হয়। দুই ভাবে <a> ট্যাগ ব্যবহা করা যায়ঃ
1. href attribute ব্যবহার করে অন্য আরেকটী ওয়েব পেজ বা ডকুমেন্টে যেতে
2. name attribute ব্যবহার করে একই পেজের অন্য জাগায় যেতে ব্যবহার করা হয়
HTML Link লেখার নিয়মঃ
<a href="url">Link text</a>
url হচ্ছে ক্লিক করার পর যে পেইজে যাবে সে পেইজের এড্রেস। Link text হচ্ছে ঐ লিঙ্ক সম্পর্কে যে লেখা থাকবে তা।
উদাহরনঃ
বিদ্রঃ আমি বাংলাতে লিখছি বুঝার জন্য। আপনার এডিটর যদি Unicode সাফোর্ট না করে আপনি বাংলায় লিখতে পারবেন না। যদি সাপোর্ট করে তাহলে আপনি ও বাংলা লিখতে পারবেন।
লিঙ্ক তৈরি হলে যে লেখাতে লিঙ্ক তৈরি করবেন তার কালার পরিবর্তন হবে এবং নিচে একটা আন্ডারলাইন হবে। এটা সয়ংক্রিয় ভাবে হবে। আপনি Attribute পরিবর্তন করে ইচ্ছে মত কালার পরিবর্তন করে দিতে পারবেন। লিঙ্কের উপর মাউস পয়েন্টার ধরলে পয়েন্টারের পরিবর্তে একটি ছোট হাত দেখা যায়। এখন লিঙ্ক টিতে ক্লিক করলে আপনাকে টেকটুইটস ব্লগে নিয়ে যাবে। যা একই ট্যাবে ওপেন হবে।
এখন আপনি যদি ঐ পেজটাকে একই ট্যাবে লোড না করে অন্য আরেকটা ট্যাবে খুলতে চান তাহলে আপনাকে আরেকটা Attribute যোগ করতে হবে। target Attribute দিয়ে আপনি এটা পরিবর্তন করে দিতে পারবেন।
উদাহরনঃ
উপরের উদাহরনে target="_blank" দিয়ে লিঙ্কটির টার্গেট ঠিক করে দেওয়া হয়েছে। এখন যদি লিঙ্কটিতে ক্লিক করা হয় তাহলে তা একটি নতুন ট্যাবে ওপেন হবে।
একটা ইমেজকে/ছবি কে আমরা লিঙ্ক হিসেবে ব্যবহার করতে পারি। অর্থাৎ ঐ ছবিতে ক্লিক করলে লিঙ্কে চলে যাবে।
তার জন্য a tag এর মধ্যে ছবি ক্লিক করলে যে লিঙ্কে যাবে তা দিতে হবে, এবং tag বন্ধ না করে ছবিটির উৎস দেখতে হবে। তার জন্য img Tag ব্যবহার করে Attribute হিসেবে ছবিটির source দেখিয়ে দিতে হবে। উপরের উদাহরন টি দেখলে ভালো ভাবে বুঝতে পারবেন। alt ট্যাগ ব্যবহার করা হয়েছে যদি ইমেজটি লোড না হয় তাহলে লেখা টি দেখাবে। আপনি ইচ্ছে করলে ইমেজের সাইজ ও ঠিক করে দিতে পারেন। তার জন্য নিচের উদাহর টি দেখুনঃ
ছবির সাইজ একটি গুরুত্ত্ব পূর্ণ বিষয়। আপনি যদি ইচ্ছে মত একটা সাইজ দিয়ে রাখেন তাহলে আপনার সাইট দেখতে খারাপ দেখাবে। কিন্তু সব কিছু চিন্তা করে যদি ছবির সাইজ ঠিক করে দিয়ে থাকেন তাহলে দেখতে সুন্দর দেখাবে। উপরের উদাহরনে দেখানো হয়েছে কিভাবে ছবির প্রস্থ ও উচ্চতা ঠিক করে দেওয় যায়। এটি img Tag এর ভিতরে উল্লেখ করতে হয়।
আবার ইচ্ছে করলে ছবিটির বর্ডার ও আমরা ঠিক করে দিতে পারি। নিচের উদাহরনে দেখুনঃ
আপনি CSS এর প্রয়গ করে আরো সুন্দর করে বর্ডার দিতে পারবেন।
একই পেজের অন্য কোন জাগায় লিঙ্ক তৈরি করার জন্য name Attribute ব্যবহার করা হয়। যখন একটি পেজ অনেক বড় হয়ে যায় তখন name Attribute ব্যবহার করা হয়।
name Attribute ব্যবহার করার জন্য যে লেখায় বা সেকশনে লিঙ্ক তৈরি করবেন সেখানে a ট্যাগ ব্যবহার করে একটি নাম দিতে হবে। এবং এবার যেখানে লিঙ্ক টি দেখাবেন সেখানে ও <a> ট্যাগ ব্যবহার করে # দিয়ে লিঙ্ক তৈরি করে দিতে হবে। উপরের উদাহরন ভালো ভাবে দেখলে বুঝতে পারবেন।
এখন আর শুধু ওয়ার্ড দিয়ে কোন ওয়েব সাইট দেখা যায় না। ওয়েব সাইটের প্রত্যেক পেজে কিছু না কিছু ইমেজ থাকেই। <img> tag ব্যবহার করে ওয়েব পেজে ছবি বা ইমেজ দেওয়া হয়।
<img> tag ব্যবহার করে বুঝানো হয় যে একটি ইমেজ এখানে আছে। কিন্তু ইমেজ টি কোথায় থেকে লোড হবে বা তার উৎস কোথায় তা দেখিয়ে দিতে হয়। আর এ কাজ করে “src” Attribute এবং লেখা হয়ঃ src="url" এ ভাবে। যেখানে "url" হচ্ছে ইমেজের এড্রেস। Attribute সহ পুরো ইমেজ ট্যাগ লেখা হয় <img src="url"/> এ ভাবে। src হচ্ছে Source।
এখন যদি কোন কারনে যদি ছবি টি লোড না হয় তা জন্য একটি লেখা আমরা প্রদর্শন করতে পারি। আর তা দেওয়া হয় Alt Attribute দ্বারা। এবং লেখা হয়
<img src="url" alt="some_text"/>
এখন আপনি চাচ্ছেন আপনার ছবিটির প্রস্থ এবং উচ্ছতা ঠিক করে দিতে। মানে ইমেজটি কত বড় তা ঠিক করে দিতে তার জন্য attribute গুলো যোগ করে দিতে হবে। যা নিচের মত করে করতে হয়ঃ
<img src="url" alt="About immage" />
আপনি যদি ছবিটির সাইজ না ঠিক করে দেন তাহলে ছবিটির আসল সাইজ দেখাবে।
কিভাবে একটি ছবি এড করতে হয় তা উপরের উদাহরন দেখলেই বুঝতে পারবেন।
অনেক গুলো ডাটা কে সাজাতে টেবিল আমরা সকল ওয়ার্ড প্রসেসরেই ব্যবহার করি। আর HTML এ টেবিল দেওয়ার জন্য রয়েছে <table> tag। যার সাহায্যে HTML পেইজে টেবিল এড করা হয়।
একটি table কত গুলো row বা সারি তে বিভক্ত। সারি দিতে <tr> tag ব্যবহার করা হয়। আবার প্রত্যকটা সারি কত গুলো data cells এ ভিবক্ত। cell দিতে <td> tag ব্যবহার করা হয়। td বলতে "table data," বুঝায়। data cell এর content গুলোকে সংরক্ষন করে। একটি <td> tag text, links, images, lists, forms, other tables ইত্যাদি সংরক্ষন করে।
এবার উপরের কোড টা একটু বিশ্লেষন করি।
এখানে আমরা দুইটি সারি এবং প্রতেক সারিতে দুটি করে সেল ব্যবহার করছি। প্রথমে সারি দিতে হয়। এবং তা দিতে <tr> Tag ব্যবহার করা হয়। এবার এ সারির মধ্যে কয়টা সেল দিবেন তার উপর নির্বর করে <td> Tag ব্যবহার করা হয়। এবং টেবিলের ডাটা গুলো <td> Tag এর মধ্যে লেখা হয়। আপনি <td> Tag ব্যবহার করে একটি সারিতে সেলের সংখা বাড়াতে পারবেন। সেলের ডাটা গুলো দেওয়া হলে দেওয়ার পর আপনি <tr> ট্যাগটি বন্ধ করতে হবে।
যদি আমরা Border Attribute ব্যবহার না করি তাহলে বর্ডার দেখা যাবে না। উপরের উদাহরনে আমরা border="1" দিয়ে বর্ডার দিয়েছি। যদি বর্ডার দেওয়া না লাগে তাহলে এ কোড না লিখলে ও হয়।
ধন্যবাদ সবাইকে।
পরবর্তী পর্ব গুলোঃ
আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!
