এখন আমরা দেখব একটি সাইটে কীভাবে ছবি যুক্ত করা হয়।
সাইটে ছবি সংযুক্ত করার জন্যে <img> ট্যাগ ব্যবহৃত হয়। এই ট্যাগকে এম্পটি ট্যাগ বলা হয় কারন ট্যাগটিতে এট্রিবিউট ছাড়া আর কিছু নেই। এটির ক্লোজিং ট্যাগ ও নেই।
এই ট্যাগে এট্রিবিউট হিসেবে src ব্যবহৃত হয়। src দিয়ে source কে বুঝানো হয়। src এট্রিবিউটের মাধ্যমে ইমেজের অবস্থান নির্দেশ করা হয়। এককথায় src হল ইমেজের url।
সাইটে ছবি সংযুক্ত করার জন্যে <img> ট্যাগ ব্যবহৃত হয়। এই ট্যাগকে এম্পটি ট্যাগ বলা হয় কারন ট্যাগটিতে এট্রিবিউট ছাড়া আর কিছু নেই। এটির ক্লোজিং ট্যাগ ও নেই।
এই ট্যাগে এট্রিবিউট হিসেবে src ব্যবহৃত হয়। src দিয়ে source কে বুঝানো হয়। src এট্রিবিউটের মাধ্যমে ইমেজের অবস্থান নির্দেশ করা হয়। এককথায় src হল ইমেজের url।
<img> ট্যাগের সাধারন সিনটেক্স হল:
<img src="url">
এবার আমরা একটি উদাহরণ দেখব।
এটি একটি সাধারণ উদাহরণ। শুধুমাত্র কিভাবে ইমেজ প্রদর্শন করা হয় তা বোঝানোর জন্যে এটি দেয়া হল।
<img src="image.jpg">
ইমেজের url দুই রকম হতে পারে। যদি কোন ওয়েবসাইটের ছবি আপনার সাইটে ব্যবহার করতে হয় তবে একরকম হবে। আর যদি নিজস্ব সার্ভারের কোন ফোল্ডারে থাকে তবে url হবে ভিন্ন। যদি নিজের সাইটের সার্ভারে upload নামক ফোল্ডারে ছবিটি থাকে তবে url হবে "/upload/image.jpg" । আর যদি ছবিটি অন্য কোন সাইটে থাকে তবে url হবে "http://www.sample.com/image.jpg" ।
alt attribute:
src এট্রিবিউটের মত alt একটি এট্রিবিউট। যদি নেটওয়ার্ক সমস্যার কারনে ইমেজ লোড হতে দেরী হয় বা লোড না হয় তবে alt এট্রিবিউটে দেয়া লেখাটা ইমেজের পরিবর্তে দেখাবে। নিচের উদাহরণ দেখুন:
<img src="/image.com" alt="image of something">
Height, width of image:
সাইটে দেয়া ছবির সাইজ নির্ধারণ করার জন্যে height and width এট্রিবিউট ব্যবহৃত হয়। ছবির সাইজ নির্ধারণ করে দিলে পেইজ লোড হবার সময় ব্রাউজার ঐ ছবির জন্যে জায়গা বরাদ্দ করে নেয়। অন্যথা ছবিটি কতটুকু জায়গা নেবে ব্রাউজার তা জানতে পারে না । ফলে সাইটটাকে এলোমেলো প্রদর্শন করবে। উদাহরণ স্বরুপ:
<img src="/image.jpg" height="300" width="500" alt="image">
লিংক হিসেবে ইমেজ:
ইমেজকে লিংক হিসেবেও ব্যবহার করা যায়। যেমন:
<a href="http://www.examle.com"><img src="image.jpg"></a>
এভাবে ইমেজকে লিংক হিসেবে ব্যবহার করা হয়। এটা লিখে রান করলে দেখা যাবে একটি ইমেজ রয়েছে। সেই ইমেজে ক্লিক করলে উল্লেখিত সাইটে প্রবেশ করবে।
এখানে বিশেষ ভাবে খেয়াল রাখতে হবে যেন ইমেজের এড্রেস ঠিক থাকে। অর্থাৎ ফোল্ডারে থাকলে ফোল্ডারের এড্রেস এবং অন্য কোন সাইটে থাকলে ঐ সাইটের এড্রেস সঠিকভাবে লিখতে হবে নইলে ইমেজ না দেখিয়ে একটি ভাঙ্গা লিংক দেখাবে।
এখানে শেখার উদ্দেশে শুধুমাত্র কিছু সাধারণ উদাহরণ দেয়া হয়েছে। এগুলোকে নিজের মত করে পরিবর্তন করে বারবার করে দেখতে হবে তবেই ভালোভাবে শেখা যাবে।
<img src="url">
এবার আমরা একটি উদাহরণ দেখব।
এটি একটি সাধারণ উদাহরণ। শুধুমাত্র কিভাবে ইমেজ প্রদর্শন করা হয় তা বোঝানোর জন্যে এটি দেয়া হল।
<img src="image.jpg">
ইমেজের url দুই রকম হতে পারে। যদি কোন ওয়েবসাইটের ছবি আপনার সাইটে ব্যবহার করতে হয় তবে একরকম হবে। আর যদি নিজস্ব সার্ভারের কোন ফোল্ডারে থাকে তবে url হবে ভিন্ন। যদি নিজের সাইটের সার্ভারে upload নামক ফোল্ডারে ছবিটি থাকে তবে url হবে "/upload/image.jpg" । আর যদি ছবিটি অন্য কোন সাইটে থাকে তবে url হবে "http://www.sample.com/image.jpg" ।
alt attribute:
src এট্রিবিউটের মত alt একটি এট্রিবিউট। যদি নেটওয়ার্ক সমস্যার কারনে ইমেজ লোড হতে দেরী হয় বা লোড না হয় তবে alt এট্রিবিউটে দেয়া লেখাটা ইমেজের পরিবর্তে দেখাবে। নিচের উদাহরণ দেখুন:
<img src="/image.com" alt="image of something">
Height, width of image:
সাইটে দেয়া ছবির সাইজ নির্ধারণ করার জন্যে height and width এট্রিবিউট ব্যবহৃত হয়। ছবির সাইজ নির্ধারণ করে দিলে পেইজ লোড হবার সময় ব্রাউজার ঐ ছবির জন্যে জায়গা বরাদ্দ করে নেয়। অন্যথা ছবিটি কতটুকু জায়গা নেবে ব্রাউজার তা জানতে পারে না । ফলে সাইটটাকে এলোমেলো প্রদর্শন করবে। উদাহরণ স্বরুপ:
<img src="/image.jpg" height="300" width="500" alt="image">
লিংক হিসেবে ইমেজ:
ইমেজকে লিংক হিসেবেও ব্যবহার করা যায়। যেমন:
<a href="http://www.examle.com"><img src="image.jpg"></a>
এভাবে ইমেজকে লিংক হিসেবে ব্যবহার করা হয়। এটা লিখে রান করলে দেখা যাবে একটি ইমেজ রয়েছে। সেই ইমেজে ক্লিক করলে উল্লেখিত সাইটে প্রবেশ করবে।
এখানে বিশেষ ভাবে খেয়াল রাখতে হবে যেন ইমেজের এড্রেস ঠিক থাকে। অর্থাৎ ফোল্ডারে থাকলে ফোল্ডারের এড্রেস এবং অন্য কোন সাইটে থাকলে ঐ সাইটের এড্রেস সঠিকভাবে লিখতে হবে নইলে ইমেজ না দেখিয়ে একটি ভাঙ্গা লিংক দেখাবে।
এখানে শেখার উদ্দেশে শুধুমাত্র কিছু সাধারণ উদাহরণ দেয়া হয়েছে। এগুলোকে নিজের মত করে পরিবর্তন করে বারবার করে দেখতে হবে তবেই ভালোভাবে শেখা যাবে।
No comments:
Post a Comment