চতুর্থ অধ্যায় লেকচার-০৯ : ওয়েবপেজে ছবি, অডিও, ভিডিও যুক্ত করার পদ্ধতি।

ওয়েবপেজে ছবি যুক্তকরন

ওয়েবপেজের গুরুত্বপূর্ণ একটি উপাদান হচ্ছে ইমেজ। একটি ওয়েবপেজকে সুন্দর ও আকর্ষনীয় করে তোলার জন্য ইমেজ বা ছবির কোন বিকল্প নেই। চাইলেই আমরা খুব সহজে ওয়েবপেজে ইমেজ যুক্ত করতে পারি-

ইমেজ যুক্ত করনে ব্যবহৃত ট্যাগ :
ওয়েবপেজে ছবি যুক্ত করনে ব্যবহৃত ট্যাগ হলো- < img >
< img > ট্যাগ একটি এম্পটি ট্যাগ অর্থাৎ এর কোন ক্লোজিং নেই, এটি শুধুমাত্র বিভিন্ন অ্যাট্রিবিউটস বহন করে থাকে।

 

< img > ট্যাগে ব্যবহৃত অ্যাট্রিবিউটস :

• src=” url ” যা ছবির লোকেশন নির্ধারণ করে। (এক্ষেত্রে ইমেজের নাম সাথে এক্সটেনশন বসাতে হয়)
• height=” pixel ” যা ছবির দৈর্ঘ্য নির্ধারণ করে।
• width=” pixel ” যা ছবির প্রস্থ নির্ধারণ করে।
• border=” pixel ” যা ছবির চারিপাশে বর্ডার নির্ধারণ করে।
• align=” text ”  ছবিটি পেজের বামে, ডানে, মাঝে, উপরে না নিচে প্রদর্শিত হবে তা নির্ধারণ করে। এখানে align এর ভ্যালু হিসেবে ব্যবহৃত হতে পারে-left, right, middle, top, bottom.
• alt=” text ” ব্রাউজার যদি কোন কারনে ইমেজ/ছবি লোড করতে ব্যর্থ হয় তবে alt অ্যাট্রিবিউট পাঠক কি মিস করেছে সেটি তাকে বলে দেয় অর্থাৎ alt অ্যাট্রিবিউট ইমেজের জন্য একটি অল্টারনেট টেক্সট নির্ধারণ করে। alt অ্যাট্রিবিউট এর ভ্যালু হলো একটি অথর-ডিফাইন্ড টেক্সট।
• title=” text ” যা ছবির টাইটেল নির্ধারণ করে। ছবির উপরে কার্সার রাখলে ছবির টাইটেল প্রদর্শিত হয়।
• vspace=” pixel ” ছবির উপরে ও নিচে কি পরিমাণ জায়গা সংরক্ষিত থাকবে তা নির্ধারণ করে।
• hspace=” pixel ” ছবির বামে ও ডানে কি পরিমাণ জায়গা সংরক্ষিত থাকবে তা নির্ধারণ করে।

 

ইমেজ ট্যাগের সিনট্যাক্স :

< img src=” url ” >

 

ইমেজ চেনার উপায় :

সাধারণত এইচএসসি পরীক্ষায় যেভাবে প্রশ্ন আসে সেখানে ইমেজ চিনতে হলে ইমেজের নামের এক্সটেনশনগুলি জানতে হবে। অর্থাৎ ইমেজটি কোন ফরমেটে আছে সেটা চিনতে হবে। নিচে ইমেজের এক্সটেনশনগুলি বা ইমেজ ফরমেটগুলি উল্লেখ করা হলো-

• .jpg / .jpeg
• .png
• .gif
• .bmp
• .webp
• .svg / .svgz
• .pex
• .ico

 

ইমেজ সাইজ :

প্রশ্নে যেভাবে ইমেজের সাইজ দেওয়া থাকে তা নিম্নরুপ-

• 500 × 700  সাইজ
• 500 বাই 700 সাইজ

এখানে মনে রাখতে হবে সাইজের প্রথমটা width এবং দ্বিতীয়টা height

উদাহরণ-০৯: ict.png নামের 600 × 500 পিক্সেল সাইজের একটি ইমেজ  10 বর্ডারসহ ওয়েবপেজের ডানে প্রদর্শনের HTML কোড লেখ।

HTML Code :

< img src=”ict.png” height=”500′ width=”600″ border=”10″ >

Output :

 

 

ব্যাকগ্রাউন্ডে ইমেজ যুক্ত করন:

কোন ওয়েবপেজের ব্যাকগ্রাউন্ডে ইমেজ যুক্ত করতে হলে < body > ট্যাগে background নামে একটি অ্যাট্রিবিউট যুক্ত করতে হবে। এক্ষেত্রে ইমেজটি ওয়েবপেজের বড় বা সমান হতে হবে । যদি ইমেজটি ছোট হয় তাহলে একই ইমেজ বার বার প্রদর্শিত হবে। যেমন-

HTML Code :

< html >
< body background=”ict.png” >
< p > Habib ICT Care < /p >
< /body >
< /html >

Output : উপরোক্ত কোডটি রান করলে দেখা যাবে ওয়েবপেজটির ব্যাকগ্রাউন্ডে ict.png নামের ইমেজটি প্রদর্শিত হচ্ছে । অর্থাৎ পেজের বডিতে Habib ICT Care লেখাটি দেখাবে এবং ব্যাকগ্রাউন্ডে ইমেজটি প্রদর্শিত হবে।

ওয়েবপেজে ইমেজ ব্যবহারের সুবিধা/গুরুত্ব :

• ইমেজ ব্যবহারের মাধ্যমে ভিজিটরদের দৃষ্টি আকর্ষণ করা যায়।
• ইমেজ ব্যবহারের মাধ্যমে ওয়েবপেজে টেক্সট এর পরিমান কমিয়ে আনা যায়।
• ইমেজকে নেভিগেশন টুলস হিসেবে ব্যবহার করে ওয়েবপেজটি আরো দর্শনীয় করা যায়।

ওয়েবপেজে ইমেজ ব্যবহারের সুবিধা :

• ব্রাউজারে লোড হতে ইমেজ টেক্সট এর চেয়ে বেশি সময় নেয়।
• কিছু কিছু রং/কালার আছে যা অনেক ব্রাউজার সাপোর্ট করে না।
• গ্রাফিক্যাল ব্রাউজার ব্যবহার না করলে ইমেজ সাপোর্ট করে না।

বাড়ির কাজ:  ওয়েবপেজে ইমেজ ব্যবহারের সতর্কতাগুলি তোমার খাতায় নোট কর।

 

 

চতুর্থ অধ্যায় লেকচার-০৭ : HTML Font ট্যাগের ব্যবহার ও ওয়েবপেজে বাংলা লেখার পদ্ধতি।

---

Written by:

Habibur Rahman(Habib Sir)
Author at www.habibictcare.com
Email:habibbzm2018@gmail.com
Cell: +8801712-128532,+8801913865284