«

»

HTML শিখুন HTML5 সহ [পর্ব-9] HTML STYLE

আসসালামুয়ালাইকুম। আশাকরি সবাই আল্লাহর রহমতে ভালো আছেন। এর আগে HTML COLOR সম্পর্কে আলোচনা করছি:

HTML শিখুন HTML5 সহ [পর্ব-8]

আজ আপনাদেরকে HTML STYLE বা CSS এর সাথে পরিচয় করিয়ে দিব।

HTML STYLE

HTML ডকুমেন্টটে  Styles  দেওয়ার জন্য CSS ব্যবহৃত হয়। তিন ভাবে CSS ব্যবহার করা যায়।

  • প্রত্যেকটি HTML elements এর মধ্যে আলাদা ভাবে style attribute যোগ করে।
  • HTML head section এ  style element গুলো ব্যবহার করে।
  • আলাদা একটি  style sheet ফাইলের মাধ্যমে ( CSS ফাইল যার এক্সটেনশন . CSS)।

প্রত্যেকটি HTML elements এর মধ্যে আলাদা ভাবে style attribute যোগ করে style দেওয়াঃ

প্রত্যেকটি HTML elements এর মধ্যে আলাদা ভাবে style attribute যোগ করে style দিতে হলে HTML এর যে উপাদানকে স্টাইল করা হবে তার Opening ট্যাগের মধ্যে style attribute যোগ করতে হবে। নিচের উদাহরন একটু ভালো ভাবে লক্ষ্য করলেই সহজেই style attribute যোগ করে আপনার HTML এর যে উপাদান গুলোতে ভিবিন্ন স্টাইল দিতে পারবেন।

ছবিটি বড় করে দেখতে এখানে ক্লিক করুন। এখানে আমরা body ট্যাগের মধ্যে

<body style=”background-color:#FAEBD7;”>

দিয়ে background-color Attribute যোগ করে পুরো HTML Document টির ব্যাকগ্রাউন্ডের রঙ নির্বাচন করে দিয়েছি। Attribute গুলো Opening Tag এর মধ্যে লিখতে হয়। আপনারা যেকোন রঙ দিতে পারবেন, শুধু মাত্র রঙের কোড গুলো পরিবর্তন করে। রঙের কোডের পরিবর্তে নাম ও ব্যবহার করা যায়। যেমনঃ

<p style=color:Green">


এ লেখা গুলো সবুজ রঙের</p> উপাদানটি দিয়ে আমরা এ P ট্যাগের ভিতরের সব লেখার রঙ সবুজ করে দিয়েছি। আরো অনেক গুলো Attribute বা বৈশিষ্ট যোগ করা যায় ট্যাগের ভিতরে। একের অধিক Attribute যোগ করতে Opening Tag এর মধ্যে সবগুলো Attribute একের পর এক সেমিকোলন (;) দিয়ে লিখতে হয়। যা

<p style="font-size:25px; color:Green">


এ লেখাগুলোর ফন্ট সাইজ 25 পিক্সেল এবং সবুজ </p> ট্যাগ লক্ষ্য করলে বুঝতে পারা যায়। এখানে আমরা এ P Tag এর লেখা গুলোকে সবুজ রঙের এবং 25 পিক্সেল বড় করতে চাই, তাই আমরা Attribute গুলো একের পর এক সেমিকোলন দিয়ে (;) লিখছি। এ ভাবে আরো অনেক গুলো Attribute যোগ করা যায়।প্রত্যেকটি HTML elements এর মধ্যে আলাদা ভাবে style attribute যোগ করে style দেওয়ার মধ্যে একটা সুবিধা হচ্ছে এটি শুধু মাত্র ঐ ট্যাগেই  কাজ করবে যে ট্যাগে Attribute গুলো বসানো  হবে। অন্য ট্যাগে কাজ করবে না।

HTML head sectionstyle element গুলো ব্যবহার করে Styles দেওয়াঃ

ছবিটি বড় করে দেখতে এখানে ক্লিক করুন।

HTML head section এ  style element গুলো ব্যবহার করে Styles দেওয়ার জন্য head section এ style type এর টাইপ ঠিক করে দিতে হবে। যা লেখা হয় <style> ট্যাগ ব্যবহার করে লেখা হয়।

<style type="text/css">……………</style>


তার  পর যে যে ট্যাগের জন্য style দেওয়া হবে যে গুলো লিখে style Attribute গুলো একটি ব্র্যাকেটের মধ্যে (দ্বিতীয় ব্র্যাকেট) লিখতে হয়।  একটি ট্যাগের জন্য একের অধিক style Attribute দেওয়া যাবে। যা ; (কমা ) দ্বারা আলাদা করা হয়। এবং style Attribute গুলো লেখা শেষ হলে <style> ট্যাগ শেষ করতে হয়।

HTML head section এ  style element গুলো ব্যবহার করে Styles দেওয়ার মধ্যে একটি প্রধান শুবিধা হচ্ছে একটি ট্যাগের জন্য Attribute লিখলে তা সব ট্যাগেই কাজ করবে। উদাহরন হিসেবে বলা যেতে পারে যে, আমরা h1 ট্যাগের জন্য যদি HTML head section এ  style element  গুলো লিখি তা সকল h1 ট্যাগের জন্যই কাজ করবে। যদি h2 এর জন্য লিখি তা সব h2 ট্যাগের জন্য কাজ করবে। এভাবে সকল  ট্যাগের জন্যই কাজ করবে। উপরের উদাহরন লক্ষ্য করতে আপনারা তা সহজেই বুঝতে পারবেন।



আলাদা একটি style sheet ফাইলের মাধ্যমে স্টাইল দেওয়াঃ

আলাদা একটি  style sheet ফাইলের মাধ্যমে স্টাইল দেওয়ার জন্য আপনাকে আলাধা একটি CSS ফাইল তৈরি করতে হবে যা আপনার HTML ফাইলটি যে ফোল্ডারে রাখবেন যে ফোল্ডারে রাখতে হবে। অন্য ফোল্ডারে রাখলে ও সমস্যা হবে না, তবে সঠিক ভাবে লিঙ্ক তৈরি করে দিতে হবে। এখন HTML ফাইলটি যে ফোল্ডারে রাখবেন যে ফোল্ডারে রেখে প্র্যাকটিস করুন। style sheet এর যেকোন নাম দেওয়া যায় রবে এক্সটেনশন . CSS দিতে হবে।

তাহলে দেখি কিভাবে কি করবঃ

বড় করে দেখতে এখানে ক্লিক করুন।

প্রথমে CSS Code গুলো একটি নোট প্যডে পেস্ট করুন। test.css নামে বা যেকোন নামে সেভ করুন।

এবার HTML Code গুলো আরেকটি নোটপ্যাডে পেস্ট করে test.html বা যেকোন নাম দিয়ে সেভ করুন। এবার test.html টি ব্রাউজার দিয়ে খুলুন। তাহলে উপরের ফলাফলের মত আপনার ব্রাউজারে দেখতে পাবেন।

এএক্সটার্নাল CSS ফাইল দিয়ে স্টাইল দেওয়ার জন্য HTML ফাইলটির সাথে লিঙ্ক করে দিতে হয়। যা Head Section এ করতে হয়। কোড গুলো লক্ষ্য করুন।

<head>

<link rel="stylesheet"

type=”text/css” href=”test.css” />

</head>

উপরের কোড গুলো দিয়ে আমরা এএক্সটার্নাল CSS ফাইল এর সাথে আমাদের HTML ফাইলটিকে সংযুক্ত করে দিয়েছি। <link rel=”stylesheet” দ্বারা বুঝানো হচ্ছে যে HTML ফাইলটি একটি stylesheet ফাইলের সাথে যুক্ত। এবং নিচে type=”text/css” href=”test.css” /> কোড গুলো দিয়ে ফাইলের সোর্স দিখিয়ে দেওয়া হয়েছে। এবং ফাইলের টাইফ দিতে হয় text/css

CSS ফাইলের মধ্যে আমরা

body{background-color #B0E0E6;}


দিয়ে পুরো HTML ফাইলের বডি ব্যকগ্রাউন্ডের রঙ নির্দিষ্ট করে দিয়েছি। এখানে রঙের কোড ব্যবহার করছি তবে রঙের নাম ও ব্যবহার করা যাবে।

h1{font-size:25pt; color:blue;}


দিয়ে HTML ট্যাগ h1 এর সাইজ ও রঙ নির্দিষ্ট করে দিয়েছি। এখন যত গুলো h1 ট্যাগ আমরা ব্যবহার করব সব গুলোর সাইজ হবে 25pt এবং কালার বা রঙ হবে নীল। আগে যেখানে প্রত্যেক h1 ট্যাগ এর জন্য আলাধা আলাদা ভাবে কোড লিখতে হত এখন একটি এএক্সটার্নাল CSS ফাইলে লিখে সব গুলোতে সহজেই ব্যবহার করা যায়। একই ভাবে h2 ও p ট্যাগের জন্য ও CSS ফাইলটি ব্যবহৃত হয়েছে।আলাদা একটি  style sheet ফাইলের মাধ্যমে স্টাইল কোড গুলো একটি CSS ফাইল লিখে অনেক গুলো HTML ডকুমেন্টে ব্যবহার করা যায়। আর এটিই CSS আসল ব্যবহার। CSS সম্পর্কে পরবর্তিতে ইনশাহআল্লাহ বিস্তারিত আলোচনা করব।

ধন্যবাদ সবাইকে। সাথে অগ্রিম নববর্ষের শুভেচ্ছা।

পরবর্তী পর্ব গুলোঃ


এ সম্পর্কিত আরো কিছু টুইট:

HTML শিখুন HTML5 সহ [পর্ব-1] Intro to HTML
এক টুইটেই শিখুন পুরো সার্চ ইঞ্জিন অপটিমাইজেশন :)
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে ওয়ার্ডপ্রেস এর সকল চিহ্ন মুছে দিন...
রেসপনসিভ ওয়েব ডিজাইন কাকে বলে এবং কি ? / What is Responsive Web Design ?
আপনার ব্লগ এ যোগ করুন একটি FLOATING-হ্যালো বার | আপনার ওয়েবসাইট কে করে তুলুন আরও আকর্ষণীয় !!!
ব্লগার ব্লগে দারুন একটি পেজ লোডিং ইফেক্ট যোগ করুন।
দিক্ষক আইটি এই রমজানে ডোমেইন ও হোস্টিং এ দিচ্ছে ৮০% পর্যন্ত মূল্য ছাড়

মন্তব্য দিনঃ

comments

About the author

জাকির হোসাইন

প্রোগ্রামিং বা ফ্রীল্যান্সিং নিয়ে কোন প্রশ্ন থাকলে টেকটুইটস সাহায্য বিভাগে পোস্ট দিতে পারেন অথবা আমাকে ফেসবুকে মেসেজ দিতে পারেন।

Permanent link to this article: http://techtweets.com.bd/web-developing/jakirbdl/3379

19 comments

Skip to comment form

  1. foolish pritom

    ei tari oppekkhay chilam……. many many thanksssss :-> :-)

    1. ঐ ছেলেটি
      jakir

      আপনাকে ও ধন্যবাদ।

  2. আউয়াল

    পর্বটি যথা সময়ে দেওয়ার জন্য ধন্যবাদ।

    1. ঐ ছেলেটি
      jakir

      আপনাকে ও ধন্যবাদ।
      কাজ নিয়ে এখন কি খুব ব্যস্থ??

  3. আউয়াল

    বেশি ব্যস্ত না । কিন্তু আপনাকে তো অনলাইনে পাওয়া যায় না।

    1. ঐ ছেলেটি
      jakir

      আমি তো নিয়মিত অনলাইনে।

  4. ডিজিটাল জোন

    ?জাকির ভাই্ সুন্দর হচ্ছে আপনার HTML এর উপর টুইট গুলো। ও আরেকটা কথা ইনশাআল্লাহ আপনার জন্য একটি টুইটস আসছে Windows 7 to Windows 8….

    1. ঐ ছেলেটি
      jakir

      ধন্যবাদ আপনাকে।
      অপেক্ষায় রইলাম :)

    2. ডিজিটাল জোন

      জাকির ভাই লেখা মাঝে মাঝে পড়া যায় না। এলোমেলো থাকে, ঠিক করতে চেষ্টা করুন, ধন্যবাদ…

    3. ঐ ছেলেটি
      jakir

      কোথায় সমস্যা তা জানিয়ে একটা মেসেজ দিবেন।

    4. ডিজিটাল জোন

      আপনার এই টুইটের নিচের দিকে
      “ধন্যবাদ সবাইকে। সাথে অগ্রিম নববর্ষের শুভেচ্ছা।”
      উক্ত লাইনের আগের লেখাগুলো সমস্যা করছে…

  5. আউয়াল

    জাকির ভাই আপুনি উপরের তিনটা সিস্টমের মাঝে কোনটাকে বেশী ভালো ও সহজ মনে করন।

    1. ঐ ছেলেটি
      jakir

      ভালো হচ্ছে আলাদা একটি style sheet ফাইলের মাধ্যমে স্টাইল দেওয়া।
      সব গুলোই সহিজ।

  6. সায়েম

    font-family:times এটা কি Times new roman?

    1. ঐ ছেলেটি
      jakir

      হ্যা, আমি পুরো লিখতে ভুলে গেছি। এখানে আপনার পছন্দের ফন্ট দিতে পারবেন।

  7. MNUWORLD

    হুম জাকির ভাই…আপনি চালিয়ে যান…আমি শিখতেছি…….ধন্যবাদ

  8. dreamworker_101

    waiting for next episode

    1. ঐ ছেলেটি
      jakir

      ওকে, পরীক্ষাটা শেষ এর পরের দিনই দিবো ইনশাহ আল্লাহ।

  9. Masud

    sekhar janno try korse. thanks.

মন্তব্য করুন