কম্পিউটার

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


আপনার ওয়েবসাইটকে সুন্দর চেহারা এবং অনুভূতি দেওয়ার জন্য রং খুবই গুরুত্বপূর্ণ।

হেক্স কোড (হেক্সাডেসিমেল রঙের উপস্থাপনা)

একটি হেক্সাডেসিমেল হল একটি রঙের 6 সংখ্যার উপস্থাপনা। প্রথম দুটি সংখ্যা (RR) একটি লাল মান, পরের দুটি একটি সবুজ মান (GG), এবং শেষটি হল নীল মান (BB)।

Adobe Photoshop এর মত যেকোন গ্রাফিক্স সফটওয়্যার থেকে হেক্সাডেসিমেল মান নেওয়া যেতে পারে। প্রতিটি হেক্সাডেসিমেল কোডের আগে একটি পাউন্ড বা হ্যাশ চিহ্ন # থাকবে। হেক্সাডেসিমেল নোটেশন ব্যবহার করে কয়েকটি রঙের একটি তালিকা নিচে দেওয়া হল। হেক্সাডেসিমেল রঙের কিছু উদাহরণ নিচে দেওয়া হল −

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

রঙের প্রতিনিধিত্ব করার জন্য HTML-এ হেক্স স্টাইল প্রয়োগ করার একটি উদাহরণ দেখা যাক

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:#00FF00;">
      <col style = "background-color:#00FFFF;">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

আউটপুট

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

RGB রঙের মান

RGB রঙের মান rgb( ) বৈশিষ্ট্য ব্যবহার করে নির্দিষ্ট করা হয়। এই বৈশিষ্ট্যটি তিনটি মান নেয়, প্রতিটি লাল, সবুজ এবং নীলের জন্য একটি। মানটি 0 থেকে 255 বা শতাংশের মধ্যে একটি পূর্ণসংখ্যা হতে পারে।

নিচে RGB −

দিয়ে উপস্থাপিত কিছু রঙ রয়েছে

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

রঙের প্রতিনিধিত্ব করতে HTML-এ RGB শৈলী বাস্তবায়নের একটি উদাহরণ দেখা যাক

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:rgb(255,0,0);">
      <col style = "background-color:rgb(255,255,0);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

আউটপুট

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

HSL রঙের মান

HTML এর সাথে, আপনি HUEও সেট করতে পারেন, যেমন 'H' মানে হিউ, 'S' হল স্যাচুরেশন এবং 'L' হল হালকাতার জন্য৷

রঙের প্রতিনিধিত্ব করার জন্য এইচটিএমএল-এ HSL শৈলী বাস্তবায়নের একটি উদাহরণ দেখা যাক

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color: hsl(300, 75%, 85%); ">
      <col style = "background-color: hsl(200, 30%, 40%);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

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



  1. HTML <center> ট্যাগ

  2. HTML <th> colspan অ্যাট্রিবিউট

  3. HTML <colgroup> ট্যাগ

  4. HTML DOM শৈলী খালি সেল সম্পত্তি