ইমেজ গ্যালারির ইমেজের গঠন

সাধারণত ইমেজ গ্যালারিতে <a></a> বা এংকর ট্যাগের মধ্যে কিছু <image></image>ইমেজ ট্যাগ থাকে। প্রাথমিক পর্যায়ে ছোট আকৃতির ইমেজ শুধুমাত্র <image></image>ইমেজ ট্যাগ ব্যবহার করে প্রদর্শন করা হয়। ছোট আকৃতির ইমেজ সমূহের উপর মাউস পযেন্টার নিয়ে গেলে যে বড় ইমেজ প্রদর্শিত হয় তার জন্য <span><image></image></span> ব্যবহার করা হয় এবং বড় ইমেজ এর নিচে লেখা প্রদর্শনের জন্য  <span></span> এর মধ্যেই শুধুমাত্র টেক্সটটি লিখে দিলেই চলে। যদি লেখাটাকে ইটালিক দেখতে চাওয়া হয় তাহলে <i> text </i> ব্যবহার করা যেতে পারে। তাহলে প্রতিটা ইমেজ এর জন্য গঠন হবে <a><img /><span><img /><br /><i> text </i></span></a> এর অনুরূপ।

ইমেজ গ্যালারির প্রতিটি <a></a> বা এংকর ট্যাগকে আলাদাভাবে চিহ্নিত করার জন্য <a class="galpic"> এর অনুরূপ ক্লাস সিলেক্টর ব্যবহার করা হয়। যদি ইমেজ গ্যালারিতে দুই বা ততধিক লাইন থাকে তাহলে প্রতিটা লাইনের শেষে একটা করে <br /> ব্যবহার করতে হবে।

ইমেজ গ্যালারির ইমেজের HTML গঠন

<a class="galpic">
<img />
<span>
<img />
<br />
<i> text </i>
</span>
</a>