HTML ডকুমেন্টে হাইপারলিঙ্ক যোগ করে প্রোগ্রাম রচনা কর HTMLডকুমেন্টে ইমেজ বা ছবি যোগ করার প্রোগ্রাম রচনা কর
হাইপারলিংক
হাইপারলিংক হলো ওয়েবের একটি রিসোর্সে অবস্থিত কোনো রেফারেন্স (কোনো ঠিকানা) যার সাহায্যে পাঠক
সরাসরি তার কাঙ্খিত লক্ষ্যে পৌঁছাতে পারে। HTML পেইজ, ইমেজ, সাউন্ড ফাইল, মুভি ইত্যাদি রিসোর্সকে
হাইপারলিংক দিয়ে নির্দেশ করা যায়। কোনো ডকুমেন্টের অভ্যন্তরে হাইপারলিংকের গন্তব্যকে নির্ধারণ করার জন্য অ্যাঙ্কর
টার্মটি ব্যবহৃত হয়। হাইপারলিংক এবং অ্যাংকর উভয়ই নির্ধারণ করতে HTML অ্যাংকর এলিমেন্ট < a> ব্যবহৃত হয়।
HTMLলিংকের সিনটেক্স হলো :Link text
স্টার্ট ট্যাগটি লিংকের এ্যাট্রিবিউট বহন করে। এলিমেন্ট কনটেন্ট (লিংক টেক্সট) যে অংশটি প্রদর্শিত হবে সেটি নির্ধারণ
করে। এলিমেন্ট কনটেন্টটিকে যে টেক্সটই হতে হবে তেমন নয়। কোনো ইমেজ বা যে কোনো ঐঞগখ এলিমেন্ট থেকে
লিংক ও হতে পারে। আর যৎবভ এ্যাট্রিবিউট লিংকের ঠিকানা নির্ধারণ করে।
উদাহরণঃ গুগল সার্চ ওয়েবসাইটটিকে ওয়েবপেজে সংযোজনের ঐঞগখভাষার প্রোগ্রাম : Adding Hyperlink in a webpage
Adding another website in webpage
Search Item
ফলাফল ঃ যে কোন ব্রাউজিং সফ্টওয়্যার ব্যবহার করে ফাইলটি রান করলেই নি¤েœাক্ত আউটপুট পাওয়া যাবে Adding another website in webpage Search Item
৭.৯.১ HTMLডকুমেন্টে ইমেজ যোগ করা
প্রায় প্রতিটি ওয়েব পেইজে ব্যানারসহ বিভিন্ন ধরনের ছবি দেখা যায়। ঐঞগখ এর সাহায্যে কোন ওয়েব পেজে অতি
সহজে ব্যানারসহ যে কোন ধরনের ছবি যোগ করা যায়। ওয়েব পেইজে ছবি বা গ্রাফিক্স যোগ করার জন্য![]()
নামের
HTMLট্যাগের সাথে src নামের এ্যাট্রিবিউট ব্যবহৃত হয়। ওয়েব পেজে ছবি যোগ করার সিনটেক্স হলো ঃ
এখানে টজখ-হলো যে ছবিটি ওয়েব পেজে যোগ করতে চাই সেই ছবির লোকেশন। উদাহরণের সাহায্যে তা দেখানো হলো-
src= pic/smiley.gif
উপরের,src= Òpic/smiley.gif লেখাটির অর্থ হলো ঐঞগখ ভরষব-টি যে লোকেশনে আছে সেই লোকেশনের pic নামের
ফোল্ডারেsmiley.gif নামক ইমেজের অবস্থান।
![]()
height, width border Gএ্যাট্রিবিউট
ওয়েব পেইজে যে ইমেজ বা ছবিটি ইনসার্ট করা হবে সেটি উচ্চতায় এবং প্রস্থে কত পিক্সেলের হবে তা যবরমযঃ এবং
রিফঃয এ্যাট্রিবিউটের উপর নির্ভর করে। রিফঃয এ্যাট্রিবিউট ইমেজের প্রস্থ নির্দেশ করে এবং যবরমযঃ এ্যাট্রিবিউট ইমেজের
দৈর্ঘ্য নির্দেশ করে। অপরদিকে ইমেজের চারিদিকে লাইন বা বর্ডার দেয়ার জন্য নড়ৎফবৎ এ্যাট্রিবিউটটি ব্যবহৃত হয়। এই
বর্ডারের রং সাধারণত (ডিফল্ট হিসেবে) কালো হয়। তবে ডিফল্ট হিসেবে ইমেজের কোন বর্ডার থাকে না। অবশ্য নড়ৎফবৎ
= “০” লিখলে কোন বর্ডার পাওয়া যাবে না। তাই বর্ডারের ০ এর চেয়ে বেশি দেয়া উচিত।
উদাহরণ ঃ ৩০০ ঢ ২০০ সাইজ দিয়ে index.html ইমেজটি ওয়েবপেইজে সংযোজনের জন্য HTML ভাষার প্রোগ্রাম :
শিক্ষার্থীর কাজ ২০০ ঢ ৪০০ সাইজ দিয়ে হরষড়ু.লঢ়ম ইমেজটি ওয়েবপেইজে সংযোজনের জন্য
একটি ঐঞগখ ভাষার প্রোগ্রাম লিখুন এবং বিভিন্ন এ্যাট্রিবিউট বিশ্লেষণ করুন ।
সারসংক্ষেপ
একটি ওয়েব পেইজ বা ওয়েব সাইটের সাথে অন্য একটি ওয়েব পেইজ বা সাইটের সংযোগ স্থাপনের ব্যবস্থাই হলো
হাইপারলিংক। হাইপারলিংক অংশে মাউস দিয়ে ক্লিক করার মাধ্যমে লিংকটি যে অংশের বা ডকুমেন্টের সাথে যুক্ত
সেখানে যাওয়া যায়। হাইপারলিংক তৈরির ঐঞগখ ট্যাগ হলো- <ধ> ও ।
পাঠোত্তর মূল্যায়ন-৭.৯
সঠিক উত্তরের পাশে টিক () চিহ্ন দিন
১। LINK ট্যাগ কোনটি? K. < o1 > ...... L. < 1i > ....... M. < a > ........ N. < q > ........
২। ওয়েবপেইজে চিত্র সংযোগ করার জন্য কোন ট্যাগ ব্যবহৃত হয়?
ক.![]()
L.
M. N.
হাইপারলিংক হলো ওয়েবের একটি রিসোর্সে অবস্থিত কোনো রেফারেন্স (কোনো ঠিকানা) যার সাহায্যে পাঠক
সরাসরি তার কাঙ্খিত লক্ষ্যে পৌঁছাতে পারে। HTML পেইজ, ইমেজ, সাউন্ড ফাইল, মুভি ইত্যাদি রিসোর্সকে
হাইপারলিংক দিয়ে নির্দেশ করা যায়। কোনো ডকুমেন্টের অভ্যন্তরে হাইপারলিংকের গন্তব্যকে নির্ধারণ করার জন্য অ্যাঙ্কর
টার্মটি ব্যবহৃত হয়। হাইপারলিংক এবং অ্যাংকর উভয়ই নির্ধারণ করতে HTML অ্যাংকর এলিমেন্ট < a> ব্যবহৃত হয়।
HTMLলিংকের সিনটেক্স হলো :Link text
স্টার্ট ট্যাগটি লিংকের এ্যাট্রিবিউট বহন করে। এলিমেন্ট কনটেন্ট (লিংক টেক্সট) যে অংশটি প্রদর্শিত হবে সেটি নির্ধারণ
করে। এলিমেন্ট কনটেন্টটিকে যে টেক্সটই হতে হবে তেমন নয়। কোনো ইমেজ বা যে কোনো ঐঞগখ এলিমেন্ট থেকে
লিংক ও হতে পারে। আর যৎবভ এ্যাট্রিবিউট লিংকের ঠিকানা নির্ধারণ করে।
উদাহরণঃ গুগল সার্চ ওয়েবসাইটটিকে ওয়েবপেজে সংযোজনের ঐঞগখভাষার প্রোগ্রাম :
Search Item
ফলাফল ঃ যে কোন ব্রাউজিং সফ্টওয়্যার ব্যবহার করে ফাইলটি রান করলেই নি¤েœাক্ত আউটপুট পাওয়া যাবে Adding another website in webpage Search Item
৭.৯.১ HTMLডকুমেন্টে ইমেজ যোগ করা
প্রায় প্রতিটি ওয়েব পেইজে ব্যানারসহ বিভিন্ন ধরনের ছবি দেখা যায়। ঐঞগখ এর সাহায্যে কোন ওয়েব পেজে অতি
সহজে ব্যানারসহ যে কোন ধরনের ছবি যোগ করা যায়। ওয়েব পেইজে ছবি বা গ্রাফিক্স যোগ করার জন্য
HTMLট্যাগের সাথে src নামের এ্যাট্রিবিউট ব্যবহৃত হয়। ওয়েব পেজে ছবি যোগ করার সিনটেক্স হলো ঃ
এখানে টজখ-হলো যে ছবিটি ওয়েব পেজে যোগ করতে চাই সেই ছবির লোকেশন। উদাহরণের সাহায্যে তা দেখানো হলো-
src= pic/smiley.gif
উপরের,src= Òpic/smiley.gif লেখাটির অর্থ হলো ঐঞগখ ভরষব-টি যে লোকেশনে আছে সেই লোকেশনের pic নামের
ফোল্ডারেsmiley.gif নামক ইমেজের অবস্থান।
ওয়েব পেইজে যে ইমেজ বা ছবিটি ইনসার্ট করা হবে সেটি উচ্চতায় এবং প্রস্থে কত পিক্সেলের হবে তা যবরমযঃ এবং
রিফঃয এ্যাট্রিবিউটের উপর নির্ভর করে। রিফঃয এ্যাট্রিবিউট ইমেজের প্রস্থ নির্দেশ করে এবং যবরমযঃ এ্যাট্রিবিউট ইমেজের
দৈর্ঘ্য নির্দেশ করে। অপরদিকে ইমেজের চারিদিকে লাইন বা বর্ডার দেয়ার জন্য নড়ৎফবৎ এ্যাট্রিবিউটটি ব্যবহৃত হয়। এই
বর্ডারের রং সাধারণত (ডিফল্ট হিসেবে) কালো হয়। তবে ডিফল্ট হিসেবে ইমেজের কোন বর্ডার থাকে না। অবশ্য নড়ৎফবৎ
= “০” লিখলে কোন বর্ডার পাওয়া যাবে না। তাই বর্ডারের ০ এর চেয়ে বেশি দেয়া উচিত।
উদাহরণ ঃ ৩০০ ঢ ২০০ সাইজ দিয়ে index.html ইমেজটি ওয়েবপেইজে সংযোজনের জন্য HTML ভাষার প্রোগ্রাম :
শিক্ষার্থীর কাজ ২০০ ঢ ৪০০ সাইজ দিয়ে হরষড়ু.লঢ়ম ইমেজটি ওয়েবপেইজে সংযোজনের জন্য
একটি ঐঞগখ ভাষার প্রোগ্রাম লিখুন এবং বিভিন্ন এ্যাট্রিবিউট বিশ্লেষণ করুন ।
সারসংক্ষেপ
একটি ওয়েব পেইজ বা ওয়েব সাইটের সাথে অন্য একটি ওয়েব পেইজ বা সাইটের সংযোগ স্থাপনের ব্যবস্থাই হলো
হাইপারলিংক। হাইপারলিংক অংশে মাউস দিয়ে ক্লিক করার মাধ্যমে লিংকটি যে অংশের বা ডকুমেন্টের সাথে যুক্ত
সেখানে যাওয়া যায়। হাইপারলিংক তৈরির ঐঞগখ ট্যাগ হলো- <ধ> ও ।
পাঠোত্তর মূল্যায়ন-৭.৯
সঠিক উত্তরের পাশে টিক () চিহ্ন দিন
১। LINK ট্যাগ কোনটি? K. < o1 > ...... L. < 1i > ....... M. < a > ........ N. < q > ........
২। ওয়েবপেইজে চিত্র সংযোগ করার জন্য কোন ট্যাগ ব্যবহৃত হয়?
ক.