এইচটিএমএল ইমেজ গাইডলাইন

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

এইচটিএমএল এর মধ্যে যেকোনো ধরনের ইমেজ ব্যবহার করার জন্য <img>  ট্যাগ ব্যবহার করা হয় | <img> এর আগে শুধুমাত্র স্টার্টিং ট্যাগ থাকে কোন এন্ডিং ট্যাগ থাকে না |

• <img> ট্যাগ এর মধ্যে সবসময় দুইটি Sub Tag ডিক্লেয়ার করার প্রয়োজন হয়, যা ইমেজ কে নির্দিষ্ট করে বুঝাতে সাহায্য করে |
• Src-  সোর্স এট্রিবিউট এর মাধ্যমে  ইমেজের ফাইল ডিরেক্টরি নির্ধারণ করে দেওয়া হয় | 
• Alt-  অল্টারনেটিভ এর মাধ্যমে ইমেজ রিলেটেড টেক্সট শো করানো হয় |

ইমেজ সিনট্যাক্স এর উদাহরন

<img src=”https://wigmarketing.com/”; alt=”WigMarketing Digital Solution”; >

এইচটিএমএল ইমেজ ট্যাগ লিস্ট ( HTML Image Tag List )

• <img> –  ইমেজ ট্যাগ ব্যবহার করে ইমেজের রুট ডিরেক্টরি ডিক্লেয়ার করা হয় |
• <src> – যেকোনো ইমেজের লিংক নির্দেশ করার জন্য সোর্স এট্রিবিউট ব্যবহার করা হয় |
• <alt> – অল্টারনেটিভ টেক্সটের মাধ্যমে ইমেজ রিলেটেড টেক্সট এড করা হয় |
• <width> – ইমেজের প্রশস্ততা নির্দেশ করার জন্য ব্যবহার করা হয় |
• <height> –  যেকোনো ইমেজর উচ্চতা ডিক্লেয়ার করার জন্য height ব্যবহার করা হয় |

ইমেজ সোর্স এট্রিবিউট ( IMAGE SRC ATTRIBUTE )

সোর্স এট্রিবিউট মূলত যেকোনো ইমেজের ইউ আর এল ডিফাইন করার জন্য ব্যবহার করা হয় | সব সময় ইমেজ ট্যাগ এর মত সোর্স এট্রিবিউট ব্যবহার করে ইমেজের নির্দিষ্ট ইউ আর এল সেট করে দেওয়া হয় |  যার ফলে যেকোন ওয়েব পেজ লোড হলে সেই  ইমেজটি দৃশ্যমান হয় | 

ইমেজ সোর্স এট্রিবিউট সিনট্যাক্স এর উদাহরনঃ

<img src= “url” >

ইমেজ অল্টার এট্রিবিউট ( Image ALT Attribute )

সোর্স এট্রিবিউট এর মধ্যে যদি ইমেজকে ঠিকভাবে লিংক করানো না হয় অথবা ফাইল ডিরেক্টরীতে কোন সমস্যা হয় তাহলে যে পেজে ইমেজ সেটআপ করা হয় সেই পেজে ইমেজটি লোড হয় না বা লোড হতে অনেক সময়  নেয় |  এমন অবস্থায় অল্টারনেটিভ এট্রিবিউট টেক্সট সেটআপ এর মাধ্যমে, যে স্থান ইমেজ সেটআপ করা হয়েছিল সেই স্থানে ইমেজ রিলেটেড টেক্সট শো করানো হয় |

অল্টারনেটিভ এট্রিবিউট এর সিনট্যাক্স এর উদাহরনঃ

<img src =”url”; alt=”alternative text”;>

ইমেজ সাইজ – হাইট এন্ড ওয়েট ( Image Size Height & Width )

একটি ওয়েব পেজ তৈরি করার সময় সেই পেজকে বিভিন্ন ডিভাইস এ রেস্পন্সিভ করা হয় |  পেজ এর ক্ষেত্রে ইমেজ কেউ সেভাবে সেটাপ করে নিতে হয় |  এখানে Desktop, Tab, Mobile বিভিন্ন ধরনের Screen অনুসারে  ইমেজ রিসাইজ করে নিতে হয় |  ইমেজ যে কোন ডিভাইসে Perfect Position সেটআপ করার জন্য ইমেজ সাইজ ব্যবহার করা হয় |

<img>  ট্যাগ এর মধ্য  ইমেজ সাইজ নির্ধারণ করে যা যে কোন ওয়েব পেজকে ভিজিটরের কাছে সুন্দরভাবে প্রদর্শন করে এবং ওই পেজের লোডিং  স্পিড ঠিক রাখতে সাহায্য করে | যখন ওয়েবপেজে ইমেজ সেটআপ করা হয় তখন ইমেজের হাইট নির্ধারণ করে দেয়া হয় হাইটেক ব্যবহারের মাধ্যমে  |  ওয়েব পেজ তৈরি করার সময় ডিভাইজার রেস্পন্সিভ করতে width  নির্ধারণ করে দেওয়া হয় |

ইমেজের হাইট এবং ওয়েট নির্ধারণের সিনট্যাক্স এর উদাহরনঃ

<img src=”url”; alt=”alternative test”; width=”300px”; height=”250px”;>

ইমেজ ইন অ্যানাদার ফোল্ডার ( IMAGE IN ANOTHER FOLDER )

ওয়েব পেজ তৈরি করার সময় বিভিন্ন ধরনের ইমেজ ব্যবহার করা হয় এই ইমেজগুলো বিভিন্ন লোকেশনে অবস্থান করে |  আপনি যখন কোন ইমেজ  দেখাতে চাইবেন তখন অবশ্যই আপনাকে সেই লোকেশন টি  সোর্স এট্রিবিউট এর মধ্যে ডিক্লেয়ার করে দিতে হবে | যখন আপনি কোন ফাইল লোকেশন নির্দিষ্ট করে সেটাপ করে না দিবেন তখন এটি অটোমেটিক্যালি যে ফাইলে আপনি লিখছেন সেই ফাইল ফোল্ডার সেটআপ করে নিবে | ওয়েব পেজ তৈরি করার সময় অবশ্যই আপনাকে ফাইলের লোকেশন নির্দিষ্ট করে সেটআপ করতে হবে  শর্ট সার্কিট এর মধ্যে |

ইমেজ অন অ্যানাদার ওয়েবসাইট ( IMAGE ON ANOTHER WEBSITE )

বিভিন্ন প্রয়োজনে অন্য যেকোনো ওয়েবসাইটের ইমেজ আমরা নিজেদের ওয়েবপেজে ব্যবহার করি যা আমাদের ওয়েবসাইটে  এক্সটার্নাল লিংক হিসেবে  কাউন্ট হয় | সোর্স এট্রিবিউট ব্যবহারের মাধ্যমে এক্সটার্নাল লিংকগুলো পেজের মধ্যে সেটআপ করা হয় |

ইমেজ এজ এ লিংক ( IMAGE AS A LINK )

যখন ইমেজকে লিংক হিসেবে শো করানো প্রয়োজন হয়  তখন <a>  এট্রিবিউট এর পাশে ইমেজ ট্যাগ ব্যবহার করে  ইমেজ এর সাথে লিংক করা যায় |

নিজে একটি  ইমেজ এর সাথে লিংক করে  দেখানো হলোঃ

<a href=”https://wigmarketing.com/”>

<img src=”wigmarketing.jpg” alt=”Wigmarketing Digitl Solution” style=”width:42px;height:42px;”>

</a>

এনিমেটেড ইমেজ ( ANIMATED IMAGE )

ওয়েব পেজ তৈরি করার সময় বিভিন্ন ধরনের ডাইনামিক বা এনিমেটেড ইমেজ আমরা দেখাতে চাই |  এই কাজটি করার জন্য CSS probetic ব্যবহার করতে হয় যার মাধ্যমে যেকোনো  ইমেজ কে  এনিমেটেড ইমেজ হিসেবে ওয়েবপেজে প্রদর্শন করা সম্ভব হয় |

কিভাবে একটি ইমেজকে এনিমেটেড করা হয় নিচে তা দেখানো হল –

<body>

        <h2>Animated Images</h2>

<p>HTML allows moving images:</p>

<div class =”img”> <img src=”WALKING BUSINESSMAN.jPG”></div>

<style>

    *{

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    body{

        display: flex;

        justify-content: ceter;

        align-items: center;

        width: 100%;

        min-height: 100vh;

        background: #111;

        animation: animate 3s linear infinite;

    }

    @keyframes animate{

        0%{

            filter: hue-rotate();

        }

    }

    .img-box{

            width: 1000px;

            height: 850px;

    }

.img-box img{

    width: 100%;

    height: 100%;

}

</style>

</body>

ইমেজ ফ্লোটিং ( IMAGE FLOATING )

কোন ইমেজকে যখন যে কোন লেখার ডানপাশে অথবা বাম পাশে সেটআপ করার প্রয়োজন হয় তখন CSS এর মাধ্যমে Floting Property ব্যবহার করে এ কাজটি সম্পন্ন করা হয় |

ইমেজ ফ্লোটিং এর ব্যবহার–

 <p><img src=”wigmarketing.jpg” alt=”wigmarketing Digital Solution!” style=”float:right;width:450px;height:450px;”>

                The image will float to the right of the text.</p>

            <p><img src=”wigmarketing.jpg” alt=”wigmarketing Ditail Solution!” style=”float:left;width:40px;height:40px;”>

                    The image will float to the left of the text.</p>

কমন ইমেজ ফরমেট ( COMMON IMAGE FORMATES )

PNG – Portable Natwork Graphics —————– .png

GIF – Graphics Interface Formats —————— .gif

APNG – Animated Portable Natwork Graphics —————– .apng

JPEG – Joint Photographic Expert Group Image —————- .jpeg/ .jpg

SVG – Scalable Vactor Graphics ————— .svg

ICO – Microsoft Icon———————— .ico