সার্চ করুন | Search here

Our New site!!!

We have made a new site. You can visit the site.English Guided Writing Our new site - visit here

Ads | বিজ্ঞাপন

Saturday, March 30, 2019

সিএসএস এর পার্ট-১| ভূমিকা| সিএসএস এর বাংলা টিউটোরিয়াল









একটা ওয়েবসাইট তৈরী করতে হলে যে এইচটিএমএল লাগে সেটা আমরা জানি। এই এইচটিএমএল দিয়েই কিন্তু সাইটের সব করতে হবে যদি সেটা স্ট্যাটিক সাইট হয়।   একটা সাইটে বিভিন্ন পেজ থাকতে পারে। সেক্ষেত্রে এইচটিএমএল দিয়ে সব পেজ   ডিজাইন করা কেমন জানি কষ্টসাধ্য ও   বোরিং কাজ।  এই সমস্যা  সমাধানে  সিএসএস  আমাদের সাহায্য করতে তো আছেই। এর জন্য  দিয়ে প্রত্যেক পেজে আলাদা করে  ডিজাইন করা লাগে না।  

CSS. কোন আলাদা শব্দ না। এর পূর্ণ রূপ হল Cascading Style Sheet। এককথায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের জন্য CSS ব্যাবহার করা হয়।

১টি web page সুন্দর ও আকর্ষণীয় করার জন্য CSS এর প্রয়োজনীয়তা অনেক ।

 HTML ও CSS কে যদি কোন প্রানীর সাথে তুলনা করা হয় তাহলে প্রাণির কঙ্কাল হচ্ছে HTML ও CSS হচ্ছে তার বাহিরের রুপ।

 একটা সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হতো । সে সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর কালার, সাইজ, টেবিলের বিভিন্ন সেলের কালার, পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার এবং প্রয়োজনীয় ইমেজ সংযোজনকে বোঝানো হতো। এবং প্রতিটা পেজের প্রতিটা উপাদানের জন্যই আলাদা আলাদাভাবে কালার, সাইজ নির্ধারণ করতে হতো। যা ছিল একটা জটিল প্রক্রিয়া, এবং সময় সাপেক্ষ ব্যাপার ।




এটা একটা একঘেয়েমি ব্যাপার। CSS এই জটিল সমস্যা দূর করেছে এখন একটা ওয়েব সাইটে এক বা এর অধিক একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট ব্যবহার করে ডিজাইন সম্পূর্ণ করা হয়।  আর একটি কথা না বললেই নয় CSS শেখার আগে অবশ্যই HTML সম্বন্ধে ভাল জ্ঞান থাকতে হবে। HTML সম্বন্ধে ভাল জ্ঞান না থাকতে আমাদের আগের পোস্টের এইচটিএমএল টিউটোরিয়াল গুলো শিখে আসতে পারেন।

আপনারা এর পর কি বিষয়ক টিউটোরিয়াল চান? আপনার মতামত জানাতে কমেন্ট করুন বা কন্ট্রাক্ট ফর্মের দ্বারা যোগাযোগ করুন।

Sunday, March 24, 2019

সিএসএস এর পার্ট-০২| সিএসএস এর স্যানট্যাক্স | সিএসএস বাংলা টিউটোরিয়াল








সিএসএস এর স্যানট্যাক্স

সিএসএস এর ভূমিকা নিয়ে আমি আগের পার্টে আলোচনা করেছি। সেখানে আমি সিএসএস এর "অ আ ক খ " দেওয়ার চেষ্টা করেছি।
কিন্তু,
সিএসএস সম্পর্কে হয়ত আমরা এখনো ভালমত বুঝি নাই। মনে করেন আপনি h1 ট্যাগ আপনার সাইটে ব্যবহার করবেন।সেটা আপনি প্রায় ২০ জায়গায় ব্যাবহার করবেন।

সেক্ষেত্রে আপনি চাইলেন h1 ট্যাগের ফন্ট সাইজ হবে 10px ও এর কালার হবে কমলা(orange) । এই ফন্ট সাইজ ও কালার ২০ জায়গায় ব্যবহার করা কেমন কষ্টকর ব্যাপার। যদি এমন হয় যে, আপনি কোড লেখার আগে লিখে নিলেন যে, এই সাইটের যত h1 ট্যাগ থাকবে তার ফন্ট সাইজ হবে ১০ px ও এর কালার হবে কমলা। এর জন্য আপনাকে আর ২০ জায়গায় ফন্ট সাইজ ও কালার এট্রিবিউটস ব্যবহার করতে হল না। মানে আপনার কাজও কমে গেল।

এবার আসল কাজে আসেন-- এই যে কোড লেখার আগে লিখে নিলেন সাইটের সব h1 কোড এর কালার হবে কমলা ও ফন্ট সাইজ হবে ১০px. এইটাই হল সিএসএস।

আশা করি বুঝেছেন। সিএসএস এর গঠন এবার আমরা আলোচনা করি---
CSS এর নিয়ম গঠিত হয়েছে Selector ও Declaration Block দিয়ে।  নিচের চিত্রটি দেখলে বুঝবেন--

Selector অংশে "ট্যাগ সিলেক্টর" হিসেবে HTML ট্যাগ বা ক্লাস সিলেক্টর হিসেবে HTML ট্যাগ এর ক্লাস এর নাম অথবা আইডি সিলেক্টর হিসেবে HTML ট্যাগ এর আইডি এর নাম বসে।
প্রতিটা Declaration এর একটি property এবং একটি value থাকে।
অর্থাৎ আপনারা এর বুঝেন নাই কিছুই--
এই উদাহরণটা দেখুন--

<head>  <style>  h1{    color:orange;    font-size:10px;  }  </style> </head>
এখানে HTML এর h1 ট্যাগ এর রং কমলা এবং ফন্ট আকার 10px দেয়া হয়েছে। সুতরাং HTML web page এর সকল h1 এর রং কমলা এবং ফন্ট আকার 10px হবে।
আশা করি এই পার্ট বুঝেছেন।
কোন সমস্যা হলে প্লিজ কমেন্ট করে জানাবেন। ধন্যবাদ 

সিএসএস এর পার্ট-০৩ | কোড লেখার পদ্ধতি | সিএসএস বাংলা টিউটোরিয়াল















আমরা আগের পোস্টে সিএসএস এর সিলেক্টর সম্পর্কে জেনেছিলাম।সেখান বলা হয়েছিল সিলেক্টর চার ধরণের হতে পারে।এগুলো দ্বারা নির্দিষ্ট ট্যাগ সিলেক্ট করা যায়। তো সিলেক্টর জানার পর আমাদের জানা উচিৎ কিভাবে ট্যাগ লিখতে হয়। যদিও আগের টিউটোরিয়াল এ এসম্পর্কে একটু ধারণা দেওয়া হয়েছিল।
এখন বিস্তারিতভাবে দেওয়া হল।

আসলে এইচটিএমএল এর সাথে সিএসএস যুক্ত করার বিষয়টি খুবই গুরুত্বপূর্ণ। এইচটিএমএল এর সাথে সিএসএস যুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে।

i) ইন্টারনাল স্টাইল শীট
ii) ইন-লাইন স্টাইল শীট
iii) এক্সটার্নাল স্টাইল শীট




ইন্টারনাল স্টাইল শীট:-

ইন্টারনাল স্টাইল শীট পদ্ধতি হচ্ছে HTML কোড এর <head></head> ট্যাগ এর মধ্যে <style></style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং <style></style> এর মধ্যেই CSS এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ রাখা হয়।
এইভাবে এই ট্যাগ দেওয়া হয়ে থাকে।

<head>
<style>
 h1 {
     color: red;
     margin-left: 28px;
 }
 </style>
</head>


এখানে সিএসএস কোড এইচটিএমএল এর head ট্যাগ এর ভিতর লেখা হয়েছে। যা HTML এর সকল h1 ট্যাগ জন্য প্রযোজ্য হবে।

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
h1 {
    color: red ;
    margin-left: 28px;
}
</style>
</head>
<body>


 <h1>এই লেখা সিএসএস এর স্টাইল অনুসারে রান হবে।</h1>
 <h2>এটা সিএসএস এর স্টাইল অনুসারে রান হবে না। কারণ আমরা স্টাইল ট্যাগে h2 এর জন্য কিছু লেখি নাই।</h2>

</body>
</html>



ইন-লাইন স্টাইল শীট:--


ইন-লাইন স্টাইল শীট পদ্ধতিতে এইচটিএমএল এর প্রতিটা ট্যাগের এট্রিবিউটস হিসেবে style এট্রিবিউটস যুক্ত করে এর মধ্যে সিএসএস এর জন্য প্রয়োজনীয় Declaration সমূহ যুক্ত করা হয়।
এইটা নিচের পদ্ধতিতে যোগ করতে হয়।


<h1 style="color:red;margin-left:10px;">
আমি বাংলায় গান গাই।
</h1>

অর্থাৎ প্রতিটা HTML ট্যাগ এর জন্য আলাদা আলাদা ভাবে CSS কোড লিখতে হবে। h1 ট্যাগ এর জন্য লেখা CSS এর কোড অন্য h1 ট্যাগ এ কাজ করবে না।
আমার মতে এই ভাবে লেখা অনেক কষ্টসাধ্য ও সময়সাপেক্ষ।
উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

</head>
<body>

 <h1 style="color:red;margin-left:10px;"> এই লেখা স্টাইল অনুসারে রান হবে। </h1>
 <h1> কিন্তু এটা হবে না। .</h1>

</body>
</html>




এক্সটার্নাল স্টাইল শীট:---


এক্সটার্নাল স্টাইল শীট পদ্ধতিতে সিএসএস জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে নিজের ইচ্ছামত নামে সেভ করা যায় তবে এর ডিক্লেয়ারেশন হবে .css. আপনি এটি নোটপ্যাড ++ দ্বারা এটি করতে পারেন।

এরপর <head></head> এর মধ্যে <link rel="stylesheet" type="text/css" href="আপনার স্টাইলশীটের লিংক এখানে দেবেন"> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে HTML এর লিংক তৈরি করা হয়। যা নিচে দেখানো হল।

<head>
 <link rel="stylesheet" type="text/css" href="abcd.css">
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="./My Device/rupu/rupu.css">
</head>
<body>

<h1> লিংকের দেওয়া স্টাইল অনুসারে এটি দেখাবে </h1>
<p>লিংকের দেওয়া স্টাইল অনুসারে এটি দেখাবে</p>

</body>
</html>





শেষ কথা:-

এই টিউটোরিয়াল এ এই পর্যন্তই। আশা করি এইটুকু বুঝেছেন।

কোন সমস্যা হলে মন্তব্য করতে ভুলবেন না।

ধন্যবাদ।

আমাদের পোস্ট শেয়ার করুন।

সিএসএস এর পার্ট-০৪| সিএসএস এর সিলেক্টর | সিএসএস বাংলা টিউটোরিয়াল



সিএসএস এর পার্ট-০৩|সিএসএস এর সিলেক্টর | সিএসএস বাংলা টিউটোরিয়াল






CSS এর মাধ্যমে এইচটিএমএল দ্বারা তৈরি করা ওয়েব পেজের এর বিভিন্ন অংশকে নির্দিষ্ট করে গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণ করা হয়।

HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে সিলেক্ট করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর ব্যবহার করা হয় ।
এ গুলোর মধ্যে উল্লেখযোগ্য সিলেক্টর হল--
i) ট্যাগ সিলেক্টর
ii) ক্লাস সিলেক্টর
iii) আইডি সিলেক্টর



ট্যাগ সিলেক্টর:--




 ট্যাগ সিলেক্টর হল সেই সকল এইচটিএমএল ট্যাগ যা দ্বারা ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করে ডিজাইন করার জন্য ব্যবহৃত করা হয়ে থাকে।

যেমন---


<style>

 p{  background:blue;  font-family: Tahoma;  color: red;  }


</style>


উপরে বর্ণিত code এ HTML ট্যাগ body এর design করা হয়েছে। অর্থাৎ, web page টির body background color হবে blue , font হবে Tahoma এবং text color হবে লাল রঙের।

উদাহরণ --





<!DOCTYPE html>
<html>
<head>
 <style>
 p{
 background: blue ;
 font-family: Tahoma;
 color: red;
 }
 </style>
</head>
<body>
<p> এখানে সকল কিছু p ট্যাগের জন্য দেওয়া হয়েছে।
 <h3>Font এর রং red এবং Font family Tahoma.</h3>
</body>
</html>


ক্লাস সিলেক্টর:---



ক্লাস সিলেক্টর দ্বারা ওয়েবপেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে সিলেক্ট করার একটি জনপ্রিয় পদ্ধতি।

একই ক্লাস সিলেক্টর দ্বারা একাধিক উপাদানকে সিলেক্ট করা যায়, তাই এটি কোডিং এর পরিমাণ কমাতে প্রচুর সাহায্য করে।

<style>
 .rayhan{color: blue;
     font-size:10px
 }
</style>

ক্লাস সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে class কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p class="rayhan">। এখানে rayhan হল ক্লাসের নাম। স্টাইল সিটে ক্লাসকে চিহ্নিত করতে (.) ডট চিহ্ন ব্যবহার করা হয় যা উপরের Code এ দেখানো হয়েছে। এর দ্বারা আপনি সিএসএস এ যে ডিজাইন দেবেন সেটা রান হবে। যেমন- আমি উপরে rayhan ক্লাসে লিখেছি এর কালার হবে নীল ও এর ফন্ট সাইজ হবে ১০px.

Example:

<!DOCTYPE html>
<html>
<head>

 <style>
 .rayhan{
     color: blue ;
     font-size:10px
 }
 </style>
</head>
<body>
 <p class="rayhan">Font এর রং blue বর্ণের এবং Font আকার 10px.<p>
</body>
</html>


আইডি সিলেক্টর---


এটা ক্লাস সিলেক্টরের মতই। এটির দ্বারা web page এর কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করা যায়।। কিন্তু এর দ্বারা একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না।
নিচের উদাহরণ দেখলেই বুঝবেন।
<head>
<style>
 #rupu{
 color: green;
 font-family:Tahoma;
 text-align:center;
 }
</style>
</head>


আইডি সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে id কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p id="rupu">। এখানে rupu আইডির নাম। স্টাইল শীটে আইডিকে চিহ্নিত করতে (#) চিহ্ন ব্যবহার করা হয় যা উপরের Code এ দেখানো হয়েছে।

 এর ফলে আপনি যে সকল ডিজাইন করলেন সেটা সেই এইচটিএমএল ট্যাগে রান হবে।

উদাহরণ --


<!DOCTYPE html>
<html>
<head>

 <style>
  #rupu{
  color: green;
  font-family:Tahoma;
  text-align:justify;
 }
 </style>
</head>
<body>
 <p id="rupu">Font এর রং সবুজ বর্ণের এবং Font family Tahoma.<p>
</body>
</html>

গ্রুপিং সিলেক্টর:----



একজন ভাল প্রোগ্রামারের অন্যতম বৈশিষ্ট্য হচ্ছে, তিনি যতোটা সম্ভব কোডকে সক্ষিপ্ত করবেন।
গ্রুপিং সিলেক্টর ব্যবহার করে CSS এর কোডকে অনেকাংশে কমানো সম্ভব হয়।
 অনেক সময় বেশ কিছু HTML উপাদানের জন্য একই ধরণের স্ট্যাইল ব্যবহার করার প্রয়োজন হয়। যেমন h1,h2,p ইত্যাদির জন্য একই color, font-family, text-align ইত্যাদি প্রোপার্টি ব্যবহারের প্রয়োজন হলে সবগুলোর জন্য আলাদা আলাদা ভাবে স্ট্যাইল না করে, একই সাথে সিলেক্টর সমূহকে কমা দিয়ে লিখে স্ট্যাইল নির্ধারণ করলে কোড অনেক কম হবে।
<head>
<style>
p,div,h4,h1{
    text-align: center;
    color: red;
}
</style>
</head>

এখানে p,div,h4 ও h1 ট্যাগ এ একই style এর জন্য আমরা এভাবে গ্রুপ করে লিখেছি।

<!DOCTYPE html>
<html>
<head>

<style>
div,p,h1,h2{
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1>ABCDEFGH</h1>
<h2>অ আ ক খ গ ঘ </h2>
<p>অ আ ক খ গ ঘ </p>
<p>স্টাইল ছাড়া প্যারাগ্রাফ </p>

</body>
</html>


নেস্টিং সিলেক্টর:--


CSS এ একটি সিলেক্টরের অন্তর্ভূক্ত অপর একটি সিলেক্টরের জন্য স্ট্যাইল নির্ধারণ করার ক্ষেত্রে নেস্টিং সিলেক্টর ব্যবহার করা হয়।
ধরা যাক স্ট্যাইল শীটে p এর জন্য স্ট্যাইল নির্ধারণ করা হল। par নামের id বিশিষ্ট একটা div উপাদানের মধ্যে অপর একটা প্যারাগ্রাফ আছে। par এর জন্যও স্ট্যাইল নির্ধারণ করা হল। এখন যদি par মধ্যে অবস্থিত প্যারাগ্রাফটির জন্য অলাদা স্ট্যাইল তৈরি করার প্রয়োজন হয় তাহলে নেস্টিং সিলেক্টর ব্যবহার করতে হয়। এজন্য সিলেক্টরে লিখতে হবে par p ।

Example:


<!DOCTYPE html>
<html>
<head>
 <style>
 #par{
 background:blue;
 padding:15px;
 }
 #par p{
 color:red;
 }
</style>
</head>
<body>
<div id="par">
 এইটা par style অনুযায়ী হবে।
<p> এইটা par এবং par p দুইটা style অনুযায়ী হবে।</p>
</div>
</body>
</html>

আশা করি বুঝেছেন।



না বুঝলে অবশ্যই কমেন্ট করে জানাবেন।
ধন্যবাদ।

সিএসএস এর পার্ট - ৫ | সিএসএস বক্স মডেল | সিএসএস বাংলা টিউটোরিয়াল



বক্স মডেল


সকল HTML উপাদানকে CSS দ্বারা স্ট্যাইল যুক্ত করার ক্ষেত্রে বক্স হিসেবে বিবেচনা করা হয়। ওয়েব পেজের লে আউট ডিজাইনের ক্ষেত্রে বক্স মডেল খুবই গুরুত্বপূর্ণ। CSS বক্স মডেল প্রকৃত পক্ষে একটা বক্স যা, কোন HTML উপাদানকে আবৃত করে রাখে।
বক্স মডেল তৈরি করার জন্য Declaration এ কয়েকটি প্রপার্টি নির্ধারণ করে দিতে হয়।
এগুলো হচ্ছে,

i) বক্সের প্রস্থ
ii) বর্ডার
iii) পেডিং
iv) মার্জিন


উদাহরণ :-
<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন

Saturday, March 23, 2019

সিএসএস এর পার্ট -০৬ | সিএসএস এর ব্যাকগ্রাউন্ড কালার | সিএসএস বাংলা টিউটোরিয়াল







Web page এর বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাকগ্রাউন্ড একটি অপরিহার্য উপাদান। এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়।

<head>
<style>
body {
    background: lightblue;
}
</style>
</head>

এখানে web page এর ব্যাকগ্রাউন্ড হিসেবে lightblue রং ব্যাবহার করা হয়েছে। আপনি চাইলে সেখানে color code ব্যাবহার করতে পারেন। যেমনঃ lightblue এর স্থলে #2EFEF7 (color code) ব্যাবহার করতে পারেন।

উদাহরণ :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: lightblue;
}
</style>
</head>
<body>

<h1>Background color is light blue.</h1>

</body>
</html>




বি:দ্র: আপনি এইচটিএমএল সিএসএস জাভা স্ক্রিপ্ট আমাদের সাইটে বসানো ইডিটর দিয়ে রান করাতে পারেন। এর জন্য আপনি হোমের ড্রপডাউন মেনু হতে Real Time HTML,CSS,JS Editor


সিএসএস এর পার্ট -০৭ | সিএসএস বর্ডার | সিএসএস বাংলা টিউটোরিয়াল





বর্ডার



বর্ডার ওয়েব পেজের একটি গুরুত্বপূর্ণ উপাদান। HTML এবং CSS ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন উপাদানের জন্য সঠিক রং এবং আকৃতির বর্ডার তৈরি করার উপর ডিজাইনের মাধুর্য অনেকাংশে নির্ভর করে। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার তৈরি করা যায়।
বিভিন্ন ধরণের বর্ডার তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,

i) বর্ডার স্টাইল
ii) বর্ডার ওয়াইডথ
iii) বর্ডার কালার
iv) পৃথক বর্ডার


বর্ডার স্টাইল



বর্ডার স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে। বর্ডার স্ট্যাইল তৈরির জন্য Declaration করতে হবে, border-style:solid এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়।


<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>


ডটেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে border-style:dotted ;
ড্যাসেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dashed;
ডাবল স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:double;
গ্রোভ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:groove;
রিডজ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:ridge;
ইনসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:inset;
আউটসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:outset;

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
 <style>
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.none {border-style: none;}
 p.hidden {border-style: hidden;}
 p.mix {border-style: dotted dashed solid double;}
 </style>
</head>
<body>

 <p class="dotted">A dotted border.</p>
 <p class="dashed">A dashed border.</p>
 <p class="solid">A solid border.</p>
 <p class="double">A double border.</p>
 <p class="groove">A groove border.</p>
 <p class="ridge">A ridge border.</p>
 <p class="inset">An inset border.</p>
 <p class="outset">An outset border.</p>
 <p class="none">No border.</p>
 <p class="hidden">A hidden border.</p>
 <p class="mix">A mixed border.</p>

</body>
</html>






বর্ডার ওয়াইডথ



বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে। বর্ডার ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, border-width:5px; এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়।


<head>
<style>
p.one {
    border-style: solid;
    border-width: thin;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>



বর্ডার কালার



বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে। বর্ডার কালার নির্ধারণের জন্য Declaration করতে হবে, border-color:red; এর অনুরূপ। CSS ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়।


<head>
<style>
p.one {
    border-style: solid;
    border-color: yellow;
}


p.two {
    border-style: solid;
    border-color: red green blue yellow;
}
</style>
</head>


হলুদ রঙের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:yellow;
rgb পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে border-color:rgb(0,255,0);
hex পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#0000FF;
বর্ডার কালার ট্রান্সপারেন্ট হতে পারে, ট্রান্সপারেন্ট বর্ডার তৈরির জন্য Declaration করতে হবে,border-color:transparent; ।

কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের রঙের হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:red blue green yellow; এখানে ১ম red নির্দেশ করে top border color ; ২য় blue নির্দেশ করে right border color; ৩য় green নির্দেশ করে down border color; ৪র্থ yellow নির্দেশ করে left border color ;


পৃথক বর্ডার


কোন HTML উপাদানের চারপাশের বর্ডার এর স্টাইল, ওয়াইডথ এবং কালার এ সবই ভিন্ন হতে পারে।


<head>
<style>
p {
    border-top: dotted 8px RED;
    border-right: dashed 6px BLUE;
    border-bottom: double 6px GREEN;
    border-left: solid 5px YELLOW;
}
</style>
</head>



এ এধরণের বর্ডার তৈরির ক্ষেত্রে উপরের দিকের বর্ডারের জন্য Declaration করতে হবে,border-top: dotted 8px RED;
ডান দিকের বর্ডারের জন্য Declaration করতে হবে, border-right: dashed 6px BLUE;
নিচের দিকের বর্ডারের জন্য Declaration করতে হবে, border-bottom: double 6px GREEN;
বাম দিকের বর্ডারের জন্য Declaration করতে হবে,border-left: solid 5px YELLOW;

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-top: dotted 8px RED;
    border-right: dashed 6px BLUE;
    border-bottom: double 6px GREEN;
    border-left: solid 5px YELLOW;
}
</style>
</head>
<body>

<p>4 different border styles.</p>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন









সিএসএস এর পার্ট - ০৮| সিএসএস এর মার্জিন | সিএসএস বাংলা টিউটোরিয়াল









মার্জিন



বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়। এজন্য CSS এ margin Property ব্যবহার করা হয়।
সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান মার্জিন তৈরি করার জন্য Declaration করতে হয় margin:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।


<head>
<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>


যদি উপরের দিকে মার্জিন দিতে হয় তাহলে Declaration করতে হবে margin-top:20px;
নিচের দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-bottom:25px;
বাম দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-left:30px;
ডান দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-right:35px;

চারদিকের মার্জিন একইসাথে Declaration করা যায় যেমন margin:20px 25px 30px 35px; এখানে 20px উপরের দিকের মার্জিন নির্দেশ করে, 25px ডান দিকের মার্জিন নির্দেশ করে, 30px নিচের দিকের মার্জিন নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
</style>
</head>
<body>

<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন


সিএসএস এর পার্ট -৯ | সিএসএস এর প্যাডিং | সিএসএস বাংলা টিউটোরিয়াল







প্যাডিং



বিভিন্ন HTML উপাদানের যদি বর্ডার থাকে, তাহলে বর্ডার থেকে কনটেন্ট এর চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য প্যাডিং ব্যবহার করা হয।
প্যাডিং মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান প্যাডিং তৈরি করার জন্য Declaration করতে হয় padding:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।



<head>
<style>
.pad {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>


যদি উপরের দিকে প্যাডিং দিতে হয় তাহলে Declaration করতে হবে padding-top:50px;
নিচের দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-bottom:50px;
বাম দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-left:80px;
ডান দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-right:30px;।

চারদিকের প্যাডিং একইসাথে Declaration করা যায় যেমন padding:50px 30px 50px 80px; এখানে 50px উপরের দিকের প্যাডিং নির্দেশ করে, 30px ডান দিকের প্যাডিং নির্দেশ করে, 50px নিচের দিকের প্যাডিং নির্দেশ করে, 80px বাম দিকের মার্জিন নির্দেশ করে।

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
.pad {
    border: 1px solid red;
    background-color: yellow;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>
</head>
<body>

<p class="pad">This paragraph has a top and bottom padding of 50px, a left padding of 80px, and a right padding of 30px.</p>

</body>
</html>



আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন



সিএসএস এর পার্ট-১০ | সিএসএস এর টেক্সট | সিএসএস বাংলা টিউটোরিয়াল








টেক্সট



ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য CSS এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়।
এগুলো হচ্ছে
i) টেক্সট কালার
ii) টেক্সট এলাইনমেন্ট
iii) টেক্সট ডেকরেশন
iv) টেক্সট ট্রান্সফরমেশন




টেক্সট কালার


আমরা সাধারণত HTML এর মাধ্যমে টেক্সট ব্যবহারের জন্য <p>, <h1>, <h2>, <a> সহ আরো কিছু ট্যাগ ব্যবহার করি। এসকল টেক্সট এর কালার নির্ধারণের জন্য Declaration করতে হবে p { color: #FC9 } বা এর অনুরূপ। p এর স্থানে অন্যান্য ট্যাগের ক্ষেত্রে h1, h2 , a, body, অথবা কোন ট্যাগের id বা class বসতে পারে।


<head>
<style>
h1 {
    color: blue;
}
p {
    color: red;
}
</style>
</head>


উদাহরণ :--

<!DOCTYPE html>

<html>
<head>

 <style>
 h1 {
     color: blue;
 }
 p {
     color: red;
 }
 </style>
</head>
<body>
 <h1>This is h1</h1>
 <p>This is paragraph</p>
</body>
</html>




টেক্সট এলাইনমেন্ট


Web page এর টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়।

<head>
<style>
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
</style>
</head>


টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left;
অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right;
মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center;
যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declaration করতে হবে text-align:justify;


উদাহরণ :--


<!DOCTYPE html>
<html>
<head>


 <style>
 h1 {
     text-align: center;
 }

 h2 {
     text-align: left;
 }

 h3 {
     text-align: right;
 }
 </style>
</head>
<body>

 <h1>Heading 1 (center)</h1>
 <h2>Heading 2 (left)</h2>
 <h3>Heading 3 (right)</h3>

</body>
</html>



টেক্সট ডেকরেশন


কোন টেক্সট এর সাথে HTML এর <a> ট্যাগের মাধ্যমে লিংক যুক্ত করলে টেক্সটটির নিচে স্ট্রেট লাইন আসে। উক্ত স্ট্রেট লাইন স্থানান্তরিত করার জন্য, টেক্সট ডেকরেশন ব্যবহার করা হয়।


<head>
<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>
</head>


স্ট্রেট লাইনকে টেক্সট এর উপরে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:overline;
স্ট্রেট লাইনকে টেক্সট এর মধ্যস্থানে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:line-through;
স্ট্রেট লাইনকে টেক্সট এর নিচে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:underline;
টেক্সট কে পর্যয়ক্রমিকভাবে দৃশ্যমান এবং অদৃশ্য করার জন্য Declaration করতে হবে text-decoration:blink;
স্ট্রেট লাইনকে সম্পূর্ণরূপে দূর করার জন্য Declaration করতে হবে text-decoration:none; ।

<!DOCTYPE html>
<html>
<head>


<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>


টেক্সট ট্রান্সফরমেশন


টেক্সট অন্তর্ভূক্ত অক্ষর সমূহকে বড় হাতের বা ছোট হাতের অক্ষরে অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য টেক্সট ট্রান্সফরমেশন ব্যবহার করা হয়।


<head>
<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>


টেক্সট এর অন্তর্ভূক্ত সকল অক্ষরকে বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:uppercase;
ছোট হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:lowercase;
প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:capitalize; । 

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This text is uppercase.</p>
<p class="lowercase">This text is lowercase.</p>
<p class="capitalize">This text is capitalize.</p>

</body>
</html>





আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন


সিএসএস এর পার্ট-১১ | সিএসএস এর ফন্ট স্টাইল | সিএসএস বাংলা টিউটোরিয়াল








 একটা ওয়েব সাইটের প্রধান উদ্দেশ্য হচ্ছে ব্যবহারকারীকে প্রয়োজনীয় তথ্য সেবা প্রদান করা। কোন ওয়েব সাইটে তথ্য প্রদর্শনের ক্ষেত্রে প্রধান ভূমিকা পালন করে টেক্সট । সাইটে কোথায় কি ধরণের টেক্সট ব্যবহার করা হবে, আকার আকৃতি কেমন হবে এ সকল কিছুই নিয়ন্ত্রিত হয় CSS এর ফন্ট এর মাধ্যমে। টেক্সট এর ফন্ট স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়।
এগুলো হচ্ছে:-

i) ফন্ট ফ্যামিলি
ii) ফন্ট সাইজ
iii) ফন্ট ভেরিয়েন্ট
iv) ফন্ট ওয়েট


ফন্ট ফ্যামিলি


টেক্সট সমূহে কি ধরণের ফন্ট ব্যবহার করা হবে, তা নির্দেশ করার জন্য ফন্ট ফ্যামিলি ব্যবহার করা হয়।


<head>
<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}
</style>
</head>


টেক্সট সমূহের জন্য Arial ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial;
অনুরূপভাবে Tahoma ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Tahoma;


অনেক সময় টেক্সট সমূহের জন্য একটির পরিপূরক হিসেবে একাধিক ফন্ট Declaration এ উল্লেখ করা হয় যেমনঃ font-family: "Times New Roman", Times, serif;
যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।

উদাহরণ :--:

<!DOCTYPE html>
<html>
<head>

<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

</body>
</html>




ফন্ট সাইজ


টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ কেমন হবে, তা নির্দেশ করার জন্য ফন্ট সাইজ ব্যবহার করা হয়।


<head>
<style>
h2 {
    font-size: 30px;
}

p {
    font-size:medium;
}
</style>
</head>


টেক্সট সমূহের জন্য 25px এর ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:25px;
অনুরূপভাবে 20px ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:20px;।

টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ পিক্সেলে বা px এ না দিয়ে শতকরা হিসেবেও দেযা যেতে পারে, এক্ষেত্রে Declaration করতে হবে font-size:100% এর অনুরূপ।
টেক্সট সমূহের ফন্ট সাইজ Declaration এর আরো বেশ কিছু পদ্ধতি আছে যেমন font-size:larger; 
font-size:medium; font-size:small; font-size:smaller; font-size:xx-large;
font-size:large; font-size:x-large; font-size:x-small; font-size:xx-small; ইত্যাদি।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
h2 {
    font-size: 30px;
}

p {
    font-size:medium;
}
</style>
</head>
<body>

<h2>This is heading 2 font size 30px</h2>
<p>This is a paragraph font size 14px.</p>

</body>
</html>


ফন্ট ভেরিয়েন্ট



যদি কোন ওয়েব পেজে বিশেষ কোন শিরোনাম এমনভাবে প্রদর্শনের প্রয়োজন পড়ে, যেখানে স্বাভাবিকভাবে লেখা টেক্সট সমূহের সবগুলো অক্ষর বড় হাতের হবে কিন্তু যেস্থানে ছোট হাতের অক্ষর হওয়ার কথা সেই স্থানের বড় হাতের অক্ষরগুলোর ফন্ট সাইজ তুলনামূলক স্বাভাবিক ফন্ট সাইজের চেয়ে ছোট হবে, এক্ষেত্রে ফন্ট ভেরিয়েন্ট ব্যবহার করা হয়।


<head>
<style>
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
</style>
</head>


এখানে "My name is Hege Refsnes." লেখাটির ভারিয়েন্ট স্টাইল তৈরির জন্য Declaration করতে হবে font-variant: small-caps; ।


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>



ফন্ট ওয়েট


কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য ফন্ট ওয়েট ব্যবহার করা হয়।


<head>
<style>
p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>
</head>


বোল্ড টেক্সট তৈরির জন্য Declaration করতে হবে font-weight:bold;
টেক্সট সমূহ কতটা মোটা হবে তা নির্ধারণের জন্য সংখ্যা ব্যবহার করা যেতে পারে, যেমন font-weight:900;
এছাড়া ফন্ট ওয়েট স্টাইল হিসেবে font-weight:lighter; এবং font-weight:bolder; ব্যবহার করা হয়।

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

<style>
p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>



আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন