চতুর্থ অধ্যায় পাঠ-৭ ইমেজ যুক্ত, হাইপারলিঙ্ক তৈরি, অডিও এবং ভিডিও যুক্ত করার HTML কোড।
এই পাঠ শেষে যা যা শিখতে পারবে-
- ১। ওয়েবপেইজে ছবি যুক্ত করতে পারবে।
- ২। হাইপারলিঙ্ক তৈরি করতে পারবে।
- ৩।ওয়েবপেইজে ইমেজ হাইপারলিঙ্ক তৈরি করতে পারবে।
- ৪। ওয়েবপেইজে অডিও এবং ভিডিও যুক্ত করতে পারবে।
ওয়েবপেইজে চিত্র বা ছবি যুক্ত করাঃ আমরা ওয়েবপেইজকে সুন্দর এবং সহজবোধ্য করার জন্য ওয়েবপেইজে বিভিন্ন প্রকার চিত্র বা ছবি যুক্ত করে থাকি। ওয়েবপেইজে কোনো চিত্র বা ছবি যুক্ত করার জন্য <img> অথবা <img/> ট্যাগ ব্যবহার করা হয়। ওয়েবপেইজে সাধারণত JPG/JPEG(Joint Photographic Experts Group),PNG(Portable Network Graphics), GIF(Graphics Interchange Format), SVG (Scalable Vector Graphics), BMP(bitmap) ইত্যাদি ফরম্যাটের ছবি যুক্ত করা হয়।
- গঠন: <img src=”image_path/image_file_name.Image_extension”>
- উদাহরণ: <img src=”logo.png”>
- এখানে, src অ্যাট্রিবিউটে logo হলো চিত্রের নাম এবং png চিত্রের এক্সটেনশন বা ফরমেট।
<img> ট্যাগে ব্যবহৃত অ্যাট্রিবিউটসমূহঃ
| অ্যাট্রিবিউট | মান | ব্যবহার |
| src | image_path/name.format | ছবির পাথ, নাম ও ফরমেট নির্ধারন করতে ব্যবহৃত হয়। |
| width | any number(pixel) | ছবির প্রস্থ নির্ধারন করতে ব্যবহৃত হয়। |
| height | any number(pixel) | ছবির উচ্চতা নির্ধারন করতে ব্যবহৃত হয়। |
| alt | alternative text | ছবি লোড না হলে অল্টারনেটিব টেক্সট প্রদর্শন করতে ব্যবহৃত হয়। |
| border | pixels | পিক্সেলে ছবির বর্ডারের প্রস্থ নির্ধারন করতে ব্যবহৃত হয়। |
| align | top,bottom,middle,left right | ছবির অ্যালাইন নির্ধারন করতে ব্যবহৃত হয়। |
Size নির্ধারণ: উপরের উদাহরণে ছবির জন্য শুধুমাত্র ছবির নাম লেখা হয়েছে, এর ফলে ছবি/চিত্রটি যে সাইজের আছে অবিকল সেই সাইজেরই প্রদর্শিত হবে। কিন্তু বিভিন্ন প্রয়োজনে ভিন্ন ভিন্ন সাইজের ছবি ওয়েবপেইজে যুক্ত করতে হয়, তাই ট্যাগের মধ্যে width ও height অ্যাট্রিবিউট ব্যবহার করে যথাক্রমে ছবির প্রস্থ এবং উচ্চতা নির্দিস্ট করে দেওয়া যায়। যদি চিত্রের সাইজ 200×150 দেওয়া থাকে, তাহলে বুঝতে হবে প্রথম সংখ্যাটি( ২০০) প্রস্থ নির্দেশ করে এবং দ্বিতীয় সংখ্যাটি(১৫০) উচ্চতা নির্দেশ করে।
যেমন− <img src=”logo.png” width=”200” height=”150”>
এখানে, প্রস্থ ২০০ প্রিক্সেল এবং উচ্চতা ১৫০ প্রিক্সেল উল্লেখ করা হয়েছে। এর ফলে ছবির আসল সাইজ যা-ই হোক না কেন উল্লিখিত সাইজেই ওয়েবপেইজে প্রদর্শিত হবে।
src অ্যাট্রিবিউট : চিত্র এবং ওয়েবপেইজটি একই ফোল্ডারে থাকলে শুধু চিত্রের নাম এবং ফরমেট লিখলেই চলে। অন্যথায় চিত্রের সম্পূর্ণ পাথ লিখতে হয়। যেমন- F ড্রাইভের picture ফোল্ডারের মধ্যে রাখা logo.jpg নামক একটি চিত্র ডেস্কটপে রাখা একটি ওয়েবপেইজে যুক্ত করতে প্রয়োজনীয় কোড-
<img src=”F:\picture\logo.jpg”>
উদাহরণ-১ঃ E ড্রাইভের photo ফোল্ডারে রাখা logo.jpg নামক ছবিটি 200×300 আকারে ওয়েবপেইজে যুক্ত করার HTML কোড।
হাইপারলিঙ্কঃ হাইপারলিঙ্ক এর মাধ্যমে একটি ওয়েবপেইজের সাথে অন্য একটি ওয়েবপেইজ/ডকুমেন্টের সংযোগ করা হয়। ওয়েবপেইজকে ব্যবহার বান্ধব করার জন্য হাইপারলিংক একটি গুরৃত্বপূর্ণ ভৃমিকা পালন করে। হাইপারলিংক হচ্ছে একটি শব্দ/শব্দগুচ্ছ/ছবি যার উপর ক্লিক করলে অন্য একটি ওয়েবপেইজ/ডকুমেন্ট ওপেন হয়। ওয়েবপেইজ ব্রাউজ করার সময় আমরা যখন হাইপারলিংক শব্দ/ শব্দগুচ্ছ/ ছবি এর উপর মাউস কার্সর নেই তখন কার্সর এর আকার পরিবর্তন হয়। HTML এ এঙ্কর (<a> </a>) ট্যাগ ব্যবহার করে হাইপারলিংক করা হয়।
গঠন: <a href= “url” > link text/image </a>
এখানে, url দ্বারা বুঝানো হয়েছে, যে ওয়েবপেইজ/ডকুমেন্টটির সাথে লিংক করা হবে তার ঠিকানা, এবং link text/image হল হাইপারলিংক শব্দ বা ছবি যা ওয়েবপেইজে প্রদর্শন করবে এবং যার উপর ক্লিক করলে কাঙ্খিত পেইজ/ডকুমেন্ট ওপেন হবে।
হাইপারলিঙ্ক এর প্রকারভেদঃ হাইপারলিঙ্ক সাধারণত তিন ধরণের।যথা-
- ১। গ্লোবাল হাইপারলিঙ্কঃ অন্য কোন ওয়েবসাইট বা ওয়েবপেইজের সাথে লিংক করা।
- ২। লোকাল হাইপারলিঙ্কঃ একই ওয়েবসাইটের বিভিন্ন ওয়েবপেইজের সাথে লিংক করা।
- ৩। ইন্টারনাল হাইপারলিঙ্কঃ একই ওয়েবপেইজের বিভিন্ন সেকশনের সাথে লিংক করা।
<a> ট্যাগে ব্যবহৃত অ্যাট্রিবিউটসমূহঃ
| অ্যাট্রিবিউট | মান | ব্যবহার |
| href | url | যে ডকুমেন্টটির সাথে লিংক করা হবে তার অ্যাড্রেস নির্ধারন করতে ব্যবহৃত হয়। |
| target | _blank | লিংক করা ডকুমেন্টটি নতুন উইন্ডো বা নতুন ট্যাবে ওপেন করতে ব্যবহৃত হয়। |
| _self | লিংক করা ডকুমেন্টটি একই উইন্ডো বা একই ট্যাবে ওপেন করতে ব্যবহৃত হয়। (By default) | |
| _parent | লিংক করা ডকুমেন্টটি প্যারেন্ট ফ্রেমে ওপেন করতে ব্যবহৃত হয়। | |
| _top | লিংক করা ডকুমেন্টটি কারেন্ট ট্যাবে ওপেন করতে ব্যবহৃত হয়। | |
| style | text-decoration:none | লিংক টেক্সট এর আন্ডারলাইন মুছতে ব্যবহৃত হয়। |
উদাহরণ-১:
উপরের কোড লেখা ওয়েবপেজটি ওপেন করলে, পেইজে EduPointBD টেক্সটি দেখা যাবে এবং এর উপর ক্লিক করলে EduPointBD এর ওয়েবসাইটটি ওপেন হবে।
উদাহরণ-২:
উপরের কোড লেখা ওয়েবপেজটি ওপেন করলে, পেইজে একটি চিত্র অর্থাৎ লোগো দেখা যাবে এবং এর উপর ক্লিক করলে EduPointBD এর ওয়েব সাইটটি ওপেন হবে।
ওয়েবপেইজে অডিও যুক্ত করার কোডঃ
ওয়েবপেইজে ভিডিও যুক্ত করার কোডঃ
পাঠ মূল্যায়ন-
জ্ঞানমূলক প্রশ্নসমূহঃ
- ক। হাইপারলিঙ্ক কী?
অনুধাবনমূলক প্রশ্নসমূহঃ
- খ। হাইপারলিঙ্ক কী – ব্যাখ্যা কর।
- খ। বর্তমানে ওয়েবপেইজে Hyperlink একটি গুরুত্বপূর্ণ উপাদান ব্যাখ্যা কর।
- খ। হাইপারলিঙ্ক তৈরি করতে href অ্যাট্রিবিউটের ব্যবহার অত্যাবশ্যকীয়-ব্যাখ্যা কর।
- খ। <img> বুঝিয়ে লেখ।
- খ। <img> ট্যাগে src অ্যাট্রিবিউটের ব্যবহার অত্যাবশ্যকীয়-ব্যাখ্যা কর।
সৃজনশীল প্রশ্নসমূহঃ
উদ্দীপকটি পড় এবং প্রশ্নের উত্তর দাওঃ
শুধুমাত্র HTML ব্যবহার করে চন্দনা মডেল কলেজের একটি ওয়েবসাইট তৈরি করা হয় । ওয়েবসাইটটির হোম পেইজে ict.jpg নামের 200×300px আকারের একটি ছবি আছে । ছবিটির নিচে notice.html নামের notice পেইজের একটি লিংক আছে। ছবির উপরে “Welcome to Chandana Model College” লেখাটি নীল রঙে প্রদর্শিত হয়। ওয়েবসাইটটিতে ভিজিটরদের মতামত প্রদানের মত কোন ব্যবস্থা নাই ।
- গ। উদ্দীপকে উল্লিখিত হোম পেইজ তৈরির জন্য HTML কোড লিখ।
উদ্দীপকটি পড় এবং প্রশ্নের উত্তর দাওঃ
মি. রফিক স্যার ক্লাসে html সম্পর্কে আলোচনা করছিলেন। তিনি D ড্রাইভের picture ফোল্ডারের মধ্যে রাখা logo.jpg নামক একটি ইমেজ 500×300 আকারে একটি ওয়েবপেইজে যুক্ত করলেন। অতঃপর তিনি ছাত্রদের বললেন তোমরা এমন একটি html কোড লেখ যাতে উক্ত ইমেজের উপর ক্লিক করলে www.xeducationboard.edu.bd ওয়েবসাইটটি প্রদর্শন হয়।
- গ। উদ্দীপকে উল্লিখিত ছবিটি ওয়েবপেইজে যুক্ত করার HTML কোড লিখ।
- ঘ। উদ্দীপকের দ্বিতীয় কাজটি করার জন্য কোডে কী কী পরিবর্তন করতে? বিশ্লেষণ কর।
উদ্দীপকটি পড় এবং প্রশ্নের উত্তর দাওঃ
“X”প্রতিষ্ঠানের হোম পেইজে প্রতিষ্ঠানের প্রশাসনিক ভবনের ছবি(administration.jpg) দেওয়া আছে এবং Employment.html ও Production.html নামে দুটি ওয়েবপেইজ হোম পেইজের সাথে লিংক করা আছে । ওয়েবসাইটটি ইন্টারনেট এ থাকলে বিশ্বের সচেতন মানুষ প্রতিষ্ঠান সম্পর্কে জানতে পারবে।
- গ। উদ্দীপকে উল্লিখিত প্রতিষ্ঠানটির হোম পেইজ তৈরির html কোড লেখ ।
বহুনির্বাচনি প্রশ্নসমূহঃ
১। JPEG এর পূর্ণরূপ কোনটি?
ক.Joint Photographic Imaging Group খ.Joint Photoshop Expert Group
গ.Joint Photo Exchange Group ঘ.Joint Photo Graphic Expert Group
২। ওয়েব পেজে 1000×800 পিক্সেলের nature.jpg ইমেজটি যুক্ত করার জন্য <img src= “nature.jpg”> এর সাথে কোন নির্দেশনা যুক্ত হবে?
ক.width=“1000” height=“800” খ.Pixelw=“1000” pixelh=“800”
গ.w=“1000” h=“800” ঘ.Pixwidth=“1000” pixheight=“800”
৩। হাইপারলিঙ্ককে প্রধানত কত ভাগে ভাগ করা যায় ।
ক.৮ খ.৫ গ.৩ ঘ.৬
৪। anchor ট্যাগটি by default কোন color এ প্রদর্শিত হয়-
ক.red খ.green গ.blue ঘ.pink
৫। নিচের কোনটি হাইপারলিঙ্ক এর গঠন?
ক. <a href= “www”> link text </a> খ. <a href= “url”> link text </a>
গ. <a href= “www.url”> link text </a> ঘ. <a href= “www link text” </a>
৬। ওয়েবপেইজে চিত্র সংযোগের সিনট্যাক্স হলো-
ক. <img src= “url”> খ. <img src, “url”>
গ. <img=“src”, url> ঘ. img<“src url”>
৭। ওয়েবে যে ইমেজ ফরম্যাট সাপোর্ট করে-
i.GIF ii.JPG iii.BMP
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
৮। HTML-এ লিংক সিনটেক্স হলো- <a href=“url”>Link text </a> এখানে href এর অর্থ হচ্ছে
ক. hot reference খ. hyperlink replace
গ. hyperlink referance ঘ. home reference
নিচের উদ্দীপকটি পড় এবং ৯ ও ১০ নং প্রশ্নের উত্তর দেওঃ
লিমার তৈরিকৃত ওয়েবপেইজে একটি নতুন ছবি সংযুক্ত করল। এর ফলে তার পেইজটি আরও দৃষ্টিনন্দন হলো।
৯। লিমা যে ট্যাগ ব্যবহার করে ছবি যুক্ত করল সেই ট্যাগের প্রকারভেদের সাথে নিচের কোন ট্যাগের মিল রয়েছে?
ক.<html> খ.<br> গ.<body> ঘ.<pre>
১০। লিমা যে ছবিটি সংযুক্ত করেছে তা হতে পারে-
i.jpg ii.bmp iii.png
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
১১। একটি ওয়েবপেইজের সাথে অন্য একটি পেইজের সংযোগকে কী বলে?
ক.Connection খ.Link গ.Hyperlink ঘ.Addition
উদ্দীপকটি পড় এবং ১২ ও ১৩ নং প্রশ্নের উত্তর দাও।
নিরব নতুন ওয়েবডেভেলপার। সে HTML ব্যবহার করে ওয়েবপেইজ তৈরি করে এবং হাইপারলিংকের কাজ করে।
১২। নিরব উদ্দীপকের কাজ করতে নিচের কোন ট্যাগ ব্যবহার করে?
ক.<caption> খ. <a> গ.<href> ঘ.<link>
১৩। নিরব যে পদ্ধতিতে কাজ করছে তার সুবিধা-
i.ওয়েবসাইটের একটা পেইজের এক অংশের সাথে একই পেইজের অন্য অংশের লিংক করা যায়
ii.ওয়েবসাইটের এক পেইজ থেকে অন্য পেইজে যাওয়া যায়।
iii.এক ওয়েবসাইটের সাথে অন্য ওয়েবসাইট লিংক করা যায়
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
উদ্দীপকটি পড় এবং ১৪ ও ১৫ নং প্রশ্নের উত্তর দাও।
একটি ওয়েবসাইটের 4-নম্বর পেইজে 300×400 সাইজের pic.jpg নামের একটি ছবি সংযুক্ত রয়েছে। তবে সমস্যা হলো সাইটটির এক পেইজ হতে অন্য পেইজে যাওয়া যাচ্ছে না।
১৪। সাইটটির সমস্যা সমাধানে প্রয়োজনীয় ট্যাগ-
ক. <a>…. </a> খ. <b>…. </b> গ. <i>…. </i> ঘ. <li>…. </li>
১৫। 4-নাম্বর পেইজের জন্য প্রযোজ্য HTML কোডটি হলো-
ক. < img src=“pic.jpg” height=“400” width=“300” >
খ. < img src “pic.jpg”, height=“300” width=“400” >
গ. < img src “pic.jpg” height=“400” width=“300” >
ঘ. < img src “pic.jpg” height=300, width=300>
১৬। href হতে পারে-
i.লোকাল ii.গ্লোবাল iii. ইন্টারনাল
নিচের কোনটি সঠিক?
ক.i ও ii খ.i ও iii গ.ii ও iii ঘ.i, ii ও iii
১৭। নতুন উইন্ডোতে ওয়েবপেইজ ওপেন করতে ব্যবহৃত অ্যাট্রিবিউট কোনটি?
ক. href খ. target গ. src ঘ. title
১৮। ওয়েবপেইজে ইমেজের পরিবর্তে টেক্সট প্রদর্শন করার জন্য ব্যবহৃত অ্যাট্রিবিউট কোনটি?
ক. width খ. alt গ. src ঘ. title
