ওয়েবপেজে হাইপারলিংক ও ছবি যুক্তকরণ

ওয়েবপেজে হাইপারলিংক ও ছবি যুক্তকরণ

সুপ্রিয় শিক্ষার্থীরা, আসসালামু আলাইকুম। এইচএসসি আইসিটি ক্লাসে তোমাদের সবাইকে স্বাগতম। আজকে আমরা ওয়েব ডিজাইনের খুবই ইন্টারেস্টিং এবং প্র্যাকটিক্যাল একটি টপিক নিয়ে আলোচনা করব। আজকের টপিক হলো 'ওয়েবপেজে হাইপারলিংক ও ছবি যুক্তকরণ'। চিন্তা করো তো, একটা ওয়েবসাইট যদি শুধুই টেক্সট হয়, আর এক পেজ থেকে অন্য পেজে যাওয়ার কোনো ব্যবস্থা না থাকে, তাহলে কেমন লাগবে? নিশ্চয়ই বোরিং! তাই আজকে আমরা শিখব কীভাবে ওয়েবসাইটকে কানেক্ট করতে হয় এবং সুন্দর সুন্দর ছবি দিয়ে সাজাতে হয়। চলো দেখে নিই, এই লেকচার শেষে আমরা ঠিক কী কী শিখতে পারব।

ইন্টারনেট কেন 'ওয়েব'?

তোমরা কি কখনও ভেবেছ, ইন্টারনেটকে কেন 'ওয়েব' বা 'জাল' বলা হয়? স্ক্রিনে মাকড়সার জালের ছবিটার দিকে তাকাও। দেখবে, জালের প্রতিটি অংশ সুতোর মাধ্যমে একে অপরের সাথে যুক্ত। ঠিক একইভাবে, ইন্টারনেটের কোটি কোটি ওয়েবসাইটও একে অপরের সাথে যুক্ত থাকে। আর এই যুক্ত করার কাজটি করে 'হাইপারলিংক'। যদি হাইপারলিংক না থাকত, তবে প্রতিটি ওয়েবপেজ হতো সাগরের মাঝখানে একেকটা বিচ্ছিন্ন দ্বীপের মতো, যেখানে কেউ পৌঁছাতে পারত না। আমরা যখন কোনো টেক্সট বা ইমেজে ক্লিক করে অন্য পেজে যাই, সেটাই হলো হাইপারলিংক।

হাইপারলিংক (Hyperlink) পরিচিতি

<a href="url">Link Text</a>

HTML-এ লিংক তৈরি করার জন্য আমরা `<a>` ট্যাগ ব্যবহার করি, যাকে বলা হয় Anchor Tag বা অ্যাঙ্কর ট্যাগ। অ্যাঙ্কর মানে হলো নোঙর, যা জাহাজকে মাটির সাথে আটকে রাখে, এখানে এটি এক পেজকে অন্য পেজের সাথে কানেক্ট করে। এর সবচেয়ে গুরুত্বপূর্ণ অংশ বা অ্যাট্রিবিউট হলো `href` বা Hypertext Reference। এই `href` এর ভেতরেই আমাদের বলে দিতে হয় লিংকটি ক্লিক করলে ইউজার কোথায় যাবে। সিনট্যাক্সটি খেয়াল করো— প্রথমে `<a>` ট্যাগ, তারপর `href="ঠিকানা"`, এরপর যে লেখাটি স্ক্রিনে দেখা যাবে, এবং শেষে `</a>` দিয়ে ট্যাগ শেষ করতে হয়।

লিংকের প্রকারভেদ ও টার্গেট

লিংক মূলত দুই ধরণের হয়। যখন তুমি তোমার নিজের সাইটের এক পেজ থেকে অন্য পেজে যাও, যেমন হোম পেজ থেকে কন্টাক্ট পেজে, সেটা হলো ইন্টারনাল লিংক। আর যখন তোমার সাইট থেকে গুগল, ফেসবুক বা অন্য কোনো ওয়েবসাইটে কাউকে পাঠাও, সেটা হলো এক্সটারনাল লিংক। এখন একটা মজার বিষয় খেয়াল করো। অনেক সময় আমরা চাই, লিংকে ক্লিক করলে আমাদের সাইটটি বন্ধ না হয়ে পাশের নতুন ট্যাবে লিংকটি ওপেন হোক। এটার জন্য আমরা `target="_blank"` অ্যাট্রিবিউট ব্যবহার করি। এটা ইউজার এক্সপেরিয়েন্সের জন্য খুব দরকারি, কারণ এতে ইউজার তোমার সাইট হারিয়ে ফেলে না।

অ্যাঙ্কর লিংক বা বুকমার্ক (Bookmark)

<h2 id="section1">অধ্যায় ১</h2>

<a href="#section1">অধ্যায় ১-এ যান</a>

তোমরা নিশ্চয়ই উইকিপিডিয়া বা বড় কোনো ব্লগে দেখেছ, উপরে সূচিপত্র থাকে, আর সেখানে ক্লিক করলেই পেজের নিচে নির্দিষ্ট টপিকে অটোমেটিক স্ক্রল হয়ে চলে যায়। এটাকে বলে পেজ জাম্প বা বুকমার্ক লিংক। এটা করার নিয়মটা একটু আলাদা। প্রথমে তোমাকে গন্তব্যে বা যেখানে যেতে চাও, সেখানে একটি `id` দিতে হবে। এরপর লিংকের `href`-এ সেই আইডির নাম লিখতে হবে, তবে অবশ্যই তার আগে একটি হ্যাশ (#) চিহ্ন দিতে হবে। মনে রাখবে, এই হ্যাশ চিহ্ন না দিলে ব্রাউজার বুঝবে না যে এটা একই পেজের ভেতরের কোনো লিংক।

ওয়েবপেজে ছবি যুক্তকরণ (Image)

<img src="image.jpg" alt="Description">

কথায় আছে, একটি ছবি হাজার শব্দের সমান। ওয়েবসাইটকে সুন্দর ও প্রাণবন্ত করতে ছবির কোনো বিকল্প নেই। স্ক্রিনে দেখো, বাম পাশের ওয়েবসাইটটি শুধু টেক্সট দিয়ে ভরা, কতটা বোরিং লাগছে! আর ডান পাশেরটায় ছবি থাকায় কত সুন্দর লাগছে। ওয়েবপেজে ছবি যুক্ত করতে আমরা `<img>` ট্যাগ ব্যবহার করি। মজার বিষয় হলো, `<a>` ট্যাগের মতো এর কোনো শেষ বা ক্লোজিং ট্যাগ নেই। এটি একটি এম্পটি ট্যাগ। চলো দেখি এটি কীভাবে কাজ করে এবং এর কী কী অ্যাট্রিবিউট আছে।

ইমেজ অ্যাট্রিবিউট: src এবং alt

ইমেজ ট্যাগের প্রাণ হলো `src` বা সোর্স, যা বলে দেয় ছবিটা আসলে কোথায় আছে। কিন্তু আমি চাই তোমরা `alt` বা অল্টারনেটিভ টেক্সট অ্যাট্রিবিউটটা খুব গুরুত্ব দিয়ে শেখো। অনেক সময় নেট স্লো থাকলে ছবি লোড হয় না, তখন ইউজার স্ক্রিনে কী দেখবে? তখন এই `alt` টেক্সটটি দেখা যায়, যা বলে দেয় ছবিটা কীসের ছিল। তাছাড়া, চিন্তা করো তাদের কথা যারা চোখে দেখেন না। তারা যখন স্ক্রিন রিডার সফটওয়্যার ব্যবহার করেন, তখন কম্পিউটার তাদের এই লেখাটি পড়ে শোনায়। একজন ভালো ডেভেলপারের লক্ষণ হলো সবসময় `alt` ব্যবহার করা।

ছবির সাইজ ও টাইটেল

তুমি যদি ছবির সাইজ বলে না দাও, তবে ছবি তার আসল সাইজে লোড হবে। এখন ছবিটা যদি অনেক বড় হয়, তবে পুরো স্ক্রিন জুড়ে লোড হবে যা দেখতে খারাপ লাগবে। তাই `width` এবং `height` দিয়ে সাইজ ঠিক করে দেওয়া ভালো। তবে সাধারণত যেকোনো একটা—হয় শুধু width, না হয় শুধু height—দিলেই ব্রাউজার রেশিও ঠিক রেখে অন্যটা অটোমেটিক নিয়ে নেয়। আর `title` অ্যাট্রিবিউট দিলে মাউস ছবির ওপর নিলেই সুন্দর একটি টুলটিপ বা লেখা ভেসে উঠবে, যা ইউজারকে বাড়তি তথ্য দেয়।

ফাইল পাথ (File Path): ছবি কেন শো করে না?

ওয়েব ডিজাইন শিখতে গিয়ে নতুনরা সবচেয়ে বেশি যে সমস্যায় পড়ে, তা হলো কোড ঠিক লিখলেও ছবি শো করে না। এর প্রধান কারণ হলো 'পাথ' বা ছবির ঠিকানা ভুল করা। পাথ দুই ধরণের হয়। অ্যাবসলিউট বা পূর্ণ ঠিকানা, যা সাধারণত অন্য কোনো ওয়েবসাইটের ছবির লিংক কপি করলে পাওয়া যায়। আর রিলেটিভ পাথ, যা তোমার নিজের কম্পিউটারের ফোল্ডারের ওপর নির্ভর করে। তুমি যখন নিজের প্রোজেক্টে কাজ করবে, তখন মূলত রিলেটিভ পাথই ব্যবহার করবে। চলো পরের স্লাইডে আমরা রিলেটিভ পাথ খুব ভালো করে বুঝে নিই।

রিলেটিভ পাথ (Relative Path) চেনার উপায়

এই স্লাইডটি খুব মন দিয়ে খেয়াল করো। তোমার HTML ফাইল আর ছবি যদি পাশাপাশি একই ফোল্ডারে থাকে, তবে `src`-এ শুধু ছবির নাম লিখলেই হবে। কিন্তু ধরো, তুমি গুছিয়ে কাজ করার জন্য সব ছবি `images` নামের একটা ফোল্ডারের ভেতরে রেখেছ। তখন তোমাকে লিখতে হবে `images/` তারপর ছবির নাম। আর যদি ছবিটা ফোল্ডারের বাইরে বা আগের ফোল্ডারে থাকে, তবে `../` (ডট ডট স্ল্যাশ) ব্যবহার করে এক ধাপ পেছনে যেতে হয়। এই `../` এর কনসেপ্টটা ক্লিয়ার থাকা খুব জরুরি, বিশেষ করে বড় প্রজেক্টে।

ইমেজ হাইপারলিংক

<a href="https://www.facebook.com">
  <img src="fb-logo.png" alt="Facebook" width="50">
</a>

আমরা লিংক বানানো শিখলাম, আবার ছবি বসানোও শিখলাম। এখন যদি চাই ছবিতে ক্লিক করলেই একটা লিংকে চলে যাবে? এটা করা খুব সহজ! আমরা `<a>` ট্যাগের ঠিক মাঝখানে, যেখানে আমরা সাধারণত টেক্সট লিখতাম, সেখানে টেক্সটের বদলে পুরো `<img>` ট্যাগটা বসিয়ে দেব। একে বলা হয় নেস্টিং। দেখবে প্রায় সব ওয়েবসাইটে উপরের লোগোতে ক্লিক করলে হোমপেজে নিয়ে যায়, সেটা এভাবেই করা হয়। এখানে লিংকটি হলো বাইরের আবরণ, আর ছবিটা হলো ভেতরের কন্টেন্ট।

কোন ফরম্যাটের ছবি ব্যবহার করব?

সব ছবির ফরম্যাট কিন্তু এক কাজের জন্য না। তোমার ওয়েবসাইটে যদি সাধারণ সিনারি বা মানুষের ছবি দাও, তবে JPG ব্যবহার করবে, কারণ এতে ফাইলের সাইজ কম থাকে। যদি লোগো বা এমন ছবি চাও যার ব্যাকগ্রাউন্ড নেই, অর্থাৎ পেছনের কালার দেখা যাবে, তবে PNG সেরা। ছোটখাটো এনিমেশনের জন্য GIF ব্যবহার করা হয়। আর বর্তমানে SVG ফরম্যাটটি খুব জনপ্রিয় লোগো বা আইকনের জন্য, কারণ তুমি এটাকে যত খুশি জুম করো না কেন, এটা ফাটবে না বা ঝাপসা হবে না।

সারসংক্ষেপ: যা মনে রাখতে হবে

তো শিক্ষার্থী বন্ধুরা, আজকে আমরা অনেক গুরুত্বপূর্ণ বিষয় শিখেছি। মনে রাখবে, একটি ভালো ওয়েবসাইটের চাবিকাঠি হলো সঠিক নেভিগেশন বা লিংক এবং অপ্টিমাইজড ছবি। প্র্যাকটিসের সময় ফাইল পাথ নিয়ে একটু সতর্ক থাকবে, কারণ ওখানেই ভুল বেশি হয়। তোমাদের কাজ হলো নিজের বায়োডাটা দিয়ে একটি পেজ বানানো যেখানে তোমার ছবি এবং সোশ্যাল মিডিয়া লিংক থাকবে। আশা করি তোমরা বাসায় এটা প্র্যাকটিস করবে। পরবর্তী ক্লাসে আমরা টেবিল তৈরি করা শিখব। সেই পর্যন্ত সবাই ভালো থেকো, আল্লাহ হাফেজ!

সৃজনশীল প্রশ্ন

সৃজনশীল প্রশ্ন ১

মি. এক্স তার ওয়েবসাইটের হোমপেজে 'Click Here' টেক্সটে ক্লিক করলে সরাসরি গুগল (www.google.com) ওয়েবসাইটটি ওপেন হয়। এছাড়া পেজের মাঝখানে তার কোম্পানির লোগো (logo.png) প্রদর্শিত হচ্ছে। যদি কোনো কারণে লোগোটি খুঁজে না পাওয়া যায়, তবে 'Logo Not Found' লেখাটি ভেসে ওঠে।

ক) হাইপারলিংক কী?
খ) <img> ট্যাগকে কেন এম্পটি ট্যাগ বলা হয়?
গ) মি. এক্স এর ওয়েবসাইটে ব্যবহৃত লিংক এবং ইমেজ তৈরির জন্য প্রয়োজনীয় এইচটিএমএল কোডটি লেখ।
ঘ) ছবির সাইজ ৩০০x২০০ পিক্সেল করতে এবং লিংকে ক্লিক করলে নতুন ট্যাবে ওপেন হওয়ার জন্য কোডে কী পরিবর্তন আনতে হবে? বিশ্লেষণ কর।

উত্তর

(ক) হাইপারলিংক হলো ওয়েবপেজের কোনো টেক্সট বা ইমেজের সাথে অন্য কোনো পেজ, ফাইল বা ওয়েবসাইটের সংযোগ স্থাপন করার ব্যবস্থা, যাতে ক্লিক করলে ব্যবহারকারী সেই গন্তব্যে যেতে পারে।

(খ) এইচটিএমএল-এ যেসকল ট্যাগের শুরু আছে কিন্তু শেষ বা ক্লোজিং ট্যাগ নেই, তাদেরকে এম্পটি ট্যাগ বলা হয়। <img> ট্যাগের কোনো ক্লোজিং ট্যাগ (যেমন </img>) থাকে না এবং এর কন্টেন্ট থাকে না, এটি শুধু অ্যাট্রিবিউটের মাধ্যমে কাজ করে। তাই <img> ট্যাগকে এম্পটি ট্যাগ বলা হয়।

(গ) উদ্দীপকে মি. এক্স এর ওয়েবসাইটে একটি হাইপারলিংক এবং একটি ইমেজ রয়েছে।
১. লিংকের জন্য <a> ট্যাগ এবং href অ্যাট্রিবিউট ব্যবহার করতে হবে।
২. ইমেজের জন্য <img> ট্যাগ এবং src ও alt অ্যাট্রিবিউট ব্যবহার করতে হবে।

প্রয়োজনীয় এইচটিএমএল কোড:

<!-- হাইপারলিংক কোড -->
<a href="https://www.google.com">Click Here</a>

<!-- ইমেজ কোড -->
<img src="logo.png" alt="Logo Not Found">

এখানে href এর মাধ্যমে গুগলের ঠিকানা এবং alt এর মাধ্যমে লোগো না পাওয়ার বার্তাটি সেট করা হয়েছে।

(ঘ) উদ্দীপকের কোডে ছবির সাইজ নিয়ন্ত্রণ এবং লিংকটি নতুন ট্যাবে ওপেন করার জন্য অতিরিক্ত অ্যাট্রিবিউট যুক্ত করতে হবে।

১. ছবির সাইজ নিয়ন্ত্রণ:
ছবির নির্দিষ্ট দৈর্ঘ্য (width) ও প্রস্থ (height) ঠিক করার জন্য <img> ট্যাগে width এবং height অ্যাট্রিবিউট ব্যবহার করতে হবে।
পরিবর্তিত কোড:

<img src="logo.png" alt="Logo Not Found" width="300" height="200">

এখানে width="300" এবং height="200" পিক্সেল নির্ধারণ করা হয়েছে, যা ছবির আকার নিয়ন্ত্রণ করবে।

২. নতুন ট্যাবে লিংক ওপেন করা:
সাধারণত লিংকে ক্লিক করলে একই ট্যাবে পেজ লোড হয়। নতুন ট্যাবে বা উইন্ডোতে লিংকটি ওপেন করার জন্য <a> ট্যাগে target অ্যাট্রিবিউট ব্যবহার করে তার মান _blank দিতে হবে।
পরিবর্তিত কোড:

<a href="https://www.google.com" target="_blank">Click Here</a>

বিশ্লেষণ:
উপরোক্ত পরিবর্তনগুলো করলে ওয়েবসাইটটি আরও ইউজার-ফ্রেন্ডলি হবে। ব্যবহারকারী মূল পেজটি না হারিয়েই লিংকটি ভিজিট করতে পারবে এবং ছবিটিও পেজের লেআউটের সাথে সামঞ্জস্যপূর্ণ মাপে প্রদর্শিত হবে।

সৃজনশীল প্রশ্ন ২

একটি প্রজেক্ট ফোল্ডারে 'home.html' নামে একটি ফাইল এবং 'images' নামে একটি সাব-ফোল্ডার আছে। এই 'images' ফোল্ডারের ভেতর 'banner.jpg' নামের একটি ছবি আছে। ছাত্রটি 'home.html' ফাইলে ছবিটি দেখানোর চেষ্টা করছে কিন্তু ব্রাউজারে ছবিটি প্রদর্শিত হচ্ছে না, শুধু একটি ভাঙা আইকন দেখাচ্ছে।

ক) অ্যাট্রিবিউট কী?
খ) রিলেটিভ পাথ ও অ্যাবসলিউট পাথের পার্থক্য কী?
গ) উদ্দীপকের পরিস্থিতিতে ছবিটি সঠিকভাবে প্রদর্শনের জন্য পাথ বা কোডটি কেমন হবে? ব্যাখ্যা কর।
ঘ) ওয়েবসাইটের লোডিং স্পিড এর ওপর ইমেজের প্রভাব এবং ইমেজ অপ্টিমাইজেশনের গুরুত্ব আলোচনা কর।

উত্তর

(ক) অ্যাট্রিবিউট হলো এইচটিএমএল ট্যাগের একটি বিশেষ অংশ যা ট্যাগের কার্যকারিতা বা বৈশিষ্ট্যকে প্রসারিত বা নির্ধারণ করে (যেমন: src, href, width ইত্যাদি)।

(খ) রিলেটিভ পাথ (Relative Path): এটি বর্তমান ফাইলের অবস্থানের সাপেক্ষে অন্য ফাইলের অবস্থান নির্দেশ করে। যেমন: images/photo.jpg। একই সার্ভারে বা ফোল্ডারে কাজ করার সময় এটি বেশি ব্যবহৃত হয়।
অ্যাবসলিউট পাথ (Absolute Path): এটি কোনো ফাইলের সম্পূর্ণ ঠিকানা বা URL নির্দেশ করে, যাতে ডোমেইন নেমসহ পুরো পাথ থাকে। যেমন: https://www.example.com/images/photo.jpg। অন্য ওয়েবসাইটের রিসোর্স ব্যবহারের ক্ষেত্রে এটি লাগে।

(গ) উদ্দীপকে 'home.html' ফাইলটি মূল ফোল্ডারে আছে এবং ছবিটি 'images' নামক সাব-ফোল্ডারে আছে। তাই সরাসরি ছবির নাম দিলে ছবিটি পাওয়া যাবে না। ছবিটির সঠিক পাথ বা লোকেশন src অ্যাট্রিবিউটে বলে দিতে হবে।

সঠিক কোডটি হবে:

<img src="images/banner.jpg" alt="Banner Image">

ব্যাখ্যা:
এখানে images/ অংশটি নির্দেশ করছে যে, বর্তমান লোকেশন থেকে প্রথমে 'images' ফোল্ডারে ঢুকতে হবে এবং তারপর 'banner.jpg' ফাইলটি খুঁজে নিতে হবে। ছাত্রটি সম্ভবত শুধু src="banner.jpg" লিখেছিল, যার কারণে ব্রাউজার ছবিটি খুঁজে পায়নি। সঠিক ফোল্ডার পাথ বা রিলেটিভ পাথ ব্যবহার করলেই সমস্যাটি সমাধান হবে।

(ঘ) ওয়েবসাইটের লোডিং স্পিড বা গতি ব্যবহারকারীর অভিজ্ঞতার জন্য অত্যন্ত গুরুত্বপূর্ণ। এক্ষেত্রে ইমেজের প্রভাব অনেক বেশি।

লোডিং স্পিডে ইমেজের প্রভাব:
১. ফাইলের আকার: বড় সাইজের (যেমন কয়েক মেগাবাইট) ছবি লোড হতে বেশি সময় নেয়। এতে ওয়েবসাইট ধীরগতির হয়ে যায়।
২. ব্যান্ডউইথ খরচ: অপ্টিমাইজ না করা ছবি ব্যবহারকারীর ডেটা বা ব্যান্ডউইথ বেশি খরচ করে, যা মোবাইল ইউজারদের জন্য সমস্যার কারণ।
৩. সার্ভার লোড: ভারী ইমেজ সার্ভারের ওপর অতিরিক্ত চাপ সৃষ্টি করে।

ইমেজ অপ্টিমাইজেশনের গুরুত্ব:
ওয়েবসাইট দ্রুত লোড করার জন্য ইমেজ অপ্টিমাইজেশন অপরিহার্য। এর মধ্যে রয়েছে:
- সঠিক ফরম্যাট নির্বাচন (যেমন: লোগোর জন্য PNG, ছবির জন্য JPEG বা WebP)।
- ছবির রেজোলিউশন এবং ডাইমেনশন (Height/Width) প্রয়োজন অনুযায়ী কমিয়ে আনা।
- কমপ্রেশন টুল ব্যবহার করে ফাইলের সাইজ কমানো কিন্তু মান ঠিক রাখা।

সুতরাং, উদ্দীপকের ওয়েবসাইটেও যদি 'banner.jpg' ছবিটি অনেক বড় সাইজের হয়, তবে তা লোডিং স্পিড কমিয়ে দেবে। তাই ছবিটি যুক্ত করার পাশাপাশি সেটিকে সঠিকভাবে অপ্টিমাইজ করাও জরুরি।

সৃজনশীল প্রশ্ন ৩

মি. রায়হান তার ট্রাভেল এজেন্সির ওয়েবসাইটের জন্য বাংলাদেশের পর্যটন কেন্দ্রগুলোর ছবি যুক্ত করলেন। তিনি চাইলেন ছবিতে ক্লিক করলে যেন পর্যটন কেন্দ্রের বিস্তারিত পেজটি ওপেন হয়। কিন্তু ছবিগুলোর সাইজ অনেক বড় হওয়ায় পেজ লোড হতে দেরি হচ্ছে। তার বন্ধু তাকে ছবির ফরম্যাট পরিবর্তন এবং হাইট-উইডথ নির্দিষ্ট করার পরামর্শ দিল।

ক) alt অ্যাট্রিবিউটের কাজ কী?
খ) JPEG ও PNG ফরম্যাটের মধ্যে পার্থক্য কী?
গ) মি. রায়হানের ওয়েবসাইটে ছবিকে লিংক হিসেবে ব্যবহার করার কোডটি লেখ (ধরে নাও ছবির নাম tour.jpg এবং লিংক details.html।
ঘ) ওয়েবসাইটের গতি বাড়াতে মি. রায়হানের বন্ধুর পরামর্শের যৌক্তিকতা বিশ্লেষণ কর।

উত্তর

(ক) alt (Alternative Text) অ্যাট্রিবিউটের কাজ হলো যদি কোনো কারণে ব্রাউজারে ছবিটি লোড না হয়, তবে ছবির পরিবর্তে একটি টেক্সট বা বার্তা প্রদর্শন করা। এটি স্ক্রিন রিডার ব্যবহারকারীদের জন্যও সহায়ক।

(খ) JPEG (Joint Photographic Experts Group): এটি সাধারণত ফটোগ্রাফ বা বাস্তব ছবির জন্য ব্যবহৃত হয়। এটি 'Lossy Compression' সমর্থন করে, অর্থাৎ ফাইলের সাইজ অনেক কমানো যায় কিন্তু কিছুটা মান কমে যেতে পারে। এটি ট্রান্সপারেন্সি (স্বচ্ছ ব্যাকগ্রাউন্ড) সমর্থন করে না।
PNG (Portable Network Graphics): এটি গ্রাফিক্স, লোগো বা টেক্সট-যুক্ত ইমেজের জন্য ভালো। এটি 'Lossless Compression' ব্যবহার করে এবং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড সমর্থন করে। ফাইলের সাইজ সাধারণত JPEG-এর চেয়ে একটু বড় হয়।

(গ) ছবিতে ক্লিক করলে অন্য পেজে যাওয়ার জন্য <img> ট্যাগকে <a> ট্যাগের মধ্যে রাখতে হবে। একে 'ইমেজ লিংক' বলা হয়।

কোড:

<a href="details.html">
    <img src="tour.jpg" alt="Tour Destination" width="300">
</a>

এখানে <img> ট্যাগটি <a> ট্যাগের কন্টেন্ট হিসেবে কাজ করছে। ফলে ছবিতে ক্লিক করলেই ব্রাউজার details.html পেজে নিয়ে যাবে।

(ঘ) মি. রায়হানের ওয়েবসাইটের গতি বাড়াতে তার বন্ধুর পরামর্শটি অত্যন্ত যৌক্তিক।

বিশ্লেষণ:
১. ফরম্যাট পরিবর্তন: ট্রাভেল এজেন্সির ওয়েবসাইটের ছবিগুলো সাধারণত প্রাকৃতিক দৃশ্যের হয়। এসব ছবির জন্য JPEG ফরম্যাট সবচেয়ে উপযুক্ত কারণ এটি ছবির মান মোটামুটি ঠিক রেখে ফাইলের সাইজ অনেক কমিয়ে আনতে পারে। যদি মি. রায়হান PNG বা BMP ফরম্যাট ব্যবহার করে থাকেন, তবে ফাইলের সাইজ অনেক বড় হবে এবং পেজ লোড হতে দেরি হবে।

2. হাইট-উইডথ নির্দিষ্ট করা: width এবং height অ্যাট্রিবিউট ব্যবহার করলে ব্রাউজার পেজ লোড হওয়ার আগেই ছবির জন্য জায়গা বরাদ্দ করে রাখতে পারে। এতে পেজ রেন্ডারিং দ্রুত হয় এবং লেআউট শিফট (Layout Shift) হয় না। এছাড়া অনেক সময় বড় ছবিকে ছোট করে দেখানোর জন্য ব্রাউজারকে প্রসেস করতে হয়, যা সময়সাপেক্ষ। আগেই সঠিক সাইজ ঠিক করে দিলে লোডিং স্পিড বাড়ে।

সুতরাং, ব্যবহারকারীর সুবিধার্থে এবং দ্রুত ব্রাউজিং অভিজ্ঞতার জন্য ছবির সঠিক ফরম্যাট নির্বাচন এবং সাইজ অপ্টিমাইজ করা অপরিহার্য। বন্ধুর পরামর্শ মেনে চললে ওয়েবসাইটটির পারফরম্যান্স উন্নত হবে।

এমসিকিউ

১। ওয়েবপেজে হাইপারলিংক তৈরির জন্য কোন ট্যাগটি ব্যবহৃত হয়?

ক) <link>
খ) <hyper>
গ) <a>
ঘ) <h>

সঠিক উত্তর: গ) <a>

ব্যাখ্যা: হাইপারলিংক তৈরির জন্য অ্যাংকর ট্যাগ <a> ব্যবহৃত হয়। এর পূর্ণরূপ Anchor Tag।

২। <a> ট্যাগের অত্যাবশ্যকীয় অ্যাট্রিবিউট কোনটি?

ক) src
খ) href
গ) link
ঘ) target

সঠিক উত্তর: খ) href

ব্যাখ্যা: href (Hypertext Reference) অ্যাট্রিবিউটটি লিংকের গন্তব্য বা URL নির্দেশ করে। এটি ছাড়া <a> ট্যাগ কাজ করে না।

৩। ওয়েবপেজে ছবি যুক্ত করার সঠিক এইচটিএমএল কোড কোনটি?

ক) <image src="url">
খ) <img href="url">
গ) <img src="url">
ঘ) <pic src="url">

সঠিক উত্তর: গ) <img src="url">

ব্যাখ্যা: ছবি যুক্ত করার জন্য <img> ট্যাগ এবং সোর্স ফাইলের লোকেশন বা নাম উল্লেখ করার জন্য src অ্যাট্রিবিউট ব্যবহৃত হয়।

৪। <img> ট্যাগের alt অ্যাট্রিবিউটের কাজ কী?

ক) ছবির নাম দেখানো
খ) ছবির বিকল্প টেক্সট দেখানো
গ) ছবির বর্ডার দেওয়া
ঘ) ছবির লিংক তৈরি করা

সঠিক উত্তর: খ) ছবির বিকল্প টেক্সট দেখানো

ব্যাখ্যা: যদি কোনো কারণে ব্রাউজার ছবিটি লোড করতে ব্যর্থ হয়, তবে alt অ্যাট্রিবিউটের টেক্সটটি প্রদর্শিত হয়।

৫। হাইপারলিংক কত প্রকার?

ক) ২ প্রকার
খ) ৩ প্রকার
গ) ৪ প্রকার
ঘ) ৫ প্রকার

সঠিক উত্তর: খ) ৩ প্রকার

ব্যাখ্যা: হাইপারলিংক প্রধানত ৩ প্রকার: ইন্টারনাল লিংক (একই পেজের মধ্যে), লোকাল লিংক (একই ওয়েবসাইটের অন্য পেজের সাথে) এবং গ্লোবাল লিংক (অন্য ওয়েবসাইটের সাথে)।

৬। কোন অ্যাট্রিবিউট ব্যবহার করলে লিংকটি নতুন ট্যাবে ওপেন হয়?

ক) new="tab"
খ) target="_self"
গ) target="_blank"
ঘ) window="new"

সঠিক উত্তর: গ) target="_blank"

ব্যাখ্যা: target="_blank" অ্যাট্রিবিউট ব্যবহার করলে লিংকটি ব্রাউজারের একটি নতুন ট্যাবে বা উইন্ডোতে ওপেন হয়।

৭। নিচের কোনটি এম্পটি (Empty) ট্যাগ?

ক) <a>
খ) <img>
গ) <p>
ঘ) <h1>

সঠিক উত্তর: খ) <img>

ব্যাখ্যা: <img> ট্যাগের কোনো ক্লোজিং ট্যাগ নেই এবং এর মাঝে কোনো কন্টেন্ট থাকে না, তাই এটি এম্পটি ট্যাগ।

৮। ছবির সাইজ বা আকার নির্ধারণে কোন অ্যাট্রিবিউট ব্যবহৃত হয়?

ক) size
খ) length
গ) width ও height
ঘ) area

সঠিক উত্তর: গ) width ও height

ব্যাখ্যা: ছবির প্রস্থ এবং উচ্চতা নির্ধারণের জন্য যথাক্রমে width এবং height অ্যাট্রিবিউট ব্যবহার করা হয়।

৯। ই-মেইল ঠিকানায় লিংক করার জন্য href এ কী লিখতে হয়?

ক) email:
খ) mailto:
গ) send:
ঘ) post:

সঠিক উত্তর: খ) mailto:

ব্যাখ্যা: ই-মেইল লিংক তৈরির জন্য href="mailto:example@mail.com" ফরম্যাট ব্যবহার করা হয়।

১০। কোনটি ছবির ফাইল ফরম্যাট নয়?

ক) .jpg
খ) .png
গ) .gif
ঘ) .html

সঠিক উত্তর: ঘ) .html

ব্যাখ্যা: .html হলো ওয়েবপেজ ফাইলের এক্সটেনশন। বাকিগুলো (JPG, PNG, GIF) হলো ছবির ফাইল ফরম্যাট।

১১। এনিমেটেড বা চলমান ছবির জন্য কোন ফরম্যাটটি উপযুক্ত?

ক) JPEG
খ) PNG
গ) GIF
ঘ) BMP

সঠিক উত্তর: গ) GIF

ব্যাখ্যা: GIF (Graphics Interchange Format) এনিমেশন সাপোর্ট করে, যা অন্য সাধারণ ইমেজ ফরম্যাটগুলো করে না।

১২। <a href="page2.html"><img src="pic.jpg"></a> কোডটি কী নির্দেশ করে?

ক) পেজে শুধু ছবি দেখাবে
খ) পেজে শুধু লিংক দেখাবে
গ) ছবিতে ক্লিক করলে লিংক ওপেন হবে
ঘ) লিংকে ক্লিক করলে ছবি ওপেন হবে

সঠিক উত্তর: গ) ছবিতে ক্লিক করলে লিংক ওপেন হবে

ব্যাখ্যা: এখানে <img> ট্যাগটি <a> ট্যাগের ভেতরে থাকায় ছবিটি একটি হাইপারলিংক হিসেবে কাজ করবে।

১৩। ওয়েবসাইটের লোগো বা গ্রাফিক্সের জন্য কোন ফরম্যাটটি সবচেয়ে ভালো?

ক) JPEG
খ) PNG
গ) BMP
ঘ) TIFF

সঠিক উত্তর: খ) PNG

ব্যাখ্যা: PNG ফরম্যাট স্বচ্ছ ব্যাকগ্রাউন্ড (Transparent Background) সাপোর্ট করে এবং লোগো বা গ্রাফিক্সের গুণমান অক্ষুণ্ণ রাখে।

১৪। title অ্যাট্রিবিউটের কাজ কী?

ক) পেজের শিরোনাম দেওয়া
খ) লিংকের ওপর মাউস রাখলে টুলটিপ দেখানো
গ) ছবির ক্যাপশন দেওয়া
ঘ) ফন্টের স্টাইল পরিবর্তন করা

সঠিক উত্তর: খ) লিংকের ওপর মাউস রাখলে টুলটিপ দেখানো

ব্যাখ্যা: title অ্যাট্রিবিউট ব্যবহার করলে মাউস পয়েন্টার এলিমেন্টের ওপর নিলে একটি ছোট পপ-আপ বা টুলটিপ টেক্সট দেখায়।

১৫। সার্ভারে ইমেজ লোড হতে ব্যর্থ হলে ব্যবহারকারীকে বার্তা দিতে কোনটি ব্যবহৃত হয়?

ক) title
খ) alt
গ) src
ঘ) href

সঠিক উত্তর: খ) alt

ব্যাখ্যা: alt অ্যাট্রিবিউটের টেক্সট তখনই দেখায় যখন ব্রাউজার ছবিটি লোড করতে পারে না।

১৬। <img> ট্যাগের অ্যাট্রিবিউট হলো—
i. src
ii. alt
iii. href

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ক) i ও ii

ব্যাখ্যা: src ও alt হলো <img> ট্যাগের অ্যাট্রিবিউট। href মূলত <a> ট্যাগের অ্যাট্রিবিউট।

১৭। হাইপারলিংক তৈরির ক্ষেত্রে লক্ষ্য রাখতে হয়—
i. সঠিক URL ব্যবহার করা
ii. <a> ট্যাগ সঠিকভাবে ক্লোজ করা
iii. ইমেজের সাইজ ছোট রাখা

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ক) i ও ii

ব্যাখ্যা: হাইপারলিংক ঠিকমতো কাজ করার জন্য সঠিক URL এবং ট্যাগ ক্লোজিং জরুরি। ইমেজের সাইজ লিংকের কাজের সাথে সরাসরি সম্পর্কিত নয়।

১৮। ছবির ফাইল পাথ (Path) হতে পারে—
i. Absolute Path
ii. Relative Path
iii. Root Path

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: এইচটিএমএল-এ ফাইলের অবস্থান নির্দেশ করতে Absolute, Relative এবং Root—তিন ধরনের পাথই ব্যবহার করা যায়।

১৯। নিচের কোডটি লক্ষ্য কর:
<a href="#top">Go to Top</a>
এটি কী নির্দেশ করে?
i. অন্য ওয়েবসাইটের লিংক
ii. একই পেজের নির্দিষ্ট অংশের লিংক
iii. বুকমার্ক লিংক

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: গ) ii ও iii

ব্যাখ্যা: # চিহ্ন দিয়ে একই পেজের কোনো আইডিতে লিংক করা হয়, যাকে বুকমার্ক লিংক বা ইন্টারনাল সেকশন লিংক বলা হয়।

২০। ওয়েবে বহুল ব্যবহৃত ইমেজ ফরম্যাটগুলো হলো—
i. JPEG
ii. PNG
iii. EXE

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ক) i ও ii

ব্যাখ্যা: JPEG এবং PNG হলো ইমেজ ফরম্যাট। EXE হলো এক্সিকিউটেবল প্রোগ্রাম ফাইল, যা ইমেজ নয়।

নিচের উদ্দীপকটি পড় এবং ২১ ও ২২ নং প্রশ্নের উত্তর দাও:
রহিম তার ব্যক্তিগত ওয়েবসাইটে নিজের একটি ছবি যুক্ত করতে চায়। ছবিটির নাম me.jpg এবং এটি photos ফোল্ডারে আছে। সে কোড লিখল: <img src="me.jpg">। কিন্তু ছবিটি দেখাচ্ছে না।

২১। রহিমের কোডে কী ভুল হয়েছে?
ক) src অ্যাট্রিবিউট ভুল লিখেছে
খ) সঠিক ফাইল পাথ দেয়নি
গ) alt অ্যাট্রিবিউট দেয়নি
ঘ) ছবির এক্সটেনশন ভুল লিখেছে

সঠিক উত্তর: খ) সঠিক ফাইল পাথ দেয়নি

ব্যাখ্যা: ছবিটি যেহেতু photos ফোল্ডারে আছে, তাই শুধু নাম লিখলে হবে না। ফোল্ডারের নামসহ পাথ উল্লেখ করতে হবে।

২২। সঠিক কোড কোনটি হবে?
ক) <img src="photos/me.jpg">
খ) <img href="photos/me.jpg">
গ) <img src="/me.jpg">
ঘ) <photo src="photos/me.jpg">

সঠিক উত্তর: ক) <img src="photos/me.jpg">

ব্যাখ্যা: সাব-ফোল্ডারের ফাইল এক্সেস করতে folder_name/file_name ফরম্যাট ব্যবহার করতে হয়।

নিচের উদ্দীপকটি পড় এবং ২৩, ২৪ ও ২৫ নং প্রশ্নের উত্তর দাও:
মি. জামান তার প্রতিষ্ঠানের ওয়েবসাইটের হোমপেজে 'নোটিশ বোর্ড' নামে একটি লিংক তৈরি করেছেন। লিংকটিতে ক্লিক করলে notice.html পেজটি ওপেন হয়। তিনি চান ভিজিটররা যেন সহজে বুঝতে পারে লিংকটি কিসের।

২৩। মি. জামান কোন ট্যাগটি ব্যবহার করেছেন?
ক) <img>
খ) <a>
গ) <p>
ঘ) <link>

সঠিক উত্তর: খ) <a>

ব্যাখ্যা: লিংক তৈরি করার জন্য <a> ট্যাগ ব্যবহার করা হয়েছে।

২৪। লিংকটিতে ক্লিক করলে notice.html পেজটি নতুন উইন্ডোতে ওপেন করতে চাইলে কোডে কী যুক্ত করতে হবে?
ক) target="_self"
খ) target="_parent"
গ) target="_top"
ঘ) target="_blank"

সঠিক উত্তর: ঘ) target="_blank"

ব্যাখ্যা: নতুন উইন্ডো বা ট্যাবে ওপেন করার জন্য target="_blank" ব্যবহার করা হয়।

২৫। যদি notice.html ফাইলটি খুঁজে না পাওয়া যায়, তবে ব্রাউজারে কী দেখাবে?
ক) ব্ল্যাঙ্ক পেজ
খ) ৪০৪ এরর (Page Not Found)
গ) হোমপেজ রিফ্রেশ হবে
ঘ) কম্পিউটার হ্যাং করবে

সঠিক উত্তর: খ) ৪০৪ এরর (Page Not Found)

ব্যাখ্যা: সার্ভারে কোনো ফাইল বা পেজ খুঁজে না পাওয়া গেলে ব্রাউজার সাধারণত HTTP 404 Not Found এরর প্রদর্শন করে।