HTML ইমেজ <img> ট্যাগ ব্যবহৃত বিভিন্ন অ্যাট্রিবিউট দেখে নিন।
আসসালামু আলাইকুম।
১, <img>ট্যাগ এর height,width এবং border অ্যাট্রিবিউট-ওয়েব পেইজে যে ইমেজ বা ছবিটি ইনসার্ট করা হবে সেটি উচ্চতায় এবং প্রস্থে কত পিক্সেলের হবে তা height এবং width অ্যাট্রিবিউটেরর উপর নির্ভর করে। width অ্যাট্রিবিউট ইমেজের প্রস্থ নির্দশ করে এবং height অ্যাট্রিবিউট ইমেজের দের্ঘ্য নির্দেশ করে। অপর দিকে ইমেজের চারিদিকে লাইন বা বর্ডার দেয়ার জন্য border অ্যাট্রিবিউট ব্যবহৃত হয়। এই বর্ডারের রং সাধারণত (ডিফল্ট হিসাবে) কালো হয়। তবে ডিফল্ট হিসাবে ইমেজের কোন বর্ডার থাকে না অবশ্য border="0" লিখলে কোন বর্ডার পাওয়া যাবে না। তাই বর্ডারের 0 এর চেয়ে বেশি দেয়া উচিত।
উদাহরণঃ200X100 সাইজ দিয়ে index.jpg ইমেজটি ওয়েবপেজে সংযোজনের জন্য একটি HTML ভাষার প্রোগ্রাম লিখ।
সমাধান হলোঃ
<html>
<head>
<title> Adding image in a webpage </title> </head>
<body>
<p> <img src = "moji.jpg" width ="200" height = "100" border = "1"> </p>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
২,alt অ্যাট্রিবিউট- ওয়েব পেইজে যোগ করা ইমেজ যদি কোন করণে দেখা না যায় তাহলে ইমেজের পরিবর্তে যেন কোন টেক্সট বা লেখা দেখা যায় সেই জন্য <img> ট্যাগের সাথে alt অ্যাট্রিবিউট ব্যবহৃত হয়।
যেমনঃ<img src = "pic/moji.jpg" alt ="smiley face">
এখানে, কোন কারণে যদি moji.jpg ছবিটি ব্রাউজারে দেখা না যায় (যেসনঃslow net connection অথবা src- অ্যাট্রিবিউটে ভুল থাকলে) তাহলে visitor alt - অ্যাট্রিবিউটে উল্লেখিত moji face লেখাটি দেখাবে।
HTML Code হলোঃ
<html>
<body>
<p>
an image:
<img src="pic/moji.jpg" alt="moji face " width="200" height="200"> </p>
<p>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
৩,<img> ট্যাগ এর align অ্যাট্রিবিউটট - ওয়েব পেইজে যে ছবিটি ইননার্ট হবে সেটির top, bottom,left,right,center ইত্যাদি alignment নির্ধারণের জন্য <img> ট্যাগের সাথে align অ্যাট্রিবিউট ব্যবহৃত হয়।
যেমনঃ <img src ="moji.jpg" align ="right">
অবশ্য বিভিন্ন ধরনের এর কাজগুলো alignment হলো-
১, align = "Top" ঃ ইমেজ বা ছবিটিকে শার্ষ বরাবর অবস্থান করতে ব্যবহৃত হয়।
২, align = "Middle" ঃ ইমেজ বা ছবিটিকে মাঝ বরাবর অবস্থান করতে ব্যবহৃত হয়।
৩, align ="Bottom" ঃইমেজ বা ছবিটিকে নিচের দিকে অবস্থান করতে ব্যবহৃত হয়।
৪, align ="Left" ঃ ইমেজ বা ছবিটিকে বাম দিকে বরাবর অবস্থান করতে ব্যবহৃত হয়।।
৫, align ="Right"ঃইমেজ বা ছবিটিকে ডান দিক ববরাবর অবস্থান করতে ব্যবহৃত হয়।
সর্বশেষঃ
ইমেজ দিয়ে লিংক তৈরিকরণ-HTML file এ ইমেজ এ ব্যবহৃত ট্যাগটির সাহায্যে লিংক বা হাইপারলিংকও তৈরি করা যায়। এক্ষেত্রে হাইপারলিংক তৈরির সিনটেক্স এর Link content এর পরিবর্তে <img> ট্যাগটি সিনটেক্স লিখতে হয়। অর্থাৎ এক্ষেত্রে সিনটেক্সটি হলো নিম্নরূপ-
< a href = "Url"> <img src ="URL"> </a>
উদাহরণঃ
<html>
<body>
(a href = "homepage.html"> <img src =" moji.jpg" width="300" height ="200" border ="1"> </a>
</body>
</html>
উপরোক্ত HTML লিংকের ফলে moji.jpg ছবিটি একটি লিংক হিসাবে ব্রাউজারে প্রদর্শিত হবে এবং ছবিটিতে ক্লিক করলেই homepage.html এর ওয়েব পেজে সরাসরি চলে যাবে।
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
আজকে এই পর্যন্তই, আবার কোন একদিন দেখা হবে ইনশাআল্লাহ্ , HTMLবা ওয়েব ডিজাইন কোন পোস্ট নিয়ে। আপাততো সবাই ভালো থাকুন, সুস্থ থাকুন। আল্লাহ্র কাছে সবসময় এই দোয়াই করি। আল্লাহ্ হাফেজ…
আসসালামু আলাইকুম।
১, <img>ট্যাগ এর height,width এবং border অ্যাট্রিবিউট-ওয়েব পেইজে যে ইমেজ বা ছবিটি ইনসার্ট করা হবে সেটি উচ্চতায় এবং প্রস্থে কত পিক্সেলের হবে তা height এবং width অ্যাট্রিবিউটেরর উপর নির্ভর করে। width অ্যাট্রিবিউট ইমেজের প্রস্থ নির্দশ করে এবং height অ্যাট্রিবিউট ইমেজের দের্ঘ্য নির্দেশ করে। অপর দিকে ইমেজের চারিদিকে লাইন বা বর্ডার দেয়ার জন্য border অ্যাট্রিবিউট ব্যবহৃত হয়। এই বর্ডারের রং সাধারণত (ডিফল্ট হিসাবে) কালো হয়। তবে ডিফল্ট হিসাবে ইমেজের কোন বর্ডার থাকে না অবশ্য border="0" লিখলে কোন বর্ডার পাওয়া যাবে না। তাই বর্ডারের 0 এর চেয়ে বেশি দেয়া উচিত।
উদাহরণঃ200X100 সাইজ দিয়ে index.jpg ইমেজটি ওয়েবপেজে সংযোজনের জন্য একটি HTML ভাষার প্রোগ্রাম লিখ।
সমাধান হলোঃ
<html>
<head>
<title> Adding image in a webpage </title> </head>
<body>
<p> <img src = "moji.jpg" width ="200" height = "100" border = "1"> </p>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
২,alt অ্যাট্রিবিউট- ওয়েব পেইজে যোগ করা ইমেজ যদি কোন করণে দেখা না যায় তাহলে ইমেজের পরিবর্তে যেন কোন টেক্সট বা লেখা দেখা যায় সেই জন্য <img> ট্যাগের সাথে alt অ্যাট্রিবিউট ব্যবহৃত হয়।
যেমনঃ<img src = "pic/moji.jpg" alt ="smiley face">
এখানে, কোন কারণে যদি moji.jpg ছবিটি ব্রাউজারে দেখা না যায় (যেসনঃslow net connection অথবা src- অ্যাট্রিবিউটে ভুল থাকলে) তাহলে visitor alt - অ্যাট্রিবিউটে উল্লেখিত moji face লেখাটি দেখাবে।
HTML Code হলোঃ
<html>
<body>
<p>
an image:
<img src="pic/moji.jpg" alt="moji face " width="200" height="200"> </p>
<p>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
৩,<img> ট্যাগ এর align অ্যাট্রিবিউটট - ওয়েব পেইজে যে ছবিটি ইননার্ট হবে সেটির top, bottom,left,right,center ইত্যাদি alignment নির্ধারণের জন্য <img> ট্যাগের সাথে align অ্যাট্রিবিউট ব্যবহৃত হয়।
যেমনঃ <img src ="moji.jpg" align ="right">
অবশ্য বিভিন্ন ধরনের এর কাজগুলো alignment হলো-
১, align = "Top" ঃ ইমেজ বা ছবিটিকে শার্ষ বরাবর অবস্থান করতে ব্যবহৃত হয়।
২, align = "Middle" ঃ ইমেজ বা ছবিটিকে মাঝ বরাবর অবস্থান করতে ব্যবহৃত হয়।
৩, align ="Bottom" ঃইমেজ বা ছবিটিকে নিচের দিকে অবস্থান করতে ব্যবহৃত হয়।
৪, align ="Left" ঃ ইমেজ বা ছবিটিকে বাম দিকে বরাবর অবস্থান করতে ব্যবহৃত হয়।।
৫, align ="Right"ঃইমেজ বা ছবিটিকে ডান দিক ববরাবর অবস্থান করতে ব্যবহৃত হয়।
সর্বশেষঃ
ইমেজ দিয়ে লিংক তৈরিকরণ-HTML file এ ইমেজ এ ব্যবহৃত ট্যাগটির সাহায্যে লিংক বা হাইপারলিংকও তৈরি করা যায়। এক্ষেত্রে হাইপারলিংক তৈরির সিনটেক্স এর Link content এর পরিবর্তে <img> ট্যাগটি সিনটেক্স লিখতে হয়। অর্থাৎ এক্ষেত্রে সিনটেক্সটি হলো নিম্নরূপ-
< a href = "Url"> <img src ="URL"> </a>
উদাহরণঃ
<html>
<body>
(a href = "homepage.html"> <img src =" moji.jpg" width="300" height ="200" border ="1"> </a>
</body>
</html>
উপরোক্ত HTML লিংকের ফলে moji.jpg ছবিটি একটি লিংক হিসাবে ব্রাউজারে প্রদর্শিত হবে এবং ছবিটিতে ক্লিক করলেই homepage.html এর ওয়েব পেজে সরাসরি চলে যাবে।
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
আজকে এই পর্যন্তই, আবার কোন একদিন দেখা হবে ইনশাআল্লাহ্ , HTMLবা ওয়েব ডিজাইন কোন পোস্ট নিয়ে। আপাততো সবাই ভালো থাকুন, সুস্থ থাকুন। আল্লাহ্র কাছে সবসময় এই দোয়াই করি। আল্লাহ্ হাফেজ…