HTML বাংলা টিউটোরিয়াল পর্ব-০৮
এইচটিএমএলে ইমেজ ট্যাগের ব্যবহার
আসসালামু-আলাইকুম ।
আশা করি আপনারা সবাই ভাল আছেন। আজকে আমি আপনাদের মাঝে হাজির হলাম HTML বাংলা টিউটোরিয়াল পর্ব-০৮ নিয়ে । এই সাইটের ফেসবুক পেইজে লাইক দিতে ভুলবেন না।
বাংলা টিউটোরিয়াল ফেসবুক পেজ
যারা আগের পর্ব দেখেন নাই তারা এখান থেকে দেখে নিতে পারেন।
HTML বাংলা টিউটোরিয়াল পর্ব-০১
HTML বাংলা টিউটোরিয়াল পর্ব-০২
HTML বাংলা টিউটোরিয়াল পর্ব-০৩
HTML বাংলা টিউটোরিয়াল পর্ব-০৪
HTML বাংলা টিউটোরিয়াল পর্ব-০৫
HTML বাংলা টিউটোরিয়াল পর্ব-০৬
HTML বাংলা টিউটোরিয়াল পর্ব-০৭
পর্ব-০৮ এ যা যা থাকবেঃ
ইমেজ ট্যাগের সিনট্যাক্স
ইমেজে অল্টার এর ব্যবহারঃ
ইমেজে হাইট ও ওয়াইডথ এর ব্যবহারঃ
ওয়েবসাইট থেকে ইমেজের ব্যবহার
ইমেজ ট্যাগের সিনট্যাক্সঃ
পেইজে ইমেজ ব্যবহার করার জন্য ইমেজ ট্যাগটি ব্যবহার করা হয়ে থাকে । ইমেজ ট্যাগটি ব্যবহারের নিয়ম হচ্ছে-
<img src="url" >
উদাহরণঃ
<html>
<head>
</head>
<body>
<img src="Flower.jpg">
</body>
</html>
কোডটুকু লিখে নামে সেভ করে ব্রাউজারে রান করান।যে ফোল্ডারে সেভ করবেন ঠিক সেই ফোল্ডারেই নামে ইমেজটি রাখবেন।
আর আপনি যদি ফোল্ডারটিতে images নামে ফোল্ডার বানিয়ে সেখানে ইমেজ রাখেন তাহলে কোডটি লিখবেন এভাবে-
<html>
<head>
</head>
<body>
<img src="images/Flower.jpg">
</body>
</html>
কোডটুকু image.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ
ইমেজে অল্টার এর ব্যবহারঃ
অনেক সময় ইমেজ লোডিং হতে সময় নেয় বা লোডিং হয় না।তখন আপনার ইমেজটি কি সম্পর্কিত তা লিখে দিতে হয় অল্টার এর মাধ্যমে।ইমেজ ব্যবহার করলে অবশ্যই অল্টার ব্যবহার করবেন।অল্টার ব্যবহারের নিয়ম হচ্ছে-
<img src="Flower.jpg" alt="This is a flower">
উদাহরণঃ
<html>
<head>
</head>
<body>
<img src="Flower.jpg" alt="This is a flower">
</body>
</html>
কোডটুকু alt.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
ইমেজে হাইট ও ওয়াইডথ এর ব্যবহারঃ
আপনি চাইলে আপনার ইমেজের হাইট বা ওয়াইডথ নির্দিষ্ট করে দিতে পারেন।
এটি ব্যবহার করার নিয়ম হচ্ছে-
<html>
<head>
</head>
<body>
<img width="200" height="200" src="Flower.jpg" alt="This is a flower">
</body>
</html>
কোডটুকু width.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আউটপুটঃ
ওয়েবসাইট থেকে ইমেজের ব্যবহারঃ
আপনি চাইলে যেকোন ওয়েবসাইটের ইমেজ সরাসরি আপনার পেইজে ব্যবহার করতে পারেন।প্রথমে ইমেজের লিংক কপি করুন এবং সোর্সে বসিয়ে দিন।
উদাহরণঃ
<html>
<head>
</head>
<body>
<img width="200" height="200" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6sIuejee_LBwkNBl2v1CbzH7b6s0Yf5YSTb-m2fwFdCgpLR0INBw3u8LNfTXLpFppfIbIQ7ZgmzGmIJrbwo_R_meK_GQTAKRPqZrd1l0WDM8Pj1T4ajf6T-1OLI7jdSkOar9-7x4GEcM/h120/bg-image.jpg">
</body>
</html>
কোডটুকু site-image.html নামে লিখে সেভ করে ব্রাউজারে রান করুন ।
আপনি চাইলে স্টাইল ব্যবহার করেও আপনার ইমেজের সাইজ নির্দিষ্ট করে দিতে পারে। নিচের উদাহরণে তা দেখানো হল।
উদাহরণঃ
<html>
<head>
</head>
<body>
<img src="Flower.jpg" alt="This is a flower" style="width:128px;height:128px">
</body>
</html>
আপনি যতটুকু শিখবেন তা সবার মাঝে ছড়িয়ে দেওয়ার চেষ্টা করুন। এই পর্বে কোন বিষয়ে বুঝতে সমস্যা হলে কমেন্ট করুন। আমার পক্ষে যতটুকু সম্ভব সমাধান করার চেষ্টা করব। পেইজটি শেয়ার করতে ভুলবেন না। নিজে জানুন এবং অন্যকে জানাতে সাহায্য করুন। নিচে শেয়ার করার জন্য বিভিন্ন অপশন আছে যেমন ফেসবুক, টুইটার, গুগল প্লাস ইত্যাদি।
আজ আর নয়। পরের পর্বের আমন্ত্রণ জানিয়ে আজকের মত বিদায় বন্দুরা।
ধন্যবাদ সবাইকে।
HTML বাংলা টিউটোরিয়াল পর্ব-০৯
HTML বাংলা টিউটোরিয়াল পর্ব-১০
HTML বাংলা টিউটোরিয়াল পর্ব-১১
HTML বাংলা টিউটোরিয়াল পর্ব-১২
HTML বাংলা টিউটোরিয়াল পর্ব-১৩
No comments:
Post a Comment