এইচটিএমএল স্টাইল

You are currently viewing এইচটিএমএল স্টাইল

Table of Contents

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

আজকের টিউটোরিয়াল থেকে আপনারা যা যা জানতে পারবেন –

  • কত ধরনের স্টাইল এট্রিবিউট রয়েছে  এবং  কি কি ?
  • এইচটিএমএল স্টাইল এট্রিবিউট ব্যবহার করে  যে যে কাজগুলো করা হয় সে সম্পর্কে বিস্তারিত 

স্টাইল মূলত তিন ভাগে বিভক্ত |  যথা :

  1.  ইনলাইন
  2.  এক্সটার্নাল
  3.  ইন্টার্নাল 

সাধারণত স্টাইল ব্যবহার করা হয় সিএসএস এর মধ্য |  কিন্তু এইচটিএমএল ট্যাগ এর মধ্যে ইনলাইন স্টেট ব্যবহার করে পেজের ডিজাইন কাস্টমাইজেশন যায় |

এখানে আমরা  ইনলাইন স্টাইল এট্রিবিউট এর ব্যবহার  দেখব |

এইচটিএমএল স্টাইল এট্রিবিউট ব্যবহার করে যে যে কাজগুলো করা হয় সে সম্পর্কে নিচে উদাহরণসহ বিস্তারিতভাবে দেখানো হলো | 

Text- Color – কোন ওয়েব পেজে কনটেন্ট বা আর্টিকেল এর ফন্ট কালার চেঞ্জ করার জন্য ব্যবহার করা হয় |

 যদি একটি উদাহরণের মাধ্যমে দেখি তাহলে,

<p style=“color:red;”> This is a pragraph.  </p>

যদি এই কোডটি কে ব্রাউজারের রান করায় ধরে যেভাবে ব্রাউজার show  করবে

Background-color – কোন লেখার ব্যাকগ্রাউন্ড চেঞ্জ করার  তাহলে এইচটিএমএল  স্টাইল এট্রিবিউট এর মাধ্যমে সেটা  করা যায় |

চলুন তাহলে  এইচটিএমএল স্টাইল এট্রিবিউট ব্যবহার করে কোন কনটেন্টের ব্যাকগ্রাউন্ড কালার কিভাবে পরিবর্তন করে সেটির  স্ট্রাকচারটা দেখি |

এখানে আমরা যদি উপরের উদাহরণটি ব্যাকগ্রাউন্ড কালার চেঞ্জ করতে চাই তাহলে যেভাবে করতে হবে

<p style= “color: red; background: black;”> This is a pragraph </p> 

যদি আমরা ওপরের স্ট্রাকচার টি ব্রাউজারে রান করি তাহলে  যেভাবে আসবে 

Font-family – কোন কন্টাক্ট ওয়েবপেজে রান করানোর জন্য বিভিন্ন ধরনের ফোন ইউজ করা হয় |  এগুলোকে font-family  এট্রিবিউট ব্যবহার করে ওয়েব পেজে প্রদর্শন করানো হয় |

এখানে আমরা দেখবো কিভাবে এইচটিএমএল স্টাইল এট্রিবিউট এর মাধ্যমে ফন্ট ফ্যামিলি  সেটআপ করতে হয় |

এইচটিএমএল স্টাইল এট্রিবিউট ইউজ করে যেভাবে ফন্ট ফ্যামিলি সেটআপ করতে হয় তার  বেসিক স্ট্রাকচার

<p style=”color: red; background: black; font-family:sans-sarif;”> This is a pragraph. </p>

আমরা যদি উপরের কোড টি ব্রাউজারে ওপেন করি তাহলে যেভাবে এটি শো করবে 

Font-size – আমরা ওয়েব পেজ তৈরি করার জন্য যে ফোনগুলো ইউজ করি এই ফোনগুলো কি রিসিভ করার জন্য আমাদের বিভিন্ন ধরনের সাইজ নির্ধারণ করে দেওয়া লাগে |  এই সাইজ নির্ধারণের জন্য স্টাইল এর মাধ্যমে font-size সেটআপ করে দেওয়া হয় |

এখানে আমরা দেখব কিভাবে এইচটিএমএল স্টাইল এট্রিবিউট এর মাধ্যমে  ওয়েবপেইজের ফন্ট ডিক্লেয়ার করে দেওয়া যায় |

যদি  ফন্ট সাইজ নির্ধারণ করে দেয়া হয় স্টাইল এট্রিবিউট এর মাধ্যমে তাহলে যেভাবে এটির স্ট্রাকচার তৈরি হয় |

<p style=”color:red; background:black; font-family:sans-sarif; font-size:40px”>This is a pragraph.</p>

আমরা যদি উপরের  স্ট্রাকচার টি ব্রাউজারে রান করায় তাহলে যেভাবে এটা শো করবে 

Text-align ওয়েব পেজকে সুন্দরভাবে ডিজাইন করার জন্য ফন্ট  ডানে বামে বা মাঝে অবস্থান করানো হয়  আর এই কাজটি স্টাইল এর মাধ্যমে text-align  নির্ধারণ করে দেয় |

এখানে আমরা দেখব কিভাবে text-align ইউজ করে কোন ওয়েব পেজের কনটেন্ট লেফট রাইট অর সেন্টারে সরানো যায় |

চলেন তাহলে বেসিক স্ট্রাকচার দেখেনি

<p style=”color:red; background:black; font-family:sans-sarif; font-size:40px; font-align: center;”>This is a pragraph.</p>

এটা যদি ব্রাউজারে ওপেন করা হয় তাহলে এটি যেভাবে  দেখাবে

উপরের কোন বিষয়ে যদি কারো বুঝতে সমস্যা হয় কোথাও কোনো প্রশ্ন থাকে তাহলে অবশ্যই কমেন্টে জানাবেন | সাথে থাকার জন্য অসংখ্য ধন্যবাদ |

Leave a Reply