Feb 08

সি এস এস ফন্ট (CSS Font)

এইচটিএমএল এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে সিএসএস ফন্ট গুরত্বপূর্ল। এজন্য বেশ কিছু সিএসএস প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত। নিচের সেগুলির উদাহরনসহ আলোচনা করা হলঃ

Serif এবং Sans-Serif ফন্ট এর মধ্যে পার্থক্য

Serif এবং Sans-Serif ফন্ট এর মধ্যে পার্থক্য

ফন্ট পরিবার (Font Family)

font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়। একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। এক্ষেত্রে ব্রাউজার আগে প্রথমটি খুজবে যদি সিস্টেমে না পায় (অর্থ্যাৎ আপনার পিসিতে ফন্টটি ইনস্টল না থাকে) তখন পরেরটি দেখবে এভাবে..। যদি একটি না পায় তখন প্রথম ফন্টটি যে পরিবারের সদস্য সেই পরিবারের একটা ফন্ট প্রয়োগ করবে।

font-family: Verdana, SolaimanLipi;

font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সট এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমনঃ
font-size:18px;
বা,
font-size: 2em;

(কত em এ কত পিক্সেল এগুলি গুগলে সার্চ দিলে হাজারটা সমাধান পাবেন)

font-weight দিয়ে ফন্টটি দেখতে কত গাঢ় হবে সেটা ঠিক করা যায়। এর মান হতে পারে “normal”, “bold”, “bolder”, “lighter”, “inherit” এবং 100, 200, 300 …900। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়। মানগুলি দেখেই বোঝা যায় কোনটা দিলে টেক্সট দেখতে কেমন হবে।

font-weight: bold;

font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়ঃ

  1. font-style:italic;
  2. font-style : oblique;
  3. font-style : normal;
  4. font-style: inherit;

Feb 08

সি এস এস ট্যাক্সট (CSS Text)

 

text formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the “Try it yourself” link.

 

লেখা ফরম্যাটিং

ওয়েব সাইট তো কত গুলো টেক্সট আর ইমেজের সমষ্টি তাই না? লেখা গুলোকে যে যত সুন্দর করে দেখাতে পারে তার ওয়েব সাইট তত সুন্দর হয়। css আমাদের সাইটকে ভিজিটরদের কাছে সুন্দর ভাবে উপস্থাপন করতে পারে। আজ দেখব টেক্সটের যত বৈশিষ্ট / স্টাইল রয়েছে, শিরোনাম টেক্সট প্রান্তিককরণ, টেক্সট রুপান্তর, এবং রঙ বৈশিষ্ট্য ব্যবহার করে। অনুচ্ছেদের প্রান্তিককৃত, সংভৃত এবং অক্ষরের মধ্যে স্থান উল্লেখ করা হয়ে থাকে। নিম্নরেখা “এটা নিজে চেষ্টা করেন” এবং লিঙ্ক থেকে লেখা মুছে ফেলা হবে।

 

লেখার রঙ

লেখার রঙ দেওয়ার জন্য টেক্সট রঙ ব্যবহৃত হয়।

সিএসএস এর সঙ্গে, কিছু রঙ প্রায়শই উল্লেখ করা হয়:

  • একটি HEX মান: “# ff0000”
  • একটি RGB মান : “RGB (255,0,0)”
  • একটি রঙ নাম –  যেমন-“লাল”

একটি পাতার জন্য ডিফল্ট রং body সেকশন এর মধ্যে সংজ্ঞায়িত করা হয়।

body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}

 

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

লেখাগুলোর বিন্যাস/ align কিভাবে হবে, ডানে নাকি বামে নাকি মধ্য খানে তাই সেট করা হয়। তিন ধরনের align করা যায়, center, left, right. সাধারন ভাবে সকল লেখা গুলো left align করা থাকে। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

 

টেক্সট অলংকরণ

আমরা ইংরেজী এবং বাংলা লিখি বাম থেকে ডানে, কোন কোন দেশের লেখা যেমন আরবী ডান থেকে বামে লিখতে হয়। এই ডান থেকে বামে হবে নাকি বাম থেকে ডান হবে তাই direction সিএসএস রুল দিয়ে সেট করা হয়। ডিফল্ট ভাবে সেট করা থাকে left-to-right. যেভাবে আমরা লিখি। আপনি যদি ডান থেকে বামে লেখে এমন কোন দেশের ওয়েব সাইট তৈরি করেন তাহলে আপনাকে right-to-left সেট করে দিতে হবে।

টেক্সট থেকে আনডারলাইন উঠিয়ে দিতে ব্যবহার করা হয়ঃ

a {
    text-decoration: none;
}

এটিও টেক্সট ডেকোরেশন করার জন্য ব্যবহার করা যেতে পারে।

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

 

টেক্সট রূপান্তর

text-transform ছোট অক্ষরে বা বড় অক্ষরে লেখাগুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়। তিন প্রকার text-transform রয়েছে।

Uppercase – সকল লেখাকে বড় হাতের অক্ষরে পরিনত করবে।
Lowercase – সকল লেখাকে ছোট হাতের অক্ষরে পরিনত করবে।
Capitalize – লেখার সকল শব্দের প্রথব বর্ণ বড় হাতের হবে।

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

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

 

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

পত্রিকায় আমরা প্রায় সময়ই দেখি প্রথম লাইনের শব্দটির আগে একটু গ্যাফ থাকে। এইচটিএমএল ফাইলে ঐরকম গ্যাফটা দেওয়া হয় text-indent দিয়ে। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুন।

p {
text-indent: 50px;
}

 

সকল সিএসএস টেক্সট প্রোপার্টি।

পোপার্টি বর্ণনা
color লেখার রঙ নির্ধারন করার জন্য ব্যবহৃত হয়।
direction আমরা ইংরেজী এবং বাংলা লিখি বাম থেকে ডানে, কোন কোন দেশের লেখা যেমন আরবী ডান থেকে বামে লিখতে হয়। এই ডান থেকে বামে হবে নাকি বাম থেকে ডান হবে তাই direction সিএসএস রুল দিয়ে সেট করা হয়।
letter-spacing একটা বর্ণ থেকে আরেকটা বর্ণের দূরত্ব সেট করার জন্য এ property ব্যবহৃত হয়।
line-height একটা লাইনের উচ্চতা কতটুকু হবে তা এটি দিয়ে নির্ধারন করা হয়।
text-align লেখা গুলোর বিন্যাস / align কিভাবে হবে, ডানে নাকি বামে নাকি মধ্য খানে তাই সেট করা হয়।
text-decoration একটা লেখার নিচে বা উপরে বা মাঝখান দিয়ে একটা লাইন দেওয়ার জন্য ব্যহৃত হয়।
text-indent পত্রিকায় আমরা প্রায় সময়ই দেখি প্রথম লাইনের শব্দটির আগে একটু গ্যাফ থাকে। এইচটিএমএল ফাইলে ঐরকম গ্যাফটা দেওয়া হয় text-indent দিয়ে।
text-transform ছোট অক্ষরের বা বড় অক্ষরের লেখা গুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়।
word-spacing লেখার প্রতিটি শব্দের মধ্যে ফাঁক দেওয়ার কাছে ব্যহৃত হয়।

 

এগুলো ছাড়াও আরো কিছু Property রয়েছে।

 

নিজে নিজে চেষ্টা করো

অনুশীলন ০১ঃ

পেজটির টেক্সট এর রঙ লাল এবং <h1> এর টেক্সট এর রঙ নীল নির্ধারণ করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০২ঃ

<h1> এর এলাইনমেন্ট সেন্টার নির্ধারণ করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৩ঃ

লিঙ্কটি থেকে আনডারলাইন মুছে দাওঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="css_text.asp">CSS text tutorial</a></p>

</body>
</html>

 

অনুশীলণ ৪ঃ

<h1> এর লেখাকে বড় হাতের অক্ষরে এবং <p> এর লেখাকে ক্যাপিটালাইজ (প্রথম অক্ষর বড় হাতের) করঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

 

অনুশীলন ০৫ঃ

প্রথম লাইনকে 20px পরিমাণ ইনটেন্ড করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>

<p>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</p>

</body>
</html>

 

Feb 08

সিএসএস ব্যাকগ্রাউন্ড (CSS Background)

CSS background properties ব্যাবহার করা হয় element এর background effects নির্দেশ করার জন্য।

যে CSS properties গুলি background effects এর জন্য ব্যাবহার করা হয় তা নিম্নরুপঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

Background Color

একটি element এর background color নির্দিষ্ট করার জন্য background-color property ব্যাবহার করা হয়।
একটি page এর background color নির্ধারণ করার উপায় নিম্নরুপঃ

body {
    background-color: #b0c4de;
}

 

CSS দ্বারা একটি color প্রায়শ এভাবে নির্ধারিত করা হয়ে থাকেঃ

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

 

নিম্নোক্ত উদাহরণে <h1>, <p>, এবং <div> এলিমেন্ট এর ভিন্ন ভিন্ন ব্যাকগ্রাউন্ড কালার রয়েছে

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

 

Background Image

একটি element এর background হিসেবে image ব্যাবহার করতে চাইলে background-image property ব্যাবহার করতে হয়।
স্বাভাবিক ভাবে image টির পুনরাবৃত্তি ঘটে এবং এটি element অংশ কে আবৃত করে।
একটি page এর background image নিম্নরূপে নির্ধারণ করা হয়ঃ

body {
    background-image: url("paper.gif");
}
নিম্নের উদাহরণ টি text and background image এর অসম জোড় যেখানে text টি প্রায় পড়ার অযোগ্যঃ
body {
    background-image: url("bgdesert.jpg");
}

 

Background Image – Horizontally বা Vertically পুনরাবৃত্তি

স্বাভাবিক ভাবে background-image property একটি image কে horizontally (আনুভূমিক) এবং vertically (উল্লম্ব) ভাবে পুনরাবৃত্তি করে ।
কিছু কিছু image এর ক্ষেত্রে শুধু horizontal অথবা vertical পুনরাবৃত্তির প্রয়োজন হয়, তা নাহলে তাদেরকে অদ্ভুত দেখায়।

body {
    background-image: url("gradient_bg.png");
}

 

যদি image টি শুধুমাত্র horizontally পুনরাবৃত্তি হত তবে background অনেক চমৎকার দেখাত।

body {
     background-image: url("gradient_bg.png");
     background-repeat: repeat-x;
 }

 

Background Image – অবস্থান নির্ধারণ এবং কোন পুনরাবৃত্তি নয়

বিঃ দ্রঃ যখন background image ব্যাবহার করা হয় তখন এমন image ব্যাবহার করা ভাল যা text এর উপর কোন প্রভাব ফেলে না ।

Image কে পুনরাবৃত্তি না করে একবার নির্দিষ্ট করা হয় background-repeat property দ্বারা।

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

 

উপরে বর্ণীত উদাহরণ গুলিতে background image এবং text কে একই জাইগা তে দেখানো হয়েছে । এখন আমরা image এর  জাইগা পরিবর্তন করব যেন image এর জন্য text এর উপর তেমন কোন প্রভাব না পরে।

এখানে background-position property দ্বারা image এর জাইগা ঠিক করা হয়।

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

 

Background – শর্টহ্যান্ড প্রোপার্টি

উপরের উদাহরন গুলি থেকে আপনারা দেখতে পাচ্ছেন যে background কে মনোরম করার জন্য অনেকগুলি properties ব্যাবহার করা হয়েছে।

code কে ছোট করতে সকল properties কে একটি একক properties এ রূপ দেয়া হয়। একে property সংক্ষিপ্ত হয়।

Background এর জন্য shorthand property হচ্ছে “background”।

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

 

যখন shorthand property ব্যাবহার করা হয় তখন value গুলির ক্রম হচ্ছেঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

যদি কোন property value না থাকে তবে কোন সমস্যা নেই কিন্তু যদি উপস্থিত থাকে তবে উপরোক্ত ক্রম মেনে চলবে।

এই উদাহরণ টি ব্যাবহার করা হয় advanced CSS এর জন্য।

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin-left: 200px;
    background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.container {
    text-align: center;
}

.center_div {
    border: 1px solid gray;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #d0f0f6;
    text-align: left;
    padding: 8px;
}
</style>
</head>
<body>

<div class="container">
  <div class="center_div">
    <h1>Hello World!</h1>
    <p>This example contains some advanced CSS methods you may not have learned yet. 
    But, we will explain these methods in a later chapter in the tutorial.</p>
  </div>
</div>

</body>
</html>

 

নিজে নিজে চেষ্টা করো

অনুশীলন ০১ঃ

পেজ এর ব্যাকগ্রাউন্ড রঙ হিসেবে “linen” এবং <h1> এর ব্যাকগ্রাউন্ড রঙ হিসেবে “lightblue” নির্ধারণ করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০২ঃ

“paper.gif” নামক ছবিটি পেজ এর ব্যাকগ্রাউন্ড ছবি হিসেবে নির্ধারণ করো

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৩ঃ

“gradient_bg_vertical.png” নামক ছবিটি ব্যাকগ্রাউন্ড হিসেবে নির্ধারণ করো এবং এটিকে শুধুমাত্র উল্লম্বভাবে পুনরাবৃত্তি ঘটাওঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৪ঃ
ব্যাকড্রাউন্ড ছবি কেবলমাত্র একবার উপরের দিকে ডান পাশে প্রদর্শন করো

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img_tree.png");
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুলীন ০৫ঃ

ব্যাকগ্রাইন্ড প্রোপার্টি ব্যবহার করে উপরের দিকে ডান পাশে কেবলমাত্র একবার "img_tree.png" নামক ছবিটি প্রদর্শন করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

সকল সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি

প্রোপার্টি বর্ণনা
background এক ঘোষণায় সকল ব্যাকগ্রাউন্ড বৈশিষ্ট্য নির্ধারণ করে
background-attachment একটি ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট থাকবে বা পেজ এর সাথে স্ক্রল হবে তা নির্ধারণ করে
background-color একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড রং নির্ধারণ করে
background-image একটি এলিমেন্ট জন্য ব্যাকগ্রাউন্ড ইমেজ নির্ধারণ করে
background-position একটি ব্যাকগ্রাউন্ড ইমেজ এর শুরুর অবস্থানে নির্ধারণ করে
background-repeat একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি হবে তা নির্ধারণ করে

 

 

Feb 08

সি এস এস সিলেক্টর (CSS Selectors)

এইচটিএমএল এর সব element গুলোকে manipulate করার জন্য সিএসএস এর বিভিন্ন selector ব্যবহার করা হয়।

id , class, type, attribute ইত্যাদির উপর ভিত্তি করে এইচটিএমএল এলিমেন্টগুলো খোঁজা বা নির্বাচন করার জন্য সিএসএস সিলেক্টর ব্যবহার করা হয়।

এলিমেন্ট সিলেক্টর

এলিমেন্ট সিলেক্টর এলিমেন্টের নামের উপর ভিত্তি করে উপাদান নির্বাচন করে।

আমরা সকল <p> এলিমেন্টগুলোকে সিলেক্ট করতে পারি এইভাবে

P {
   text-align: center;
   color: red;
 }

ID Selector

কোন ইউনিক element এর জন্য আমরা id ব্যবহার করে থাকি। একটি পেজ এর মধ্যে ID ইউনিক হওয়া উচিত। কোন element এর নির্দিষ্ট কোন ID কে কল করতে গেলে আমাদের হেস operator ব্যবহার করতে হয়।

যেসকল এইচটিএমএল এর এলিমেন্ট id=”para1″ তাদের সিলেন্ট করতে হয় এভোবে

#para1 {
    text-align: center;
    color: red;
}

নোটঃ আইডি এর নাম সংখ্যা দিয়ে শুরু করবেন না।

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

class selector নির্দিষ্ট ক্লাস এট্রিবিউ এর এলিমেন্টগুলি সিলেক্ট করে।

নির্দিষ্ট ক্লাস এর এট্রিবিউটগুলো নির্বাচন করতে class selector কে ডট চিহ্ন দিয়ে সুরু করতে হয়, পরে ক্লাসের নাম উল্লেখ করতে হয়।

নিচের উদারণটি সকল এইচটিএমএল  এলিমেন্ট যেগুলোতে class=”center” আছে সেগুলো সিলেক্ট করবে।

.center {
    text-align: center;
    color: red;
}

 

ক্লাস দ্বারা আপনি শুধুমাত্র নির্দিষ্ট এইচটিএমএল এলিমেন্ট প্রভাবিত হবে এভাবেও নির্দিষ্ট করে দিতে পারেন।

নিচের উদারণটি সকল এইচটিএমএল <p> এলিমেন্ট যেগুলোতে class=”center” আছে সেগুলো সিলেক্ট করবে।

p.center {
    text-align: center;
    color: red;
}

নোটঃ আইডি এর নাম সংখ্যা দিয়ে শুরু করবেন না।

Grouping selector

অনেক সময় দেখা যায় অনেকগুলো element এর স্টাইল প্রায় এক রকম থাকে। যেমন
 h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

কোড ছোট রাখতে আপনি সিলেক্টরগুলোর গ্রুপ তৈরি করতে পারেন। 
গ্রুপ তৈরি করতে প্রতিটি সিলেক্টরকে কমা (,) দ্বারা পৃথক করতে হয়।
উদাহরণঃ
h1, h2, p {
    text-align: center;
    color: red;
}

 

 

নিজে নিজে চেষ্টা করো

 

অনুশীলন ০১ঃ

সকল <p> এলিমেন্ট এর রঙ লাল এ পরিবর্তন কর

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০২ঃ

যে এলিমেন্টগুলোর id=”para1″ সেগুলোর রঙ লাল এ পরিবর্তন কর

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p id="para1">This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৩ঃ

যেসকল এলিমেন্ট এর ক্লাস “colortext” সেগুলোর রঙ লাল এ পরিবর্তন কর

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p class="colortext">This is another paragraph.</p>
<p class="colortext">This is also a paragraph.</p>

</body>
</html>

 

অনুশীলন ০৪ঃ

সকল <p> এবং <h1> এলিমেন্ট এর রঙ লাল এ পরিবর্তন কর। কোড ছোট রাখতে এলিমেন্টগুলোর গ্রুপ তৈরি কর।

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

Feb 08

সিএসএস সিন্ট্যাক্স (CSS Syntax)

Protap Chandra

CSS (সিএসএস) Syntax বা গঠনরীতি

সিএসএস স্টেটমেন্ট একটি selector (সিলেক্টর) এবং একটি declaration block (ডিক্লেয়ারেশন ব্লক) নিয়ে গঠিত। নিচের ডায়াগ্রামটি থেকে এ ব্যাপারে পরিষ্কার ধারণা পাবেন:

CSS selector

selector (সিলেক্টর) সেই HTML উপাদানের কথা ইঙ্গিত করে যা আপনি style করতে চান।
অন্যদিকে, declaration block অংশে এক বা একাধিক declaration থাকে। ডিক্লেয়ারেশন যদি একাধিক হয় তবে সেমিকোলন দিয়ে একটির সঙ্গে অন্যটিকে আলাদা করা হয়।
প্রতিটি declaration এর মধ্যে একটি property এবং একটি value থাকে। property এবং value এর মাঝে একটি কোলন (:) চিহ্ন থাকে।

CSS (সিএসএস) এর উদাহরণ

সিএসএস declaration অবশ্যই সেমিকোলনের মাধ্যমে শেষ হবে এবং ডিক্লেয়ারেশন গ্রুপকে দ্বিতীয় বন্ধনী দ্বারা আবদ্ধ করতে হবে। যেমন:

p {color:red;text-align:center;}

 

তবে সহজে বোঝার জন্য সিএসএসের প্রতিটি declaration আলাদা আলাদা লাইনেও লেখা যেতে পারে। নিচের উদাহরণে লেখা ডিক্লেয়ারেশনটি HTML এ লেখা সকল <p> উপাদানকে center-align করবে। একই সাথে টেক্সটগুলোর রং red বা লাল করবে।

p {
    color: red;
    text-align: center;
}

 

CSS Comments বা মন্তব্য:

সিএসএস কোডিং লেখার সময় কখনো কখনো মন্তব্য লেখার প্রয়োজন হয়। মন্তব্য লেখা থাকলে পরবর্তীতে এগুলো পরিবর্তন পরিবর্ধন করার সময় বুঝতে সুবিধা হয়। সিএসএসে মন্তব্য লেখার সময় বিশেষ সংকেত ব্যবহার করা হয়। ব্রাউজার HTML উপাদানগুলো সাজানোর সময় মন্তব্য চিহ্নিত অংশটুকু উপেক্ষা করে। CSS comment বা মন্তব্য শুরু হয় /* চিহ্ন দিয়ে এবং */ চিহ্ন দিয়ে শেষ হয়। মন্তব্য এক বা একাধিক লাইনে লেখা যেতে পারে। যেমন:

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}
/* This is
a multi-line
comment */

 

 

Feb 08

সি এস এস পরিচিতি (CSS Introduction)

মোঃ রফিকুল ইসলাম

 

এই সিএসএস টিউটোরিয়াল এর মাধ্যমে সিএসএস কিভাবে স্টাইল নিয়ন্ত্রণ করে এবং একইসাথে একাধিক ওয়েব পেজ এ ব্যবহার করা যায় সে সম্পর্কে জানতে পারবেন।

প্রতি অধ্যায় এ উদাহরণ

এই টিউটোরিয়াল এ শত শত সিএসএস টিউটোরিয়াল সন্নিবেশ করা হয়েছে।

সিএসএস উদাহরণঃ

 body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}

 

সিএসএস কুইজ

সিএসএস কুইজ এর মাধ্যমে আপনার সিএসএস দক্ষতা যাচাই করুন।

আপনাকে কি আগে থেকেই জানতে হবে

শুরু করার আগে আপনাকে অবশ্যই এইচটিএমএল সম্পর্কে জানতে হবে।

সিএসএস কি?

  • সিএসএস এর এব্রিবিয়েশন হচ্ছে ক্যাসকাইডিং স্টাইল শীট (Cascading Style Sheets)
  • সিএসএস এইচটিএমএল উপাদানসময়হ কিভাবে প্রদর্শন করা হবে তা নির্ধারণ করে।
  • এইচটিএমএল ৪.০ এর একটি সমস্যা সমাধানের জন্য স্টাইল তৈরি করা হয়েছে।
  • সিএসএস প্রচুর পরিমাণে কাজ করার হাত থেকে রক্ষা করে।
  • বহিস্থিত স্টাইল শীট একটি আলাদা সিএসএস ফাইলে সংরক্ষণ করা হয়।

সিএসএস একটি বড় সমস্যার সমাধান করেছে

ডকুমেন্ট ফরমেটিং করার জন্য ট্যাগ ধারণ করার উদ্দেশ্যে এইচটিএমএল তৈরি করা হয় নাই।

এইচটিএমএল ডকুমেন্টের উপাদান বা বিষয়বস্তু নির্ধারণ করার উদ্দেশ্যেই তৈরি করা হয়েছিল। যেমন:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

যখন ট্যাগ যেমন <font> এবং কালার এট্রিবিউট এইচটিএমএল 3.2 এ যোগ করা হয়েছিল, এটি ওয়েব ডেবেলপারদের জন্য একটি দুঃস্বপ্নের সূচনা করেছিল। একটি বিশাল ওয়েব সাইট ডেবেলপ করার ক্ষেত্রে, যখন ফন্ট এবং কালার এর তথ্য প্রত্যেকটি  পৃষ্ঠায় যোগ করা হতো, তখন এটি দীর্ঘ সময় সাপেক্ষ এবং ব্যয়বহুল হয়ে উঠেছিল।

এই সমস্যা সমাধানের জন্য World Wide Web Consortium (W3C) সিএসএস তৈরি করেছে।

এইচটিএমএল 4.0 এ, এইচটিএমএল ডকুমেন্ট থেকে সকল ফরমেটিং মুছে ফেলা হতে পারে এবং আলাদা সিএসএস ফাইলে সঞ্চিত করা হতে পারে।

সিএসএস প্রচুর কাজ করা থেকে রক্ষা করে!

স্টাইল ডিফাইনেশন সাধারণত আলাদা সিএসএস ফাইলে সংরক্ষণ করা হয়।

বহিস্থিত সিএসএস ফাইল দিয়ে, আপনি শুধু একটি ফাইল পরিবর্তন করে আপনি একটি ওয়েব সাইটের চেহারা পরিবর্তন করতে পারেন।

 

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

বর্তমানে সিএসএস ৩ চলে এসেছে। এর আগের ভার্সন হল সিএসএস ২.১। তবে সিএসএস ৩ এখন অধিকাংশ ব্রাউজারে সাপোর্ট করে এবং CSS 3 ব্যবহার দিন দিন বেড়েই চলছে।

Feb 07

পিএইচপি ৫ ভূমিকা (PHP 5 Introduction)

আক্তারুজ্জামান
Department of CSE, University of Chittagong.

 

পিএইচপি কি?

  • পিএইচপি হল “PHP: Hypertext Preprocessor” এর সংক্ষিপ্ত রূপ।
  • এটি বহুল ব্যবহৃত open source ল্যাংগুয়েজ যেটা মূলত ওয়েব ডেভেলপেমেন্টের জন্য ব্যবহার করা হয়।
  • সার্ভার সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ অর্থাৎ পিএইচপি স্ক্রিপ্ট রান হয় সার্ভারে।
  • পিএইচপি ফ্রিতে ডাউনলোড এবং ব্যাবহার করা যায়।

 

পিএইচপি শেখার আগে কি জানা থাকা দরকার

পিএইচপি ভালভাবে বুঝতে হলে HTML, CSS এবং JavaScript সম্পর্কে বেসিক ধারনা থাকা জরুরী।

পিএইচপি ফাইল কি?

  • একটি পিএইচপি ফাইলে text, html, css, JavaScript এবং PHP কোড থাকতে পারে।
  • পিএইচপি ফাইল রান হয় সার্ভারে এবং রেজাল্ট এইচটিএমএল কোড হিসেবে ব্রাউজারে রিটার্ন হয় ।
  • পিএইচপি ফাইলের এক্সটেনশন হল .php ।

 

পিএইচপি দিয়ে কি কি করা যায়?

ওয়েব পেজে ডাইনামিক কনটেন্ট সৃষ্টি করার জন্য পিএইচপি ব্যাবহার করা হয়।

  • সার্ভারে কোন ফাইল তৈরি, ওপেন, রিড, রাইট, ডিলিট এবং ক্লোজ করতে পিএইচপি ব্যাবহার করা হয়।
  • পিএইচপি এইচটিএমএল ফরমের ডাটা সংগ্রহ করতে পারে।
  • cookies সেন্ড এবং রিসিভ করতে পিএইচপি ব্যাবহার করা হয়।
  • ডাটাবেজের কাজ, যেমনঃ ডাটাবেজে ডাটা এড, ডিলিট এবং পরিবর্তন করতে পিএইচপি ব্যাবহার করা হয়।
  • ইউজার এর এক্সেস নিয়ন্ত্রণ করতে পিএইচপি ব্যাবহার করা যেতে পারে।
  • ডাটা এনক্রিপ্ট করার কাজেও পিএইচপি ব্যাবহার হয়।
  • পিএইচপি দিয়ে এইচটিএমএল কোড প্রদর্শন করার পাশাপাশি ইমেজ, PDF এমনকি flush মুভিও প্রদর্শন করা যায়।

 

পিএইচপি কেন শিখব?

  • প্রায় সব প্লাটফর্ম (Windows, Linux, Unix, Mac OS X, etc) পিএইচপি সাপোর্ট করে।
  • সব সার্ভারে পিএইচপি ব্যাবহার উপযোগী।
  • পিএইচপি বিস্তৃত ডাটাবেজ সাপোর্ট করে।
  • পিএইচপি সম্পূর্ণ ফ্রি এবং ওপেন সোর্স।
  • পিএইচপি শেখা সহজ।
  • ওয়েবে সবচাইতে জনপ্রিয় কন্টেন্ট ম্যানেজমেন্ট সিস্টেম ওয়ার্ডপ্রেস (WordPress) পিএইচপি দিয়ে বানানো।
  • সবচাইতে জনপ্রিয় সামাজিক মিডিয়া সাইট ফেসবুকে পিএইচপি ব্যাবহার করা হয়।

Feb 07

পিএইচপি ৫ ফর্ম ভেলিডেশন (PHP 5 Form Validation)

কিভাবে ফর্ম কে validate করতে হয় তা আমরা এক এক করে কোড এর মাধ্যমে দেখব এবং তার বর্ণনা দেখব

টেক্সট ফিল্ডের এর এইচটিএমএল ফর্ম

Name:

E-mail:

Website:

Comment:

Gender:

Female
Male

 

 

টেক্সট ফিল্ডের এর এইচটিএমএল ফর্ম :
Name: <input type=”text” name=”name”>
E-mail: <input type=”text” name=”email”>
Website: <input type=”text” name=”website”>
Comment: <textarea name=”comment” rows=”5″ cols=”40″>রেডিও বাটন ব্যবহার করে এর পরবর্তী অংশ :

Gender:
<input type=”radio” name=”gender” value=”female”>Female
<input type=”radio” name=”gender” value=”male”>Male

ফর্মের এর শুরুতে পোস্ট করার element

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

 

যখন ফর্ম সাবমিট করা হয় তখন পোস্ট মেথড এর মাধ্যমে ডাটা সেন্ড করা হয়

ফর্মে আমরা ব্যবহার করেছি $_SERVER[“PHP_SELF”] যার অর্থ এই কোড ব্যবহার করার ফলে সাবমিট করা ডাটা অন্য কোন পেজ এ না গিয়ে এই পেজ এই পোস্ট হবে এবং এরর মেসেজ দেখাবে।

htmlspecialchars() ফাংশন এইচটিএমএল এর special characters গুলো কে এইচটিএমএল entities এ পরিবর্তন করে থাকে।

 

PHP নিরাপত্তা

$_SERVER[“PHP_SELF”] variable হ্যাকার রা ব্যবহার করে থাকে

যদি পেজ এ এই ফাংশন ব্যবহার করা হয়ে থাকে তখন কোন ইউজার slash(/) চিহ্ন ব্যবহার করতে পারে তখন কিছু ক্রস সাইট scripting (XSS) গননা হতে পারে।

মনে করি আমাদের এই ফর্মটি “test_form.php”নামে আছে।

<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">

 

যদি কোন ইউজার এড্রেস বারে লিখে http://www.example.com/test_form.php তাহলে সেটা রিড করবে

<form method="post" action="test_form.php">

 

যদি কোন ইউজার এড্রেস বারে লিখে

http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert(‘hacked’)%3C/script%3E

 

তাহলে রিড করবে

<form method="post" action="test_form.php/"><script>alert('hacked')</script>

 

যখন পেজ লোড হবে ইয়খন javascript কোড গণনা হবে। সুতরাং আমাদের এইখানে সতর্ক থাকতে হবে যে একজন হ্যাকার কোন ইউজার কে অন্য কোন সার্ভারে নিয়ে জেতে পারে।

 

কিভাবে $_SERVER[“PHP_SELF”] এর অপব্যবহার থেকে রক্ষা পাওয়া যাবে

আমরা htmlspecialchars() function ব্যবহার করার মাধ্যমে এই সমস্যা থেকে মুক্ত হতে পারি। ফর্মের পুর কোড টা আমরা এইভাবে লিখতে পারি

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

যেহেতু htmlspecialchars() function এইচটিএমএল এর special character কে এইচটিএমএল entities এ পরিবর্তন করে সেহেতু কোন ইউজার যদি PHP_SELF এর অপব্যবহার করতে চেষ্টা করে তাহলে অউতপুত টা আসবে

<form method="post" 
action="test_form.php/&quot;&gt;&lt;script&gt;alert('hacked')&lt;/script&gt;">

 

তাতে কোন ক্ষতি হবে না।

 

পিএইচপি এর মাধ্যমে ডাটা validate করা

htmlspecialchars() ফাংশন ব্যবহার করে আমাদের সমস্ত ডাটাকে পাস করতে হবে। এখন যদি কেওএইটা পোস্ট করতে চায় তাহলে এটা কখনই গণনা হবে না কারন এইচটিএমএল escaped কোড দ্বারা এটি একটি নিরাপদ জায়গায় রাখা হয়েছে।

আমরা আরও দুটি জিনিস দেখব

  1. PHP trim() function ব্যবহার করে অপ্রয়োজনীয় ফাকা জায়গা, নতুন কোন লাইন এই character গুলো কে রিমুভ করতে পারি
  2. PHP stripslashes() ব্যবহার করে backslashes (\) দূর করতে পারি। এখন আমরা test_input() নামে একটি ফাংশন তৈরি করব যা সব ডাটাগুলোকে $_POST এর মাধ্যমে চেক করবে
<?php
 // define variables and set to empty values
 $name = $email = $gender = $comment = $website = "";
 
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $name = test_input($_POST["name"]);
   $email = test_input($_POST["email"]);
   $website = test_input($_POST["website"]);
   $comment = test_input($_POST["comment"]);
   $gender = test_input($_POST["gender"]);
 }
 
 function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
 }
 ?>

এইখানে $_SERVER[“REQUEST_METHOD”] যদি post মেথড ব্যবহার করা হয় তাহলে ফর্ম এর সকল ডাটা সাবমিট করা হবে এবং তা validate হবে। এই কোডটি রান করার পর যদি কোন ইউজার ফর্মের ডাটা ফাকা রেখে সাবমিট করে তাহলে এর ফলাফল বুঝা যাবে।

 

Feb 07

পিএইচপি ৫ if…else…elseif স্ট্যাটমেন্ট (PHP 5 if…else…elseif Statements)

PHP তে আমরা কোন variable ঘোষণা করলে তা $ চিহ্ন দিয়ে প্রকাশ করে থাকি। আমরা যদি if-else statement এর কাজ করতে যাই তাহলে আমাদের এই চিহ্ন নিয়ে কাজ করতে হবে। কোন উদাহরন দেওয়ার আগে আমরা একটু if-else বিষয় টা বুঝে নেই।

পিএইচপি ফাইল রান করার ক্ষেত্রে আমাদের অনেক condition থাকতে পারে if-else এর মাধ্যমে আমরা সেই condition গুলো প্রকাশ করতে পারি এবং প্রিন্ট করতে পারি।

< ?php
 $t = date("H");            /*variable ঘোষণা করেছি */
if ($t < "20")              /*এর মাধ্যমে আমরা শর্ত দিয়ে দিয়েছি*/
 {
 echo "Have a good day!";   /*এবং শর্ত যদি মিলে তাহলে তা প্রিন্ট করবে */
 }
 ?>

যদি আমরা if এর সাথে else ব্যবহার করি তাহলে দেখুন

< ?php
 $t = date("H");          /*variable ঘোষণা করেছি */
if ($t < "20")            /*এর মাধ্যমে আমরা শর্ত দিয়ে দিয়েছি*/
 {
 echo "Have a good day!"; /*এবং শর্ত যদি মিলে তাহলে তা প্রিন্ট করবে */
 }
 else {
 echo "Have a good night!";/*যদি শর্ত না মিলে তাহলে এটা প্রিন্ট হবে*/
 }
 অনেক সময় অনেকগুলো if-else ব্যবহার করতে হতে পারে।
  $t = date("H");   /*এই কোড এর মাধ্যমে খুঁজে পাবে দিনের ঘণ্টা*/
if ($t < "10")      /*প্রথম শর্ত দেওয়া হল*/ {
 echo "Have a good morning!";/*শর্ত মিললে এটি প্রকাশ করবে।*/
 } elseif ($t < "20")/*যদি না মিলে তাহলে দ্বিতীয় শর্ত প্রকাশ করা হোল*/ {
 echo "Have a good day!"/*দ্বিতীয় শর্ত মিললে এটা প্রকাশ করবে। */;
 } else {
 echo "Have a good night!/*যদি কোনটাই না মিলে তাহলে এটি প্রিন্ট করবে।*/";
 }
 ?>

নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন if-else.php extension দিয়ে। আপনার ফাইল টি localhost > htdocs> test ফোল্ডার এর ভিতর রাখুন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/if-ese.php. Go বাটন এ ক্লিক করলে একটি ফলাফল আপনি খুজে পাবেন।

Feb 06

পিএইচপি মাইএসকিউএল ডাটাবেজ (PHP MySQL Database)

পিএইচপি মাইএসকিউল ডাটাবেজ এর পরিচিতি

Ali Hossain
Student of English Literature, Jahangirnagar University.

 

আজাকে আমরা পিএইচপি মাইএসকিউল ডাটাবেজ এর সম্পর্কে জানব। PHP (পিএইচপি) ব্যবহার করে আপনি ডাটাবেজের সাথে সংযোগ করতে পারবেন এবং তা নিপূনভাবে পরিচালনা করতে পারবেন। MySQL (মাইএসকিউল) হচ্ছে সবচেয়ে জনপ্রিয় ডাটাবেজ সিস্টেম যেটা পিএইচপি এর সাথে ব্যবহৃত হচ্ছে।

মাইএসকিউল কি ?

১. মাইএসকিউল একটা ডাটাবেজ সিস্টেম যেটা ওয়েব এ ব্যবহার করা হয় এবং সার্ভারে পরিচালনা করা হয়।

২. মাইএসকিউল ছোট এবং বড় উভয়ের জন্য আদর্শ ডাটাবেজ সিস্টেম।

৩. মাইএসকিউল খুব দ্রত, নির্ভরযোগ্য এবং সহজে ব্যবহার করা যায়।

৪. মাইএসকিউল মানসম্পন্ন এসকিউল ব্যবহার করে।

৫. মাইএসকিউল কয়েকটি প্লাটফর্মের উপর প্রনয়ন করা হয়েছে।

৬. মাইএসকিউল ওরাকল দারা উন্নতকরন, বিতরন এবং সমর্থিত এবং এটি বিনামূল্যে ডাউনলোড করে ব্যবহার করা যাবে।

৭. মাইএসকিউল এর সহ-প্রতিষ্ঠাতা Monty Widenius (মন্টি উইডেনিয়াস) এর মেয়ের নামে নামকরন করা হয়।

মাইএসকিউল ডাটাবেজের ডাটা টেবিলে জমা রাখা হয়। মাইএসকিউলে একটি টেবিল হলো সংশ্লিষ্ট তথ্যের ভান্ডার যেটি কলাম ও সারির সমন্নয়ে গঠিত। ডাটাবেজ নিরপেক্ষভাবে তথ্য সংরক্ষনের জন্য দরকারী। একটি কোম্পানির নিম্মলিখিত টেবিলের সমন্নয়ে ডাটাবেজ থাকতে পারে :

১. কর্মচারী

২. পন্য

৩. গ্রাহক

৪. আদেশ

পিএইচপি + মাইএসকিউল ডাটাবেজ সিস্টেম

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

ডাটাবেজ অনুসন্ধান

অনুসন্ধান হলো একটি প্রশ্ন বা অনুরোধ। আমরা নির্দিষ্ট তথ্যের জন্য ডাটাবেজ অনুসন্ধান করতে পারি এবং রেকর্ডসেট ফিরে পেতে পারি।

নিচের অনুসন্ধানটি দেখুন (মানসম্পন্ন এসকিউল ব্যবহারে তৈরি):

SELECT LastName FROM Employees

উপরের অনুসন্ধানটি “Employees” টেবিলের “LastName” কলামের সকল ডাটাকে নির্বাচন করবে। আরো শিখতে এসকিউএল এর সবার নিচের লিঙ্কে ভ্রমন করুন।

ডাউনলোড মাইএসকিউল ডাটাবেজ

আপনার যদি পিএইচপি সার্ভার যুক্ত মাইএসকিউল ডাটাবেজ না থাকে, তাহলে এখান থেকে বিনামূল্যে ডাউনলোড করুন : http://www.mysql.com

মাইএসকিউল সম্পর্কে তত্থ্য

মাইএসকিউল (ফেসবুক, টুইটার এবং উইকিপিডিয়ার মত) তথ্য এবং শেষ ব্যবহারকারীদের বিপুল ভলিউমের ওয়েব সাইটের জন্য একটি de-facto মানসম্পন্ন ডাটাবেজ সিস্টেম। মাইএসকিউএল সম্পর্কে আরেকটি বড় ব্যাপার হল এটার সংখ্যা কমিয়ে আনা যায় যা এমবেডেড ডাটাবেসের অ্যাপ্লিকেশন সমর্থন করে। মাইএসকিউল ব্যবহার করে কোম্পানির ওভারভিউ দিতে দেখুন : http://www.mysql.com/customers/