ছবি সংযোজন এইচটিএমএল

পূর্ব প্রস্তুতি

আগের মতই Web design ফোল্ডারের ভিতর নতুন ফোল্ডার lesson4 খুলুন। এর ভিতর index.html খুলুন, Dreamweaver দিয়ে ওপেন করুন কপি পেস্ট করে default করুন। আর হ্যাঁ lesson4 আর ভিতরই image নামে আর একটি folder খুলুন, image folder এর ভিতর একটি picture রাখুন ( যেটা আপনি ওয়েব পেজে সংযোজন করবেন )। আমি image folder এর ভিতর img.jpg নামে একটি picture নিয়াছি।

এবার body ট্যাগের ভিতর coding করুন............

  <img src="image/img.jpg" width="550" height="400" alt="Banner" />

Coding করার প্রফেশনাল নিয়ম

<img space দিন src enter দিন ডাবল কোটেশন এর ভিতর লিখুন image/img.jpg মাউস কোটেশন এর বাহিরে নিয়ে space দিন লিখুন width enter দিন দেখবেন ইমেজের width show করছে enter দিন আবার space দিন লিখুন height enter দিন দেখবেন ইমেজের height show করছে enter দিন আবার space দিন লিখুন alt enter দিন কোটেশন এর ভিতর লিখুন Banner । দেখুন নিচের মত হয়েছে কিনা

<img src="image/img.jpg" width="550" height="400" alt="Banner" />

না হলে নিয়ম অনুসারে আবার করুন।

Coding ব্যাখ্যা

src="image/img.jpg" src হল source অর্থাৎ উৎস, অর্থাৎ image টি image নামক folder এর ভিতর img.jpg নামে আছে (এখানে যদি image আর  ভিতর আর একটি image folder এবং তার ভিতর   img.jpg থাকতো সেক্ষেত্রে coding  হতো image/image/img.jpg । image টি যেকোনো নামে এবং format এ থাকতে পারে যেমন img.png, pic.jpg, pic.png ইত্যাদি। নাম নিজের মত ব্যবহার করেন Rename করে। width="550" height="400" হল image এর সাইজ। এটা বড় ছোট করে দেখতে পারেন। আর alt="Banner" /> হল, যদি কোন কারনে image load না নেই তবে image এর পরিবর্তে Banner text টি দেখাবে,  Banner এর পরিবর্তে নিজের মত নাম দিতে পারেন, প্রফেশনালি যে জন্য ইমেজ ব্যবহার করা হয় সেটা লেখা হয় যেমন logo হলে Logo, banner হলে Banner ইত্যাদি । alt="Banner" /> coding টা না দিলে W3 validate হবে না।

আর <img ট্যাগের কোন close ট্যাগ নেই শেষে শুধু  /> ব্যবহার করতে হবে।

এবার Run করান নিচের চিত্রের মত দেখা যাবে, তবে হ্যাঁ আপনার ক্ষেত্রে আপনি যে image ব্যবহার করেছেন সেটা দেখা যাবে।

Coding ও image টি ডাউনলোড করুন নিচের লিঙ্ক থেকে

DOWNLOAD

বিঃদ্রঃ আপনি চাইলে শুধু coding টা কপি পেস্ট করতে পারেন, ছবি ও ওয়েব পেজে আসবে তবে কোনদিন ও ওয়েব ডিজাইনার হতে পারবেন না। একটা ওয়েব পেজে অনেক ছবি ব্যবহার করা হয়, প্রত্যেকটির নাম, সাইজ, alt প্রয়োজনে পরিবর্তন করতে হয়।

আর সব সময় দয়াকরে পুরো পোস্ট মন দিয়ে পড়বেন, ভিতরে অনেক কিছু শেখার আছে শুধু coding দিয়ে ওয়েব ডিজাইনার হওয়া যাইনা, বাস্তব ক্ষেত্রে কথাগুলো অনেক কাজে আসবে। আর হ্যাঁ আপনাদের জন্যই আমি লিখি।

আপনাদের সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।

আরও জানতে visit করুন প্রফেশনাল ওয়েব ডিজাইন

কোন সমস্যা হলে বা প্রশ্ন থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।