সিরিজের তৃতীয় পর্ব — Links ও Images.
আগের পর্বে আমরা শিখেছি টেক্সট ফরম্যাটিং। আজকে শিখবো ওয়েবের সবচেয়ে গুরুত্বপূর্ণ দুইটা জিনিস — Link (যেটা দিয়ে এক পেজ থেকে আরেক পেজে যাওয়া যায়) আর Image (যেটা দিয়ে পেজে ছবি দেখানো যায়)।
Link বা <a> ট্যাগ
ওয়েবের নাম "World Wide Web" হওয়ার পেছনের মূল কারণই হলো লিংক — একটা পেজ থেকে আরেকটা পেজে যাওয়ার ক্ষমতা। এর জন্য ব্যবহার হয় <a> (anchor) ট্যাগ।
<a href="https://www.google.com">গুগলে যাও</a>
এখানে href (Hypertext REFerence) অ্যাট্রিবিউট দিয়ে বলা হচ্ছে লিংকটা কোথায় নিয়ে যাবে। <a> ট্যাগের ভেতরের টেক্সট হলো যেটাতে ক্লিক করলে লিংক কাজ করবে।
Absolute vs Relative Path
লিংক দেওয়ার সময় দুই ধরনের path ব্যবহার করা যায়:
১. Absolute Path
পুরো URL দিয়ে অন্য কোনো ওয়েবসাইটের লিংক দেওয়া হয়:
<a href="https://physarif.blogspot.com">আমার ব্লগ</a>
২. Relative Path
নিজের ওয়েবসাইটের ভেতরে অন্য একটা পেজের লিংক দেওয়ার জন্য পুরো URL না দিয়ে শুধু ফাইলের রিলেটিভ path দেওয়া হয়। ধরো তোমার ফোল্ডারের গঠন এরকম:
project/
index.html
about.html
pages/
contact.html
তাহলে index.html থেকে লিংক দিতে হবে এভাবে:
<a href="about.html">আমার সম্পর্কে</a> <a href="pages/contact.html">যোগাযোগ</a>
টিপস: নিজের ওয়েবসাইটের ভেতরের পেজগুলোর জন্য সবসময় relative path ব্যবহার করা উচিত। এতে সাইটটা যেকোনো ডোমেইনে বা লোকালহোস্টে সমানভাবে কাজ করবে।
নতুন ট্যাবে লিংক ওপেন করা
target="_blank" ব্যবহার করলে লিংকটা নতুন ট্যাবে ওপেন হবে:
<a href="https://www.google.com" target="_blank">গুগল (নতুন ট্যাবে)</a>
ইমেইল ও ফোন লিংক
ক্লিক করলে সরাসরি ইমেইল ক্লায়েন্ট বা ডায়ালার ওপেন হয় এমন লিংকও বানানো যায়:
<a href="mailto:example@gmail.com">ইমেইল করো</a> <a href="tel:+8801XXXXXXXXX">কল করো</a>
একই পেজের ভেতর নেভিগেট করা (Anchor Link)
লম্বা পেজের কোনো নির্দিষ্ট অংশে সরাসরি নিয়ে যেতে id ব্যবহার করা হয়:
<a href="#section2">সেকশন ২-এ যাও</a> <!-- পেজের নিচের দিকে --> <h2 id="section2">সেকশন ২</h2> <p>এখানে সেকশন ২-এর কন্টেন্ট...</p>
Image বা <img> ট্যাগ
ছবি দেখানোর জন্য ব্যবহার হয় <img> ট্যাগ। এটা একটা self-closing ট্যাগ, মানে closing tag লাগে না:
<img src="cat.jpg" alt="একটা বিড়ালের ছবি">
এখানে দুইটা অ্যাট্রিবিউট গুরুত্বপূর্ণ:
src ছবিটা কোথায় আছে সেই path বা URL
alt ছবি লোড না হলে বা স্ক্রিন রিডারের জন্য বিকল্প টেক্সট
মনে রাখবে: alt অ্যাট্রিবিউট কখনো বাদ দেবে না। এটা শুধু ছবি লোড না হলেই কাজে লাগে না — চোখে কম দেখা ব্যবহারকারীরা যারা স্ক্রিন রিডার ব্যবহার করেন, তাদের জন্যও এটা জরুরি। এছাড়া SEO-র জন্যও গুগল alt টেক্সট পড়ে।
ছবির সাইজ নিয়ন্ত্রণ
width ও height অ্যাট্রিবিউট দিয়ে ছবির সাইজ নির্দিষ্ট করা যায় (পিক্সেলে):
<img src="cat.jpg" alt="বিড়ালের ছবি" width="300" height="200">
টিপস: width আর height দিলে পেজ লোড হওয়ার সময় ছবির জায়গা আগে থেকেই রিজার্ভ থাকে, ফলে পেজ "লাফায়" না (layout shift কম হয়)। ছবির আসল ফাইনাল সাইজ ও ডিজাইন CSS দিয়ে নিয়ন্ত্রণ করা ভালো অভ্যাস — সেটা আমরা CSS সিরিজে শিখবো।
Image-কে Link বানানো
<a> ট্যাগের ভেতরে <img> রাখলে পুরো ছবিটাই একটা ক্লিকযোগ্য লিংক হয়ে যায়:
<a href="https://physarif.blogspot.com"> <img src="logo.png" alt="ব্লগ লোগো"> </a>
ছবির Path — Local vs Online
ছবি দুইভাবে দেওয়া যায়:
<!-- নিজের কম্পিউটার/সার্ভারে থাকা ছবি --> <img src="images/photo.jpg" alt="আমার ছবি"> <!-- অনলাইনে হোস্ট করা ছবি --> <img src="https://example.com/photo.jpg" alt="আমার ছবি">
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <title>Links ও Images উদাহরণ</title> </head> <body> <h1>আমার প্রোফাইল</h1> <img src="profile.jpg" alt="আমার প্রোফাইল ছবি" width="150"> <p>আমি একজন ওয়েব ডেভেলপার। আমার ব্লগ দেখতে <a href="https://physarif.blogspot.com" target="_blank">এখানে ক্লিক করো</a>।</p> <p>যোগাযোগের জন্য: <a href="mailto:arif@example.com">ইমেইল</a></p> </body> </html>
নিজে চেষ্টা করো
Exercise:
- একটা ছবি ডাউনলোড করো বা নিজের একটা ছবি ব্যবহার করো, HTML ফাইলের পাশে রাখো
<img>দিয়ে সেই ছবি পেজে দেখাও, সঠিকaltটেক্সটসহ- ছবিটাকে একটা লিংকে পরিণত করো, যেটা তোমার পছন্দের কোনো ওয়েবসাইটে নিয়ে যায়
- নিচে একটা ইমেইল লিংক যোগ করো
পরের পর্বে যা থাকছে
পর্ব ৪-এ আমরা শিখবো List তৈরি করা — Ordered, Unordered, ও Nested list, উদাহরণসহ।
প্রশ্ন থাকলে কমেন্টে জানাতে পারো।