Font এবং Image ট্যাগের ব্যবহার
শুক্রবার, ১৯ জুলাই, ২০১৯
Comment
ফন্ট ট্যাগ:
HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখানে size="5" অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma" প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।
উদাহরণ প্রোগ্রাম:
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<font size="2" face="Verdana">This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >Bangladesh is a beautiful country.
</font>
</body>
</html>
Image ট্যাগ:
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়।
এইচটিএমএল ইমেজ ট্যাগ
ট্যাগবর্ণনা
<img>একটি ইমেজ অন্তর্ভুক্ত করার জন্য ব্যবহার করা হয়
<map>একটি ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয়
<area>ইমেজে ম্যাপের ক্লিকের স্থান নির্ধারণ করার জন্য ব্যবহার করা হয়
পূর্ব প্রস্তুতি
ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p><strong>ইমেজটি টেক্সটের ডানপাশে ফ্লোট হবেঃ</strong></p>
<p>
<img src="../../images/img_tree.gif" alt="Tree" style="float:right;width:42px;height:42px;">
ডানে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
</p>
<p><strong>ইমেজটি টেক্সটের বামপাশে ফ্লোট হবেঃ</strong></p>
<p>
<img src="../../images/img_tree.gif" alt="Tree" style="float:left;width:42px;height:42px;">
বামে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
</p>
</body>
</html>
বি:দ্র: Output দেখার জন্যে একটা নোটপ্যাড open করে উপরের উদাহরনের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি যে কোন Browser দিয়ে open করুন।
HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখানে size="5" অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma" প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।
উদাহরণ প্রোগ্রাম:
<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<font size="2" face="Verdana">This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >Bangladesh is a beautiful country.
</font>
</body>
</html>
Image ট্যাগ:
একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়।
এইচটিএমএল ইমেজ ট্যাগ
ট্যাগবর্ণনা
<img>একটি ইমেজ অন্তর্ভুক্ত করার জন্য ব্যবহার করা হয়
<map>একটি ইমেজ-ম্যাপ তৈরি করার জন্য ব্যবহার করা হয়
<area>ইমেজে ম্যাপের ক্লিকের স্থান নির্ধারণ করার জন্য ব্যবহার করা হয়
পূর্ব প্রস্তুতি
ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
উদাহরণ প্রোগ্রাম:
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p><strong>ইমেজটি টেক্সটের ডানপাশে ফ্লোট হবেঃ</strong></p>
<p>
<img src="../../images/img_tree.gif" alt="Tree" style="float:right;width:42px;height:42px;">
ডানে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
</p>
<p><strong>ইমেজটি টেক্সটের বামপাশে ফ্লোট হবেঃ</strong></p>
<p>
<img src="../../images/img_tree.gif" alt="Tree" style="float:left;width:42px;height:42px;">
বামে ফ্লোটকৃত ইমেজের পাশে কিছু টেক্সট।
</p>
</body>
</html>
বি:দ্র: Output দেখার জন্যে একটা নোটপ্যাড open করে উপরের উদাহরনের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি যে কোন Browser দিয়ে open করুন।
☞ এই পোষ্ট সম্পর্কে যদি আপনার কোন প্রশ্ন☞জিজ্ঞাসা☞সমস্যা☞তথ্য জানার থাকে তাহলে আপনি☞কমেন্ট করলে আপনাকে আমরা প্রয়োজনীয় তথ্য দিয়ে সাহায্য করার চেষ্টা করব☞☞☞ "Font এবং Image ট্যাগের ব্যবহার"
একটি মন্তব্য পোস্ট করুন