Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

লিখেছেন সুদীপ্ত সাহা

গ্লাইফাইকনস

গ্লাইফাইকনের সেটে বুটস্ট্র্যাপের ২০০ আইকন রয়েছে।

টেক্সট, বাটন, টুলবার, নেভিগেশন, ফর্ম এরকম বিভিন্ন জায়গায় গ্লাইফাইকন ব্যবহার করা হয়।

কিছু গ্লাইফাইকনের উদাহরণ হলঃ

গ্লাইফাইকনের সিনট্যাক্স

গ্লাইফাইকন সেট করার জন্য নিচের সিনট্যাক্স ব্যবহার করতে হয়ঃ

<span class="glyphicon glyphicon-name"></span>

সিনট্যাক্সের নেম এর অংশে অবশ্যই একটি সঠিক গ্লাইফাইকনের নাম দিতে হবে।

গ্লাইফাইকনের উদাহরণঃ

গ্লাইফাইকনকে বিভিন্নভাবে ব্যবহার করার পদ্ধতি নিচের উদাহরণে দেখানো হলঃ
উদাহরণঃ

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>

ব্যাজ

কোন একটি লিঙ্কে বর্তমানে কতগুলো নতুন আইটেম বিদ্যমান আছে তা বোঝানোর জন্য ব্যাজ ব্যবহার করা হয়। যেমনঃ

এখানে (5, 10 এবং 2) এই নাম্বারগুলো হচ্ছে ব্যাজ।

ব্যাজ তৈরির জন্য <span> ইলিমেন্টের ক্লাস .badge দিতে হয়ঃ
উদাহরণঃ

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

অন্য কোন ইলিমেন্টের ভেতরেও ব্যাজ ব্যবহার করা যায়, যেমন বাটনের ভেতরে ব্যাজ ব্যবহার করাঃ

কিভাবে একটি বাটনের ভেতরে ব্যাজ তৈরি করতে হয় তা নিচের উদাহরণে দেখানো হলঃ
উদাহরণঃ

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span>
</button>

লেবেল

লেবেল কোন কিছু সম্পর্কে অতিরিক্ত তথ্য প্রদান করার জন্য ব্যবহৃত হয় :

.label ক্লাসটি <span> এলিমেন্ট এর ভিতরে ৬ টি প্রাসঙ্গিক ক্লাস .label-default, .label-primary, .label-success, .label-info, .label-warning বা .label-danger এর যেকোনটির সাথে ব্যবহার করা যাবে:

উদাহরণ :

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>

নিচের উদাহরণটিতে সকল প্রাসঙ্গিক ক্লাস ব্যবহারের ফলাফল দেখাচ্ছে:

এর উদাহরণ :

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি – সিম্পল-এক্সএমএল পার্সার (PHP SimpleXML Parser in Bangla)

February 13, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিম্পল-এক্সএমএল (SimpleXML) হলো একটি পিএইচপি এক্সটেনশান যা আমাদেরকে সহজে এক্সএমএল ডাটা ম্যান্যুপিউলেট করতে এবং পেতে (get) সাহাজ্য করে।

সিম্পল-এক্সএমএল পার্সার

সিম্পল-এক্সএমএল একটি ট্রি-বেজড বা ট্রি নির্ভর পার্সার। যদি আপনি এক্সএমএল ডকুমেন্ট'টির স্ট্রাকচার বা লেআউট সম্পর্কে জেনে থাকেন তাহলে সিম্পল-এক্সএমএল একটি এলিমেন্টের নাম, এট্রিবিট এবং টেকচুয়াল ( টেক্সট) কন্টেন্টকে সহজেই পেতে সাহাজ্য করে।

সিম্পল-এক্সএমএল একটি এক্সএমএল ডকুমেন্টকে ডাটা স্ট্রাকচারে রূপান্তরিত করে যাকে নিয়ে আপনি এক গুচ্ছ এরে ( arrays ) বা অবজেক্টের মতো বারবার কাজ করতে পারেন। DOM অথবা এক্সপ্যাট পার্সারের তুলনায় সিম্পল-এক্সএমএল একটি এলিমেন্ট থেকে টেক্সট ডাটা পড়তে অল্প কিছু কোড লাইন নিয়ে কাজ করে।

ইন্সটলেশান

পিএইচপি-ফাইভ এ সিম্পল-এক্সএমএল ফাংশনগুলো পিএইচপি কোরেরই অংশ। এই ফাংশনগুলো ব্যবহার করতে কোন প্রকার ইন্টলেশনের দরকার পড়েনা।

পিএইচপি সিম্পল-এক্সএমএল - স্ট্রিং থেকে পড়া

পিএইচপি simplexml_load_string() ফাংশনটি একটি স্ট্রিং থেকে এক্সএমএল ডাটা পড়তে ব্যবহৃত হয়। মনে করি, নিচেরটির মতো আমাদের একটি এক্সএমএল ভ্যারিয়েবল রয়েছে যা এক্সএমএল ডাটা ধারণ করেঃ

$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>";

নিচের উদাহরণটি আমাদের দেখায়, কিভাবে simplexml_load_string() ফাংশনটিকে ব্যবহার করে একটি স্ট্রিং থেকে এক্সএমএল ডাটা পড়তে হয়ঃ

<?php
$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>";

$xml=simplexml_load_string($myXMLData) or die("Error: Cannot create object");
print_r($xml);
?>

উপরের কোডটির আউটপুট হবেঃ

SimpleXMLElement Object ( [to] => Tove [from] => Jani [heading] => Reminder [body] => Don't forget me this weekend! )

এরর হ্যান্ডল করার টিপসঃ ডকুমেন্ট লোড করার সময় libxml ফাংশানালিটিকে সবগুলো এক্সএমএল এরর ত্রুটিকে ফিরে পেতে ব্যবহার করুন এবং তারপর এররগুলো সারানোর উপর কাজ করুনঃ

<?php
libxml_use_internal_errors(true);
$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<document>
<user>John Doe</wronguser>
<email>john@example.com</wrongemail>
</document>";

$xml = simplexml_load_string($myXMLData);
if ($xml === false) {
    echo "Failed loading XML: ";
    foreach(libxml_get_errors() as $error) {
        echo "<br>", $error->message;
    }
} else {
    print_r($xml);
}
?>

উপরের কোডটির আউটপুট হবেঃ

Failed loading XML:
Opening and ending tag mismatch: user line 3 and wronguser
Opening and ending tag mismatch: email line 4 and wrongemail

পিএইচপি সিম্পল-এক্সএমএল - ফাইল থেকে পড়া

পিএইচপি simplexml_load_file() ফাংশনটি একটি ফাইল থেকে এক্সএমএল ডাটা পড়তে ব্যবহৃত হয়। মনে করি আমাদের "note.xml" নামের একটি ফাইল রয়েছে যা নিচের মতো দেখায়ঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

নিচের উদাহরণটি আমাদেরকে দেখায়, কিভাবে simplexml_load_file() ফাংশনটি ব্যবহার করে ফাইল থেকে এক্সএমএল ডাটা পড়তে হয়ঃ

<?php
$xml=simplexml_load_file("note.xml") or die("Error: Cannot create object");
print_r($xml);
?>

উপরের কোডটির আউটপুট হবেঃ

SimpleXMLElement Object ( [to] => Tove [from] => Jani [heading] => Reminder [body] => Don't forget me this weekend! )

টিপসঃ পরবর্তী অধ্যায়ে একটি এক্সএমএল ফাইল থেকে কিভাবে নোড ভ্যালুগুলো পেতে হয় তা দেখানো হবে।

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ বাটন (Bootstrap Buttons)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Button স্টাইল

Bootstrap এ সাতটি স্টাইলের button ব্যবহৃত হয়, যথা:

এই সাতটি স্টাইলের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

Default - .btn-default
Primary - .btn-primary
Success - .btn-success
Info - .btn-info
Warning - .btn-warning
Danger - .btn-danger
Link - .btn-link

নিম্নোক্ত উদাহরণে ভিন্ন ভিন্ন button এর স্টা্ইলের দেখানো হলো:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

button এর class গুলো সাধারণত <a>, </a><button><a> কিংবা <input type="text" /> এলিমেন্টে যোগ করা হয়। যেমন:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

কেন <a> এলিমেন্টের href এট্রিবিউটে # ব্যবহার করা হয়েছে?

যেহেতু যোগ করার মতো আমাদের হাতে এখনো কোন link নেই এবং লিংক না থাকার কারণে যে "404" message দেখানো হয় সেটাও দেখাতে চাই না কাজেই এখানে # ব্যবহার করা হয়েছে। তবে বাস্তব ক্ষেত্রে অবশ্যই # এর পরিবর্তে একটি লিংক যোগ করতে হবে।

বাটনের আকার

Bootstrap এ চারটি সাইজের Button ব্যবহৃত হয়, যথা:

Button এর এই চারটি সাইজের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

Large - .btn-lg
Medium - .btn-md
Small- .btn-sm
XSmall - .btn-xs

নিম্নোক্ত উদাহরণে Button এর ভিন্ন ভিন্ন চারটি সাইজ দেখানো হলো:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Block Level Buttons

parent element এর পুরো width জুড়ে Button তৈরি করাকে Block Level Buttons বলা হয়।

Block Level Buttons তৈরি করতে .btn-block class টি যোগ করা হয়। যেমন:

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Active/Disabled Buttons

কোনো Button এর status এমনভাবে set করা যেতে পারে যেন তা active (যা active রয়েছে এমন) বা disabled (যা Click করা যায় না এমন) হতে পারে।

active Button তৈরি করার জন্য .active class এবং disabled Button তৈরি করার জন্য .disabled class যোগ করতে হয়। যেমন:

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার (Bootstrap Jumbotron and Page Header)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার

জাম্বট্রন তৈরির পদ্ধতি

কোন স্পেশাল কন্টেন্ট বা তথ্যের প্রতি ইউজারের মনোযোগ আকর্ষণের জন্য ওয়েবপেজে বড় স্পেস বা বক্সকে নির্দেশ করাই হচ্ছে জাম্বট্রন।

জাম্বট্রনের ব্যাকগ্রাউন্ড কালার সাধারনত গ্রে হয়ে থাকে এবং এর কর্নারগুলো একটু রাউন্ড আকৃতির হয়।

জাম্বট্রনের ভেতরে যেই টেক্সটগুলো থাকে সেগুলো সেগুলোর ফন্টসাইজও স্বয়ংক্রিয়ভাবে বড় হয়ে থাকে।

টিপসঃ জাম্বট্রনের ভেতরে আপনি ভ্যালিড HTML এর ইলিমেন্ট এবং বুটস্ট্র্যাপের অন্যান্য ইলিমেন্ট ও ক্লাস ব্যবহার করতে পারবেন।

জাম্বট্রন তৈরির জন্য .jumbotron ক্লাসসহ <div> ইলিমেন্ট ব্যবহার করতে হয়।

কন্টেইনারের মধ্যে জাম্বট্রন তৈরির পদ্ধতি

আপনি যদি এরকম চান যেন জাম্বট্রন স্ক্রিনের একটি নির্দিষ্ট সীমার বাইরে বিস্তৃত না হয়, তাহলে জাম্বট্রনকে আপনার নির্দিষ্ট করা <div class="container"> এর ভেতরে সেট করতে হবেঃ

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের মধ্যে জাম্বট্রন তৈরি

কন্টেইনারের বাহিরে জাম্বট্রন তৈরির পদ্ধতি

জাম্বট্রনকে ডিফল্টভাবে স্ক্রিনে শো করাতে চাইলে <div class="container"> এর বাইরে জাম্বট্রনকে সেট করতে হবেঃ

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for 
  developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের বাহিরে জাম্বট্রন তৈরি

পেজের হেডার তৈরির পদ্ধতি

পেজ হেডার অনেকটা সেকশন ডিভাইডারের মতো .page-header ক্লাস হেডিং লাইনের নিচে একটি লম্বা দাগের মতো অনুভূমিক লাইন তৈরি করে একইসাথে কিছু ইলিমেন্টের চারদিকে কিছুটা স্পেস দখল করে।

পেজ হেডারের উদাহরণঃ

পেজ হেডার তৈরির জন্য <div> ইলিমেন্টের ক্লাস .page-header হতে হবেঃ

<div class="page-header">
  <h1>Example Page Header</h1>
</div>

ফলাফল : পেজ হেডার

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ ইমেজেস (Bootstrap Images)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

বুটস্ট্র্যাপ ইমেজ আকৃতি

Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা:

গোলাকৃতির কোণ
বৃত্ত
থাম্বনেল

গোলাকৃতির কোণ

Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" 
height="236">

বৃত্ত

Image কে বৃত্তাকার বা Circle Shape এ দেখানোর জন্য .img-circle classটিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Cornerসাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" 
 height="236">

থাম্বনেল

Thumbnail Shape এ দেখানোর জন্য .img-thumbnail classটিকে যোগ করা হয়।
উদাহরণ:

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" 
 height="236">

প্রতিক্রিয়াশীল ইমেজ

সাধারণত Image এবং screen এর size ভিন্ন ভিন্ন হতে পারে। আবার, রেসপন্সিভ ইমেজ (Responsive Images) screen এর size অনুযায়ী image কে resize করে parent element এর সাথে সামঞ্জস্য রেখে screen এ ডিসপ্লে করে। রেসপন্সিভ ইমেজ তৈরি করার জন্য .img-responsive class টিতে <img> ট্যাগে যোগ করা হয়। উল্লেখ্য যে, .img-responsive class এর ক্ষেত্রে max-width: 100%; এবং height: auto; প্রযোজ্য হয়।

উদাহরণ:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

ফলাফল : প্রতিক্রিয়াশীল ইমেজ

Image Gallery বা গ্যালারী তৈরি

Bootstrap's grid system এ .thumbnail class যোগ করেও ইমেজ গ্যালারী তৈরি করা যায়।
উদাহরণ:

 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of 
      France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" 
      style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
      </p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

ফলাফল : ইমেজ গ্যালারী

প্রতিক্রিয়াশীল Embed

যে কোনো রকম videos বা slideshows রেসপন্সিভ হিসাবে যোগ করা যেতে পারে। এক্ষেত্রে সরাসরি <iframe>, <embed>, <video>, এবং <object> এলিমেন্ট এ class যোগ করা যায়।

নিম্নোক্ত উদাহরণে <iframe> ট্যাগে .embed-responsive-item class টি যোগ করে video টিকে রেসপন্সিভ আকারে উপস্থাপন করা হয়েছে। এক্ষেত্রে ভিডিওটির containing <div> টি হলো ভিডিওটির parent element, কাজেরই <div> এর মাধ্যমে video টির ratio নির্ধারিত হবে।

উদাহরণ :

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ফলাফল : প্রতিক্রিয়াশীল Embed

aspect ratio বলতে কি বোঝায়?

কোনো image এর width ও height এর মধ্যকার আনুপাতিক হার বা সম্পর্কই হচ্ছে aspect ratio. সাধারণত দুই প্রকারের video aspect ratios ব্যবহৃত হয় যথা: ৪:৩ (বিংশ শতাব্দীর universal ভিডিও ফরমেট) এবং ১৬:৯ (HD televisio n ও European digital television এর universal ভিডিও ফরমেট)। সম্পূর্ণ Bootstrap Image রেফারেন্স: image এর সকল class এর পরিপূর্ণ রেফারেন্স পেতে Bootstrap Image Reference অধ্যায়টি দেখুন।

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Bootstrap বেসিক টেবিল

সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।
.table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:

কোড :

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal 
dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

উল্লেখ্য : এই অনুচ্ছেদের সকল উদাহরণের ক্ষেত্রে বা সকল বুটস্ট্র্যাপ কোড নিয়ে কাজ করার সময় অবশ্যই হেড সেকশনে নিম্নোক্ত কোড টাইপ করতে হবে :

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/
bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
</head>

Striped Rows

.table-striped class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:

কোড:

<div class="container">     
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Bordered Table

.table-bordered class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:

কোড :

<div class="container">     
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Hover Rows

টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover class টি যোগ করা হয়। যেমন:

কোড :

<div class="container">         
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Condensed Table

.table-condensed class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:

কোড :

<div class="container">         
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Contextual Classes

সাধারণত কোনো টেবিলের rows (<tr>) কিংবা cells (<td>) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:

কোড :

<div class="container">        
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:

`.active`	কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়।
`.success`	সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
`.info`	নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
`.warning`	মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
`.danger`	বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ ফর্ম হ্যান্ডলিং (PHP 5 Form Handling)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আক্তারুজ্জামান

Department of CSE, University of Chittagong

ইউজার এর কাছ থেকে বিভিন্ন ধরনের তথ্য সংগ্রহ করতে ফর্ম (form) ব্যাবহার করা হয়। এই তথ্যগুলো পিএইচপি প্রোগ্রামের মাধ্যমে ডাটাবেজে স্টোর করা হয়। পিএইচপি তে দুটি সুপার গ্লুবাল ভেরিয়েবল আছে যা ফর্ম থেকে বিভিন্ন উপাত্ত বা ইউজার এর ইনপুট তুলে আনতে ব্যাবহৃত হয়। এই দুইটি ভেরিয়েবল হল $_GET এবং $_POST।

নিচের উদাহরণে একটি সিম্পল এইচটিএমএল ফর্ম দেওয়া হয়েছে যেখানে ২ টি ইনপুট ফিল্ড এবং একটি সাবমিট বাটন রয়েছে।

<html>
 <body>
 
 <form action="welcome.php" method="post">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

যখন ইউজার এই ফর্মের ডাটা ফিল্ড গুলো পূর্ণ করে সাবমিট বাটনে ক্লিক করবে তখন উক্ত ডাটা গূলো “welcome.php” ফাইলে চলে যাবে। এখানে যেহেতু মেথড “post” ব্যাবহার করা হয়েছে তাই ডাটা গুলো HTTP POST মেথডের মাধ্যমে সেন্ড হবে।
সাবমিট করা ডাটা গুলো খুব সহজে নিচের মত করে “welcome.php” ফাইলে প্রদর্শন করা যাবে।

 <html>
 <body>
 
 Welcome <?php echo $_POST["name"]; ?><br>
 Your email address is: <?php echo $_POST["email"]; ?>
 
 </body>
 </html>

এই কোডটির আউটপূট হবে নিচের মতঃ

Welcome John
Your email address is john.doe@example.com

একই ভাবে HTTP GET মেথডে ব্যাবহার করেও কাজটি করা যাবে।
উদাহরনঃ

 <html>
 <body>
 
 <form action="welcome_get.php" method="get">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

এখেত্রে "welcome_get.php" ফাইলটি নিচের মত হবেঃ

<html>
 <body>
 
 Welcome <?php echo $_GET["name"]; ?><br>
 Your email address is: <?php echo $_GET["email"]; ?>
 
 </body>
 </html>

গেট বনাম পোষ্ট (GET vs. POST)

GET এবং POST উভয়েইএকটি অ্যারে নির্মাণ করে (যেমনঃ array( key => value, key2 => value2, key3 => value3, ...))। এখানে key,key1,key2 হল ফর্ম কন্ট্রোল গুলোর নামে এবং value,value1,value2 হল ইউজারের ইনপুট ডাটা।
GET এবং POST উভয়েই $ _GET এবং $ _POST হিসাবে গণ্য হয়। এইগুলো হল সুপার গ্লুবালস অর্থাৎ এইগুলো সবসময় সব ফাংশন এবং সব ক্লাস থেকে এক্সেস করা যাবে।
ফর্মের ডাটা GET মেথড ব্যাবহার করে সেন্ড করলে সকল ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয়। অন্য দিকে ফর্মের ডাটা POST মেথড ব্যাবহার করে সেন্ড করলে ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয় না।

কখন GET ব্যবহার করতে হবে? (When to use GET?)

GET এর মাধ্যমে পাঠানো ডাটা সবাই দেখতে পায়। GET এর মাধ্যমে খুব বেশি ডাটা পাঠানো যায় না ,সর্বোচ্চ 2000 characters পাঠানো যায়। সেনসিটিভ ডাটা যেমন passwords সেন্ড করার জন্য কখনো GET ব্যাবহার করা উচিত নয়।

কখন POST ব্যবহার করতে হবে? (When to use POST?)

POST এর মাধ্যমে পাঠানো ডাটা অন্যরা দেখতে পায় না এবং এইখানে যত ইচ্ছা তথ্য পাঠানো যায়। এছাড়াও POST এর মাধ্যমে সার্ভারে ফাইল আপলোড করা যায় যেটা GET এর মাধ্যমে করা সম্ভব না।

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ ট্যাক্সট / টাইপোগ্রাফি (Bootstrap Text/Typography)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Bootstrap এর প্রাথমিক (default ) ফন্ট সাইজ হল ১৪ পিক্সেল, যার প্রতি লাইনের উচ্চতা (height) ১.৪২৮ ।

এটা <body> এবং সমস্ত প্যরাগ্রাফে ব্যবহার করা হয় ।

উপরন্তু, সকল <p> elements এর একটি bottom margin থাকে যেটা তাদের নির্ণিত line-height এর সমান অথবা অর্ধেক (ডিফল্ট হিসেবে 10px)

বুটস্ট্র্যাপ বনাম ব্রাউজার ডিফল্ট

এই অনুশীলনীতে আমারা দেখব বুটস্ট্র্যাপ এবং এর পরে ব্রাউজার এর সাহায্যে HTML এলিমেন্টকে কিছুটা ভিন্নতরভাবে স্টাইল করা।

<h1> - <h6>

Default হিসাবে, বুটস্ট্র্যাপ HTML হেডিংকে (<h1> to <h6>) নিম্নোক্তভাবে স্টাইল করে :

কোড :

<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

উল্লেখ্য : এই অনুচ্ছেদের প্রতিটি উদাহরণ নিয়ে কাজ করার ক্ষেত্রে হেড অংশে নিম্নোক্ত কোড অবশ্যই লিখতে হবে :

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap
.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

<small>

Bootstrap এ HTML <small> এলিমেন্টকে কিছুটা আলোকিত এবং দ্বীতিয় পর্যায়ের টেক্স তৈরি করার জন্য ব্যবহার করা হয়।

কোড :

<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

<mark>

Bootstrap, HTML <mark> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।

কোড :

<div class="container">
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

<abbr>

Bootstrap, HTML <abbr> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।

কোড :

<div class="container">
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

HTML <blockquote> এলিমেন্ট Bootstrap এ নিচের মত স্টাইল হয় :

কোড :

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote>
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading 
conservation organization, WWF works in 100 countries and is supported by 1.2 million members 
in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

.blockquote-reverse class টি ব্যবহার করা হয় ডান পাশে quote দেখানোর জন্য

কোড :

<div class="container">
  <h1>Blockquotes</h1>
  <p>To show the quote on the right use the class .blockquote-reverse:</p>
  <blockquote class="blockquote-reverse">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading 
conservation organization, WWF works in 100 countries and is supported by 1.2 million members 
in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

<dl>

HTML <dl> এর সাহায্যে Bootstrap এ নিচের style টি তৈরি হয়

কোড :

<div class="container">
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

<code>

Bootstrap এ HTML <code> এলিমেন্ট নিচের মত স্টাইল হয় :

কোড :

<div class="container">
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> 
defines a section in a document.</p>
</div>

<kbd>

Bootstrap এ HTML <kbd> এলিমেন্ট নিচের মত স্টাইল হয় :

কোড:

<div class="container">
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

HTML <pre>এর সাহায্যে Bootstrap এ নিচের style তৈরি হয়

কোড:

<div class="container">
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

প্রাসঙ্গিক রং এবং ব্যাকগ্রাউন্ড

Bootstrap এ কিছু প্রাসঙ্গিক class আছে, যার মাধ্যমে অর্থবহ রং তৈরি করা যায়।

টেক্সট এর জন্য class গুলো হচ্ছে :.text-muted, .text-primary, .text-success, .text-info, .text-warning, এবং .text-danger:

কোড :

<div class="container">
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

ব্যাকগ্রাউন্ট এর জন্য class গুলো হচ্ছে : .bg-primary, .bg-success, bg-info, bg-warning, এবং .bg-danger:

কোড:

<div class="container">
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

অন্যান্য টাইপোগ্রাফি Class

.lead
.small
.text-left
.text-center
.text-right
.text-justify
.text-nowrap
.text-lowercase
.text-uppercase
.text-capitalize
.initialism
.list-unstyled
.list-inline
.dl-horizontal
.pre-scrollable

এগুলো ব্যবহারের ফলাফল দেখার জন্য <p class="lead">এখানে আপনার টেক্সট লিখুন</p> লাইনের class=’উপরের যেকোন একটি ক্লাস’ লিখে চেষ্টা করুন।

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ গ্রিডস (Bootstrap Grids)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শেখ মাহফুজুর রহমান

বুটস্ট্র্যাপ গ্রিড সিস্টেম

বুটস্ট্র্যাপ গ্রিড সিস্টেম পুরো পেজে ১২টি কলাম যোগ করতে দেয়। যদি আপনি ১২টি কলাম আলাদা আলাদাভাবে ব্যবহার করতে না চান, তাহলে কয়েকটি কলামকে একসাথে একত্র করে প্রশস্ত কলাম তৈরি করতে পারেনঃ

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4				span 4				span 4
span 4				span 8
span 6						span 6
span 12

বুটস্ট্র্যাপ গ্রিড সিস্টেম রেসপনসিভ (ডিভাইস স্ক্রিন অনুসারে স্টাইল/লেআউট পরিবর্তিত হয়) এবং স্ক্রিনের সাইজ অনুযায়ী সয়ংক্রিয়ভাবে কলামগুলো রি-অ্যারেঞ্জ হবে।

গ্রিড ক্লাস

বুটস্ট্র্যাপ গ্রিড সিস্টেমের চারটি ক্লাস রয়েছেঃ

xs (ফোনের জন্য)
sm (টেবলেট এর জন্য)
md (ডেস্কটপের জন্য)
lg (বড় ডেস্কটপের জন্য)

উপরের ক্লাসগুলো একত্র করে আরও ডাইনামিক ও ফেক্সিবল লেআউট তৈরি করা সম্ভব।

একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার

নিচে একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার দেয়া হলোঃ

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

প্রথমে একটি রো তৈরি করুন (<div class="row">)। তারপর ইচ্ছেমতো কলামের নাম্বারগুলো (tags with appropriate .col-*-* classes) যোগ করুন। লক্ষ্য রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যক রো এর জন্য ১২ পর্যন্ত হতে হবে।

নিচে কিছু বেসিক বুটস্ট্র্যাপ গ্রিড লেআউটের উদাহরণ দেয়া হলো।

তিনটি সমমাপের কলাম

.col-sm-4

নিচের উদাহরণে কিভাবে তিনটি সমমাপের কলাম পাওয়া যায় যেগুলোর ব্যবহার টেবলেট দিয়ে শুরু হয় এবং ডেস্কটপে বড় হয়ে যায় তা দেয়া হলো। মোবাইল ফোনে কলামগুলো স্তুপাকারে বিন্যস্ত হয়ে যাবেঃ

 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : তিনটি-সমমাপের-কলাম

দুইটি অসম কলাম

.col-sm-4

.col-sm-8

নিচের উদাহরণে কিভাবে দুইটি অসম মাপের কলাম পাওয়া যায় যেগুলোর ব্যবহার টেবলেট দিয়ে শুরু হয় এবং ডেস্কটপে বড় হয়ে যায় তা দেয়া হলোঃ

 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

ফলাফল : দুইটি-অসম-কলাম

টিপঃ এই টিউটোরিয়ালের পরবর্তী অধ্যায়গুলোতে বুটস্ট্র্যাপ গ্রিড সম্পর্কে আরও বিস্তারিতভাবে জানতে পারবেন।

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ শেখা শুরু করা যাক (Bootstrap Get Started)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Bootstrap কি ????

Bootstrap হল ফ্রি front-end framework, সহজ এবং দ্রুত গতির web development এর জন্য
Bootstrap হল HTML এবং CSS নির্ভর মুদ্রণবিদ্যা, ফর্ম, বাটন, টেবিল, নেভিগেটর, মডালস, ইমেজ carousels এবং আরও অনেক কিছু, জাভা স্ক্রিপ্ট প্লাগিন সহ ডিজাইন templates তরির মাধ্যম
Bootstrap এর সাহায্যে তুমি যে কোন Responsive ডিজাইন ও করতে পারবে

Responsive Web Design কি?

Responsive Web Design হল ওয়েব সাইট তৈরি, যা সংক্রিয় ভাবে যে কোন ডিভাইসের জন্য নিজেদের সেরাটা উপস্থাপন করে, সেটা মোবাইল থেকে শুরু করে যে কোন বড় কম্পিউটারই হোক না কেন ।

Bootstrap ইতিহাস

Bootstrap প্রতিষ্ঠা লাভ করে Mark Otto and Jacob Thornton এর Twitter এর হাত ধরে এবং এটা সর্ব সাধারনের জন্য উন্মুক্ত করে দেয়া হয় August 2011 on GitHub ।

২০১৪ সালে এটা GitHub এর ১ নাম্বার প্রজেক্ট হিসাবে খ্যাতি লাভ করে ।

কেন Bootstrap ব্যবহার করবেন ?

Bootstrap এর উপকারিতাঃ

সহজলভ্যতাঃ HTML এবং CSS এর ব্যসিক ধারনা থাকলে যে কেউ Bootstrap ব্যবহার করা শুরু করতে পারেন
উল্লেখযোগ্য বৈশিস্টঃ Bootstrap's responsive CSS মোবাইল, ট্যাব্লেট এবং ডেস্কটপের সাথে মানিয়ে নিতে পারে
Mobile-first approach: Bootstrap ৩ তে ব্যবহার করা হয়েছে core framework
ব্রাউজার উপযুক্ততা: Bootstrap বর্তমানে সকল ব্রাজারে কাজ করতে পারে

কোথায় Bootstrap পাওয়া যাবে ??

দুইটা উপায়ে Bootstrap ব্যবহার শুরু করা যায়

getbootstrap.com থেকে Bootstrap ডাউনলোড করে
CDN থেকেও Bootstrap করা যায়

ডাউনলোড Bootstrap

আপনি যদি Bootstrap ডাউনলোড করতে চান তাহলে ভিসিট করুন getbootstrap.com এবং নিয়মাবলি অনুসরণ করুন।

Bootstrap CDN

আপনি যদি Bootstrap ডাউনলোড করতে না চান তাহলে আপনি CDN ( Content Delivery Network ) এর সাথে যুক্ত হতে পারেন।

Bootstrap's CSS and JavaScript এর জন্য CDN কে সহযোগিতা দেয় MaxCDN.

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.
min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap CDN ব্যবহারের একটি উপকারিতা

অন্যান্য সাইটে ভিজিট করার সময় অকেক ভিজিটর ইতিমধ্যেই MaxCDN থেকে Bootstrap ডাউনলোড করে ফেলেছে। এর ফলে তারা যখন আপনার সাইটে ভিজিট করে তখন cache থেকেই এটা লোড হয় যা আপনার সাইট দ্রুত লোড হওয়ার সহায়ক। অনেক CDN's নিশ্চিত করেছে যে, যখন তারা একটা ফাইলের জন্য আবেদন করে তখন এটা সবচেয়ে কাছের সার্ভার থেকে লোড হয়, এটাও আপনার সাইট দ্রুত কাজ করার সহায়ক।

Bootstrap দিয়ে আপনার প্রথম ওয়েব সাইট তৈরি করুন

1. doctype হিসেবে HTML5 যোগ করুন

Bootstrap; HTML এলিমেন্ট এবং CSS প্রোপার্টি ব্যবহার করে, ফলে এর জন্য দরকার হয় HTML5 doctype

সবসময় পেজের শুরুতে lang attribute এবং সঠিক character set সাথে HTML5 doctype ব্যবহার করুন।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 প্রথমত মোবাইল এর জন্য।

Bootstrap 3 ডিজাইন করা হয়েছে Responsive Mobile Devices এর জন্য । Mobile-first স্টাইল কোর ফ্রেমওয়ার্ক এর অংশ।

সঠিক পরিবেশনা এবং টাচ জুমিং নিশ্চিত করার জন্য <head> এলিমেন্টের ভিতরে নিম্নোক্ত <meta> যুক্ত করুন:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width অংশ ডিভাইস এর স্ক্রিন এর প্রসস্থতাকে অনুসরণ করে পেজ এর প্রসস্থতা নির্ধারণ করে (যা ডিভাইসের উপর নির্ভর করে পরিবর্তিত হয়)।

3. Containers বা ধারক

সাইটের উপাদানগুলো মোড়ানোর জন্য Bootstrap এর জন্য একটি ধারক এলিমেন্ট এর প্রয়োজন হয়।

এর জন্য দুই ধরনের ধারক রেয়েছে:

.container class টি fixed width container প্রদান করে
.container-fluid class টি full width container প্রদান করে। ভিউ পয়েন্টকে সাপেক্ষে প্রদত্ত প্রসস্থতাকে চক্রাকারে ঘুরানোর জন্য।

বি.দ্রঃ Containers প্রতিস্থাপন যোগ্য নহে ।

দুইটি সাধারণ Bootstrap পেজ

নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি fixed width ধারক পরিবেশনা):

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ফলাফল : একটি fixed width ধারক পরিবেশনা

নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি পূর্ণ প্রস্থ ধারক এর সাথে):

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ফলাফল : একটি পূর্ণ প্রস্থ ধারক এর সাথে

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

February 12, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

প্রতাপ চন্দ্র

বুটস্ট্র্যাপ হচ্ছে রেসপনসিভ ও মোবাইল-বান্ধব ওয়েবসাইট তৈরীর জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের সবচেয় জনপ্রিয় ফ্রেমওয়ার্ক। এটি সম্পূর্ণ বিনামূল্যে ডাউনলোড করে ব্যবহার করা যায়। বুটস্ট্র্যাপ ব্যবহার করে খুব সহজে দৃষ্টিনন্দন ও রেসপনসিভ ওয়েবসাইট তৈরী করা যায়।

বুটস্ট্র্যাপ শেখার জন্য আমরা ধারাবাহিক টিউটরিয়াল প্রকাশ করব যার মাধ্যমে ধাপে ধাপে আপনারা এই প্রযুক্তির মাধ্যমে ওয়েব ডিজাইন শিখতে পারবেন। তবে এই ফ্রেমওয়ার্ক ব্যবহার করতে গেলে বেসিক এইচটিএমএল এবং সিএসএস সম্পর্কে আপনার ধারণা থাকতে হবে।

নিচে বুটস্ট্র্যাপের মাধ্যমে ওয়েবসাইট তৈরীর একটি উদাহরণ দেয়া হলো:

 <div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

ফলাফল : বুটস্ট্র্যাপ ৩ টিউটোরিয়াল

উপরের উদাহরণে " Lorem ipsum dolor sit amet, consectetur adipisicing elit..." হচ্ছে বহুল পরিচিত ডামি টেক্সট। তিনটি আলাদা প্যারাগ্রাফ তৈরী করতে এই টেক্সটগুলো ব্যবহার করা হয়েছে। বুটস্ট্র্যাপের মাধ্যমে তৈরী করা এই পেজটির আকার পরিবর্তন করলে দেখতে পাবেন কোনো স্ক্রলবার আসছে না এবং স্বয়ংক্রিয়ভাবে নিজের আদল বদলে ফেলছে।

Root

ওয়ার্ডপ্রেস সাইটকে দুই কলাম লেআউট থেকে তিন কলাম লেআউট-এ পরিবর্তন করুন । Change two columns layout to three columns layout for WordPress sites

February 12, 2015 Sayed

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল ব্যবহার করে টেবিল সাজানো ।

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল ব্যবহার করে টেবিল সাজানো ।

লেখাঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

আজ আমরা জেকয়েরি মোবাইল ব্যবহার করে রেস্পন্সিভ টেবিল বানানো শিখবো যা সকল সাইজের স্ক্রীনে ভালভাবে সাপোর্ট করবে ।

রেস্পন্সিভ টেবিল(Responsive Tables):

আপনি যখন আপনার সাইটের সকল পেজের সব কন্টেন্টকে সকল প্রকার ডিভাইসে দেখাতে চান তখন রেস্পন্সিভ ডিজাইন খুব কার্যকরী হবে ।

শুধু একটা সাধারন ক্লাসের নাম জেকোয়েরি মোবাইলকে সকল সাইজের স্ক্রীনের ডিভাইসকে তার কনটেন্টগুলোকে সমানভাবে দেখাতে সাহায্য করবে ।

রেস্পন্সিভ টেবিল অনেক বড় সাইজের টেবুলার ডাটা গুলোকে মোবাইল এবং কম্পিউটার ডিভাইস উভয়তে অনেক আকর্ষণীয়ভাবে দেখাতে অনুমতি দেয় ।

দুই ধরণের রেস্পন্সিভ টেবিল আছে । reflow এবং column toggle.

১। Reflow Table:

এটা ডাটাকে যতদূর পারে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।

একটি টেবিল তৈরি করে <table> এলিমেন্টের সাথে data-role="table" এবং "ui-responsive" ক্লাস যোগ করা হয় ।

রেস্পন্সিভ টেবিলকে ভালভাবে কাজ করাতে হলে আপনাকে অবশ্যই এবং এলিমেন্ট যোগ করতে হবে । rowspan অথবা colspan এট্রিবিউট যোগ করা যাবে না । কারণ তারা রেস্পন্সিভ টেবিলে সাপোর্ট করে না ।

২। Column Toggle Table:

এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।

column toggle table তৈরি করতে হলে নিচের মত করে <table> এলিমেন্ট এর সাথে যোগ করতে হবে ।

ডিফল্টভাবে জেকোয়েরি মোবাইল ডান দিকের টেবিলগুলো ঢেকে রাখে । আপনি চাইলে কখন কোন কলাম(column) বা ফিল্ড(field) দেখা যাবে বা কোনটা কখন ঢেকে যাবে তা নির্দেশ করে দিতে পারেন । টেবিলের হেডারের সাথে data-priority এট্রিবিউট যোগ করতে হবে এবং ১ থেকে ৬ এর ভিতর একটা নাম্বার নির্দেশ করে দিতে হবে ।

<th>I will never be hidden</th>

<th data-priority="1">I am very important - I will probably not be hidden</th>

<th data-priority="3">I am less important - I could be hidden</th>

<th data-priority="5">I am not that important - there is a good chance that I will be hidden</th>

আপনি যদি কলাম নাম্বার উল্লেখ করে না দেন তাহলে ঐ কলামটি আর ঢাকবে না ।

নিচের কোডগুলোকে একসাথে রেখে আপনি একটা column toggle table তৈরি করতে পারেন । এই ফ্রেমওয়ার্ক টেবিলের আগে ডানপাশে একটা বাটন তৈরি করবে যার মাধ্যমে ব্যবহারকারীরা তাদের পছন্দমত টেবিল ঢেকে রাখতে পারবে ।

<thead>

<tr>

<th data-priority="6">CustomerID</th>

<th>CustomerName</th>

<th data-priority="1">ContactName</th>

<th data-priority="2">Address</th>

<th data-priority="4">PostalCode</th>

<th data-priority="5">Country</th>

</tr>

</thead>

<tbody>

<tr>

Alfreds Futterkiste

<td>Maria Anders</td>

Obere Str. 57

<td>Berlin</td>

<td>Germany</td>

</tr>

</tbody>

</table>

toggle table বাটনের লেখাকে পরিবর্তন করতে হলে data-column-btn-text এট্রিবিউট যোগ করতে হবে ।

টেবিলকে স্টাইলিশ করা(Styling Tables):

শ্যাডো যোগ করা(Add shadow):

টেবিলকে শ্যাডো দিতে "ui-shadow" ক্লাস ব্যবহার করতে হবে ।

সকল টেবিলের সারির নিচে রেখার সাহায্যে সীমা যোগ করা(Add a bottom border to all table rows):

<style>

tr {

border-bottom: 1px solid #d6d6d6;

}

</style>

সকল এলিমেন্ট এবং ব্যাকগ্রাউন্ডের রেখার সীমা যোগ করা(Add a bottom border to all elements and a background color to all even table rows):

<style>

th {

border-bottom: 1px solid #d6d6d6;

}

tr:nth-child(even) {

background: #e9e9e9;

}

</style>

এভাবে খুব সহজে আপনি টেবিলকে নিজের মত করে সাজাতে এবং ডিজাইন করতে পারবেন । এজন্য জেকোয়েরি মোবাইলের ব্যবহার সবচাইতে বেশি ।

http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp

jQuery-001 । জে কুয়েরি - ০০১

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery – Get and Set CSS Classes) ।

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery - Get and Set CSS Classes) ।

লেখাঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবর্তন করবো যেমন নতুন css class যোগ করা।

জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery Manipulating CSS):

সিএসএস পরিচালনা করার জন্য জেকোয়েরি এর কয়েকটি পদ্ধতি আছে । আমরা এর ভিতর নিচের পদ্ধতি গুলো অনুসরণ করবো ।

১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।

২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।

৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।

৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।

স্টাইলশিট এর উদাহরণঃ

নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

১। jQuery addClass() Method:

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর সাথে কিভাবে ক্লাস এট্রিবিউটস যোগ করতে হয় । যখন ক্লাস যোগ করা হয় তখন অবশ্যই আপনি অনেকগুলো এলিমেন্টস একসাথে নির্বাচন করতে পারবেন ।

$("button").click(function(){

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।

$("button").click(function(){

$("#div1").addClass("important blue");

});

২। jQuery removeClass() Method:

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।

$("button").click(function(){

$("h1,h2,p").removeClass("blue");

});

৩। jQuery toggleClass() Method:

নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।

$("button").click(function(){

$("h1,h2,p").toggleClass("blue");

});

৪। jQuery css() Method:

এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।

তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।

http://www.w3schools.com/jquery/jquery_css_classes.asp

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (jQuery Mobile Popups)

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (jQuery Mobile Popups)

লেখাঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

জেকোয়েরি মোবাইল দিয়ে আপনার মনের মত করে একটি ওয়েব সাইটের সব কিছুই তৈরি করে সাজাতে পারবেন । আজ আমি জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা শিখাবো ।

জেকোয়েরি মোবাইল পপ-আপ(jQuery Mobile Popups):

পপ-আপ গুলো ডায়ালগ বক্সের মত একই রকম দেখতে । এই পপ-আপ আর ডায়ালগ বক্স দুটোই একটি ওয়েবপেজের অবিচ্ছেদ্য অংশ । কোনো ম্যাসেজ বা লেখা, ছবি, ম্যাপ, ফেসবুক লাইক বক্স অথবা অন্যন্য কনটেন্ট দেখানোর জন্য পপ-আপ খুবই গুরুত্বপূর্ণ ।

একটি পপ-আপ তৈরির জন্য আপনাকে <a> element এবং <div> element নিয়ে শুরু করতে হবে । <a> এলিমেন্টের সাথে data-rel="popup" এট্রিবিউট যোগ করতে হবে এবং <div> এলিমেন্টের সাথে data-role="popup" এট্রিবিউট যোগ করতে হবে । তারপর <div> এর জন্য একটি আইডি ঠিক করতে হবে । তারপর href কে <a> এর সাথে ঐ একই আইডিতে যোগ করতে হবে । তারপর <div> এর সাথের উপাদানগুলো হবে আসল কনটেন্ট । যখন ইউজার লিংকে ক্লিক করবে তখন পপ-আপ হয়ে ঐ কন্টেন্টকে দেখাবে ।

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

<p>This is a simple popup.</p>

</div>

মনে রাখবেন, লিংকের সাথে একই ওয়েবপেজে অবশ্যই <div>কে থাকতে হবে ।

আপনি যদি অতিরিক্ত প্যাড বা মার্জিন চান তাহলে <div> এর সাথে "ui-content" ক্লাস ব্যবহার করতে হবে ।

পপ-আপ ক্লোজ(Closing Popups):

ডিফল্টভাবে পপ-আপের বাইরে ক্লিক করলে অথবা "Esc" বাটন চাপলে পপ-আপ ক্লোজ হয় । আপনি যদি এটা বন্ধ করতে চান তাহলে পপ-আপের সাথে data-dismissible="false" এট্রিবিউট যোগ করতে হবে । আপনি যদি পপ-আপের বামে অথবা ডানে পপ-আপ ক্লোজ বাটন যোগ করতে চান তাহলে আপনাকে data-rel="back" এট্রিবিউট যোগ করতে

হবে এবং সিএসএস ক্লাস দিয়ে একে পজিশন করতে হবে ।

১। Right close button

২। Left close button

৩। Undismissible Popup

পপ-আপের পজিশন করা(Positioning Popups):

ডিফল্টভাবে ক্লিক করলে তার সাথেই পপ-আপ দেখায় । একে নিজের মত করে দেখাতে ঐ লিংকের সাথে data-position-to attribute এট্রিবিউট যোগ করতে হবে । আপনি তিনভাবে এট্রিবিউট যোগ করে এটা করতে পারবেন ।

এট্রিবিউট ১ঃ data-position-to="window"

বর্ণনাঃ পপ-আপ ডিসপ্লের মাঝামাঝি ওপেন হবে ।

এট্রিবিউট ২ঃ data-position-to="#myId"

বর্ণনাঃ পপ-আপ একটি সিলেক্ট করা আইডির উপর ওপেন হবে ।

এট্রিবিউট ৩ঃ data-position-to="origin"

বর্ণনাঃ এটা ডিফল্ট । ক্লিক করা এলিমেন্টের উপর ওপেন হবে ।

উদাহরণঃ

<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>

<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>

ট্রানজিশনস(Transitions):

ডিফল্টভাবে পপ-আপে কোনো ট্রানজিশন ইফেক্ট দেয়া থাকে না । আপনি আপনার নিজের মত করে আগের ট্রানজিশনে বলা যেকোনো একটা ইফেক্ট ব্যবহার করতে পারেন । শুধু data-transition="value" এট্রিবিউট এর লিংকের সাথে যোগ করে দিলেই হবে ।

পপ-আপ অ্যারো(Popup Arrows):

পপ-আপ অ্যারো ব্যবহারের জন্য data-arrow attribute যোগ করতে হবে এবং "l" (left), "t" (top), "r" (right) অথবা "b" (bottom) এর যেকোনো একটা মান উল্লেখ করে দিতে হবে ।

<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>

<p>There is an arrow on my LEFT border.</p>

</div>

পপ-আপ ডায়ালগ(Popup Dialogs):

হেডার, ফুটার অথবা কন্টেন্টে আপনি পপ-আপ ডায়ালগ বা টেক্সট যোগ করতে পারবেন ।

<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog Popup</a>

<div data-role="header"><h1>Header Text..</h1></div>

<div data-role="main" class="ui-content"><p>Some text..</p><a href="#">some links..</a>

<div data-role="footer"><h1>Footer Text..</h1></div>

</div>

ছবির পপ-আপ(Popup Photos):

আপনি ইচ্ছা করলে ছবিও পপ-আপ হিসেবে যোগ করতে পারবেন ।

</div>

আপনি কয়েকটি ছবি একসাথে দেখাতে পারবেন । কিন্তু ৫০০ ছবির অ্যালবাম একসাথে পপ-আপে দেখাতে পারবেন না ।

তাহলে দেখলেন তো পপ-আপ তৈরি কত সহজ । এবার ভালভাবে প্র্যাকটিস করে পপ-আপকে আরো সুন্দর করে কাস্টোমাইজ করুন ।

http://www.w3schools.com/jquerymobile/jquerymobile_popups.asp

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(jQuery Mobile Forms) ।

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(jQuery Mobile Forms) ।

লেখাঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

প্রতিদিন আমরা জেকোয়েরি মোবাইলের নতুন একেকটি বিষয় শিখছি , আজ আমাদের শেখার বিষয় হলো জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো ।

জেকোয়েরি মোবাইল এইচটিএমএল ফর্মকে স্টাইল করে আরো আকর্ষণীয় এবং টাচকে আরো উন্নত করে তোলে ।

জেকোয়েরি মোবাইলের ফর্মের গঠন(jQuery Mobile Form Structure):

জেকোয়েরি মোবাইল সিএসএস ব্যবহার করে এইচটিএমএল এলিমেন্টস গুলোকে আরো আকর্ষণীয় এবং ব্যবহারে খুব সহজ করে তোলে ।

জেকোয়েরি মোবাইলে আপনি নিচের কনট্রোল গুলো ব্যবহার করতে পারবেন ।

Text Inputs
Search Inputs
Radio Buttons
Checkboxes
Select Menus
Sliders
Flip Toggle Switches

যখন আপনি জেকোয়েরি মোবাইল ফর্ম নিয়ে কাজ করবেন তখন আপনার নিচের বিষয়গুলো অবশ্যই মনে রাখতে হবে ।

১। <form> এলিমেন্ট অবশ্যই একটি মেথড এবং এটা একটি কার্যকরী এট্রিবিউট(action attribute) ।

২। সকল ফর্মের একটি স্বতন্ত্র আইডি নাম্বার থাকবে । সাইটের সকল পেজে এই আইডি গুলো স্বতন্ত্রভাবে আড়াআড়ি থাকবে । কারণ জেকোয়েরি মোবাইলের সিঙ্গেল পেজ নেভিগেশন মডেলে(jQuery Mobile's single-page navigation model) একই সাথে অনেক পেজকে একসাথে রাখে ।

৩। সকল ফর্ম এট্রিবিউটের একটি করে অবশ্যই লেবেল থাকবে । লেবেলের আইডি কে এলিমেন্টের আইডির সাথে মেলানোর জন্য for attribute ব্যবহার করতে হয় ।

উদাহরণঃ

<label for="fname">First name:</label>

</form>

আপনি ইচ্ছা করলে ফর্মের সাথে placeholder ট্যাগ ব্যবহার করে কিছু সংকেত বা সাহায্যপূর্ণ ইঙ্গিত রাখতে পারেন ।

<label for="fname">First name:</label>

লেবেল ঢেকে রাখার জন্য "ui-hidden-accessible" ক্লাস ব্যবহার করতে পারেন । এটা মাঝে মাঝে দরকার হতে পারে ।

<label for="fname class="ui-hidden-accessible"">First name:</label>

আপনি যদি একটি ক্লিয়ার বাটন চান তাহলে data-clear-btn="true" এট্রিবিউট ব্যবহার করতে পারেন ।

<label for="fname">First name:</label>

এই ক্লিয়ার বাটন বাদে সকল <<span class="hiddenSuggestion" pre="" data-mce-bogus="1">input</span>> এলিমেন্টে যোগ করা যায় । সার্চ ফিল্ডে এটা ডিফল্টভাবে "true" এট্রিবিউটে থাকে । আপনি data-clear-btn="false" ব্যবহার করে একে পরিবর্তন করতে পারেন ।

জেকোয়েরি মোবাইল ফর্ম বাটন(jQuery Mobile Form Buttons):

ফর্মের বাটনগুলো এইচটিএমএল <input> এলিমেন্টস দ্বারা কোড করা হয়ে থাকে । তারা স্বয়ংক্রিয়ভাবে ডিজাইন করা থাকে । আপনি একে খুব সহজে আকর্ষণীয় এবং ডেস্কটপ এবং মোবাইলে সহজভাবে ব্যবহারের জন্য সাজাতে পারেন ।

আপনি <input> বাঁটনকে নিচের লিস্ট থেকে data-* এট্রিবিউট ব্যবহার করে আরো সুন্দরভাবে ডিজাইন করতে পারেন ।

এট্রিবিউটঃ data-corners

মানঃ true | false

বর্ণনাঃ বাটনের কোণা গুলো গোলাকার হবে কিনা তা নির্দেশ করে ।

এট্রিবিউটঃ data-icon

মানঃ Icons Reference

বর্ণনাঃ বাটনের আইকনকে নির্দেশ করে ।

এট্রিবিউটঃ data-iconpos

মানঃ left | right | top | bottom | notext

বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।

এট্রিবিউটঃ data-inline

মানঃ true | false

বর্ণনাঃ বাটন কি একই লাইনে হবে কিনা তা নির্দেশ করে ।

এট্রিবিউটঃ data-mini

মানঃ true | false

বর্ণনাঃ বাটনের আকার কেমন হবে তা নির্দেশ করে ।

এট্রিবিউটঃ data-shadow

মানঃ true | false

বর্ণনাঃ বাটনে ছায়া(shadow) থাকবে কিনা তা নির্দেশ করে ।

উপরের মোটা অক্ষরের মান গুলো ডিফল্টভাবে থাকবে ।

আপনার চাওয়া মতে নিচের এট্রিবিউট গুলো যোগ করতে পারেন ।

ফিল্ড কন্টেইনার(Field Containers) :

লেবেল এবং ফর্মের উপাদানগুলোকে চওড়া স্ক্রীনে(wider screen) দেখানোর জন্য লেবেলের বা ফর্মের চারিদিকে <div> অথবা <fieldset> এর সাথে "ui-field-contain" ক্লাস যোগ করতে হবে ।

<label for="fname">First name:</label>

</div>

</form>

এটা পেজের চওড়ার(width) উপর নির্ভর করে দেখাবে । 480px এর উপর বা নিচে হলে পরিবর্তন করে দেখাবে ।

জেকোয়েরি মোবাইল যাতে ক্লিক করা এলিমেন্টগুলোকে স্টাইল না করে এজন্য আপনাকে data-role="none" এট্রিবিউট ব্যবহার করতে হবে ।

<label for="fname">First name:</label>

জেকোয়েরি মোবাইলে ফর্ম সাবমিশন করা(Form submission in jQuery Mobile) :

জেকোয়েরি মোবাইল অ্যাজাক্স ব্যবহার করে স্বয়ংক্রিয়ভাবে ফর্ম সাবমিশন নিয়ন্ত্রণ করতে পারে । সার্ভারের রেসপন্স অনুসারে অ্যাপ্লিকেশনের DOM কে নিয়ন্ত্রণ করতে পারে ।

তাহলে আমরা কিন্তু জেকোয়েরি ব্যবহার করে একটি ফর্মকে কিভাবে সাজাতে হয় তা শিখে ফেললাম । এরপর আমরা যখন জেকোয়েরিতে আরো বেশি এক্সপার্ট হয়ে যাবো তখন ফর্মকে আমাদের মনের মত করে আরো সুন্দর করে কাস্টোমাইজ করতে পারবো ।

http://www.w3schools.com/jquerymobile/jquerymobile_form_basic.asp

jQuery-001 । জে কুয়েরি - ০০১

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

কেমন আছেন সবাই ? আজ আমি আপনাদের সাথে জেকোয়েরি অ্যাজাক্স মেথডস সম্পর্কে আলোচনা করবো ।

জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods):

অ্যাজাক্স হলো এমন একটা কৌশল যা পুরো পেজ রিলোড না করে সার্ভারের সাথে ডাটা ট্রান্সফার করে একটি ওয়েব পেজকে আপডেট করে ।

আমরা যখন ফেসবুক ব্যবহার করি তখন যখন নিচের দিকে নামি তখন অ্যাজাক্স কিন্তু পেজটা রিলোড না করে পরের পোস্টগুলো দেখায় ।

তাহলে আসুন আমরা অ্যাজাক্স এর সকল মেথড গুলো শিখে ফেলি ।

মেথডঃ $.ajax()

মেথডের বর্ণনাঃ async AJAX রিকোয়েস্ট সম্পাদন করে ।

মেথডঃ $.ajaxPrefilter()

মেথডের বর্ণনাঃ যখন একটা রিকোয়েস্ট পাঠানো হয় $.ajax() প্রসেস করার আগে তখন কাস্টম অ্যাজাক্স অপশনগুলো নিয়ন্ত্রণ করে অথবা আগের অপশনগুলোকে সংশোধন করে ।

মেথডঃ $.ajaxSetup()

মেথডের বর্ণনাঃ ভবিষ্যতের অ্যাজাক্স রিকোয়েস্ট এর জন্য ডিফল্ট ভেলু গুলো ঠিক করা হয় ।

মেথডঃ $.ajaxTransport()

মেথডের বর্ণনাঃ একটি অবজেক্ট তৈরি করা হয় যা অ্যাজাক্স ডাটার পরিবর্তন নিয়ন্ত্রণ করতে পারে ।

মেথডঃ $.get()

মেথডের বর্ণনাঃ AJAX HTTP GET request সার্ভার থেকে ডাটা লোড নেয় ।

মেথডঃ $.getJSON()

মেথডের বর্ণনাঃ AJAX HTTP GET request সার্ভার থেকে JSON-encoded ডাটা লোড নেয় ।

মেথডঃ $.getScript()

মেথডের বর্ণনাঃ AJAX HTTP GET request সার্ভার থেকে জাভাস্ক্রীপ্ট লোড নেয় ।

মেথডঃ $.param()

মেথডের বর্ণনাঃ কোনো অবজেক্টের শ্রেণীবিন্যাস করে তার সিরিয়ালি প্রদর্শন করে ।

মেথডঃ $.post()

মেথডের বর্ণনাঃ AJAX HTTP POST request সার্ভার থেকে ডাটা লোড নেয় ।

মেথডঃ ajaxComplete()

মেথডের বর্ণনাঃ যখন অ্যাজাক্স রিকোয়েস্ট পূরণ হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । কোন ফাংশন চালাবে সেটা আপনি নির্দেশ করে দিতে পারবেন ।

মেথডঃ ajaxError()

মেথডের বর্ণনাঃ যখন অ্যাজাক্স রিকোয়েস্ট এরর দেখিয়ে সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এখানে পরের ফাংশনের কাজ শুরু করে দেয় ।

মেথডঃ ajaxSend()

মেথডের বর্ণনাঃ যখন অ্যাজাক্স রিকোয়েস্ট পাঠানোর আগে একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এই ফাংশনটা হতে পারে আপনার নির্দেশ করা কোনো ফাংশন ।

মেথডঃ ajaxStart()

মেথডের বর্ণনাঃ যখন প্রথম অ্যাজাক্স রিকোয়েস্ট শুরু হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় ।এই ফাংশনটা হতে পারে আপনার নির্দেশ করা কোনো ফাংশন ।

মেথডঃ ajaxStop()

মেথডের বর্ণনাঃ যখন সকল অ্যাজাক্স রিকোয়েস্ট সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । রিকোয়েস্ট সম্পন্ন হলে এরপর কোন ফাংশন চালিত হবে তা আপনি নির্দেশ করে দিতে পারেন অথবা এর আগের ফাংশনের রিকোয়েস্ট গুলো চেক করবে ।

মেথডঃ ajaxSuccess()

মেথডের বর্ণনাঃ যখন সকল অ্যাজাক্স রিকোয়েস্ট সফলভাবে সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এই ফাংশনটা হতে পারে আপনার দেখানো কোনো ম্যাসেজ অথবা টেক্সট ।

মেথডঃ load()

মেথডের বর্ণনাঃ সার্ভার থেকে ডাটা লোড নেয় এবং সেই ডাটা সিলেক্টেড এলিমেন্টে পাঠায় ।

মেথডঃ serialize()

মেথডের বর্ণনাঃ অনেকগুলো এলিমেন্ট থেকে ডাটা সংগ্রহ করে ফর্ম আকারে সিরিয়ালি তা সাবমিট করে ।

মেথডঃ serializeArray()

মেথডের বর্ণনাঃ ফর্মের উপাদান থেকে নাম এবং ভেলু গুলোকে সংগ্রহ করে সিরিয়াল করে সাজায় । আপনি যেভাবে নির্দেশ করবেন সেভাবে এটা নাম এবং মানগুলোকে সিরিয়াল করবে । হতে পারে সেটা বড় মান থেকে ছোট মান অথবা ছোট থেকে বড় । নামের ক্ষেত্রেও কিন্তু তেমন A থেকে Z অথবা Z থেকে A তে সাজাতে পারবে ।

খুব মজার কিন্তু । আর এর ভিতরেই আমরা কিন্তু খুব সহজে জেকোয়েরি অ্যাজাক্সের সকল মেথড গুলো শিখে ফেললাম ।

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস
লেখকঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

কি খবর সবার? জেকোয়েরি কেমন শিখছেন ? নিশ্চয় ভালো । আর তাই আজ আমি আপনাদের সাথে জেকোয়েরি মোবাইলের সকল ডাটা এট্রিবিউটস গুলো নিয়ে আলোচনা করবো ।

জেকোয়েরি ডাটা এট্রিবিউটস(jQuery Data Attributes)ঃ

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

বাটন(Button) এট্রিবিউটসঃ

সিএসএস ক্লাস সাধারণত data-role="button" হাইপারলিংক দ্বারা যুক্ত হয়ে থাকে । ইনপুটের জায়গায় এবং টুলবারের বাটনের উপাদানগুলো এবং লিংক গুলো স্বয়ংক্রিয়ভাবে বাটনের স্টাইল ডিজাইন করা থাকে তাই এতে data-role="button" এট্রিবিউটসের দরকার নাই ।

ডাটা এট্রিবিউটঃ data-corners

ভেলুঃ     true | false

বর্ণনাঃ বাটনগুলোর চারিদিকে কি গোলাকার কোণা থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এটা true ভেলুতে থাকে ।

ডাটা এট্রিবিউটঃ data-icon

ভেলুঃ Icons Reference

বর্ণনাঃ আইকন কেমন হবে তা নির্দেশ করে । ডিফল্টভাবে কোনো আইকন থাকে না ।

ডাটা এট্রিবিউটঃ data-iconpos

ভেলুঃ left | right | top | bottom | notext

বর্ণনাঃ আইকনের পজিশন দেখায় । ডিফল্টভাবে এটা বাম দিকে থাকে ।

ডাটা এট্রিবিউটঃ data-iconshadow

ভেলুঃ true | false

বর্ণনাঃ আইকনগুলোতে ছায়া(shadow) থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এতে ছায়া দেয়া থাকে ।

ডাটা এট্রিবিউটঃ data-inline

ভেলুঃ true | false

বর্ণনাঃ বাটনগুলো একই লাইনে থাকবে কি না তা দেখায় । ডিফল্টভাবে এরা একই লাইনে থাকে না ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ বাটনগুলোর আকার কেমন হবে এটা তা দেখায় । এটার আকার ডিফল্টভাবে বলে দেয়া থাকে না ।

ডাটা এট্রিবিউটঃ data-shadow

ভেলুঃ     true | false

বর্ণনাঃ বাটনগুলোতে ছায়া(shadow) থাকবে কি থাকবে না তা নির্দেশ করে । ডিফল্টভাবে এতে ছায়া দেয়া থাকে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ   letter (a-z)

বর্ণনাঃ থিমের রঙ কি হবে এটা তা নির্দেশ করে ।

একই গ্রুপের অনেকগুলো বাঁটনকে data-role="controlgroup" এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type="horizontal|vertical" এট্রিবিউট দ্বারা নির্দেশ করা হয় বাটনগুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।

চেকবক্স(Checkbox) এট্রিবিউটসঃ

type="checkbox" দ্বারা লেবেলগুলোর জোড়াকে নির্দেশ করা হয় ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ চেকবক্স কি ছোট সাইজের হবে নাকি নিয়মিত আকারের হবে তা নির্দেশ করে । এটার আকার ডিফল্টভাবে বলে দেয়া থাকে না ।

ডাটা এট্রিবিউটঃ data-role

ভেলুঃ none

বর্ণনাঃ চেকবক্সকে যাতে জেকোয়েরি মোবাইল বাটনের স্টাইল না দিতে পারে এটা তা প্রতিরোধ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ চেকবক্সের থিমের রঙ কি হবে এটা তা নির্দেশ করে ।

কলাপসিবল(Collapsible) এট্রিবিউটসঃ

হেডারের উপাদানে data-role="collapsible" দ্বারা এটি যুক্ত হয়ে থাকে ।

ডাটা এট্রিবিউটঃ data-collapsed

ভেলুঃ true | false

বর্ণনাঃ উপাদান গুলো কি বিস্তৃত থাকবে কি থাকবে না তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-collapsed-cue-text

ভেলুঃ sometext

বর্ণনাঃ এটাতে স্ক্রীন রিডার সফটওয়ারের সাহায্যে ব্যবহারকারীদের একটা লেখা দেখায় যে তাদের কি করতে বলা হচ্ছে । ডিফল্টভাবে এতে "click to collapse contents" লেখা থাকে ।

ডাটা এট্রিবিউটঃ data-collapsed-icon

ভেলুঃ Icons Reference

বর্ণনাঃ বাটনগুলো বিস্তৃত না থাকলে কলাপসিবল বাটনের আইকন কেমন হয় তা দেখায় । ডিফল্টভাবে (+) আইকন থাকে ।

ডাটা এট্রিবিউটঃ data-content-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ কলাপসিবল উপাদানের থিমের রঙ নির্দেশ করা হয় । আমরা ইচ্ছা করলে চারপাশে গোলাকার কোণা যোগ করে দিতে পারি ।

ডাটা এট্রিবিউটঃ data-expanded-cue-text

ভেলুঃ sometext

বর্ণনাঃ এটাতে স্ক্রীন রিডার সফটওয়ারের সাহায্যে ব্যবহারকারীদের একটা লেখা দেখায় যে তাদের কি করতে বলা হচ্ছে । ডিফল্টভাবে এতে "click to expand contents" লেখা থাকে ।

ডাটা এট্রিবিউটঃ data-expanded-icon

ভেলুঃ Icons Reference

বর্ণনাঃ বাটনগুলো বিস্তৃত থাকলে কলাপসিবল বাটনের আইকন কেমন হয় তা দেখায় । ডিফল্টভাবে (-) আইকন থাকে ।

ডাটা এট্রিবিউটঃ data-iconpos

ভেলুঃ left | right | top | bottom

বর্ণনাঃ আইকনের পজিশন দেখায় ।

ডাটা এট্রিবিউটঃ data-inset

ভেলুঃ true | false

বর্ণনাঃ কলাপসিবল বাটনের কিভাবে স্টাইল করা থাকবে তা নির্দেশ করে দেয় ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ কলাপসিবল বাটনের আকার কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ কলাপসিবল বাটনের থিমের রঙ উল্লেখ করে ।

কলাপসিবল সেট(Collapsible Set) এট্রিবিউটসঃ

data-role="collapsibleset" কন্টেইনারের মাধ্যমে এটি কলাপসিবল কন্টেন্ট ব্লকে যুক্ত হয় ।

ডাটা এট্রিবিউটঃ data-collapsed-icon

ভেলুঃ Icons Reference

বর্ণনাঃ কলাপসিবল বাটনের আওকন নির্দেশ করে । ডিফল্টভাবে এটি (+) আকারে থাকে ।

ডাটা এট্রিবিউটঃ data-content-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ কলাপসিবল কন্টেন্টের থিমের রঙ দেখায় ।

ডাটা এট্রিবিউটঃ data-expanded-icon

ভেলুঃ Icons Reference

বর্ণনাঃ উপাদানগুলো বিস্তৃত থাকলে কেমন দেখাবে তা নির্দেশ না করে । ডিফল্টভাবে (-) আকারে থাকে ।

ডাটা এট্রিবিউটঃ data-iconpos

ভেলুঃ left | right | top | bottom | notext

বর্ণনাঃ আইকনের পজিশন দেখায় ।

ডাটা এট্রিবিউটঃ data-inset

ভেলুঃ    true | false

বর্ণনাঃ কলাপসিবল সেটগুলো কিভাবে স্টাইল করা হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ কলাপসিবল বাটনের আকার কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ কলাপসিবল সেটের থিমের রঙ উল্লেখ করে ।

কনটেন্ট(Content) এট্রিবিউটসঃ

এটি data-role="content" এট্রিবিউট দ্বারা যুক্ত থাকে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ কনটেন্ট গুলোর থিমের রঙ উল্লেখ করে ।

কনট্রোল গ্রুপ(Controlgroup) এট্রিবিউটসঃ

<div> অথবা <fieldset> এর সাথে এটি data-role="controlgroup" আকারে যুক্ত হয়ে থাকে ।

ডাটা এট্রিবিউটঃ data-exclude-invisible

ভেলুঃ true | false

বর্ণনাঃ কনট্রোল গ্রুপে অদৃশ্যমান সাব গ্রুপকে কিভাবে বিস্তৃত হবে তা বলে দেয় ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ গ্রুপের আকার কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ কনট্রোল গ্রুপের থিমের রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-type

ভেলুঃ horizontal | vertical

বর্ণনাঃ গ্রুপগুলো কি আড়াআড়িভাবে নাকি লম্বালম্বিভাবে দেখাবে তা নির্দেশ করে ।

ডায়লগ(Dialog) এট্রিবিউটঃ

এটি data-dialog="true" কন্টেইনার দ্বারা যুক্ত হবে ।

ডাটা এট্রিবিউটঃ data-close-btn

ভেলুঃ left | right | none

বর্ণনাঃ ক্লোজ বাটনের পজিশন নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-close-btn-text

ভেলুঃ sometext

বর্ণনাঃ ক্লোজ বাটনের জন্য কি লেখা দেখাবে তা এটা নির্দেশ করবে ।

ডাটা এট্রিবিউটঃ data-corners

ভেলুঃ true | false

বর্ণনাঃ ডায়ালগে কি গোলাকার কোণা থাকবে কি থাকবে না তা নির্দেশ করবে ।

ডাটা এট্রিবিউটঃ data-dom-cache

ভেলুঃ true | false

বর্ণনাঃ প্রত্যেক পেজে কি jQuery DOM cache পরিষ্কার হবে কিনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-overlay-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ ডায়ালগ পেজের ব্যাকগ্রাউন্ড রঙ নির্দেশ করবে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ   letter (a-z)

বর্ণনাঃ ডায়ালগ পেজের থিমের রঙ নির্দেশ করবে ।

ডাটা এট্রিবিউটঃ data-title

ভেলুঃ sometext

বর্ণনাঃ ডায়ালগ পেজের টাইটেল কি হবে তা নির্দেশ করবে।

ইনহেন্সমেন্ট(Enhancement) এট্রিবিউটঃ

এটি data-enhance="false" অথবা data-ajax="false" যুক্ত কন্টেইনার ।

ডাটা এট্রিবিউটঃ data-enhance

ভেলুঃ    true | false

বর্ণনাঃ এটি যদি true ভেলুতে থাকে তাহলে জেকোয়েরি মোবাইল এর স্টাইল স্বয়ংক্রিয়ভাবে করে দিবে । আর যদি ভেলু false থাকে তাহলে ফ্রেমওয়ার্ক পেজের স্টাইল করবে না । মনে রাখতে হবে data-enhance="false" অবশ্যই $.mobile.ignoreContentEnabled=true" এর সাথে যুক্ত থাকতে হবে তা না হলে স্টাইল স্বয়ংক্রিয়ভাবে করে দিবে না ।

ডাটা এট্রিবিউটঃ data-ajax

ভেলুঃ true | false

বর্ণনাঃ পেজগুলো কি অ্যাজাক্স দ্বারা লোড নিবে কি নিবেনা তা নির্দেশ করে ।

ফিল্ড কন্টেইনার(Field Container) এট্রিবিউটঃ

এটি data-role="fieldcontain" কন্টেইনারের সাথে যুক্ত হয়ে থাকে ।

ফিক্সড টুলবার(Fixed Toolbar) এট্রিবিউটঃ

এটি কন্টেইনারের সাথে data-role="header" অথবা data-role="footer" একসাথে data-position="fixed এট্রিবিউটের সাথে যুক্ত হয় ।

ডাটা এট্রিবিউটঃ data-disable-page-zoom

ভেলুঃ true | false

বর্ণনাঃ ব্যবহারকারীরা পেজ কি জুম করে দেখতে পারবে কি না তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-fullscreen

ভেলুঃ true | false

বর্ণনাঃ টুলবারের পজিশন সবার উপরে নাকি নিচে হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-tap-toggle

ভেলুঃ true | false

বর্ণনাঃ ব্যবহারকারীরা ট্যাপ বা ক্লিক করে টুলবারের ভিজিবিলিটি দেখতে বা বন্ধ করতে পারবে কিনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-transition

ভেলুঃ   slide | fade | none

বর্ণনাঃ ট্যাপ বা ক্লিক করলে ট্রানজিশন ইফেক্টস কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-update-page-padding

ভেলুঃ true | false

বর্ণনাঃ "updatelayout" events এর মাধ্যমে টপ এবং বোটম থেকে কত দূরত্বে টুলবার থাকবে এবং টুলবারের সাইজ কি হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-visible-on-page-show

ভেলুঃ true | false

বর্ণনাঃ যখন এর মূল পেজ দেখায় তখল টুলবার দেখাবে কিনা তা নির্দেশ করে ।

Flip Toggle Switch এট্রিবিউটসঃ

একটি <input type="checkbox"> এর সাথে "flipswitch" ডাটা রোল যুক্ত হয়ে থাকে ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ সুইচ এর সাইজ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-on-text

ভেলুঃ sometext

বর্ণনাঃ সুইচ চাপলে অন হয়ে থাকবে ।

ডাটা এট্রিবিউটঃ data-off-text

ভেলুঃ sometext

বর্ণনাঃ সুইচ চাপলে অফ হয়ে যাবে ।

ফুটার(Footer) এট্রিবিউটসঃ

কন্টেইনারের সাথে data-role="footer" এট্রিবিউটস যুক্ত হয় ।

ডাটা এট্রিবিউটঃ data-id

ভেলুঃ sometext

বর্ণনাঃ এটা একটি সম্পূর্ণ আলাদা আইডি নির্দেশ করে । ফুটার স্থির করার জন্য দরকার হয় ।

ডাটা এট্রিবিউটঃ data-position

ভেলুঃ inline | fixed

বর্ণনাঃ ফুটার পেজের সাথে একই লাইনে থাকবে নাকি সবার নিচে থাকবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-fullscreen

ভেলুঃ true | false

বর্ণনাঃ ফুটার পেজের কনটেন্টের সাথে থাকবে নাকি সবার নিচে সবসময় থাকবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ ফুটারের থিমের রঙ নির্দেশ করে ।

ফুটারকে ফুলস্ক্রীনের সাথে রাখার জন্য প্রথমে data-position="fixed" করে তারপর এর সাথে data-fullscreen এট্রিবিউট যোগ করুন ।

হেডার(Header) এট্রিবিউটঃ

এটা কন্টেইনারের সাথে data-role="header"এট্রিবিউটের মাধ্যমে যুক্ত থাকে ।

ডাটা এট্রিবিউটঃ data-id

ভেলুঃ sometext

বর্ণনাঃ   এটা একটি সম্পূর্ণ আলাদা আইডি নির্দেশ করে । হেডার স্থির করার জন্য দরকার হয় ।

ডাটা এট্রিবিউটঃ data-position

ভেলুঃ inline | fixed

বর্ণনাঃ হেডার পেজের সাথে একই লাইনে থাকবে নাকি সবার উপরে থাকবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-fullscreen

ভেলুঃ true | false

বর্ণনাঃ   হেডার পেজের কনটেন্টের সাথে থাকবে নাকি সবার উপরে সবসময় থাকবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ হেডারের থিমের রঙ নির্দেশ করে ।

হেডারকে ফুলস্ক্রীনের সাথে রাখার জন্য প্রথমে data-position="fixed" করে তারপর এর সাথে data-fullscreen এট্রিবিউট যোগ করুন ।

ইনপুটস(Inputs) এট্রিবিউটসঃ

এটি type="text|search|etc." অথবা textarea elements এর সাথে যুক্ত হয়ে থাকে ।

ডাটা এট্রিবিউটঃ data-clear-btn

ভেলুঃ true | false

বর্ণনাঃ ইনপুটের কোথায় "clear" বাটন থাকবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-clear-btn-text

ভেলুঃ text

বর্ণনাঃ ইনপুটের "clear" বাটনের কোথায় একটি লেখা থাকবে তা নির্দেশ করে । ডিফল্টভাবে "clear text" লেখা থাকে ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ ইনপুটের সাইজ কি হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-role

ভেলুঃ    none

বর্ণনাঃ জেকোয়েরি মোবাইল যাতে একে বাটনের আকারে স্টাইল না দিতে পারে তার জন্য প্রতিরোধ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ ইনপুট ফিল্ডের থিমের রঙ নির্দেশ করে ।

লিংক(Link) এট্রিবিউটঃ

এর মাধ্যমে সকল প্রকার লিঙ্ককে বুঝায় ।

ডাটা এট্রিবিউটঃ data-ajax

ভেলুঃ true | false

বর্ণনাঃ ব্যবহারকারীর অভিজ্ঞতা এবং ট্রানজিশন বাড়ানোর জন্য অ্যাজাক্স দ্বারা পেজ লোডের জন্য নির্দেশ করে । ভেলু falseথাকলে নরমাল পেজ দেখাবে ।

ডাটা এট্রিবিউটঃ data-direction

ভেলুঃ reverse

বর্ণনাঃ ট্রানজিশনের অ্যানিমেশনকে উলটা করে দেখায় ।

ডাটা এট্রিবিউটঃ data-dom-cache

ভেলুঃ true | false

বর্ণনাঃ প্রতি পেজের জন্য jQuery DOM cache কে ক্লিয়ার করবে কি না তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-prefetch

ভেলুঃ true | false

বর্ণনাঃ পেজ কে DOM এ নিয়ে যায় যাতে ভিজিটররা এটা ভিজিট করার সময় দেখতে পায় ।

ডাটা এট্রিবিউটঃ data-rel

ভেলুঃ back | dialog | external | popup

বর্ণনাঃ লিংক কিভাবে কাজ করবে তা নির্দেশ করে । Back, Dialog, Popup ইত্যাদি কাজ করে থাকে ।

ডাটা এট্রিবিউটঃ data-transition

ভেলুঃ   fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

বর্ণনাঃ এক পেজ থেকে অন্য পেজে ট্রানজিশন কিভাবে হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-position-to

ভেলুঃ   origin | jQuery selector | window

বর্ণনাঃ পপ-আপ বক্সের পজিশন নির্দেশ করে।

লিস্ট(List) এট্রিবিউটঃ

<ol> অথবা <ul> একসাথে data-role="listview" এর সাথে যুক্ত হয়ে থাকে ।

ডাটা এট্রিবিউটঃ data-autodividers

ভেলুঃ true | false

বর্ণনাঃ স্বয়ংক্রিয়ভাবে লিস্ট আইটেমগুলোকে ভাগ করবে কি করবেনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-count-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ থিমের রঙ বাবল দ্বারা গণনার জন্য নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-divider-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ লিস্ট আইটেমের বিভক্তকারীর রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-filter

ভেলুঃ true | false

বর্ণনাঃ লিস্টে সার্চ বক্স যুক্ত হবে কি হবেনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-filter-placeholder

ভেলুঃ sometext

বর্ণনাঃ সার্চ বক্সের সাথে টেক্সট যুক্ত হবে কিনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-filter-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ সার্চ ফিল্টারে থিমেরর রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-icon

ভেলুঃ Icons Reference

বর্ণনাঃ লিস্টের আইকন নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-inset

ভেলুঃ true | false

বর্ণনাঃ লিস্ট কি গোলাকার কোণা অথবা মার্জিন দ্বারা স্টাইল করা হবে কিনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-split-icon

ভেলুঃ    Icons Reference

বর্ণনাঃ স্পিলিট বাটনের আইকন নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-split-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ স্পিলিট বাটনের থিমের রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ লিস্টের থিমের রঙ নির্দেশ করে ।

লিস্ট আইটেম(List item) এট্রিবিঊটঃ

একটি <li> এর সাথে <ol> অথবা <ul> যুক্ত হয়ে তা data-role="listview" এর সাথে যুক্ত হয় ।

ডাটা এট্রিবিউটঃ data-filtertext

ভেলুঃ sometext

বর্ণনাঃ যখন সার্চ আইটেমে ফিল্টার করা হয় তখন যা খোজা হয় সেটার পরিবর্তে এটা দেখানোর জন্য নির্দেশ দেয় ।

ডাটা এট্রিবিউটঃ data-icon

ভেলুঃ Icons Reference

বর্ণনাঃ লিস্ট আইটেমের আইকন নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-role

ভেলুঃ list-divider

বর্ণনাঃ লিস্ট আইটেমের পার্থক্যকারীকে নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ লিস্ট আইটেমের থিমের রঙ নির্দেশ করে ।

নেভবার(Navbar) এট্রিবিউটসঃ

<li> এলিমেন্টের সাথে data-role="navbar" কন্টেইনার যুক্ত হয় ।

ডাটা এট্রিবিউটঃ data-icon

ভেলুঃ Icons Reference

বর্ণনাঃ লিস্ট আইটেমের আইকন নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-iconpos

ভেলুঃ left | right | top | bottom | notext

বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।

পেজ(Page) এট্রিবিউটসঃ

এটি একটি data-role="page" কন্টেইনার ।

ডাটা এট্রিবিউটঃ data-dom-cache

ভেলুঃ true | false

বর্ণনাঃ প্রতি পেজের জন্য jQuery DOM cache কে ক্লিয়ার করবে কি না তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-overlay-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ ডায়ালগ পেজের ব্যাকগ্রাউন্ড রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ পেজের থিমের রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-title

ভেলুঃ sometext

বর্ণনাঃ পেজের টাইটেল নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-url

ভেলুঃ     url

বর্ণনাঃ ইউআরএল কে আপডেট করে তার রিকুস্টেড পেজে নিয়ে যায় ।

পপ-আপ(Popup) এট্রিবিউটসঃ

এটি একটি data-role="popup" কন্টেইনার ।

ডাটা এট্রিবিউটঃ data-corners

ভেলুঃ true | false

বর্ণনাঃ পপ-আপের গোলাকার কোণা হবে কিনা সেটা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-dismissible

ভেলুঃ true | false

বর্ণনাঃ পপ-আপের বাইরে ক্লিক করলে পপ-আপ বন্ধ হবে কিনা সেটা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-history

ভেলুঃ true | false

বর্ণনাঃ পপ-আপ ব্রাউজার হিস্টোরি তৈরি করবে কিনা সেটা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-overlay-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ ব্যাকগ্রাউন্ডের সাথে পপ-আপের রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-shadow

ভেলুঃ true | false

বর্ণনাঃ পপ-আপ বক্সে ছায়া থাকবে কিনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ পপ-আপ বক্সের থিমের কালার নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-tolerance

ভেলুঃ 30, 15, 30, 15

বর্ণনাঃ পপ-আপ উন্ডো এর পেজের চারিদিক থেকে দূরত্ব নির্দেশ করে ।

রেডিও বাটন(Radio Button) এট্রিবিউটসঃ

লেবেলের জোড়ার সাথে type="radio" ইনপুট হয় ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ বাটনের সাইজ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-role

ভেলুঃ none

বর্ণনাঃ জেকোয়েরি মোবাইল যাতে এই বাটনের স্টাইল পরিবর্তন না করে তা প্রতিরোধ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ   letter (a-z)

বর্ণনাঃ রেডিও বাটনের থিমের রঙ নির্দেশ করে ।

একই গ্রুপের অনেকগুলো রেডিও বাঁটনকে data-role="controlgroup" এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type="horizontal|vertical" এট্রিবিউট দ্বারা নির্দেশ করা হয় বাটনগুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।

সিলেক্ট(Select) এট্রিবিউটসঃ

সকল <select> এলিমেন্টস কে বুঝায় ।

ডাটা এট্রিবিউটঃ data-icon

ভেলুঃ Icons Reference

বর্ণনাঃ আইকন সিলেক্ট এলিমেন্ট কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-iconpos

ভেলুঃ    left | right | top | bottom | notext

বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-inline

ভেলুঃ true | false

বর্ণনাঃ সিলেক্ট এলিমেন্ট একই লাইনে থাকবে নাকি কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ সিলেক্ট এলিমেন্ট এর সাইজ কেমন হবে এটা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-native-menu

ভেলুঃ true | false

বর্ণনাঃ যখন ভেলু false থাকে তখন জেকোয়েরি এর কাস্টম সিলেক্ট মেনু দেখায় ।

ডাটা এট্রিবিউটঃ data-overlay-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ জেকোয়েরি এর নিজস্ব কাস্টম মেনু দেখায় ।

ডাটা এট্রিবিউটঃ data-placeholder

ভেলুঃ true | false

বর্ণনাঃ non-native select এর জায়গায় <option> element সেট হয় ।

ডাটা এট্রিবিউটঃ data-role

ভেলুঃ   none

বর্ণনাঃ   জেকোয়েরি মোবাইল যাতে এই বাটনের স্টাইল পরিবর্তন না করে তা প্রতিরোধ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ সিলেক্ট এলিমেন্ট এর থিমের রঙ নির্দেশ করে ।

একই গ্রুপের অনেকগুলো সিলেক্ট এলিমেন্টস্কে data-role="controlgroup" এট্রিবিউট দ্বারা যোগ করা হয়ে থাকে এবং data-type="horizontal|vertical" এট্রিবিউট দ্বারা নির্দেশ করা হয় এলিমেন্টস গুলো আড়াআড়ি নাকি লম্বালম্বিভাবে দেখাবে ।

স্লাইডার(Slider) এলিমেন্টসঃ

type="range" এর সাথে ইনপুট হয় ।

ডাটা এট্রিবিউটঃ data-highlight

ভেলুঃ true | false

বর্ণনাঃ স্লাইডার গুলো হাইলাইট হবে কিনা তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-mini

ভেলুঃ true | false

বর্ণনাঃ স্লাইডারের সাইজ কেমন হবে তা নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-role

ভেলুঃ none

বর্ণনাঃ জেকোয়েরি যাতে স্লাইডার কে বাটনের স্টাইল দিতে না পারে এটা তা নিয়ন্ত্রণ করে ।

ডাটা এট্রিবিউটঃ data-theme

ভেলুঃ letter (a-z)

বর্ণনাঃ স্লাইডার কনট্রোলের থিমের রঙ নির্দেশ করে ।

ডাটা এট্রিবিউটঃ data-track-theme

ভেলুঃ     letter (a-z)

বর্ণনাঃ স্লাইডারের থিমের রঙ নির্দেশ করে ।

তাহলে আমরা জেকোয়েরি এর মোবাইল ডাটা এট্রিবিউটস গুলো জেনে ফেললাম । একটার সাথে আরেকটার খুব মিল আছে । তাই পার্থক্যগুলো কিন্তু খুব ভালভাবে খেয়াল করবেন । ডিফল্টভাবে কোনটা আছে সেজন্য মোটা অক্ষরের লেখাগুলো খুব খেয়াল করে দেখবেন । আর কোথাও না বুঝতে পারলে কমেন্ট করবেন ।

http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি এক্সএমএল এক্সপ্যাট পার্সার (PHP XML Expat Parser in Bangla)

February 11, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

পিএইচপি'র বিল্ট-ইন এক্সএমএল এক্সপ্যাট পার্সার (XML Expat Parser) এক্সএমএল ডকুমেন্টকে পিএইচপি'তে প্রসেস করা সম্ভবপর করেছে।

এক্সএমএল এক্সপ্যাট পার্সার

এক্সপ্যাট পার্সারটি হলো ইভেন্ট-বেজড পার্সার অর্থাৎ এটি ইভেন্টের উপর নির্ভর করে একজিকিউট হয়। নিচের এক্সএমএল এর অংশটিকে দেখুনঃ

একটি ইভেন্ট-বেজড পার্সার উপরের এক্সএমএল'টিকে তিনটি ইভেন্টের সিরিজ হিসেবে রিপোর্ট করেঃ

স্টার্ট এলিমেন্ট হলোঃ from
CDATA সেকশানকে শুরু করে যার ভ্যালুঃ Jani
ক্লোজ এলিমেন্টঃ from

এক্সএমএল এক্সপ্যাট পার্সার ফাংশনগুলো পিএইচপি কোরের অংশ। এই ফাংশনগুলোকে ব্যবহার করতে কোন ইন্সটলেশনের দরকার পড়েনা।

এক্সমএমএল ফাইল

নিচের উদাহরণে "note.xml" এক্সএমএল ফাইলটি ব্যবহৃত হবেঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

এক্সএমএল এক্সপ্যাট পার্সার'কে শুরু করা

আমরা চাই এক্সএমএল এক্সপ্যাট পার্সার'টিকে পিএইচপি'তে শুরু করতে, ভিন্ন ভিন্ন এক্সএমএল ইভেন্টের জন্য কিছু হ্যান্ডলার ডিফাইন করতে, এবং তারপর এক্সএমএল ফাইলটিকে পার্স করতে।

<?php
// Initialize the XML parser
$parser=xml_parser_create();

// Function to use at the start of an element
function start($parser,$element_name,$element_attrs) {
  switch($element_name) {
    case "NOTE":
    echo "-- Note --<br>";
    break;
    case "TO":
    echo "To: ";
    break;
    case "FROM":
    echo "From: ";
    break;
    case "HEADING":
    echo "Heading: ";
    break;
    case "BODY":
    echo "Message: ";
  }
}

// Function to use at the end of an element
function stop($parser,$element_name) {
  echo "<br>";
}

// Function to use when finding character data
function char($parser,$data) {
  echo $data;
}

// Specify element handler
xml_set_element_handler($parser,"start","stop");

// Specify data handler
xml_set_character_data_handler($parser,"char");

// Open XML file
$fp=fopen("note.xml","r");

// Read data
while ($data=fread($fp,4096)) {
  xml_parse($parser,$data,feof($fp)) or
  die (sprintf("XML Error: %s at line %d",
  xml_error_string(xml_get_error_code($parser)),
  xml_get_current_line_number($parser)));
}

// Free the XML parser
xml_parser_free($parser);
?>

উপরের উদাহরণটির ব্যাখ্যা

xml_parser_create() ফাংশনের মাধ্যমে এক্সএমএল পার্সারটিকে শুরু করা হয়
ভিন্ন ভিন্ন ইভেন্ট হ্যান্ডলারের সাথে ব্যবহারের জন্য ফাংশন তৈরি করা হয়
যখন পার্সারটি ওপেনিং ও ক্লোজিং ট্যাগের সম্মুক্ষীণ হবে তখন কোন ফাংশনটি একজিকিউট হবে তা ঠিক করতে xml_set_element_handler() ফাংশনটিকে যোগ করা হয়।
যখন পার্সারটি ক্যারেক্টার ডাটার সম্মুক্ষীণ হবে তখন কোন ফাংশনটি একজিকিউট হবে তা ঠিক করতে xml_set_character_data_handler() ফাংশনটিকে যোগ করা হয়।
xml_parse() function ফাংশনের মাধ্যমে "note.xml" ফাইলটিকে পার্স করা হয়।
কোন এরর বা সমস্যার ক্ষেত্রে, একটি এক্সএমএল এরর'কে টেক্সট ডেসক্রিপশানে কনভার্ট করতে xml_error_string() ফাংশনটিকে যোগ করা হয়।
xml_parser_create() ফাংশনের সাথে নির্ধারণ করা মেমোরিকে মুক্ত করতে xml_parser_free() ফাংশনকে কল করা হয়।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি – এক্সএমএল DOM পার্সার (PHP XML DOM Parser in Bangla)

February 10, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শেখ মাহফুজুর রহমান

পিএইচপি'র বিল্ট-ইন ডম (DOM) পার্সারের জন্য পিএইচপি'তে এক্সএমএল ডকুমেন্ট প্রসেস করা সম্ভব হয়েছে।

এক্সএমএল DOM পার্সার

DOM পার্সার একটি ট্রি-বেজড (DOM ট্রি) পার্সার। নিচের এক্সএমএল ডকুমেন্ট ফ্র্যাকশনটির দিকে তাকানঃ

<?xml version="1.0" encoding="UTF-8"?>
<from>Jani</from>

DOM উপরের এক্সএমএল'টিকে একটি ট্রি স্ট্রাকচার হিসেবে দেখেঃ

লেভেল ১: এক্সএমএল ডকুমেন্ট

লেভেল ২: রুট এলিমেন্টঃ

লেভেল ৩: টেক্সট এলিমেন্টঃ "Jani"

ইন্সটলেশন

DOM পার্সার ফাংশনগুলো পিএইচপি কোরের অংশ। এই ফাংশনগুলোকে ব্যবহার করার জন্য কোন ইন্সটলেশনের দরকার পড়েনা।

একটি এক্সএমএল ফাইল

নিচের এক্সএমএল ফাইলটি আমাদের উদাহরণে ব্যবহৃত হবেঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

লোড এবং এক্সএমএল আউটপুট

আমরা চাই এক্সএমএল পার্সারটিকে চালু করতে, এক্সএমএল'টিকে লোড করতে এবং এটা থেকে আউটপুট পেতে।

উদাহরণঃ

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");

print $xmlDoc->saveXML();
?>

উপরের কোডটির আউটপুট হবেঃ

Tove Jani Reminder Don't forget me this weekend!

আপনি যদি ব্রাউজার উইন্ডোতে "View source" সিলেক্ট করেন তাহলে নিচের এইচটিএমএলটি দেখতে পাবেনঃ

<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

উপরের উদাহরণটি একটি DOMDocument-Object তৈরি করে এবং "note.xml" থেকে এক্সএমএল'টিকে এর মধ্যে লোড করে। তারপর saveXML() ফাংশনটি ভিতরের এক্সএমএল ডকুমেন্টটিকে একটি স্ট্রিং-এ রাখে, ফলে আমরা এটিকে আউটপুট হিসেবে পেতে পারি।

এক্সএমএল এর মধ্যে দিয়ে লুপিং

আমরা চাই এক্সএমএল পার্সারটিকে চালু করতে, এক্সএমএল'টিকে লোড করতে এবং এলিমেন্টের সবগুলো এলিমেন্টের মধ্যে লুপ তৈরি করতেঃ

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");

$x = $xmlDoc->documentElement;
foreach ($x->childNodes AS $item) {
  print $item->nodeName . " = " . $item->nodeValue . "<br>";
}
?>

উপরের কোডটির আউটপুট হবেঃ

#text =
to = Tove
#text =
from = Jani
#text =
heading = Reminder
#text =
body = Don't forget me this weekend!
#text =

উপরের উদাহরণটিতে আপনি দেখতে পাবেন যে প্রত্যেকটি এলিমেন্টের মধ্যে খালি (empty) টেক্সট নোড রয়েছে। যখন এক্সএমএল তৈরি হয় তখন নোডগুলোর মধ্যে প্রায়ই হোয়াইট-স্পেস থাকে। এক্সএমএল DOM পার্সার এগুলোকে সাধারণত এলিমেন্ট হিসেবে বিবেচনা করে এবং আপনি যদি এগুলোর সম্পর্কে জ্ঞাত না হন তাহলে মাঝে মাঝে এগুলো সমস্যার সৃষ্টি করে।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

অ্যাজাক্স পরিচিতি (AJAX Introduction)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শেখ মাহফুজুর রহমান

একটি ওয়েব পেজ পুরোটা রিলোড না করে পেজের একটি অংশকে আপডেট করার প্রক্রিয়াই হলো অ্যাজাক্স।

অ্যাজাক্স কি?

AJAX এর মানে হলো Asynchronous JavaScript and XML । অ্যাজাক্স হলো ফাস্ট এবং ডাইনামিক ওয়েব পেজ তৈরির একটি কৌশল। অ্যাজাক্স ওয়েব পেজকে অ্যাসিংক্রোনাসলি (asynchronously) সার্ভারের সাথে সামান্য পরিমাণ ডাটা বিনিময় (--) করেই আপডেট করতে সাহাজ্য করে। এর মানে হলো একটি পেজকে পুরোপুরি লোড না করে পেজের একটি অংশকে আপডেট করা সম্ভব। ক্লাসিক ওয়েব পেজগুলোতে, যেগুলো অ্যাজাক্স ব্যবহার করেনা, কন্টেন্ট পরিবর্তন করার পর পরিবর্তিত পেজকে পেতে চাইলে অবশ্যই তা রিলোড করতে হবে।
অ্যাজাক্স ব্যবহারকারী অ্যাপ্লিকেশনের উদাহরন হলোঃ গুগল ম্যাপ, জিমেইল, ইউটিউব এবং ফেসবুক ট্যাব।

কিভাবে অ্যাজাক্স কাজ করে

১)ব্রাউজারঃ
একটি ইভেন্ট তৈরি হয়...
একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়
HttpRequest পাঠানো হয়

---->> ইন্টারনেট ---->>

২) সার্ভার
HttpRequest কে প্রসেস করে
একটি রেসপন্স তৈরি করে এবং সেই ডাটা ব্রাউজারে প্রেরণ করে

---->> ইন্টারনেট ---->>

৩) ব্রাউজার
ফেরত আসা ডাটাগুলো প্রসেস করে
পেজের কন্টেন্ট আপডেট করে

ইন্টারনেট স্ট্যান্ডার্ড নির্ভর অ্যাজাক্স

ইন্টারনেট স্ট্যান্ডার্ডের উপর নির্ভর করে অ্যাজাক্স কাজ করে এবং নিচের কম্বিনেশনগুলো ব্যবহার করেঃ

XMLHttpRequest অবজেক্ট (সার্ভারের সাথে অ্যাসিংক্রোনাসলি ডাটা বিনিময় করার জন্য)
জাভাস্ক্রিপ্ট/DOM (তথ্যকে দেখানো/ইন্টারেক্ট করতে)
সিএসএস (ডাটাকে স্টাইল করতে)
এক্সএমএল (বিনিময়কৃত ডাটা ফরমেট হিএবে ব্যবহৃত হয়)

নোটঃ অ্যাজাক্স অ্যপ্লিকেশনগুলো ব্রাউজার এবং প্লাটফর্ম ইন্ডিপেন্ডেন্ট হয়ে থাকে অর্থাৎ যেকোন প্লাটফর্মে অ্যাজাক্স কার্যকর।

গুগল সাজেস্ট

অ্যাজাক্স ২০০৫ সালে Google Suggest অ্যাপ্লিকেশনে ব্যবহার হওয়ার মাধ্যমে গুগলের হাত ধরে জনপ্রিয় হয়েছিল।

Google Suggest ডাইনামিক ওয়েব ইন্টারফেস তৈরি করতে অ্যাজাক্স ব্যবহার করছেঃ যখন আপনি গুগলের সার্চ বক্সে কিছু টাইপ করেন, একটি জাভাস্ক্রিপ্ট অক্ষরগুলোকে সার্ভারে পাঠায় এবং সার্ভার একটি সাজেশন লিস্ট পাঠিয়ে দেয় যা আপনি দেখতে পান।

আজকেই অ্যাজাক্স ব্যবহার শুরু করুন

আমাদের পিএইচপি টিউটরিয়ালে আমরা ব্যাখ্যা করবো কিভাবে অ্যাজাক্স একটি ওয়েব পেজের পুরোটা রিলোড না করে পেজের একটি অংশকে আপডেট করতে পারে। সার্ভার স্ক্রিপ্টটি পিএইচপি'তে লেখা হবে। অ্যাজাক্স সম্পর্কে আরও বেশি জানতে চাইলে আমাদের অ্যাজাক্স টিউটোরিয়ালটি ভিজিট করুন।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ রেস্পনসিভ ওয়েব ডিজাইন (CSS Responsive Web Design)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

লিখেছেন সুদীপ্ত সাহা

রেস্পনসিভ ওয়েব ডিজাইন কি?

রেস্পনসিভ ওয়েব ডিজাইন হল ওয়েব সাইটকে এমন করে তৈরি করা যেন তা সকল ডিভাইসে ঠিকভাবে প্রদর্শিত হয়। রেস্পনসিভ ওয়েব ডিজাইন কোন প্রোগ্রাম বা জাভাস্ক্রিপ্টের মতো নয়। রেস্পনসিভ ওয়েব ডিজাইন মূলত মোবাইল ডিভাইসগুলোর কথা মাথায় রেখে তৈরি করা হয়েছে।

নিজের জন্য রেস্পনসিভ ডিজাইন তৈরি করা

সহজে সিএসএস দ্বারা নিজে নিজেই রেস্পনসিভ ডিজাইন করার একটি পদ্ধতি

বুটস্ট্র্যাপ করার পদ্ধতি

রেস্পনসিভ ডিজাইন করার অন্য একটি পদ্ধতি হল, পূর্বের বিদ্যমান কোন সিএসএস ফ্রেমওয়ার্ক ব্যবহার করা। বুটস্ট্র্যাপ হল HTML, CSS এবং JavaScript দ্বারা তৈরি রেস্পনসিভ ওয়েব ডিজাইনের জন্য জনপ্রিয় একটি ফ্রেমওয়ার্ক। বুটস্ট্র্যাপ আপনার সাইটকে এমন করে তৈরি করতে সাহায্য করবে যেন তা যেকোনো সাইজ বা স্ক্রিনের ল্যাপটপ, ট্যাবলেট বা ফোনে দেখতে একইরকম দেখায়।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ ইউজার ইন্টারফেস (CSS3 User Interface)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Sheikh Mahfuzur Rahman

সিএসএস-থ্রি ইউজার ইন্টারফেস

সিএসএস-থ্রি এর কিছু নতুন ইউজার ইন্টারফেস ফিচার হলো এলিমেন্ট রিসাইজিং, বক্স রিসাইজিং এবং আউটলাইনিং। এই অধ্যায়ে নিচের ইউজার ইন্টারফেস প্রপার্টিগুলো সম্পর্কে জানতে পারবেনঃ

resize
box-sizing
outline-offset

ব্রাউজার সাপোর্ট

নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ইউজার ইন্টারফেস প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- এর সাথে যুক্ত ভার্শন নম্বরগুলো প্রিফিক্সসহ যেসব ভার্শন কাজ করে তার তালিকা প্রকাশ করে।

Property
resize	4.0	Not supported	Not supported	5.0 4.0 -moz-	4.0	15.0
outline-offset	4.0	Not supported	Not supported	5.0 4.0 -moz-	4.0	9.5

সিএসএস-থ্রি রিসাইজিং

সিএসএস-থ্রি'তে resize প্রপার্টি ইউজারদের দ্বারা কোন এলিমেন্ট রিসাইজ করা যাবে কি যাবেনা তার নির্ধারণ করে। লক্ষ্যনীয়ঃ নিচের div এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যায় (Chrome, Firefox, Safari and Opera 15+)।

রিসাইজের জন্য সিএসএস কোডঃ উদাহরণ
এর ফলে একটি <div> এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যাবেঃ

div {
    resize: horizontal;
    overflow: auto;
}

সিএসএস-থ্রি বক্স সাইজিং

box-sizing প্রপার্টি ব্রাউজারকে কোন সাইজিং প্রপার্টি (width এবং height) ব্যবহার করা যাবে তা বলে দেয়। সেগুলো border-box নাকি শুধু content-box কে (এটিই সাধারণত উইড্‌থ ও হাইট প্রপার্টির ডিফল্ট ভ্যালু হিসেবে থাকে) এর ভিতরে অন্তর্ভূক্ত করবে তা ঠিক করে দেয়। উদাহরণস্বরূপ, আপনি যদি দু'টি বর্ডার বক্সকে পাশাপাশি রাখতে চান তাহলে "border-box" এ বক্স-সাইজিং সেটিং করে ঠিক করতে পারবেন। এটি ব্রাউজারকে নির্দিষ্ট প্রস্থ ও উচ্চতা দ্বারা বক্সটির আকার ঠিক করতে বলে এবং বর্ডার ও পেডিংকে বক্সের ভিতরে স্থাপন করে।

উদাহরণ
দুটি বর্ডার বক্সকে পাশাপাশি স্থাপন করেঃ

div {
     -moz-box-sizing: border-box; /* Firefox */
     box-sizing: border-box;
     width: 50%;
     float: left;
 }

সিএসএস-থ্রি আউটলাইন অফসেট

outline-offset প্রপার্টি একটি আউটলাইনের বাইরে অবস্থান করে এবং এটিকে বর্ডারের এজের বাইরে টেনে নিয়ে যায়।

আউটলাইন এর সাথে বর্ডার এর দুই ধরণের পার্থক্য রয়েছেঃ

আউটলাইন জায়গা দখল করেনা।
আউটলাইন চারকোনাকৃতির নাও হতে পারে।

নিচের div টির বর্ডার এজের বাইরে ১৫ পিক্সেল আউটলাইন রয়েছে
এর জন্য যে সিএসএস কোড প্রয়োজন তা নিম্নরূপ।

উদাহরণ
বর্ডার এজের বাইরে ১৫ পিক্সেল আউটলাইন নির্ধারণ করেঃ

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

সিএসএস-থ্রি ইউজার ইন্টারফেস প্রপার্টি

নিচে সবগুলো ইউজার ইন্টারফেস প্রপার্টির তালিকা দেয়া হলোঃ

appearance -	একটি এলিমেন্টকে স্ট্যান্ডার্ড ইউজার ইন্টারফেস এলিমেন্ট হিসেবে দেখাতে ব্যবহৃত হয়
box-sizing -	একটি নির্দিষ্ট এলিমেন্টকে কোন এরিয়ায় একটি নির্দিষ্ট পদ্ধতিতে অবস্থান করতে বলে দেয়
icon -	পেজের অথর বা লেখককে আইকনিকভাবে একটি এলিমেন্ট স্টাইল করার সুযোগ করে দেয়
nav-down -	যখন arrow-down নেভিগেশন কি ব্যবহার করা হয় তখন কোন দিকে নেভিগেট করা হবে তা নির্ধারন করে দেয়
nav-index -	একটি এলিমেন্টের টেবিং অর্ডার ঠিক করে দেয়
nav-left -	যখন arrow-left নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয়
nav-right -	যখন arrow-right নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয়
nav-up -	যখন arrow-up নেভিগেশন কি ব্যবহার করা হবে তখন কোন দিকে নেভিগেট করা হবে তা ঠিক করে দেয়
outline-offset -	একটি আউটলাইনের অফসেট ঠিক করে এবং এটিকে বর্ডার এজের বাইরে টেনে নিয়ে যায়
resize -	কোন এলিমেন্ট ইউজারদের দ্বারা রিসাইজ করা যাবে কি যাবেনা তা নির্ধারণ করে

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস মাল্টিপল কলাম (CSS3 Multiple Columns)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

CSS3 Multiple Columns অর্থাৎ css3 তে একাধিক কলাম তৈরি করা

css3 ব্যবহার করে আপনি টেক্সটগুলোকে প্রয়োজনমত সাজানোর জন্য একাধিক কলাম তৈরি করতে পারবেন।
এই অধ্যায়ে আপনি নিম্নোক্ত কলাম প্রপার্টি গুলো সম্পর্কে জানবেন-

column-count
column-gap
Column-rule

ব্রাউজার সাপোর্ট (Browser Support)

এই প্রপার্টিটি সকল নতুন ভার্সন এর ব্রাউজারগুলোতে সাপোর্ট করে। IE তে 10.0, Google Chrome 4.0 -webkit-, mozilla 2.0 -moz-, Safari 3.1 -webkit-, opera 15.0 -webkit-11.1
এখানে -webkit- এবং -moz- ব্যবহার করে ব্রাউজারগুলোর প্রথম ভার্সন বুঝানো হয়েছে যা এই prefix গুলো সাপোর্ট করে।

Property
column-count	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-gap	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule-color	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-style	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-width	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-width	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1

CSS3 ব্যবহার করে একাধিক কলাম তৈরি

column-count প্রপার্টি দ্বারা কয়টি কলাম হবে তা বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

উপরের এই css টুকু লিখার ফলে আপনার div এর মধ্যে লিখা টেক্সটগুলো তিনটি কলামে বিভক্ত হবে।

CSS3 দিয়ে কলামগুলোর মাঝে কতখানি ফাঁকা থাকবে তাও বলে দেয়া যায়।

column-gap প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি জায়গা ফাঁকা থাকবে তা বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 কলামের নিয়ম (CSS3 column rules)

column-rule প্রপার্টি দ্বারা কলামের width, style এবং color এই তিনটি বিষয় বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

CSS3 এর একাধিক কলামের কিছু প্রপার্টি

column-count	এই প্রপার্টি দ্বারা টেক্সটগুলো কয়টি কলামে ভাগ হবে তা বলা হয়।
column-fill	এই প্রপার্টি দ্বারা কলামগুলো টেক্সট দিয়ে পুরন করার নির্দেশ দেয়া হয়
column-gap	এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি ফাঁক থাকবে তা বলা হয়।
column-rule	এই প্রপার্টি দ্বারা কলামগুলোর সব নিয়ম নির্ধারণ করা হয়।
column-rule-color	এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কোন বর্ডার থাকলে তার কালার কি হবে তা বলা হয়।
column-rule-style	এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডার কেমন হবে তা বলা হয়।
column-rule-width	এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডারের উইদথ কতখানি হবে তা বলা হয়।
columns	এই প্রপার্টিটি column-width এবং column-count দুইটি প্রপার্টির কাজ একাই করতে পারে।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ অ্যানিমেশনস (CSS3 Animations)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সুদীপ্ত সাহা

ফ্লাস বা জাভাস্ক্রিপ্ট দ্বারা তৈরি ওয়েব পেজের অ্যানিমেশনগুলো সিএসএস3 অ্যানিমেশন দ্বারা বদল করা যায়।

ব্রাউজার সাপোর্ট

নিচের টেবিলে প্রদর্শিত নাম্বারগুলো নির্দেশ করছে কোন ব্রাউজারের কোন ভার্শনগুলো এই প্রপার্টিকে সম্পূর্ণভাবে সাপোর্ট করে।
-webkit-, -moz-, অথবা -o- যুক্ত ব্রাউজারের প্রিফিক্স ভার্সনগুলো নির্দেশ করছে যা প্রথম এই প্রপার্টি সাপোর্ট করছে।

Property
@keyframes	43.0 4.0 -webkit-	12.0	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	12.0	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

সিএসএস3 @keyframes এর রুল

যেখানে অ্যানিমেশন তৈরি হয় সেখানে @keyframes এর রুল প্রবর্তিত হয়।

@keyframes এর ভেতরে কোন সিএসএস স্টাইলকে নির্দিষ্ট করে দিলে অ্যানিমেশনটি বর্তমান স্টাইল থেকে ধীরে ধীরে নতুন স্টাইলে পরিবর্তন হবে।

সিএসএস3 অ্যানিমেশন

যখন @keyframes রুলের ভেতরে কোন অ্যানিমেশন তৈরি হবে তখন আপনাকে অবশ্যই সিলেক্টর ঠিক করে দিতে হবে, তা না হলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না।
অ্যানিমেশনের সিলেক্টর নির্দিষ্ট করে দেয়ার জন্য অন্তত দুইটি প্রপার্টি ব্যবহার করতে হয়ঃ
অ্যানিমেশনের নাম -webkit-animation: myfirst, এবং অ্যানিমেশনের ব্যাপ্তিকাল

উদাহরনঃ
কোন -webkit-animation এর মধ্যে "myfirst" নামের অ্যানিমেশন তৈরি করা। অ্যানিমেশনের ব্যাপ্তিকালঃ ৫ সেকেন্ড

div {
     -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
     animation: myfirst 5s;
 }

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
     }

/* Standard syntax */
@keyframes myfirst {
     from {background: red;}
     to {background: yellow;}
 }

ইঙ্গিতঃ যদি ব্যাপ্তিকাল নির্দিষ্ট করা না হয় তাহলে অ্যানিমেশন কোন ইফেক্ট দেখাবে না, কারন ডিফল্ট ভ্যালু ০ ধরে নেয়া হবে।

সিএসএস3 অ্যানিমেশন কি?

অ্যানিমেশন হল কোন ইলিমেন্টকে ধীরে ধীরে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করার পদ্ধতি। আপনার যত প্রপার্টি ইচ্ছা এবং যতবার ইচ্ছা আপনি তা পরিবর্তন করতে পারবেন। পরিবর্তন কখন হবে তা আপনি % আকারে নির্দিষ্ট করে দিতে পারবেন, এছাড়াও আপনি "from" এবং "to" কীওয়ার্ড ব্যবহার করতে পারবেন(যেটা ০% এবং ১০০% এর মধ্যবর্তী কিছুকে বুঝাবে)

উদাহরনঃ
২৫% এবং ৫০% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }

/* Standard syntax */
      @keyframes myfirst {
      0% {background: red;}
      25% {background: yellow;}
      50% {background: blue;}
      100% {background: green;}
 }

উদাহরনঃ
২৫%, ৫০% এবং ৭৫% এর মধ্যে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা এবং পুনরায় অ্যানিমেশন কমপ্লিট হওয়ার পর করা।

/* Chrome, Safari, Opera */
 @-webkit-keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }

/* Standard syntax */
 @keyframes myfirst {
      0% {background: red; left:0px; top:0px;}
      25% {background: yellow; left:200px; top:0px;}
      50% {background: blue; left:200px; top:200px;}
      75% {background: green; left:0px; top:200px;}
      100% {background: red; left:0px; top:0px;}
 }

অ্যানিমেশনের আরও উদাহরন

নিচের অ্যানিমেশনটিতে অ্যানিমেশনের সাতটি প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
 /* Chrome, Safari, Opera */
 -webkit-animation-name: myfirst;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-play-state: running;
 /* Standard syntax */
 animation-name: myfirst;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 }

উপরের উদাহরণের মতোই আরেকটি অ্যানিমেশন ইফেক্ট (animation-play-state প্রপার্টি বাদে)। এখানে কিছু শর্ট-কার্ট অ্যানিমেশন প্রপার্টি ব্যবহার করা হয়েছেঃ

div {
     -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
     animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
 }

সিএসএস3 অ্যানিমেশন প্রপার্টি

নিচের টেবিলে @keyframes রুল এবং সকল অ্যানিমেশন প্রপার্টি লিস্ট করা হয়েছেঃ

প্রপার্টি	বর্ণনা
@keyframes	অ্যানিমেশনকে নির্দিষ্ট করে ।
animation animation-play-state এবং animation-fill-mode	প্রপার্টি বাদে সকল প্রপার্টিকে একসাথে ব্যাবহার করার শর্টকার্ট পদ্ধতি ।
animation-delay	অ্যানিমেশন কখন শুরু হবে তা নির্দেশ করে ।
animation-direction	অ্যানিমেশন অন্য কোন সাইকেলে পুনরায় শুরু হবে কিনা তা নির্দেশ করে ।
animation-duration	একটি অ্যানিমেশন সম্পূর্ণ হতে কত সেকেন্ড বা মিলিসেকেন্ড লাগবে তা নির্দেশ করে ।
animation-fill-mode	অ্যানিমেশন যখন প্লে হবে না তখন ইলিমেন্টের স্টাইল কেমন হবে তা নির্দেশ করে ।
animation-iteration-count	অ্যানিমেশন কতবার প্লে হবে তা নির্দেশ করে 3
animation-name	অ্যানিমেশনের নাম নির্দেশ করে 3।
animation-play-state	অ্যানিমেশন প্লে হবে নাকি পস অবস্থায় থাকবে তা নির্দেশ করে 3
animation-timing-function	অ্যানিমেশনের স্পিড নির্দেশ করে ।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস৩ ট্রানজিশানস (CSS3 Transitions)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ডব্লিওথ্রিসি সিএসএস-থ্রিতে যেসব নতুন ফিচার যোগ করেছে তার মধ্যে উল্লেখযোগ্য ও অভিনব একটি হলো ট্রানজিশানস। ট্রানজিশানস ব্যবহার করে একটি স্টাইলকে অন্য স্টাইলে রূপান্তরিত করা যায় এবং এর জন্য ফ্লাশ অথবা জাভাস্ক্রিপ্ট ব্যবহার করতে হয় না।

ব্রাউজার সাপোর্ট

নিচের টেবলটিতে প্রচলিত ব্রাউজারগুলোর প্রথম যে ভার্শনগুলো ট্রানজিশান প্রপার্টি পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হয়েছে। -webkit-, -moz-, অথবা -o- এর পর যে ব্রাউজার ভার্শনগুলো আছে, সেগুলো ঐ প্রথম ভার্শনগুলোকে নির্দেশ করে যেগুলো প্রিফিক্স এর সাথে কাজ করে।

Property
transition	26.0 4.0 -webkit-	12.0	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	12.0	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	12.0	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	12.0	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	12.0	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

সিএসএস ট্রানজিশনস কি?

সিএসএস ট্রানজিশান হলো এক ধরণের ইফেক্ট যা একটি এইচটিএমএল এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তিত হতে দেয়। এটি করতে আপনাকে দু'টো বিষয় নির্ধারণ করে দিতে হবেঃ

যে সিএসএস প্রপার্টিতে আপনি ইফেক্ট যোগ করতে চান
ইফেক্ট এর ডিউরেশন অর্থাৎ সেটি কত সময় ধরে অ্যাক্টিভ থাকবে

উদাহরণঃ width প্রপার্টিতে একটি ট্রানজিশান যোগ করা যাক, যার ব্যাপ্তি হবে ২ সেকেন্ডঃ

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

লক্ষ্যণীয়ঃ যদি সময় সীমা নির্দিষ্ট করে দেয়া না হয়, ট্রানজিশানটির ইফেক্ট বুঝা যাবেনা, কারন ট্রানজিশনের ডিফল্ট ব্যাপ্তি বা সময়সীমা হলো শূন্য (০) সেকেন্ড।

সিএসএস প্রপার্টিটি তার ভ্যালু পরিবর্তন করলেই ট্রানজিশান ইফেক্ট কাজ করা শুরু করে। সাধারণত একটি সিএসএস প্রপার্টি তার ভ্যালু পরিবর্তন করে যখন একজন ইউজার সেই প্রপার্টির উপর মাউস নিয়ে যান।

উদাহরণঃ

এলিমেন্টে হোভার যোগ করা যাকঃ

div:hover {
    width: 300px;
}

লক্ষ্যনীয়ঃ যখন মাউসের কার্সর এলিমেন্টটির উপর থেকে সরিয়ে নেয়া হয় তখন সেটি তার পূর্বের অবস্থায় ফিরে যায়।

একসাথে অনেকগুলো ট্রানজিশান যোগ করা

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

উদাহরণঃ width, height, এবং transformation এর সাথে ট্রানজিশান যোগ করা যাকঃ

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

ট্রানজিশানের আরও কিছু উদাহরণ

নিচের উদাহরণটিতে চারটি ট্রানজিশান প্রপার্টিকেই দেখানো হয়েছেঃ

div {
     /* For Safari 3.1 to 6.0 */
     -webkit-transition-property: width;
     -webkit-transition-duration: 1s;
     -webkit-transition-timing-function: linear;
     -webkit-transition-delay: 2s;
     /* Standard syntax */
     transition-property: width;
     transition-duration: 1s;
     transition-timing-function: linear;
     transition-delay: 2s;
 }

নিচের উদাহরণে উপরের ট্রানজিশানের মতো একই ধরণের ইফেক্ট তবে এখানে ট্রানজিশান প্রপার্টিগুলোকে শর্টহ্যান্ড বা সংক্ষিপ্ত করে দেখানো হয়েছেঃ

div {
     -webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
     transition: width 1s linear 2s;
 }

সিএসএস ট্রানজিশান প্রপার্টিসমুহ

নিচে টেবলে সবগুলো ট্রানজিশান প্রপার্টিকে দেখানো হয়েছেঃ

transition -চারটি ট্রানজিশান প্রপার্টিকে একটিমাত্র (সিঙ্গেল) প্রপার্টি হিসেবে দেখাতে
ব্যবহার করা হয়।

transition-delay -কখন ট্রানজিশান ইফেক্ট শুরু হবে তা বলে দেয়
transition-duration -ট্রানজিশানটি কত সেকেন্ড বা মিলিসেকেন্ডে তার ইফেক্ট সম্পূর্ণ করবে তা নির্ধারণ করে
transition-property -কোন সিএসএস প্রপার্টির জন্য ইফেক্ট কাজ করবে তা নাম ঠিক করে দেয়
transition-timing-function -ট্রানজিশান ইফেক্টের গতি কি রকম হবে তা নির্দিষ্ট করে দেয়।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ 3D ট্রান্সফর্মস (CSS3 3D Transforms in Bangla)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস-থ্রি'তে থ্রিডি ট্রান্সফর্ম ব্যবহার করে পেজের এলিমেন্টগুলোকে ফর্মেট এবং স্টাইল করা যায়। এই অধ্যায়ে আমরা কিছু থ্রিডি ট্রান্সফর্ম এর পদ্ধতি সম্পর্কে জানবোঃ

rotateX()
rotateY()
rotateZ()

একটি টুডি ট্রান্সফর্ম এবং একটি থ্রিডি ট্রান্সফর্ম এর মধ্যে পার্থক্য দেখতে নিচের এলিমেন্টটির উপর ক্লিক করুনঃ

থ্রিডি ট্রান্সফর্ম এর ব্রাউজার সাপোর্ট

টেবলের নম্বরগুলো দিয়ে প্রথম যে ব্রাউজার ভার্শন এই ফিচারটিকে পুরোপুরি সাপোর্ট করে তার তালিকা প্রকাশ করে। -webkit-, -moz-, অথবা -o- এর সাথের নম্বরগুলো প্রথম যে ভার্শনটি প্রিফিক্সসহ কাজ করে তার তালিকা দেয়।

Property
transform	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-origin (three-value syntax)	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	12.0	11.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

rotateX() মেথড

rotatex

rotateX() মেথডের মাধ্যমে এলিমেনটি একটি নির্দিষ্ট ডিগ্রিতে এর এক্স অক্ষের (X-axis) চারদিকে ঘুরে।

উদাহরণঃ

div {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

rotateY() মেথড

rotatey

rotateY() মেথডের মাধ্যমে এলিমেন্টটি একটি নির্দিষ্ট ডিগ্রিতে এর ওয়াই অক্ষের (Y-axis) চারদিকে ঘুরে।

উদাহরণঃ

div {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}

rotateZ() মেথড

rotateZ() মেথডের মাধ্যমে এলিমেন্টটি একটি নির্দিষ্ট ডিগ্রিতে এর ওয়াই অক্ষের (Z-axis) চারদিকে ঘুরে।

div {

    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}

সিএসএস-থ্রি ট্রান্সফর্ম প্রপার্টিসমূহ

নিচের টেবলে সবগুলো ট্রান্সফর্ম প্রপার্টির নামসহ ব্যাখ্যা দেয়া হলোঃ

প্রপার্টি	ব্যাখ্যা
transform	একটি এলিমেন্টে একটি টুডি অথবা থ্রিডি ট্রান্সফর্মেশান যোগ করে
transform-origin	আপনাকে ট্রান্সফর্ম হওয়া এলিমেন্টের উপর অবস্থান পরিবর্তন করতে দেয়।
transform-style	থ্রিডি স্পেসে কিভাবে নেস্টেড প্রপার্টিগুলো স্টাইল করা হবে তা ঠিক করে।
perspective	কোন পার্সপেক্টিভ বা দৃষ্টিকোন থেকে থ্রিডি এলিমেন্টগুলো দেখা হবে তা ঠিক করে।
perspective-origin	থ্রিডি এলিমেন্টের বটম পজিশান ঠিক করে।
backface-visibility	আমরা যখন স্ক্রিনের দিকে মুখোমুখি থাকিনা তখন কোন এলিমেন্ট দেখা যাবে কি যাবেনা তা নির্দিষ্ট করে

থ্রিডি ট্রান্সফর্ম এর মেথডগুলো

ফাংশন	ব্যাখ্যা
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	16 ভ্যালুর 4*4 ম্যাট্রিক্স ব্যবহার করে একটি থ্রিডি ট্রান্সফর্মেশান সংজ্ঞায়িত করে
translate3d(x,y,z)	একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে
translateX(x)	শুধু এক্স অক্ষের ভ্যালু ব্যবহার করে একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে
translateY(y)	শুধু ওয়াই অক্ষের ভ্যালু ব্যবহার করে একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে
translateZ(z)	শুধু জেড অক্ষের ভ্যালু ব্যবহার করে একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে
scale3d(x,y,z)	একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে
scaleX(x)	এক্স অক্ষের ভ্যালু দিয়ে একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে
scaleY(y)	ওয়াই অক্ষের ভ্যালু দিয়ে একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে
scaleZ(z)	জেড অক্ষের ভ্যালু দিয়ে একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে
rotate3d(x,y,z,angle)	একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে
rotateX(angle)	এক্স অক্ষ বরাবর একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে
rotateY(angle)	ওয়াই অক্ষ বরাবর একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে
rotateZ(angle)	জেড অক্ষ বরাবর একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে
perspective(n)	একটি থ্রিডি ট্রান্সফর্ম হওয়া এলিমেন্টের জন্য একটি পার্সপেক্টিভ ভিউ সংজ্ঞায়িত করে

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ 2D ট্রান্সফরম (CSS3 2D Transforms)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস ৩ ট্রান্সফরম এর সাহায্যে আমরা যে কোন এলিমেন্ট সরাতে , টার্ন করতে, এবং ঘুরাতে পারি ।

ট্রান্সফরমেসান হল একটি ইফেক্ট যেটা শেপ , সাইজ, এবং জাইগা পরিবর্তন করতে বাবহারিত হয় ।

তুমি তোমার এলিমেন্ট এ ২ডি অথবা ৩ ডি ট্রান্সফরমেসান ব্যবহার করতে পার ।

সিএসএস ৩ ২ডি ট্রান্সফরমস

এই পার্ট এ আমরা ২ডি ট্রান্সফরম মেথড নিয়ে আলোচনা করব ।

এই অংশ গুলার ভেতরে আছে

translate()
rotate()
scale()
skew()
matrix()

উদাহরণ

div {
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px);
}

ব্রাউজার সাপর্ট

টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়।

-ms-, -webkit-, -moz-, বা -o- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে।

Property
transform	36.0 4.0 -webkit-	12.0	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	12.0	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

translate() মেথড এর কাজ

এই translate() মেথড ব্যবহার করে যে কোন এলিমেন্টকে তার বর্তমান স্থান থেকে সরানো যায়, যা নির্ভর করে এক্স অক্ষ এবং অয়াই অক্ষ এর কন্ডিশান এর উপর

উদাহরণ

div {
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px);
}

rotate() মেথড এর কাজ

এই rotate() মেথড ব্যবহার করে যে কোন এলিমেন্ট ঘড়ির দিক অথবা ঘড়ির বিপরীত দিক এ ঘুরানো যায়।

উদাহরণ

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

scale() মেথড এর কাজ

এই scale() মেথড ব্যবহার করে যে কোন এলিমেন্ট এর সাইজ ছোট অথবা বড় করা যায়, যা নির্ভর করে এক্স অক্ষ এবং অয়াই অক্ষ এর পারামিটার এর উপর

উদাহরণ

div {
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3);
}

skew() মেথড এর কাজ

এই skew() মেথড ব্যবহার করে যে কোন এলিমেন্ট এর এক্স অক্ষ এবং অয়াই অক্ষ এর পারামিটার পরিবর্তন করে এর কোনাকুনি আকার খুব সহজেই দেয়া যায়।

উদাহরণ

div {
       -ms-transform: skew(40deg,25deg); /* IE 9 */
       -webkit-transform: skew(40deg,25deg); /* Chrome, Safari, Opera */
       transform: skew(40deg,25deg);
 }

matrix() মেথড এর কাজ

এই matrix() মেথড ব্যবহার করে সকল ২ডি ট্রান্সফরম মেথড কে একটির মধ্যে নিয়ে আসা যায়।

এই matrix() মেথড ছয় টা প্যারামিটার , গানিতিক ফাংশান নেয়, যা সাহায্য করে ঘুরাতে, নড়াচড়া করতে, এবং মাপতে ।

উদাহরণ

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ ওয়েব ফন্ট (CSS3 Web Fonts)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Sheikh Mahfuzur Rahman

সিএসএস-থ্রি পাবলিশ হওয়ার পর থেকে ওয়েব ডিজাইনারদের এখন আর "ওয়েব সেইফ ফন্টের" উপর নিউর্ভর করতে হয়না। সিএসএস-থ্রি ওয়েব ফন্ট ওয়েব ডিজাইনারদের এমন সব ফন্ট ব্যবহার করার সুযোগ করে দেয় যা ইউজারদের কম্পিউটারে ইন্সটল করা হয়নি। যখনই আপনি ওয়েব পেজে ব্যবহারের জন্য কোন পছন্দসই ফন্ট খুঁজে পাবেন বা কিনবেন, শুধু ফন্ট ফাইলটি ওয়েব সার্ভারে আপলোড করে দেবেন; এটি যখনই প্রয়োজন হবে তখনই ইউজারের ডিভাইসে ডাউনলোড হয়ে যাবে।
সিএসএস-থ্রি @font-face rule রুলের মাধ্যমে আপনার নিজের ফন্টটি নির্দিষ্ট করতে দিতে পারবেন।

ব্রাউজার সাপোর্ট

নিচের নম্বরগুলোর মাধ্যমে এই নিয়মটি প্রথম যে ব্রাউজার ভার্শনগুলো সাপোর্ট করে তার তালিকা প্রকাশ করা হয়েছে।

Property
@font-face	4.0	12.0	9.0	3.5	3.2	10.0

বিভিন্ন ফন্ট ফর্মেট

ট্রুটাইপ ফন্ট (TTF)

অ্যাপল ও মাইক্রোসফট ১৯৮০ সালে সর্বপ্রথম ট্রুটাইপ ফন্ট স্ট্যান্ডার্ডটি চালু করেছিল। মাইক্রোসফট ও ম্যাক উভয় অপারেটিং সিস্টেমের জন্য সবচেয়ে কমন ফন্ট ফর্মেট হলো ট্রুটাইপ।

ওপেনটাইপ ফন্ট (OTF)

স্কেলেবল কম্পিউটার ফন্টগুলোর একটি ফরমেট হলো ওপেনটাইপ ফন্ট। এটি ট্রুটাইপের উপর নির্মাণ করা হয়েছিল এবং এটি মাইক্রোসফটের একটি রেজিস্টার্ড ট্রেডমার্ক। ওপেনটাইপ ফন্ট বর্তমানে প্রধান প্রধান কম্পিউটার প্লাটফর্মগুলোতে ব্যবহৃত হয়ে থাকে।

ওয়েব ওপেন ফরমেট (WOFF)

WOFF ওয়েব পেজে ব্যবহারের উপযোগী একটি ফরমেট। এটি ২০০৯ সালে ডেভলাপ করা হয়েছিল এবং এখন ডব্লিওথ্রিসি'র সুপারিশ করা ফরমেটগুলোর একটি। WOFF হলো কম্প্রেশন ও বাড়তি মেটাডাটা সহ ওপেনটাইপ অথবা ট্রুটাইপ । এর লক্ষ্য হলো ব্যান্ডউইথের সীমারেখার মধ্যেই সার্ভার থেকে ক্লাইয়েন্টের কাছে ফন্ট পৌছে দেয়া।

এসভিজি ফন্ট/শেপ

টেক্সট দেখানোর সময় এটি এসভিজিকে glyphs হিসেবে ব্যবহৃত হতে দেয়। SVG 1.1 স্পেসিফিকেশন একটি এসভিজি ডকুমেন্টের ভেতর ফন্ট তৈরির জন্য একটি ফন্ট মড্যুল নির্দিষ্ট করে দেয়। আপনি এসভিজি ডকুমেন্টের মধ্যেও সিএসএস ডিফাইন করে দিতে পারবেন। এবং @font-face রুলও এসভিজি ডকুমেন্টের টেক্সটের মধ্যে প্রয়োগ করা যায়।

এম্বেডেট ওপেন টাইপ ফন্ট (EOT)

EOT ওপেনটাইপ ফন্টের একটি কম্প্যাক্ট ফরমেট যা ওয়েবপেজে এম্বেডেড ফন্ট হিসেবে ব্যবহারের জন্য মাইক্রোসফট কর্তৃক ডিজাইন করা হয়েছিল।

ফন্ট ফরমেটের জন্য ব্রাউজার সাপোর্ট

নিচের নম্বরগুলোর মাধ্যমে ফন্ট ফরমেট প্রথম যে ব্রাউজার ভার্শনগুলো সাপোর্ট করে তার তালিকা প্রকাশ করা হয়েছে।

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	Not supported	36.0	35.0*	Not supported	26.0
SVG	Not supported	4.0	Not supported	3.2	9.0
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*ফন্ট ফরমেট তখনি কাজ করে যখন তা "ইন্স" হিসেবে সেট করা হয়।

আপনার পছন্দমতো ফন্ট ব্যবহার করুন

সিএসএস-থ্রি'র @font-face রুলে আপনাকে প্রথমে ফন্টটির একটি নাম ঠিক করে দিতে হবে ( যেমনঃ myFirstFont) এবং তারপর নামটি ফন্টটির দিকে নির্দেশ করে দিতে হবে। ফন্ট এর ইউআরএল লেখার সময় সর্বদা লোয়ার কেস বা ছোট হাতের অক্ষর ব্যবহার করুন। ইন্টারনেট এক্সপ্লোরারে আপার কেস বা বড় হাতের অক্ষর সমস্যা করতে পারে।

একটি এইচটিএমএল এলিমেন্টের জন্য ফন্ট ব্যবহার করতে, ফন্ট ফ্যামিলি প্রপার্টির মাধ্যমে ফন্টের নামের দিকে নির্দেশ করুনঃ

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

বোল্ড টেক্সট ব্যবহার করা

বোল্ড টেক্সট ডেস্ক্রিপ্টরে আপনাকে অবশ্যই আরেকটি @font-face রুল যোগ করে দিতে হবেঃ

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

"sansation_bold.woff" ফাইলটি হলো আরেকটি ফন্ট ফাইল যা স্যানসেশন ফন্টের বোল্ড ক্যারেক্টারগুলো ধারণ করে। "myFirstFont" ফন্ট-ফ্যামিলির'র যেকোন টেক্সটকে ব্রাউজার সবসময় বোল্ড হিসেবে দেখাতে এই ফাইলটিকে ব্যবহার করবে। এভাবে আপনি একই ফন্টের জন্য অনেকগুলো @font-face রুল তৈরি করতে পারেন।

সিএসএস-থ্রি ফন্ট ডেস্ক্রিপটর

নিচের টেবলে @ রুলের ভিতর যেসকল ফন্ট ডেস্ক্রিপটর ডিফাইন করা যায় তার তালিকা দেয়া হয়েছেঃ

font-family -এর ভ্যালু হবে ফন্ট এর নাম। অবশ্যই লাগবে।

src -এটি ফন্টের ইউআরএল; অবশ্যই লাগবে।

font-stretch -এটি অপশনাল। কিভাবে ফন্টটি স্ট্রেচ করা হবে তা ঠিক করে। এর ডিফল্ট ভ্যালু "normal" এর ভ্যালুগুলোর তালিকাঃ

বর্ননাকারী	মান	বর্ণনা
font-family	name	ফন্টকে একটি নাম নির্দিষ্ট করা প্রয়োজন।
src	URL	ফন্ট ফাইলের একটি URL নির্দিষ্ট করা প্রয়োজন।
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	অপশনাল; কিভাবে ফন্টটি প্রসারিত হবে তা ঠিক করা হয়। ডিফল্ট ভ্যালু "normal"
font-style	normal italic oblique	অপশনাল; কিভাবে ফন্টটি স্টাইল করা হবে তা ঠিক করা হয়। ডিফল্ট ভ্যালু "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	এটিও অপশনাল; ফন্টের পুরুত্ব ঠিক করে। এর ডিফল্ট ভ্যালু "normal"
unicode-range	unicode-range	unicode-range - অপশনাল। UNICODE ক্যারেক্টারের এর রেঞ্জ ঠিক করে দেয়। ডিফল্ট ভ্যালু "U+0-10FFFF"

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস ৩ টেক্সট ইফেক্টস (CSS3 Text Effects)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

css3 তে বেশ কিছুই নতুন টেক্সট ইফেক্টস আছে।

এই অধ্যায়ে আপনারা নিচের অধ্যায়গুলো সম্পর্কে জানবেন-

text-shadow
word-wrap

ব্রাউজার সাপোর্ট (Browser Support)

এই প্রপার্টি দুটো css3 ভার্সন, তাই সকল নতুন বা latest version এর ব্রাউজার গুলো সাপোর্ট করবে।

নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে।

সংখ্যা -o- দ্বারা browser version নির্দেশ করা হয়েছে-

প্রোপার্টি
text-overflow	4.0	12.0	6.0	7.0	3.1	11.0 9.0 -o-
word-wrap	23.0	12.0	5.5	3.5	6.1	12.1
word-break	4.0	12.0	5.5	15.0	3.1	15.0

text-shadow

কোন কিছুর Shadow বা ছায়া তৈরি করতে আপনাকে চারটা জিনিস ব্যাখ্যা করে দিতে হবে যথা- horizontal shadow, the vertical shadow, the blur distance, এবং the color of the shadow বা ছায়াটির রং কি হবে।
উদাহরণ-

h1{
     text-shadow: 5px 5px 5px #ff0000;
 }

আপনি color code এবং value গুলো পরিবর্তন করে কোন value এর কারনে কোন পরিবর্তন আসছে তা দেখে নিতে পারেন।

CSS3 Word Wrapping

যখন একটা word বা শব্দ অনেক বড় হয়, যা এরিয়ার ভিতর আঁটানো যায়না তখন শব্দটা বাইরে চলে যায়।
css3 তে word wrap প্রপার্টিটা শব্দটিকে তার area এর ভিতরে চেপে ঢুকতে বাধ্য করে, এতে যদি অন্য কোন শব্দের মাঝখানে ঢুকে যায় তবুও।
উদাহরণ-

P{
    word-wrap: break-word;
 }

নিম্নে কিছু টেক্সট প্রপার্টি (CSS3 Text Properties) দেয়া হল

hanging-punctuation = এটি ব্যাখ্যা করে যে কোন punctuation charecter কে বক্স এর বাইরে অবস্থান করান যায় কি না। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
punctuation-trim = কোন punctuation character কে ছাটার ক্ষেত্রে এটি ব্যবহার করা যায়। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
text-overflow = যখন কোন প্রপার্টি overflow করে তখন এই প্রপার্টি ব্যবহার করা যায়।
text-shadow = এই প্রপার্টি টি যে কোন text বা শব্দের shadow বা ছায়া ৈরি করে।
word-break = এটি সাধারণত লাইন ভাঙার কাজ করে।
word-wrap = খুব বড় শব্দগুলোকে ভেঙে পরের লাইন তৈরি করে।

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস ৩ গ্র্যাডিয়েন্টস (CSS3 Gradients)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

CSS3 gradients দুটি color এর মধ্যে সংযোগ স্থল কে মসৃণ করে।

এই কাজ টি করার জন্য আপনাকে একটি image ব্যাবহার করতে হবে। তবে CSS3 gradient ব্যাবহার করে আপনি download
এবং bandwidth usage কমাতে পারবেন। একইসাথে gradient এর মাধ্যমে করা element গুলি ভাল দেখায় যখন zoom
করা হয়, কেননা gradient সবসময় browser এ সৃষ্টি হয়।

CSS3 তে ২ ধরনের gradient দেখা যায়-

Linear (রৈখিক ) Gradients (goes down/up/left/right/diagonally)
Radial (বৃত্তীয়) Gradients (defined by their center)

ব্রাউজার সাপর্ট

নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে।

সংখ্যা -webkit-, -moz-, or -o- দ্বারা browser version নির্দেশ করা হয়েছে-

প্রোপার্টি
linear-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	26.0 10.0 -webkit-	12.0	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

CSS3 Linear (রৈখিক) Gradients

একটি linear gradient তৈরি করার জন্য কমপক্ষে দুটি "color stop" দরকার হবে। color stop হচ্ছে একটি স্থান যেখানে দুটি
color এর মিলন ঘটে। আপনি এর সাথে একটি gradient effect দ্বারা আদ্যস্থল এবং একটি দিক(অথবা কোণ) ঠিক করে দিতে
পারেন।

কোড গুলি লিখার পদ্ধতি-

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (রৈখিক Gradient - উপর থেকে নিচ আবধি)

নিচের উদাহরণ টি Linear Gradient এর একটি উদাহরণ যেটি শুরু হয়েছে top থেকে এবং এখানে red এবং blue এর transition দেখানো
হয়েছে।
উদাহরণটিঃ

#grad {
  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */
}

Linear Gradient - Left to Right(বা থেকে ডান দিকে)

নিচের উদাহরণ টি আপনাকে একটি linear gradient দেখাবে যেখানে এই বাম পাশ থেকে শুরু হয়। এখানে red এবং blue এর transition দেখানো
হয়েছে।
উদাহরনঃ

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , blue); /* Standard syntax */
}

Linear Gradient - Diagonal (তির্যক)

আপনি একটি Diagonal Gradient তৈরি করতে পারেন যেখানে এর horizontal(আনুভূমিক) and vertical(খাড়া) শুরুর স্থানটিকে
নির্দিষ্ট করে দিতে হয়।
নিচের উদাহরণটি থেকে এই বিষয় টি ভাল ভাবে বুজতে পারবেন।
এটি একটি linear gradient যা top left থেকে শুরু হয় এবং bottom right এ শেষ হয়।

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}

Using Angles (কোণ এর ব্যাবহার)

আপনি যদি gradient এর উপর আরও বেশি নিয়ন্ত্রণে রাখতে চান তবে আপনাকে একটি angle নির্দিষ্ট করতে হবে পূর্বে নির্দিষ্ট
করা গতিপথ(to bottom, to top, to right, to left, to bottom right, etc.) বাদ দিয়ে।
কোডটি নিম্নরূপ-

background: linear-gradient(angle, color-stop1, color-stop2);

Horizontal line এবং gradient line এর মধ্যে একটি কোণ নির্দিষ্ট করার জন্য Angle ব্যাবহার করা হয়। যেটি ঘড়ির ঘূর্ণন এর উল্টা।
আপরদিকে, 0 ডিগ্রী bottom থেকে top gradient এবং 90 ডিগ্রী left থেকে right gradient তৈরি করে।

কোডগুলি নিম্নরূপ -

 #grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, red, blue); /* Standard syntax */
}

Using Multiple Color Stops (একাধিক Color Stop এর ব্যাবহার)

নিম্নের উদাহরনে একাধিক Color Stop এর ব্যাবহার পদ্ধতি দেখানো হয়েছে।
কোড-

#grad {
  background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, green, blue); /* Standard syntax */
}

নিচের উদাহরণটি তে rainbow color দ্বারা linear gradient তৈরি করণ পদ্ধতি-
কোড-

#grad {
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Standard syntax */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Using Transparency (স্বচ্ছতার ব্যাবহার)

CSS3 gradient স্বচ্ছতা সমর্থন করে।এটি ব্যাবহার করা হয় fading effects তৈরি করার জন্য।

স্বচ্ছতা তৈরি করার জন্য এবং color stop নির্দিষ্ট করার জন্য "rgba()" function টি ব্যাবহার করা হয়।
rgba() function এর শেষ parameter value 0 থেকে 1 এবং এটি স্বচ্ছতা নির্দেশ করে। এখানে 0 দ্বারা সম্পূর্ণ
স্বচ্ছতা এবং 1 দ্বারা full color নির্দেশ করে।
নিম্নে এর উদাহরণ দেয়া হল-

#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

Repeating a linear-gradient (linear-gradient এর পুনরাবৃত্তি)

"repeating-linear-gradient()" function টি ব্যাবহার করা হয় linear gradient এর পুনরাবৃত্তি করার জন্য।
উদাহরনঃ

#grad {
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Standard syntax */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 Radial Gradients

Radial gradient টি কেন্দ্র দ্বারা নির্দিষ্ট করা হয়।
একটি radial gradient তৈরি করতে আপনাকে কমপক্ষে দুটি color stops নির্দিষ্ট করতে হবে।
Radial Gradient তৈরির Syntax নিম্নরুপঃ

background: radial-gradient(shape size at position, start-color, ..., last-color);

স্বাভাবিক ভাবে আকৃতি হয় উপবৃত্তাকার, কোণ টি দূরবর্তী কোনায় হয়, উৎপন্ন হয় কেন্দ্রে।

Radial Gradient - Evenly Spaced Color Stops (Color Stop গুলি সমব্যবধান এ থাকে )

উদাহরনঃ

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, green, blue); /* Standard syntax */
}

Radial Gradient - Differently Spaced Color Stops(ভিন্ন ব্যবধানের Color Stop)

উদাহরনঃ

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}

Set Shape (আকার নির্দিষ্টকরণ)

Shape parameter টি gradient এর shape নির্দিষ্ট করে। এটি circle(বৃত্তাকার) বা ellipse(উপবৃত্তাকার) এর value
গ্রহন করতে পারে।
উদাহরনঃ

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

Use of Different Size Keywords (বিভিন্ন ধরনের Keyword এর ব্যাবহার)

Size parameter দ্বারা gradient এর size নির্দিষ্ট করা হয়। এর ৪ ধরনের মান হতে পারে-

closest-side
farthest-side
closest-corner
farthest-corner

উদাহরনঃ

বিভিন্ন আকারের keyword সংবলিত একটি radial gradient এর উদাহরণ নিম্নরূপ-

#grad1 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Standard syntax */
  background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}

#grad2 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Standard syntax */
  background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}

Repeating a radial-gradient (radial-gradient এর পুনরাবৃত্তি)

repeating-radial-gradient(), function টি ব্যাবহার করা হয় radial gradient এর পুনরাবৃত্তি করার জন্য।
উদাহরনঃ

#grad {
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ ব্যাকগ্রাউন্ড (CSS3 Backgrounds)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Sheikh Mahfuzur Rahman

সিএসএস-থ্রি'তে কিছু নতুন ব্যাকগ্রাউন্ড প্রপার্টি যোগ করা হয়েছে, যার মাধ্যমে ব্যাকগ্রাউন্ড এলিমেন্টকে আরও ভালোভাবে নিয়ন্ত্রণ ও স্টাইল করা যায়।

এই চ্যাপ্টারে আপনারা নিচের ব্যাকগ্রাউন্ড প্রপার্টিগুলো সম্পর্কে জানবেনঃ

background-size
background-origin
background-clip

কিভাবে মাল্টিপল (একাধিক) ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায় তা নিয়েও এখানে আলোচনা করা হবে।

ব্রাউজার সাপোর্ট

নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ব্যাকগ্রাউন্ড প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- এর সাথে যুক্ত ভার্শন নম্বরগুলো প্রিফিক্সসহ যেসব ভার্শন কাজ করে তার তালিকা প্রকাশ করে।

Property
background-image (একাধিক ব্যাকগ্রাউন্ড সহ)	9.0	4.0	3.6	3.1	11.5
background-size	9.0	4.0 1.0 -webkit-	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-
background-origin	9.0	1.0	4.0	3.0	10.5
background-clip	9.0	4.0	4.0	3.0	10.5

সিএসএস-থ্রি background-size প্রপার্টি

background-size প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের সাইজ বা আকার ঠিক করে। সিএসএস-থ্রি প্রকাশের আগে ব্যাকগ্রাউন্ড ইমেজের আকার ইমেজের প্রকৃত আকার দিয়ে নির্ধারণ করা হতো। সিএসএস-থ্রি'তে ব্যকগ্রাউন্ড ইমেজের আকার ঠিক করে দেয়া সম্ভব যা আমাদের বিভিন্ন ক্ষেত্রে ব্যাকগ্রাউন্ড ইমেজগুলোকে পুনরায় ব্যবহারের সুযোগ করে দেয়।

আপনি সাইজটি পিক্সেল বা পার্সেন্টেজে নির্ধারণ করে দিতে পারেন। আপনি যদি সাইজটি পার্সেন্টেজে ঠিক করে দেন, সাইজটি প্যারেন্ট এলিমেন্টের প্রস্থ ও উচ্চতা এর সাপেক্ষে নির্ধারিত হবে।

১) উদাহরণ

একটি ব্যাকগ্রাউন্ড ইমেজকে রিসাইজ করা

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 1px solid black;
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    padding:15px;
}

#example2 {
    border: 1px solid black;
    background:url(img_flwr.gif);
    background-size: 100px 80px;
    background-repeat: no-repeat;
    padding:15px;
}
</style>
</head>

<body>

<p>Original background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Resized background-image:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

২) উদাহরণ
পুরো কন্টেন্ট এরিয়াতে ব্যাকগ্রাউন্ড ইমেজকে ছরিয়ে দেয়াঃ

div {
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}

সিএসএস-থ্রি ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি

background-origin প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের অবস্থান (positioning) নির্ধারণ করে দেয়। ব্যকগ্রাউন্ড ইমেজটি content-box, padding-box অথবা border-box এরিয়াতে বসানো যায়।

উদাহরণ
ব্যাকগ্রাউন্ড ইমেজকে content-box এ স্থাপন করাঃ

div {
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}

সিএসএস-থ্রি মাল্টিপল ব্যাকগ্রাউন্ড ইমেজ

সিএসএস-ত্রি আপনাকে একটি এলিমেন্টে একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহারের সুযোগ করে দেয়।

উদাহরণ
এলিমেন্টের জন্য দু'টি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যাকঃ

body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}

সিএসএস-থ্রি ব্যাকগ্রাউন্ড প্রপার্টিসমূহ

background-clip - এটি ব্যাকগ্রাউন্ড ইমেজের পেইন্টিং এরিয়া নির্ধারণ করে।
background-origin - এটি ব্যকগ্রাউন্ড ইমেজের পজিশনিং (অবস্থান) এরিয়া নির্ধারণ করে
background-size - এটি ব্যাকগ্রাউন্ড ইমেজের সাইজ ঠিক করে।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ বর্ডার (CSS3 Borders)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস ৩ এর সাহায্যে তুমি গোলআকৃতির বর্ডার তৈরি করতে পারবা, এবং বক্স এ ছায়া দিতে পারবা, এবং যেকোন ইমেজ কে বর্ডার করতে পারবা ফটোশপ অথবা অন্য যে কোন ধরনের ডিজাইন প্রোগ্রাম ছাড়াই।

এই অংশে আমরা শিখব বর্ডার এর প্রপার্টিজ এর কিছু বিষয় সম্পর্কেঃ

বর্ডার - রেডিয়াস
বক্স - ছায়া
বর্ডার - ইমেজ

এই কাজ গুল প্রায় সব ওয়েব ব্রাওজার দিয়েই করা যায়।

সিএসএস ৩ বর্ডার - রেডিয়াস প্রপার্টি- গোলাকার কোনা

সিএসএস ২ তে গোলাকার কোনা তৈরি করা অনেক কষ্টের ছিল । আমাদেরকে প্রতিটা কোনার জন্য ভিন্ন ভিন্ন ইমেজ ব্যবহার করতে হতো।
এখন সিএসএস ৩ তে গোলাকার কোনা তৈরি করা অনেক সহজ । সিএসএস ৩ তে border-radius প্রোপার্টি ব্যবহার করা হয় গোলাকার কোনা তৈরি করার জন্য ।

উদারন সরুপ

একটা <div> এর ভিতর গোলাকার ইলিমেন্ট লেখার জন্য

 div {
     border: 3px solid;
     border-radius: 30px;
 }

সিএসএস ৩ box-shadow প্রপার্টি

সিএসএস ৩ তে box-shadow প্রপার্টি ব্যবহার করা হয় বক্স এ ছাড়া দেয়ার জন্য
উদারন
একটা <div> এর ভিতর বক্স ছায়া ব্যবহার করার জন্য লিখতে হয়

div {
     box-shadow: 20px 12px 6px #888888;
 }

সিএসএস ৩ এ বর্ডার-ইমেজ প্রপার্টি

সিএসএস ৩ এর মাধমে তুমি খুব সহজ এই একটা ইমেজ কে বর্ডার হিসাবে ব্যবহার করতে পারবা বর্ডার-ইমেজ প্রপার্টি এর মাধ্যমে । এটা খুবেই ইজি ।

উদারন
একটা ইমেজ কে একটা বর্ডার হিসাবে ব্যবহার করতে হলে <div> এর ভিতর লিখতে হবে

div {
     -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
     -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
     border-image: url(border.png) 30 30 round;
 }

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ন্যাভিগেশন বার (CSS Navigation Bar)

February 9, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

মীর তাউহীদুল ইসলাম
ওয়েব ডেভেলপার, ওডেস্ক

ব্যাবহারের সুবিধার্থে প্রত্যেকটি ওয়েব সাইটের জন্য ন্যাভিগেশন বার প্রয়োজন। সিএসএস এর মাধ্যমে যেকোন এইচটিএমএল মেনুকে খুব সুন্দর ন্যাভিগেশন বার এ পরিনত করা যায়।

ন্যাভিগেশন বার = লিংক তালিকা

একটি ন্যাভিগেশন বার তৈরি করার জন্য প্রথমে একটি এইচটিএমএল কাঠামোর প্রয়োজন হয়।
আমাদের উদাহারনে আমরা ন্যাভিগেশন বার তৈরি করেছি সাধারণ এইচটিএমএল লিস্ট (li) ট্যাগের মাধ্যমে। মূলত ন্যাভিগেশন বার হল একটি লিংকের তালিকা বা লিস্ট। তাই আমরা <ul></ul> এবং <li></li> ট্যাগগুলো ব্যাবহার করব।
উদাহারনঃ

 <ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

এখন এই তালিকা থেকে বুলেট (গোল কাল বৃত্ত) এবং মার্জিন এবং প্যাডিং সরিয়ে দেওয়া হল:
উদাহারনঃ

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

উদাহরণ ব্যাখ্যা:

লিস্ট স্টাইল টাইপ নান( list-style-type: none;) দ্বারা বুলেটগুলোকে মুছে ফেলা হয়েছে।
ব্রাউজার এর ডিফল্ট সেটিংস মুছে ফেলার জন্য মার্জিন এবং প্যাডিং ০ সেট করা হয়েছে।

এখন লক্ষ করতে হবে যে, উপরের উদাহারনে যে কোডটুকু লেখা হয়েছে তা প্রত্যেক ন্যাভিগেশন বার তৈরি করতে লিখতে হবে হোক তা হরিজন্টাল বা ভারটিকাল।

ভারটিকাল ন্যাভিগেশন বার

একটি ভারটিকাল ন্যাভিগেশন বার তৈরির জন্য আমাদের শুধু উপরের কোড থেকে <a> উপাদানটির স্টাইল পরিবর্তন করতে হবে।
উদাহারনঃ

a {
    display: block;
    width: 60px;
}

উদাহরণ ব্যাখ্যা:

display: block –দ্বারা লিংকটিকে একটি ব্লক এলিমেন্টে রূপান্তরিত করা হয়েছে যার ফলে লিংকটি তার ব্লকের পুরো জায়গা দখল করবে এতে শুধু লিংকের লেখাটি ক্লিকেবল হবে না পুরো জায়গাটিই ক্লিকেবল হবে।
width: 60px –দ্বারা বুঝা যায় আমরা লিংক ব্লকটির জন্য ৬০পিক্সেল পরিমাণ জায়গা নিবো যদিও ব্লক সবসময় সম্পূর্ণ জায়গা দখল করে।

নোটঃ সবসময় <a> উপাদানটির জন্য ভারটিকাল ন্যাভিগেশন বার এ প্রস্থ উল্লেখ করতে হবে কারন এটা না করলে অনেক সময় IE6 অপ্রত্যাশিত ফলাফল উৎপন্ন করতে পারে।

হরিজন্টাল ন্যাভিগেশন বার

হরিজন্টাল ন্যাভিগেশন বার ইনলাইন এবং ফ্লটিং এই দুই পদ্ধতিতে তৈরি করা যায়। দুটো পদ্ধতিই ভাল কাজ করবে তবে লিংকগুলোর সাধারণ আকার বজায় রাখতে ফ্লটিং পদ্ধতি ব্যাবহার করতে হবে।

ইনলাইন লিস্ট পদ্ধতি

ইনলাইন লিস্ট পদ্ধতিতে ন্যাভিগেশন বার তৈরির জন্য আমাকে শুধু </li> ট্যাগের স্টাইলের একটা পরিবর্তন করতে হবে।
উদাহারনঃ

li {
    display: inline;
}

উদাহরণ ব্যাখ্যা:
সাধারনত লিস্ট স্টাইল এ ডিসপ্লে-ব্লক ডিফল্ট থাকে তাই (display: inline;) ট্যাগের মাধ্যমে এই ডিফল্ট কে পরিবর্তন করে ইনলাইন করা হয়।

ফ্লটিং লিস্ট পদ্ধতি

উপরের উদাহারনে লিংক গুলোর প্রত্যেকের পৃথক পৃথক প্রস্থ থাকবে। কিন্তু সবগুলো লিংকের সমান প্রস্থ এর জন্য লিংক গুলোকে ফ্লট করতে হবে। এর জন্য <li> এর <a> কে স্টাইল করতে হবে।

উদাহারনঃ

li {
    float: left;
}

a {
    display: block;
    width: 60px;
}

উদাহরণ ব্যাখ্যা:

এখানে উদাহারনে প্রত্যেকটি লিস্ট ট্যাগকে বামে ফ্লট করানো হয়েছে এবং প্রত্যেকটি লিংককে ব্লকে রূপান্তরিত করে প্রত্যেকটির জন্য পৃথক পৃথক ৬০ পিক্সেল জায়গা নেওয়া হয়েছে।

Videos by Us, এস কিউ এল - ০০১ । SQL - 001

এক্সেল এবং এসকিউএল সার্ভারের জন্য ডেটা মাইনিং টুলস সংক্ষিপ্ত বিবরণ . Data Mining Tools Overview for Excel and SQL Server

February 8, 2015 Sayed Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Data Mining Tools Overview for Excel and SQL Server

পি এইচ পি টিউটোরিয়াল । PHP tutorial

multiple Mysql query ব্যবহার করে পিএইচপি দিয়ে ডাটাবেস টেবিল এ অধিক ডাটা একসাথে অ্যাড করা যায়. PHP Insert Multiple Records Into MySQL

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

নাম-শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
বিষয়- PHP Insert Multiple Records Into
multiple Mysql query ব্যবহার করে পিএইচপি দিয়ে ডাটাবেস টেবিল এ অধিক ডাটা একসাথে অ্যাড করা যায়

পিএইচপি ব্যবহার করে ফলাফল
< ?php $servername = "localhost";/*mysql এর সার্ভার নাম*/ $username = "username";/*ইউজার নাম*/ $password = "password";/*পাসওয়ার্ড*/ $dbname = "myDB";/*তৈরিকৃত ডাটাবেসের নাম*/ // mysql এর সাথে সঠিক কানেকশন তৈরি করা $conn = new mysqli($servername, $username, $password, $dbname); //কানেকশন চেক করা if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
/*প্রধান SQL query ডাটাবেস এ ডাটা যোগ করার জন্য প্রথমে টেবিল এর নাম উল্লেখ করা হয়েছে এরপর ব্র্যাকেটের মধ্যে কলাম এর নাম উল্লেখ করা হয়েছে পরবর্তী ব্রাকেট এর মধ্যে data গুলো যোগ করতে হবে এই নির্দেশ দেয়া হয়েছে*/
$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', 'john@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Mary', 'Moe', 'mary@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Julie', 'Dooley', 'julie@example.com')";
if ($conn-> multi_query ($sql) === TRUE)
/query যদি ঠিকঠাক মতন হয়ে থকে তাহলে সফল বার্তা দেখাবে/
{
echo "New record created successfully";
} else
/*তা না হলে বিফল বার্তা দেখাবে* /
{
echo "Error: " . $sql . "
" . $conn->error;
}

$conn->close();/*কানেকশন বন্ধ করা হবে*/
?>

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস৩ পরিচিতি (CSS3 Introduction)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Ali Hossain

Student of English Literature, Jahangirnagar University.

CSS (সিএসএস) এর আধুনিক মানদন্ড বা নিশান হচ্ছে CSS3 (সিএসএস৩)

পূর্বের CSS (সিএসএস) এর ভার্সন এর সাথে CSS3 (সিএসএস৩) সম্পূর্নভাবে সামঞ্জস্যপূর্ণ । এই অধ্যায়ে আপনি CSS3 (সিএসএস৩) এর নতুন বৈশিষ্ট্য সম্পর্কে জানতে পারবেন।

CSS3 Modules (সিএসএস৩ মডিউলস)

CSS3 (সিএসএস৩) কে “Modules” (মডিউলস) এ বিভক্ত করা হয়েছে।

এটিতে “পুরাতন CSS (সিএসএস) এর বৈশিষ্ট্য রয়েছে (যে গুলোকে ছোট ছোট ভাগে বিভক্ত করা হয়েছে)। উপরন্তু, নতুন Modules (মডিউলস) যোগ করা হয়েছে।

CSS3 (সিএসএস৩) এর সবচেয়ে গুরুত্বপুর্ন কিছু Modules (মডিউলস) হচ্ছে :

Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 (সিএসএস৩) এর সুপারিশ

CSS3 (সিএসএস৩) এর অধিকাংশ Module (মডিউল) এ W3C এর প্রস্তাবনা রয়েছে, এবং CSS3 (সিএসএস৩) এর বৈশিষ্ট্য সব আধুনিক ব্রাওজারগুলুতে প্রয়োগ করা হয়েছে।

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস সিলেক্টর টিউটোরিয়াল

সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। বিভিন্ন ধরনের সিলেক্টর আছে, এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়। সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে। সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমনঃ

১। এইচটিএমএল এলিমেন্ট
২। এট্রিবিউট

রুল সেট বা রুল (css rule)

Selector আর declaration block দুটি মিলে একটা রুল। অর্থ্যাৎ কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট করে সেটার জন্য যেসব সিএসএস লেখা হয় তা হচ্ছে একটা রুল।

পুরো সিএসএস টিউটোরিয়াল জুড়ে শুধু মুলত ৩টি জিনিসের আলোচনা হবেঃ

সিলেক্টর : কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট বা টার্গেট করে সেটার জন্য সিএসএস রুল লেখা হয়। এলিমেন্টে id, class এট্রিবিউটের যে মান দেয়া থাকে সেটা দিয়েই সিলেক্ট/টার্গেট করা যায়।

প্রেপার্টি : সিএসএস এ শত শত প্রোপার্টি আছে। এক একটি দিয়ে এক এক কাজ হয় যেমন "background-color" প্রোপার্টি দিয়ে কোন এলিমেন্টের ব্যাকগ্রাউন্ডে রং দেয়া যায়। "font-family" দিয়ে এলিমেন্ট টির ফন্ট কি হবে সেটা ঠিক করা যায় ইত্যাদি।

মান (value) : প্রত্যেকটি প্রোপার্টির নির্দিষ্ট মান আছে। এই প্রোপার্টি এবং প্রোপার্টিগুলির মান কি কি হবে সেগুলি যত বেশি মুখস্থ থাকবে তত ভাল কাজ করতে পারবেন। তবে কাজ করে করে প্রফেশনাল হয়ে গেলে শত শত প্রোপার্টি এবং এদের মানগুলি মুখস্থই থাকে।

01.h4
02.{
03.background-color:white;
04.font-size:12px;
05.}
06.p
07.{
08.color:red;
09.}

এখানে h4, p এসব হচ্ছে সিলেক্টর, h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।
h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু ডিক্লেয়ারেশন ব্লক।
সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন।
background-color হচ্ছে প্রোপার্টি এবং white হচ্ছে এর ভ্যালু।
আর পুরোটা অর্থ্যাৎ h4 থেকে শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট। উপরের কোডে দুটি রুল আছে h4 এবং p।

নিচে বিভিন্ন সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হলঃ

১। ইউনিভার্সাল সিলেক্টর

ইউনিভার্সাল সিলেক্টর এইচটিএমএল পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট করে। যেমনঃ নিচের কোডটি সব এইচটিএমএল এলিমেন্ট এর রং লাল করে দেবে।

1.* {color:red;}

অনেকে padding, margin এখানে 0 করে দেন যেমনঃ

1.*{
2.margin:0;
3.padding:0;
4.}

এই কাজটি করা অপ্রোয়জনীয়, এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ করেন।

২। টাইপ সিলেক্টরঃ

1.p{
2.background-color:orange;
3.}
4.a{
5.color:maroon;
6.}

p, a হচ্ছে এখানে টাইপ সিলেক্টর। p সিলেক্টর এইচটিএমএল পেজের সব এলিমেন্ট কে সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস মিডিয়া টাইপস (CSS Media Types)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

মৃত্যুঞ্জয় বিশ্বাস

এই @media পদ্ধতি ব্যবহার করে, একটি ওয়েবসাইট এর স্কৃণ্, মুদ্রণ, মোবাইল ফোন, ট্যাবলেট ইত্যাদি জন্য একটি ভিন্ন লেআউট করতে পাড়বো।

মিডিয়ার ধরন সমূহ

কিছু CSS এর বৈশিষ্ট্য শুধুমাত্র একটি নির্দিষ্ট মিডিয়া জন্য ডিজাইন করা হয়। উদাহরণস্বরূপ "voice-family" বৈশিষ্ট শ্রবণেন্দ্রিয় সংক্রান্ত ব্যবহারকারী এজেন্ট এর জন্য ডিজাইন করা হয়েছে। অন্যান্য বেশ কয়েকটি বৈশিষ্ট্য বিভিন্ন মিডিয়া ধরনের জন্য ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, "font-size" বৈশিষ্ট স্কৃণ্ এবং প্রিন্ট মিডিয়ার জন্য ব্যবহার করা হয়ে থাকে। যদিও এর বিভিন্ন ব্যবহার আসে। একটি নথিতে সাধারণত কাগজ থেকে একটি স্কৃণ্ এ বড় ফন্টের প্রয়োজন হয়। sans-serif ফন্ট এর মাধমে স্কৃণ্ এ সহজে পড়তে পারা যায় , যদিও কাগজেও সহজে পড়া যায়।

@ মিডিয়া রুল সমূহ

এই @media রুল, একই স্টাইল শীট এ বিভিন্ন মিডিয়ার জন্য বিভিন্ন নিয়ম তৈরি করে। উদাহরণস্বরূপ এই স্টাইল এ নীচের ব্রাউজার এর বর্ণনাই একটি ১৪14 পিক্সেল Verdana ফন্ট এর স্কৃণ্ প্রদর্শন করা হল। যদি পাতাগুলো প্রিন্ট করা হয়। তবে এটি একটি ২০20 পিক্সেল ফন্ট এবং লাল রঙের হবে।

উদাহরণঃ

@media screen {
      p {
      font-family: verdana,sans-serif;
      font-size: 14px;
      }
 }

@media print {
      p {
      font-size: 20px;
      color: red;
      }
 }

নীচে অন্যান্য মিডিয়া ধরন সম্পর্কে আলোচনা করা হলঃ

all= সবধরনের মিডিয়া ডিভাইসের জন্য ব্যবহৃত হয়।
aural= এটি বক্তৃতা এবং শব্দ synthesizers জন্য ব্যবহৃত হয়।
braille= ব্রেইল স্পৃশ্য প্রতিক্রিয়া ডিভাইসের জন্য ব্যবহৃত হয়।
embossed= পেজড ব্রেইল প্রিন্টার জন্য ব্যবহৃত করা হয়।
handheld= এটি ছোট বা হ্যান্ডহেল্ড ডিভাইসের জন্য ব্যবহৃত হয়।
print= প্রিন্টার জন্য ব্যবহৃত হয়।
projection= প্রোজেক্ট উপস্থাপনা জন্য ব্যবহৃত হয়, সাদারনত স্লাইডের মত।
screen= কম্পিউটার পর্দা জন্য ব্যবহৃত হয়
tty= Teletypes এবং টার্মিনালের মত, যা মিডিয়ার নির্দিষ্ট পিচ প্রকৃতির গ্রিড এ ব্যবহার করা হয়।
tv= টেলিভিশন -টাইপ ডিভাইসের জন্য ব্যবহৃত হয়।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস এ অস্বচ্ছতা / স্বচ্ছতা (CSS Image Opacity / Transparency)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

অঞ্জন দাস (American international univetsity)

আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ। সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়।

CSS এর মাধ্যমে সহজে স্বচ্ছ ইমেজ তৈরি করা। CSS এর অস্বচ্ছতা (Opacity) CSS 3 এর একটি একটি অংশ।

উদাহরণ 1 - একটি স্বচ্ছ ইমেজ তৈরি করাঃ

CSS 3 বৈশিষ্ট্য হল এর স্বচ্ছতা ও অস্বচ্ছতা। প্রথম আমরা কিভাবে CSS এর সঙ্গে একটি স্বচ্ছ ইমেজ তৈরি করতে হয় তা দেখব ।
নিয়মিত চিত্র:

Transparency তে একই চিত্র:

উদাহরণঃ

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

অপাসিটি নিয়ন্ত্রণের জন্য CSS এ ইন্টারনেট এক্সপ্লোরার-৯, ফায়ারফক্স, ক্রোম, অপেরা এবং সাফারি সহ নতুন সকল ব্যাউজারের জন্য opacity প্রোপার্টি ব্যবহৃত হয়। opacity প্রোপার্টি র মান 0.0 থেকে 1.0 গ্রহণ করতে পারে। IE8 এবং তার আগের ব্যাউজার filter:alpha(opacity=x) ব্যবহার করে। এর নিম্ন মান উপাদান আরো স্বচ্ছ করে তোলে।

উদাহরণ 2 - চিত্র ট্রান্সপারেন্সি এর হভার (Hover) প্রভাব

ইমেজ এর উপর মাউস রাখেন
উদাহরণঃ

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

এটি প্রথম CSS ব্লক উদাহরণ ১ এর অনুরূপ কোড। উপরন্তু, আমরা যখন ইমেজ এ hover ওভার asযোগ করবো। এই ক্ষেত্রে যদি স্বচ্ছ ইমেজ না চান তাহলে hover over রেখে দেখুন।
এই জন্য সিএসএস হল: opacity=1
IE8 এবং আগের জন্য filter:alpha(opacity=100)
যখন মাউস পয়েন্টার ইমেজ থেকে দূরে চলে আসে, তখন ইমেজ আবার স্বচ্ছ হতে পারে।

উদাহরণ 3 - Transparent বক্স-এর লেখাটি

উদাহরণঃ

 <html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

প্রথমত, আমরা <div> element (class="background") এর সাথে একটি ব্যাকগ্রাউন্ড ইমেজ এবং একটি পার্শ্ব তৈরি করবো। তারপর আমরা <div> (class="transbox") তৈরি করবো । যার পাশে <div>. The <div class="transbox"> এ আগের পটভূমির রঙ এবং একটি স্বচ্ছ DIV সীমানা (bbBBBGGH4141444 border)rderr আছে। ভিতরের transparent <div> এ আমরা একটি <p> উপাদান ভিতরে কিছু লেখা যোগ করবো।

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস ইমেজ স্প্রাইটস্ (CSS Image Sprites)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

মৃত্যুঞ্জয় বিশ্বাস

ইমেজ স্প্রাইটস্ কি?

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

ইমেজ স্প্রাইটস্ এর কিছু সহজ উদাহরণ

তিনটি পৃথক ইমেজ এর পরিবর্তে, আমরা এই একক চিত্র ব্যবহার করতে পারব ("img_navsprites.gif") এর মাধমে:

CSS এর সঙ্গে, আমরা শুধু প্রয়োজনীয় ইমেজ প্রদর্শন করতে পারব।

নিম্নলিখিত উদাহরণে সিএসএস এর " img_navsprites.gif " ছবিটি কোন নির্দিষ্ট অংশ প্রদর্শন করে তা দেখব :
উদাহরণঃ

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}

উদাহরণ ব্যাখ্যা:

<img id="home" src="img_trans.gif"> - Src অ্যাট্রিবিউট খালি হতে পারে না, কারণ শুধুমাত্র একটি ছোট স্বচ্ছ ইমেজ সংজ্ঞায়িত করে। প্রদর্শিত ইমেজ এ CSS এর মধ্যে নির্দিষ্ট পটভূমি চিত্র হতে হবে।
width: 46px; height: 44px; - ইমেজ এর অংশ সংজ্ঞায়িত করার জন্য ব্যবহৃত করা হয়।
background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px) - ব্যাকগ্রাউন্ড ইমেজ এবং তার অবস্থান (বাম ০ 0px, শীর্ষ ০ 0px ) সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।

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

ইমেজ স্প্রাইটস্ এর ন্যাভিগেশন তালিকা তৈরি

ইমেজ স্প্রাইটস্ ব্যবহার ("img_navsprites.gif") করতে প্রথমে নেভিগেশন তালিকা তৈরি করতে হবে।

আমেদের একটি HTML তালিকা ব্যবহার করা হবে, কারণ এটি একটি লিঙ্ক এবং একটি ব্যাকগ্রাউন্ড ইমেজ সমর্থন করে।

উদাহরণঃ

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

উদাহরণ ব্যাখ্যা:

#navlist {position:relative;} – আপেক্ষিক অবস্থান সেট করা হয়, ভিতরে পরম অবস্থান অনুমতি করার জন্য।
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - তালিকা-স্টাইল মুছে ফেলা জন্য মার্জিন এবং প্যাডিং ০0 সেট করা হয় এবং সব তালিকার আইটেম নিশ্চিত করা হয়।
#navlist li, #navlist a {height:44px;display:block;} - সব ছবি উচ্চতা 44 44px হয়।

এখন প্রতিটি নির্দিষ্ট অংশ জন্য অবস্থান বর্ণনা করবো।

#home {left:0px;width:46px;} - বাম সব স্থান বাম পথ এ এবং ইমেজ প্রস্থ 44 46px হয়।
#home {background:url(img_navsprites.gif) 0 0;} - ব্যাকগ্রাউন্ড ইমেজ এবং তার অবস্থান (বাম ০ 0px, শীর্ষ ০ 0px ) সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
#prev {left:63px;width:43px;} – ডানে 63px এবং প্রস্থ 43px স্থান হবে (#home width 46px + some extra space between items)।
#prev {background:url('img_navsprites.gif') -47px 0;} - ডান ব্যাকগ্রাউন্ড ইমেজ 47px সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় (#home width 46px + 1px line divider)
#next {left:129px;width:43px;}- ডানে 129px এবং প্রস্থ 43px স্থান হবে (start of #prev is 63px + #prev width 43px + extra space)
#next {background:url('img_navsprites.gif') -91px 0;} - ডান ব্যাকগ্রাউন্ড ইমেজ 91px সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

ইমেজ স্প্রাইটস্ এ হভের (Hover) প্রভাব

এখন আমরা আমাদের নেভিগেশন তালিকায় একটি হভের (Hover) প্রভাব যোগ করবো। হভের নির্বাচক শুধুমাত্র লিঙ্ক না, সমস্ত উপাদান, ব্যবহার করা যেতে পারে।

আমাদের নতুন ইমেজ (" img_navsprites_hover.gif ") তিন নেভিগেশন ইমেজ এর উপস্থিত রয়েছে। কারণ এটি একটি একক চিত্র না বরঞ্চ ছয়টি পৃথক ফাইল। যখন কোন লোড দেরী হবে না, কারন ব্যবহারকারী ইমেজ উপর hovers থাকে।

আমরা এখন শুধুমাত্র হভের (Hover) প্রভাব এ তিন লাইন কোড যোগ করবো:

উদাহরণঃ

#home a:hover {
    background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
    background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
    background: url('img_navsprites_hover.gif') -91px -45px;
}

উদাহরণ ব্যাখ্যা:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - আমরা তিনটি সব হভার ইমেজ এ 45px এর নিচে একই পটভূমি অবস্থান উল্লেখ করেছি।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস Pseudo-classes

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Pseudo-classes কি ???

Pseudo-classes ব্যবহার করা হয় একটি উপাদান এর একটি বিশেষ state নির্ধারণ করতে ।

উদাহরণস্বরূপ এটি ব্যবহার করা হয়ঃ

যখন user এর উপর মাউস নিয়ে নাড়াচাড়া করে তখন ভিন্ন Style প্রদর্শন করে ।
visited লিঙ্ক এবং unvisited লিঙ্ক ভিন্ন ভিন্ন Style প্রদর্শন করে।

Syntax বা শব্দবিন্যাস

pseudo-classes এর শব্দবিন্যাসঃ

selector:pseudo-class {
        property:value;
 }

Anchor Pseudo-classes

লিংক বিভিন্ন উপায়ে প্রদর্শিত হতে পারে:

উদাহরনঃ

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Note: a:link এর পরে অবশ্যই a:hover আসবে এবং a:visited আসে যাতে সিএসএস সংজ্ঞা কার্যকর করা হয় !!

CSS definition অনুযায়ী a:hover এর পরে সব সময় a:active আসবে যা গুরুত্বপূর্ণ অর্থ বহন করে ।

Pseudo-class নাম সংবেদনশীল নয় ।

Pseudo-classes এবং CSS Classes

Pseudo-classes , CSS classes এর সাথেও যুক্ত হতে পারেঃ

উদাহরনঃ

a.highlight:hover {
       color: #ff0000;
 }

উদাহরণস্বরূপ আপনি যখন লিঙ্ক এর উপর কার্সার রাখবেন, এর রং পরিবর্তন হবে

CSS - The :first-child Pseudo-class

the :first-child pseudo-class সেই সব উপাদানের সাথে মিলিত হয় যা অন্য উপাদানের first child

Note: প্রথমে :first-child IE8 এ কাজ করলেও পরবর্তীতে সেটা < !DOCTYPE> এ ঘোষণা করা হয়

Match the first <p> element

নিম্নলিখিত উদাহরণে, Selector যে কোনো উপাদান সাথে মেলে যেটা কিনা কোন <p> উপাদান এর First-child :

উদাহরনঃ

p:first-child {
      color: blue;
 }

Match the first <i> element in all <p>elements

নিম্নলিখিত উদাহরণে, selector সমস্ত <p> উপাদান এর প্রথম প্রথম উপাদানের সাথে মিলিত হয়

উদাহরনঃ

p:first-child i {
       color: blue;
 }

CSS - The :lang Pseudo-class

The : Lang pseudo-class আপনাকে বিভিন্ন ভাষার জন্য বিশেষ নিয়ম নির্ধারণ করতে সাহায্য করবে

Note: IE8 , :lang pseudo-class কে তখনই সাপোর্ট করবে যখন এটি < !DOCTYPE> হবে

নীচের উদাহরণে,: Lang ক্লাস = "না" lang এর সঙ্গে<p>উপাদানের জন্য উদ্ধৃতি চিহ্ন সংজ্ঞায়িত করে:

উদাহরনঃ

p i:first-child {
    color: blue;
}

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস কম্বিনেটরস (CSS Combinators)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শেখ মাহফুজুর রহমান

সিএসএস কম্বিনেটর সিলেক্টরগুলোর মধ্যে সম্পর্ক নির্দেশ করে। একটি সিএসএস সিলেক্টর একাধিক সিম্পল সিলেক্টর ধারণ করতে পারে। এই সিম্পল সিলেক্টরগুলোর মধ্যে আমরা একটি কম্বিনেটর যোগ করতে পারি। সিএসএস-থ্রি'তে চার প্রকার কম্বিনেটর রয়েছেঃ

ডিসেন্ডেন্ট সিলেক্টর
চাইল্ড সিলেক্টর
অ্যাডজাসেন্ট সিবলিং সিলেক্টর
জেনেরাল সিবলিং সিলেক্টর

ডিসেন্ডেন্ট সিলেক্টর

ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো ডিসেন্ডেন্ট এলিমেন্টকে ম্যাচ বা সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ভিতরের সবগুলো <p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

div p {
background-color: yellow;
}

চাইল্ড সিলেক্টর

চাইল্ড সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের ঠিক ভিতরের চাইল্ড এলিমেন্টগুলোকে সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক ভিতরের অর্থাৎ এর ইমিডিয়েট সন্তান <p> (এখানে p ভিতর অন্য কোন p থাকলে সিলেক্ট হবেনা) এলিমেন্টগুলোকে সিলেক্ট করা হয়েছেঃ

div > p {
      background-color: yellow;
}

অ্যাডজাসেন্ট সিবলিং সিলেক্টর

অ্যাডজাসেন্ট সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের অ্যাডজাসেন্ট সিবলিং ( যেমন <div> এর পর <p> এলিমেনটি থাকলে <p> হলো <div> এর সিবলিং বা সহোদর) এলিমেন্টগুলোকে সিলেক্ট করে। সিবলিং এলিমেন্টগুলোর অবশ্যই একই প্যারেন্ট থাকতে হবে অর্থাৎ সেগুলোকে একই এলিমেন্টের ভিতরে অন্তঃভূর্ক্ত হতে হবে এবং অ্যাডজাসেন্টের মানে হলো ঠিক পরে এসেছে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক পরের সবগুলো <p> এলিমেন্টগুলোকে সিলেক্ট করা হয়েছেঃ

div + p {
background-color: yellow;
}

জেনারেল সিবলিং সিলেক্টর

জেনারেল সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো সিবলিংকে সিলেক্ট করে। নিচের উদাহরণে

এলিমেন্টের সবগুলোএলিমেন্টকে সিলেক্ট করা হয়েছেঃ

div ~ p {
background-color: yellow;
}

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস আনুভূমিক সারি (CSS Horizontal Align)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ইন্দ্র ভূষণ শুভ

CSS এ, উপাদানকে আনুভূমিক ভাবে সারিবদ্ধ করার জন্য বিভিন্ন ধরনের বৈশষ্ট্য ব্যবহার করা হয়।

সারিবদ্ধ ব্লক উপাদানসমূহ

ব্লক উপাদান হলো এক ধরণের উপাদান যা ব্যবহারযোগ্য সব width ব্যবহার করে, এবং আগে ও পরে একটি লাইন বিরতি থাকে।

ব্লক উপাদানের উদাহরণ

সারিবদ্ধ টেক্সটের জন্য, CSS Text অধ্যায় দেখুন।

এই অধ্যায়ে আমরা দেখব কিভাবে বিন্যাসের উদ্দেশ্যে উপাদানগুলোকে আনুভূমিক ভাবে সারিবদ্ধ করা হয়।

মার্জিন বৈশিষ্ট্য ব্যবহার করে কেন্দ্রে সারিবদ্ধ করা

বাম এবং ডান মার্জিনকে "auto" সেট করে ব্লক উপদানকে কেন্দ্রে সারিবদ্ধ করা যায়।

বিশেষ দ্রষ্টব্যঃ মার্জিন ব্যবহারঃ auto; IE8 এবং পুর্বের গুলোতে কাজ করে না যতক্ষণ না !DOCTYPE ধরা হয়।

বাম এবং ডান মার্জিন সয়ংক্রিয় ধরা হয় যাতে তারা ব্যবহারযোগ্য মার্জিন সমান ভাগে বিভক্ত করে। এর ফলে কেন্দ্রীভূত উপাদান পাওয়া যায়ঃ

উদাহরণ

.center {
     margin-left: auto;
     margin-right: auto;
     width: 70%;
     background-color: #b0e0e6;
 }

নির্দেশঃ প্রস্থ যদি ১০০% হয় তবে কেন্দ্রে সারির কনো প্রভাব নেই।

স্থান বৈশিষ্ট্যকে ব্যবহার করে বাম এবং ডানে সারিবদ্ধ করা

পূর্ণ অবস্থানের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ
উদাহরণ

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
 }

বিশেষ দ্রষ্টব্যঃ পূর্ণ অবস্থানের উপাদানকে স্বাভাবিক প্রবাহ থেকে সরিয়ে নেওয়া হয়, এবং উপাদানকে আবৃত করতে পারে।

Crossbrowser সামঞ্জস্যের সমস্যা

যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।
যখন স্থান বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি ধারক উপাদানটিতে ( এক্ষত্রে<div class="container">) নির্ধারিত প্রস্থ থাকে এবং !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ

 উদাহরন

body {
     margin: 0;
     padding: 0;
 }

.container {
     position: relative;
     width: 100%;
 }

.right {
     position: absolute;
     right: 0px;
     width: 300px;
     background-color: #b0e0e6;
 }

ফ্লট বৈশিষ্ট্য ব্যবহার করে বামে এবং ডানে সারিবদ্ধ করা

ফ্লট বৈশিষ্ট্যের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ

উদাহরণ

.right {
     float: right;
     width: 300px;
     background-color: #b0e0e6;
 }

Crossbrowser সামঞ্জস্যের সমস্যা

যখন ফ্লট বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি উপাদানটিতে !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ

উদাহরণ

body {
     margin: 0;
     padding: 0;
 }

.right {
     float: right;
     width: 300px;
     background-color: #b0e0e6;
 }

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ফ্লোট (CSS Float)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শেখ মাহফুজুর রহমান

সিএসএস ফ্লোট কি?

ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার হয় পেজের লেআউট নিয়ে কাজ করার সময়।

কিভাবে একটি এলিমেন্ট ভাসে

এলিমেন্টগুলো হরাইজন্টালি ফ্লোট করে, এর মানে হলো একটি শুধু ডানে বা বামে ফ্লোট হতে পারে; উপরে বা নিচের দিকে নয়। একটি ফ্লোট এলিমেন্ট ডানে অথবা বামে যতদূর যাওয়া সম্ভব যেতে পারে। সাধারণত ফ্লোটিং এলিমেন্টটি যে এলিমেন্টের ভিতরে থাকে তার ডান বা বামের শেষ সীমা পর্যন্ত ফ্লোটেড হয়ে থাকে। ফ্লোটেড এলিমেন্টের পরের এলিমেন্টগুলো এর চারপাশে ফ্লো করবে বা ভাসবে। ফ্লোটেড এলিমেন্টের আগের এলিমেন্টগুলোর উপর এর কোন প্রভাব পড়বেনা। যদি কোন ছবি ডান দিকে ফ্লোট করে এর পরের টেক্সটগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপিং নামে পরিচিতঃ

img {
      float: right;
}

পাশাপাশি থাকা ফ্লোটিং এলিমেন্ট

আপনি যদি কিছু সংখ্যক ফ্লোটিং এলিমেন্টকে একটির পর আরেকটিকে রাখেন তাহলে তারা জায়গা থাকার সাপেক্ষে একটি অপরটির পাশে ফ্লোট করবে। নিচে ফ্লোট প্রপার্টি ব্যবহার করে একটি ইমেজ গ্যালারি বানানো হয়েছেঃ

.thumbnail {
     float: left;
     width: 110px;
     height: 90px;
     margin: 5px;
 }

ক্লিয়ার ব্যবহার করে ফ্লোট বন্ধ করা

ফ্লোটিং এলিমেন্টের পরের এলিমেন্টগুল এর চারপাশে ফ্লো বা ভেসে বেড়াবে। ক্লিয়ার প্রপার্টি কোন এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্য ফ্লোটিং এলিমেন্ট থাকতে পারবেনা তা বলে দেয়। নিচের উদাহরণে ইমেজ গ্যালারিতে টেক্সট লাইনের সাথে ক্লিয়ার প্রপার্টি ব্যবহার করা হয়েছেঃ

.text_line {
       clear: both;
 }

আরও কিছু উদাহরণঃ নিজে করুন

বর্ডার ও মার্জিনসহ একটি ইমেজ যা একটি প্যারাগ্রাফের ডানে ফ্লোট করেঃ একটি ইমেজকে প্যারাগ্রাফের ডানদিকে ভাসিয়ে দিন এবং ইমেজটিতে বর্ডার ও মার্জিন যোগ করুন।
ক্যাপশনসহ একটি ইমেজ যা ডানদিকে ফ্লোট করেঃ ক্যাপশনসহ একটি ইমেজকে ডানদিকে ফ্লোট করুন
একটি প্যারাগ্রাফের প্রথম অক্ষরকে বাম দিকে ফ্লোট করাঃ একটি প্যারাগ্রাফের প্রথম অক্ষরকে বাম দিকে ফ্লোট করে তাতে স্টাইল যোগ করুন।
হরাইজন্টাল মেন্যু তৈরি করাঃ একটি হরাইজন্টাল মেন্যু তৈরি করতে হাইপার লিংকের একটি লিস্টে ফ্লোট যোগ করুন।
টেবল ব্যবহার না করে হোমপেজ তৈরি করাঃ হেডার, ফুটার, লেফট কন্টেন্ট এবং মেইন কন্টেন্টসহ ফ্লোট ব্যবহার করে একটি হোমপেজ তৈরি করুন।

সবগুলো সিএসএস ফ্লোট প্রপার্টি

clear - ফ্লোটিং এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্যান্য এলিমেন্ট থাকতে পারবেনা তা ঠিক করে দেয়। এর ভ্যালুগুলো হলো-

left
right
both
none
inherit

float - একটি বক্স অর্থাৎ এলিমেন্ট ফ্লোট করবে কি করবেনা তা ঠিক করে। এর ভ্যালুগুলো হলো-

left
right
none
inherit

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস পজিশনিং (CSS Positioning)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

পজিশনিং

সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। সিএসএস পজিশনিং বৈশিষ্ট্য আপনাকে একটি উপাদান (element) উপস্থাপন করার অনুমতি দেয়। এর মাধ্যমে উপাদান গুলো একটির পিছনে আরেকটি উপাদান রাখা যায়। এমন কি উপাদান এর কন্টেন্ট খুব বড় হলে কি হবে তা উল্লেখ করতে পারে।

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

৪ ধরনের পজিশন পদ্ধতি আছে। নিচে সেগুলা নিয়ে আলোচনা করবো।

১. স্ট্যাটিক (static) পজিশনিং

এতে HTML উপাদান (element) ডিফল্ট স্ট্যাটিক স্থান হয়। এর স্ট্যাটিক স্থান, উপাদান সবসময় পৃষ্ঠার স্বাভাবিক প্রবাহ অনুযায়ী হয়। স্ট্যাটিক স্থান উপাদানগুলো উপরে, নীচে, বাম এবং ডান বৈশিষ্ট্য দ্বারা প্রভাবিত হয় না। এতে বাই ডিফল্ট position: static থাকে, এটার অর্থ হচ্ছে কোন পজিশনিং করা নেই। ডকুমেন্টের কোডের কারনে এলিমেন্টটি যেখানে আসে পেজেও সেখানে দেখাবে।

div.static {
    position: static;
    border: 3px solid #8AC007;
}

২. স্থায়ী (Fixed) পজিশনিং

কোন এলিমেন্টের পজিশন ফিক্সড করে দিলে সেটা ব্রাউজারের সাপেক্ষে স্থির হয়ে থাকবে এমনকি স্ক্রল করলেও ঐ এলিমেন্ট তার অবস্থান পরিবর্তন করবেনা।
উদাহরণঃ

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}

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

IE7, IE78 এ DOCTYPE না দিলে fixed পজিশনিং কাজ করবেনা।

৩. Relative পজিশনিং

Relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে।
উদাহরণঃ

h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}

এটাও static এর মতই কিন্তু এখানে top, left, bottom, right এবং z-index ব্যবহার করে এলিমেন্ট কে তার অবস্থান থেকে সরানো যাবে।
উদাহরণঃ

h2.pos_top {
    position: relative;
    top: -50px;
}

Relative পজিশনিং এর উপাদান প্রায়ই একেবারে স্থান উপাদানের জন্য ধারক ব্লক হিসাবে ব্যবহার করা হয়।

৪. Absolute পজিশনিং

position: absolute দিলে এলিমেন্টটি তার immediate আগের প্যারেন্ট ডিভের সাপেক্ষে সরবে (top, left ইত্যাদি দিয়ে)। যদি কোন প্যারেন্ট ডিভ না থাকে তাহলেতথা ব্রাউজারের সর্ববাম এবং উপর থেকে হিসেব করে সরবে। উদাহরণঃ h2 { position: absolute; left: 100px; top: 150px; } Absolute পজিশন করলে এলিমেন্ট ডকুমেন্টে স্বাভাবিক অবস্থান হারিয়ে ফেলে মানে absolute উঠিয়ে দিলে এলিমেন্ট টি যেখানে দেখাবে, absolute দিলে সেখানে আর দেখাবেনা। এখানে এলিমেন্ট তার নিজের জন্য আর স্পেস ধরে রাখেনা।

ওভারল্যাপিং উপাদানসমূহ

যখন উপাদানগুলো স্বাভাবিক প্রবাহ বাইরে স্থান হয়, তখন তারা অন্যান্য উপাদানগুলো কে ওভারল্যাপ করে। z-index একটি উপাদান যা স্ট্যাক এ নির্দিষ্ট করে। একটি উপাদান এর ইতিবাচক বা নেতিবাচক স্ট্যাক অর্ডার আছে। উদাহরণঃ img { position: absolute; left: 0px; top: 0px; z-index: -1; } বৃহত্তর স্ট্যাক অর্ডার এর একটি উপাদান একটি নিম্ন স্ট্যাক অর্ডার এর একটি উপাদানের সামনে সবসময় হবে। যদি দুইটি স্থান উপাদান নির্দিষ্ট একটি z-index ছাড়া আবৃত তাহলে HTML কোড শেষ অবস্থান উপাদান এর উপরে দেখানো হবে।

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ডিসপ্লে এন্ড ভিজিবিলিটি (CSS Display and Visibility)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অদৃশ্য করে রাখা যায়। মূলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে।

navigation a {
    display: block;
    margin-left: 0.5em;
    padding: 5px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}

display:inline; দিয়ে দেখুন সব a বা এনকর ট্যাগ একলাইনে দেখাবে। এনকর হচ্ছে (<a></a>) ইনলাইন এলিমেন্ট। display:block; দেয়াতে ব্লক লেভেল এলিমেন্টের মত কাজ করেছে। এরুপ <span>, <em> ইত্যাদি ইনলাইন এলিমেন্ট বা যেকোন ইনলাইন এলিমেন্টে কে প্রয়োজনে ব্লক লেভেল করা যায় এই প্রোপার্টিজ দিয়ে।

আবার <p>, <li> ইত্যাদি ব্লক লেভেল এলিমেন্ট যেগুলি ব্রাউজারের সম্পূর্ন width নিয়ে থাকে এবং আগে পিছে লাইন ব্রেক দেয়া থাকে এসবকে ইনলাইন এর মত কাজ করাতে display:inline; করে দিতে হয়। যেমনঃ

li {
    display: inline;
}

দেখুন p কিভাবে ইনলাইন এলিমেন্টের মত কাজ করছে। display এর আরেকটা মান আছে যথা "none", এটা দিলে ঐ এলিমেন্টকে লুকিয়ে ফেলবে এবং কোন স্পেসও ধরে রাখবেনা।

জেকোয়েরি দিয়ে কাজ ফর্ম ভেলিডেশন ইত্যাদি কাজে এভাবে এলিমেন্ট অদৃশ্য করে রাখার প্রয়োজন হয়।

উপরের উদাহরনে display:inline; এর জায়গায় display:none; দিয়ে দেখুন অার কিছু দেখাবেনা।

inline-block (display:inline-block) একটা মান আছে এটা দিলে ইনলাইনের মতই কাজ করবে শুধু পার্থক্য হচ্ছে height এবং width এখন এলিমেন্ট টির জন্য কাজ করবে।

সাধারনভাবে ইনলাইন এলিমেন্টের height, width কাজ করেনা।

display:table; দিলে এলিমেন্টটি টেবিলের (<table></table>) মত আচরন করবে।

display:table-cell; দিলে এলিমেন্ট টি <td></td> এর মত কাজ করবে।

table-row দিলে <tr></tr> মত কাজ হবে।

এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।

display:inline-table;
display:list-item;
display:table-caption;
display:table-column-group;
display:table-header-group;
display:table-footer-group;
display:table-row-group;
display:table-column;
display:run-in;
display:flex;

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস ডায়মেনশন (CSS Dimension)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

CSS dimension হচ্ছে এমন একটি properties যা element এর height এবং width নিয়ন্ত্রণ করে।

height এবং width নির্ধারণ করা

এলিমেন্ট এর উচ্চতা এবং প্রসস্থতা নির্ধারণ করতে height এবং width প্রোপার্টিজ ব্যবহার করা হয়।

height এবং width সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ করে দেয়া যেতে পারে।

[<div> এলিমেন্ট এর উচ্চতা 100 pixels এবং প্রসস্থতা 500 pixels]

নোটঃ height এবং width প্রোপার্টিজ প্যাডিং, বর্ডার বা মার্জিন সমন্নয় করে না; তারা এলিমেন্ট এর প্যাডিং, বর্ডার বা মার্জিন এর ভিতরের উচ্চতা/প্রসস্থতা নির্ধারণ করে।

নিচের উদাহরণটি দেখাচ্ছে যে <div> এলিমেন্ট এর উচ্চতা 100 pixels এবং প্রসস্থতা 500 pixels

div {
    width: 500px;
    height: 100px;
    border: 3px solid #8AC007;
}

সর্বচ্চ প্রসস্থতা নির্ধারণ করে দেয়া

max-width প্রোপার্টি এলিমেন্ট এর সর্বচ্চ প্রসস্থতা নির্ধারণ করতে ব্যবহৃত হয়।

max-width সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ করে দেয়া যেতে পারে।

ব্রাউজার এর উইন্ডো এর প্রসস্থতা যখন <div> এলিমেন্ট এর চেয়ে ছোট হয় তখন এটি সমস্যা সৃষ্টি করে। ব্রাউজার তখন horizontal scrollbar প্রদর্শন করে।

max-width ব্যবহার করলে ব্রাউজার এই সমস্যা ভালভাবে হ্যান্ডলিং করতে পারে।

টিপসঃ দুটি div এর মধ্যে পার্থক্য দেখার জন্য ব্রাউজারকে টেনে 500px এর চেয়ে ছোট করুন।

নোটঃ max-width প্রোপার্টি এর মান width কে ওভাররাইড করে।

নিচের উদাহরণটি 100 pixels উচ্চতা এবং 500 pixels max-width বিশিষ্ট <div> এলিমেন্ট প্রদর্শন করে।

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #8AC007;
}

CSS Dimension এর সকল Properties

প্রোপার্টি	বর্ণনা	মান
height auto	element এর height নির্ধারণ	length % inherit
max-height	একটি element এর maximum height নির্ধারণ	none length % inherit
max-width	একটি element এর maximum width নির্ধারণ	none length % inherit
min-height	একটি element এর minimum height নির্ধারণ	length % inherit
min-width	একটি element এর minimum width নির্ধারণ	length % inherit
width	একটি element এর width নির্ধারণ	auto length % inherit

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস প্যাডিং (CSS Padding)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

CSS Padding হচ্ছে element border এবং element content এর মধ্যে ফাকা স্থান।

প্যাডিং

Padding হচ্ছে content (border এর ভিতরে থাকে) এর চারপাশে একটি ফাকা স্থান। Padding কার্যকর হয় element এর
background color দিয়ে।

top, right, bottom এবং left padding পরিবর্তন করা যায় আলাদা properties ব্যাবহার করে । একটি shorthand padding (সংক্ষিপ্ত প্যাডিং) প্রোপার্টি ব্যাবহার করে এক সাথে সব ধরনের padding এর property পরিবর্তন করা যায়।

সম্ভাব্য মান

মান	বর্ণনা
length	এটি fixed padding নির্দেশ করে (in pixels, pt, em, etc.)
%	এটি দ্বারা containing element এর padding % এ প্রকাশ করে

প্যাডিং - স্বতন্ত্র দিক

CSS এর ক্ষেত্রে , ভিন্ন ভিন্ন দিক থেকে ভিন্ন ভিন্ন Padding নির্দিষ্ট করা সম্ভব

উদাহরণ

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

Padding - Shorthand property (শর্টকাট পদ্ধতি)

code ছোট রাখতে, সকল padding properties কে একটি প্রোপার্টি দ্বারা নির্দিষ্ট করা সম্ভব। একেই বলে Shorthand property (শর্টকাট পদ্ধতি)।
সকল প্যাডিং প্রোপার্টি এর শর্টকাট প্রোপার্টি হচ্ছে "padding:"

উদাহরণ

p {
    padding: 25px 50px;
}

padding property এর একটি হতে চারটি মান থাকতে পারে।

padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
padding: 25px;
- all four paddings are 25px

সকল সিএসএস প্যাডিং প্রোপার্টি

প্রোপার্টি	বর্ণনা
padding	সকল প্যার্ডি প্রোপার্টি এর জন্য শর্টকাট প্রোপার্টি
padding-bottom	এলিমেন্ট এর নিচের দিকের প্রার্ডিং নির্দিষ্ট করা
padding-left	এলিমেন্ট এর বাম পাশের প্রার্ডিং নির্দিষ্ট করা
padding-right	এলিমেন্ট এর ডান পাশের প্রার্ডিং নির্দিষ্ট করা
padding-top	এলিমেন্ট এর উপরের দিকের প্রার্ডিং নির্দিষ্ট করা

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস মার্জিন (CSS Margin)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস মার্জিন দ্বারা elements এর চার পাশের কিছু ফাঁকা স্থান নির্দেশ করে ।

মার্জিন

Margin দ্বারা element এর চার পাশের clear স্থান (outside the border) কে নির্দেশ করে । Margin এর কোন background color নেই, এটি পুরোপুরি transparent।

Top, right, bottom, and left margin স্বাধীন ভাবে পরিবর্তন করা যায় তাদের আলাদা আলাদা properties ব্যাবহার করে।

সবধরনের margins পরিবর্তন করার জন্য সংক্ষিপ্ত margin property ও ব্যাবহার করা যায়।

সম্ভাব্য মান

মান	বর্ণনা
auto	এই পদ্ধতি তে browser নিজেই margin calculate করে
length	margin বিশেষ ভাবে উল্লেখ করা হয় in px, pt, cm, etc. Default value is 0px
%	margin বিশেষ ভাবে উল্লেখ করা হয় in percent of the width of the containing element
inherit	margin টি parent element থেকে স্থানান্তরিত হওয়া নির্দেশ করা হয় inherit দ্বারা।

বিঃ দ্রঃ negative values ব্যাবহার করা সম্ভব content overlap করার জন্য।

উদাহরণ

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}

মার্জিন - সংক্ষিপ্ত প্রোপার্টি

code কে ছোট করতে ভিন্ন ভিন্ন margin properties কে একটি properties এর মাধ্যমে বর্ণনা করা হয়। একে Shorthand property বলে।
সকল মার্জিন প্রোপার্টি এর জন্য সংক্ষিপ্ত প্রোপার্টি হলো: "margin" ।

p {
    margin: 100px 50px;
}

margin property এক থেকে চার ধরনের মান হতে পারেঃ

margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px

margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px

margin: 25px;
all four margins are 25px

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস আউটলাইন্স (CSS Outlines)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এটি elements এর চারপাশে একটি অমীমাংসিত স্থান যা element কে "stand out" করে।
outline properties টি outline এর style, color, and width বিশেষ রূপে উল্লেখ করে।

সি এস এস আউটলাইন্স

Outline হচ্ছে এমন একটা line যা elements এর চারপাশে অমীমাংসিত (border এর বাইরে ) স্থান যা element কে "stand out" করে।
তবে outline property টি border property থেকে সম্পূর্ণ ভিন্ন ।

Outline টি element's dimension এর কোন অংশ নয়, element এর সম্পূর্ণ width এবং height ও outline এর width দ্বারা প্রভাবিত হয় না।

Box Outline

সকল সিএসএস আউটলাই প্রোপার্টি

প্রোপার্টি	বর্ণনা	মান
outline	outline properties একটি declaration দ্বারা নির্ধারণ করা হয়	outline-color outline-style outline-width inherit
outline-color	outline এর color নির্ধারণ করা হয়	color_name hex_number rgb_number invert inherit
outline-style	outline এর ধরন নির্ধারণ করা হয়	none dotted dashed solid double groove ridge inset outset inherit
outline-width	outline এর ব্যাপকতা নির্ধারণ করা হয়	thin medium thick length inherit

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস বর্ডার (CSS Border)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

CSS border properties এলিমেন্ট এর border এর style, size, and color নির্ধারণ করতে সাহায্য করে ।

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

Border-style property নির্ধারণ করা হয় কি ধরনের border প্রদর্শিত হবে।
বি: দ্র: Border properties এর কোন প্রভাব কাজ করবে না যদি না border-style property নির্ধারণ করা হয়।

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

none	কোন border না থাকা নির্দেশ করে
dotted	dotted border নির্দেশ করা হয় এটি দ্বারা
dashed	dashed border নির্দেশ করা হয় এটি দ্বারা
solid	solid border নির্দেশ করা হয় এটি দ্বারা
double	দুইটি border একত্রে নির্দেশ করা হয় এটি দ্বারা। দুটি border এর ব্যাপকতা একই থাকে যেমনটি border-width value তে দেয়া হয়।
groove	3D grooved border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
ridge	3D ridged borderনির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
inset	3D inset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
outset	3D outset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।

বর্ডার এর প্রসস্থতা

”Border-Width” property ব্যাবহার করা হয় border এর width নির্ধারণ করার জন্য ।

Width ব্যাবহার করা হয় pixels এককে অথবা তিনটি পূর্ব নিরধারিত values: thin, medium, or thick দ্বারা।

বি: দ্র: "border-width" property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে "border-style" ব্যাবহার করে border নির্ধারণ করে নিতে হয়।

উদাহরনঃ

p.one {
    border-style: solid;
    border-width: 5px;
}

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

বর্ডার এর রঙ

Border-color property ব্যাবহার করা হয় border এর color নির্ধারণ করার জন্য। Color নির্ধারণ করার উপায়ঃ

name	color value নির্ধারণ , like "red"
RGB	RGB value নির্ধারণ , like "rgb(255,0,0)"
Hex	shex valueনির্ধারণ, like "#ff0000"

আপনি চাইলে border color কে "transparent" হিসেবে নির্ধারণ করতে পারেন।

যদি না border color নির্ধারণ করা হয় inherited from "the color property of the element"।

বি: দ্র: "border-color" property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে "border-style" ব্যাবহার করে border নির্ধারণ করে নিতে হয়।

উদাহরনঃ

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

বর্ডার - স্বতন্ত্র সাইড

CSS এর ক্ষেত্রে ভিন্ন ভিন্ন border ভিন্ন ভিন্ন পাশে ব্যাবহার করা সম্ভবঃ
উদাহরনঃ

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

উপরে দেয়া উদাহরণ টি একটি একক property দিয়েও নির্ধারণ করা যায়ঃ

উদাহরনঃ

p {
    border-style: dotted solid;
}

border-style property এর একটি থেকে চারটি values হতে পারেঃ

border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
border-style: dotted;
- all four borders are dotted

Border-style property উপরোক্ত উদাহরণে ব্যবহার করা হয়। যাইহোক, এটি border-width and border-color এর সাথে কাজ করতে সক্ষম।

Border - সংক্ষিপ্ত property

এতক্ষন আপনি উপরের উদাহরন দেখেছেন যেখানে যখন borders নির্ধারণ করতে হয় তখন অনেকগুলি properties consider করতে হয় ।

Individual border properties কে একটি property তে রুপান্তর করে code কে ছোট করা সম্ভব। একেই shorthand property বলে।

Borde property টি একটি individual border properties এর জন্য shorthand এ লিখা হয়ে থাকেঃ

border-width
border-style (required)
border-color

উদাহরনঃ

p {
     border: 5px solid red;
 }

CSS এর সকল Border Properties

প্রোপার্টি	বর্ণনা
border	সকল border properties একটি declaration দ্বারা নির্ধারণ
border-bottom	সকল bottom border properties একটি declaration দ্বারা নির্ধারণ
border-bottom-color	bottom border এর color নির্ধারণ
border-bottom-style	bottom border এর style নির্ধারণ
border-bottom-width	bottom border এর width নির্ধারণ
border-color	চারটি borders এর color নির্ধারণ
border-left	একটি declaration দ্বারা সকল left border এর properties নির্ধারণ
border-left-color	Left border এর color নির্ধারণ
border-left-style	Left border এর style নির্ধারণ
border-left-width	Left border এর width নির্ধারণ
border-right	একটি declaration দ্বারা সকল right border এর properties নির্ধারণ
border-right-color	right border এর color নির্ধারণ
border-right-style	right border এর style নির্ধারণ
border-right-width	right border এর width নির্ধারণ
border-style	চারটি borders এর style নির্ধারণ
border-top	একটি declaration দ্বারা সকল top এর properties নির্ধারণ
border-top-color	top border এর color নির্ধারণ
border-top-style	top border এর style নির্ধারণ
border-top-width	top border এর width নির্ধারণ
border-width	চারটি borders এর style নির্ধারণ

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস বক্স মডেল (CSS Box Model)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সব HTML উপাদানগুলোকে বক্স হিসাবে বিবেচনা করা যেতে পারে । CSS এ “ বক্স মডেল” শব্দটি ব্যবহার করা হয় যখন নকশা এবং বিন্যাস নিয়ে আলোচনা করা হয়।

সিএসএস বক্স মডেল মূলত চারপাশে HTML উপাদানে ঘেরা একটি বক্স, এবং এতে রয়েছে মার্জিন, সীমানা, প্যাডিং, এবং প্রকৃত বিষয়বস্তু।

বক্স মডেল আমাদেরকে উপাদানের কাছাকাছি একটি সীমানা, এবং উপাদানের মধ্যে স্থান নির্ধারণ করতে দেয়।
নীচের ইমেজটি বক্স মডেল প্রকাশ করেঃ

Box Model

বিভিন্ন অংশের ব্যাখ্যাঃ

বিষয়বস্তু – বক্সের বিষয়বস্তু, যেখানে টেক্সট এবং ইমেজ থাকে
প্যাডিং – বিষয়বস্তুর আশেপাশের এলাকা পরিস্কার করে। প্যাডিং সচ্ছ হয়
সীমানা – সীমানা হলো সেটা যেটা বিষয়বস্তু এবং প্যাডিং কে চারপাশ থেকে ঘিরে রাখে
মার্জিন – সীমানার চারপাশের এলাকা পরিস্কার করে। মার্জিন সচ্ছ

উদাহরণ

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

উপদানের প্রস্থ এবং উচ্চতা

সব ব্রাউজারে একটি উপদানের পস্থ এবং উচ্চতা সঠিকভাবে সেট করার জন্য, কিভাবে বক্স মডেল কাজ করে সেটা জানতে হবে।

গুরুত্বপূর্ণঃ আপনি যখন CSS দিয়ে একটি উপদানের প্রস্থ এবং উচ্চতা সেট করবেন, আপনাকে শুধু বিষয়বস্তুর এলাকার প্রস্থ এবং উচ্চতা সেট করতে হবে। উপদানের সম্পূর্ণ আকার পরিমাপের জন্য, আপনাকে পাডিং, সীমানা এবং মার্জিনও যোগ করতে হবে।

মোট 350px প্রস্থের একটি <div> উপাদানের স্টাইল করা যাকঃ

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

চলো অংকটা করা যাকঃ

320px (প্রস্থ)
+ 20px (বাম + ডান প্যাডিং)
+10px (বাম + ডান সীমানা)
+ 0px (বাম + ডান মার্জিন)
= 350px

উপাদানের মোট প্রস্থ এভাবে গননা করা উচিতঃ

মোট উপাদানের প্রস্থ = প্রস্থ + বাম প্যাডিং + ডান প্যাডিং + বাম সীমানা + ডান সীমানা + বাম মার্জিন + ডান মার্জিন

উপাদানের মোট প্রস্থ এভাবে গননা করা উচিতঃ

মোট উপাদানের উচ্চটা = উচ্চতা + শীর্ষ প্যাডিং + নীচের প্যাডিং + শীর্ষ সীমানা + নীচের সীমানা + শীর্ষ মার্জিন + নীচের মার্জিন

ব্রাউজার সামঞ্জস্যের ইস্যু

ইন্টারনেট এক্সপ্লোরার ৮ এবং তার আগের সংস্করণে প্রস্থ প্রপার্টিতে প্যাডিং এবং সীমানা যোগ করতে হয়।

এই সমস্যা দূর করার জন্য, HTML পেইজে < !DOCTYPE html> যোগ করতে হয়।

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস টেবিল (CSS Tables)

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

একটি HTML টেবিলকে CSS এর সাহায্যে সুন্দরভাবে উপস্থাপন করা যায়। নিম্নে একটি টেবিলের উদাহরণ দেয়া হলো:

টেবিল বর্ডার (Borders)

CSS এ টেবিল বর্ডার যোগ করার জন্য border property ব্যবহার করতে হবে।
নিম্নে উদাহরণে <table>, <th>, এবং <td> এলিমেন্টে কালো (black) বর্ডার যোগ করা হয়েছে:

table, th, td {
   border: 1px solid black;
}

উপরোক্ত উদাহরণে টেবিলটিতে double border যুক্ত হয়েছে, কেননা টেবিল এবং <th>/<td> এলিমেন্টে উভয়ের অলাদা বর্ডার রয়েছে।

এখন, টেবিলটিতে single border দেখাতে চাইলে border-collapse property যোগ করতে হবে।

Collapse Borders

border-collapse property এর সাহায্যে টেবিলের বর্ডার single অথবা separated হবে তা নির্ধারণ করা হয়। নিম্নের উদাহরনে টেবিলে single বর্ডার দেখানো হয়েছে:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

টেবিলের Table Width এবং Height

width এবং height properties এর সাহায্যে টেবিলের Width ও Height নির্দিষ্ট করা যায়।
নিম্নের উদাহরণে টেবিলের Width 100% এবং <th> এলিমেন্টের Height 50px নির্দিষ্ট করা হয়েছে:

table {
    width: 100%;
}

th {
    height: 50px;
}

Horizontal Text Alignment

text-align property এর সাহায্যে Text এর Alignment left, right বা center নির্দিষ্ট করা যায়।

সাধারণত, <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে center Align, <td> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে left Align.

নিম্নের উদাহরণে <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment, left এ নির্দিষ্ট করা হয়েছে:

th {
    text-align: left;
}

Vertical Text Alignment

vertical-align property এর সাহায্যে টেবিলে সেলের vertical alignment নির্ধারণ করা হয়।

এক্ষেত্রে সেলের Text Alignment top, bottom অথবা middle নির্ধারণ করা হয়। (<th> এবং <td> উভয় এলিমেন্ট এর জন্য)

নিম্নের উদাহরণে <td> এলিমেন্টের এর জন্য Text এর vertical Alignment, bottom এ নির্দিষ্ট করা হয়েছে:

td {
    height: 50px;
    vertical-align: bottom;
}

টেবিল Padding

টেবিল বর্ডার এবং content এর মাঝখানের space নির্ধারণ করার জন্য <td> and <th> এলিমেন্টে padding property ব্যবহার করা হয়।

td {
    padding: 15px;
}

টেবিল Color

নিচের উদাহরণে টেবিলের বর্ডার Color যোগ করার জন্য “border:” property ব্যবহার করা হয়েছে।

<th> এলিমেন্টে background color যোগ করার জন্য “background-color:” property ব্যবহার করা হয়।

table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস লিস্ট (CSS Lists)

February 8, 2015 Rafiqul Islam Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সিএসএস লিস্ট প্রোপার্টি আপনাকে অনুমতি দেবে:

তালিকার ক্রম (ordered lists) এর জন্য বিভিন্ন আইটেম তালিকা চিহ্নিতকারী নির্ধারণ
Unordered তালিকা এর জন্য বিভিন্ন আইটেম তালিকা চিহ্নিতকারী নির্ধারণ
আইটেম তালিকা চিহ্নিতকারী হিসেবে image (স্টিল ছবি) নির্ধারণ করা

তালিকা (list)

এইচটিএমএল এ লিস্ট তৈরীর জন্য দুই ধরনের এলিমেন্ট আছে।

unordered lists (<ul>) - লিস্ট আইটেম বুলেট প্রতিক দ্বারা চিহ্নিত করা হয়।
ordered lists (<ol>) - লিস্ট আইটেম সংখ্যা বা বর্ণ দ্বারা চিহ্নিত করা হয়।

সিএসএস দিয়ে, লিস্টকে আরো বেশি স্টাইল করা যায় এবং লিস্ট আইটেম চিহ্নিতকারী হিসেবে image ব্যবহার করা যায়।

বিভিন্ন লিস্ট আইটেম চিহ্নিতকারী

লিস্ট স্টাইলিং এর জন্য সিএসএস list-style-type প্রোপার্টিজ ব্যবহার করে।

যেমনঃ

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

কিছু মান unordered lists এর জন্য এবং কিছু ordered lists এর জন্য।

একটি ইমেজ বা স্টিল ছবি লিস্ট আইটেম মার্কার হিসেবে ব্যবহার

স্টিল ছবিকে লিস্ট আইটেম চিহ্নিতকারী হিসেবে ব্যবহারের জন্য লিস্ট স্টাইলিং এর জন্য list-style-image প্রোপার্টিজ ব্যবহার করা হয়।

ul {
   list-style-image: url('sqpurple.gif');
}

উপরের উদাহরণটি সকল ব্রাউজার সমানভাবে দেখায় না। ইন্টারনেট এক্সপ্লোরার (IE) এবং ওপেরাে ব্রাউজার Firefox, Chrome, and Safari থেকে ইমেজটি একটু বেশি উন্নত দেখায়।

যদি আপনি সকল ব্রাউজার এ চিহ্নিতকারী িইমেজটি সমানভাবে দেখাতে চান তাহলে নিচে একটি crossbrowser solution বর্ণনা করা হলো।

Crossbrowser সমাধান

নিচের উদাহরণটি সকল ব্রাউজারে চিহ্নিতকারী ছবিটি সমানভাবে দেখায়:

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 15px;
}

উদাহরণের বর্ণনা:

<ul> এর জন্য
- লিস্ট মার্কার মুছে ফেলতে list-style-type কে none হিসেবে নির্ধারণ করুন
- প্যাডিং এবং মার্জিন উভয় 0px হিসেবে নির্ধারণ করুন (ক্রস ব্রাউজার উপযুক্ততার জন্য)
সকল <li> এর ভিতরের <ul> এর জন্য
- ইমেজ এর URL সেট করুন এবং এটিকে কেবলমাত্র একবার দেখান (কোন পুনরাবৃত্তি নয়)
- আপনি যেখানে চান সে অনুসারে ইমেজ এর অবস্থান ঠিক করুন (left 0px and vertical value: center)
- টেক্সটকে padding-left সহ অবস্থান ঠিক করুন

লিস্ট - সংক্ষিপ্ত প্রোপার্টি

list-style প্রোপার্টি হচ্চে সংক্ষিপ্ত প্রোপার্টি। এটি সকল লিস্ট প্রোপার্টি ঘোষণা করতে ব্যবহৃত হয়।

ul {
    list-style: square inside url("sqpurple.gif");
}

যখন সংক্ষিপ্ত প্রোপার্টি ব্যবহার করা হবে তখন প্রোপার্টি মান এর ক্রম হবে:

list-style-type - (যদি লিস্ট স্টাইল ইমেজ নির্দিষ্ট হয়, প্রোপার্টি এর মান প্রদর্শিত হবে যদি কোন কারণে ইমেজটি প্রদর্শিত না হয়)
list-style-position - (লিস্ট আইটেম চিহ্নিতকারীটি কন্টেন্ট এর ভেতরের দিকে নাকি বাহিরে দিকে প্রদর্শিত হবে তা নির্দিষ্ট করে)
list-style-image - (লিস্ট আইটেম চিহ্নিতকারী হিসেবে ইমেজকে নির্দিষ্ট করে)

যদি এদের একটি প্রোপার্টি মান অনুপস্তিত থাকে, অনুপস্থিত প্রোপার্টি এর ডিফল্ট মান (যদি থাকে) প্রবেশ করবে।

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

অনুশীলন ০১ঃ

তালিকাটিকে unordered লিস্ট হতে "স্কয়ার" হিসেবে স্টাইল করো এবং ক্রমিক লিল্টটিকে "upper-roman" হিসেবে সেট করো।

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

</style>
</head>
<body>

<p>This is an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>This is an ordered list:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>

অনুশীলন ০২ঃ

"sqpurple.gif" ইমেজটিকে লিস্ট আইটেম চিহ্নিতকারী হিসেবে ব্যবহার করো।

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

</style>
</head>
<body>

<p>This is an unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

সকলণ সিএসএস লিস্ট প্রোপার্টি

প্রোপার্টি	বর্ণনা
list-style	সকল প্রোপার্টিকে সেট করার জন্য একবারে ঘোষণা করা হয়।
list-style-image	ইমেজকে লিস্ট আইটেম চিহ্নিতকারী হিসেবে চিহ্নিত করা হয়।
list-style-position	লিস্ট আইটেম চিহ্নিতকারীটি কন্টেন্ট এর ভেতরের দিকে নাকি বাহিরে দিকে প্রদর্শিত হবে তা নির্দিষ্ট করে
list-style-type	লিস্ট আইটেম চিহ্নিতকারী এর প্রকার নির্দিষ্ট করে

সি এস এস টিউটোরিয়াল (css tutorial)

সি এস এস লিঙ্ক (CSS Links)

February 8, 2015 Rafiqul Islam

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

স্টাইলিং লিঙ্ক

সিএসএস প্রোপার্টি দ্বারা লিঙ্ক স্টাইল করা যেতে পারে (যেমন: color, font-family, background, ইত্যাদি)

a {
    color: #FF0000;
}

লিঙ্ক এর অবস্থা অনুসারে একে স্টাইল করা যেতে পারে।

লিঙ্ক এর চারটি অবস্থা রয়েছে:

a:link - সাধারণ, ভিজিট করা হয়নি এমন লিঙ্ক
a:visited - যে লিঙ্ক এ ভিজিটর ভিজিট করেছেন
a:hover - যে লিঙ্ক এর উপর ব্যবহারকারী মাউস রেখেছেন
a:active - ক্লিক করার মূহুর্তে লিঙ্ক এর অবস্থা

উদাহরণঃ

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

লিঙ্ক এর বিভিন্ন অবস্থা স্টাইল করার ক্ষেত্রে ক্রমের কিছু নিয়ম রয়েছে:

a:hover অবশ্যই a:link এবং a:visited এর পরে আসতে হবে
a:active অবশ্যিই a:hover এর পরে আসতে হবে

প্রচলিত লিঙ্ক স্টাইল

উপরের উদাহরণে লিঙ্ক এর রঙ লিঙ্ক এর অবস্থার উপর ভিত্তি করে পরিবর্তিত হয়।

লিঙ্ক স্টাইল করার ক্ষেত্রে অন্যান্য প্রচলিত পন্থাগুলো দেখা যাক:

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

text-decoration প্রোপার্টি বেশিরভাগ ক্ষেত্রে লিঙ্ক এর আন্ডারলাইন মুছে ফেলতে ব্যবহার করা হয়:

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

ব্যাকগ্রাউন্ড রঙ

background-color প্রোপার্টি ব্যাকগ্রাউন্ড এর এর রঙ নির্ধারণ করতে ব্যবহৃত হয়:

a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}

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

অনুশীলন ০১ঃ

লিঙ্ক এর রঙ সবুজ হিসেবে নির্ধারণ করুন

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

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

অনুশীলন ০২ঃ

ভিজিট করা হয়নি এমন অবস্থায় লিঙ্ক এর রঙ লাল এবং ভিজিট করার পর লিঙ্ক এর রঙ নীল হিসেবে নির্ধারণ করুন।

<!DOCTYPE html>
<html>
<head>
<style>
/* mouse over link */
a:hover {
    color: black;
}

/* selected link */
a:active {
    color: green;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

অনুলীলন ০৩ঃ

hover এবং active লিঙ্ক অবস্থার ক্ষেত্রে ভিজিটেড এবং আনভিজিটেড লিঙ্ক হতে আন্ডারলাইন মুছে দিন

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    
}

/* visited link */
a:visited {
    
}

/* mouse over link */
a:hover {
    
}

/* selected link */
a:active {
    
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

অনুশীলন ০৪ঃ

ভিজিটেড এবং আনভিজিটেড লিঙ্ক এর জন্য ব্যাকগ্রাউন্ড রঙ "lightblue" নির্ধারণ করুন এবং hover এবং active লিঙ্ক অবস্থার ক্ষেত্রে ব্যাকগ্রাউন্ড রঙ হলুদ হিসেবে নির্ধারণ করুন

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    
}

/* visited link */
a:visited {
    
}

/* mouse over link */
a:hover {
    
}

/* selected link */
a:active {
    
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>

</body>
</html>

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

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 সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়ঃ

font-style:italic;
font-style : oblique;
font-style : normal;
font-style: inherit;

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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>

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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	একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি হবে তা নির্ধারণ করে

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এইচটিএমএল এর সব 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>

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

সি এস এস টিউটোরিয়াল (css tutorial)

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

February 8, 2015 Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

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

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

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

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

 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 ব্যবহার দিন দিন বেড়েই চলছে।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

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

February 7, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আক্তারুজ্জামান
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) পিএইচপি দিয়ে বানানো।
সবচাইতে জনপ্রিয় সামাজিক মিডিয়া সাইট ফেসবুকে পিএইচপি ব্যাবহার করা হয়।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

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

February 7, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

কিভাবে ফর্ম কে 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>

<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 কোড দ্বারা এটি একটি নিরাপদ জায়গায় রাখা হয়েছে।

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

PHP trim() function ব্যবহার করে অপ্রয়োজনীয় ফাকা জায়গা, নতুন কোন লাইন এই character গুলো কে রিমুভ করতে পারি
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 হবে। এই কোডটি রান করার পর যদি কোন ইউজার ফর্মের ডাটা ফাকা রেখে সাবমিট করে তাহলে এর ফলাফল বুঝা যাবে।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

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

February 7, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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 বাটন এ ক্লিক করলে একটি ফলাফল আপনি খুজে পাবেন।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

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

February 6, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

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/

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ স্ট্রিংস (PHP 5 Strings)

February 5, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

যে কোন প্রুগ্রামিং ল্যাঙ্গুয়েজে স্ট্রিং এর উপর পরিষ্কার ধারনা থাকাটা খুবয় জরুরি। একটা স্ট্রিং তৈরি হয় এক বা একাধিক ক্যারেক্টার মিলে । সোজা কথায় স্ট্রিং হচ্ছে ক্যারেক্টারের সমষ্টি ।

যেমন “Hello World” হচ্ছে একটি স্ট্রিং।

পিএইচপি স্ট্রিং ফাংশন

পিএইচপিতে স্ট্রিং মেনিপুলেট করার অনেক ফাংশন রয়েছে। নিচে কিছু কমন ফাংশনের বর্ণনা দেওয়া হয়েছে।

স্ট্রিং এর দৈর্ঘ্য (number of characters) বের করা

strlen() ফাংশনের মাধ্যমে স্ট্রিং এর দৈর্ঘ্য বের করতে হয়, নিচে উদাহরন দেওয়া হল।
উদাহরণঃ

< ?php
 $text = “Hello World!”
 echo strlen($text); // outputs 12
 ?>

এই কোডটার আউটপুট হবে 12

স্ট্রিং এর ওয়ার্ড এর সংখ্যা বের করা

স্ট্রিং এর ওয়ার্ড এর সংখ্যা বের করার জন্য str_word_count() ফাংশনটা ব্যাবহার করা হয়
উদাহরণঃ

< ?php
 $text = “Hello World!”
 echo str_word_count($text);// outputs 2
 ?>

এই কোডটার আউটপুট হবে 2

স্ট্রিং রিভার্স করা

strrev()ফাংশনের মাধ্যমে একটি স্ট্রিং কে রিভার্স করা যায়।
উদাহরণঃ

< ?php
 echo strrev("Hello world!"); // outputs !dlrow olleH
 ?>

আউটপুট হবে !dlrow olleH।

স্ট্রিং এ নির্দিষ্ট একটা টেক্সট কোজে বের করা

strpos()ফাংশন এর মাধ্যমে এই কাজটি করা হয়।
উদাহরণঃ

< ?php
 echo strpos("Hello world!", "world"); // outputs 6
 ?>

আউটপুট হবে 6 যেহেতু "Hello world!" এ “world” এর পজিশন 6।

স্ট্রিং এ টেক্সট রিপ্লেস করাঃ
এই কাজটি করতে হয় str_replace() ফাংশনের মাধ্যমে।
উদাহরণঃ

< ?php
 echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!
 ?>

এই কোডটির আউটপুট হবে
Hello Dolly!

এস কিউ এল - ০০১ । SQL - 001

SQL(এসকিউএল) Wildcards (ওয়াইল্ডকার্ড) . SQL Wildcards

February 4, 2015 Author-Check- Article-or-Video Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

SQL(এসকিউএল) Wildcards (ওয়াইল্ডকার্ড)

Author: Protap Chandra | sincerely.yours2512[at]gmail.com

ডাটাবেজ সিস্টেমে ডাটা তল্লাশি বা সার্চ করার ক্ষেত্রে wildcard (ওয়াইল্ডকার্ড) একটি গুরুত্বপূর্ণ টার্ম। স্ট্রিং ডাটার কোনো অংশ ‌‌'অজ্ঞাত' উল্লেখ করে ডাটা তল্লাশি করতে ওয়াইল্ডকার্ড ব্যবহার করা হয়। এই অজ্ঞাত অংশ এক থেকে বহু character (অক্ষর) পর্যন্ত হতে পারে।
একটি টেবিলের ভেতর থেকে ডাটা তল্লাশি করার জন্য এসকিউএল LIKE অপারেটরের সঙ্গে ওয়াইল্ডকার্ড character ব্যবহার করা হয়। SQL এ ব্যবহৃত wildcard গুলো হচ্ছে:

Wildcard	Description
%	শুন্য কিংবা যে কোনো এক বা একাধিক character খুঁজতে ব্যবহার করা হয়
_	একটিমাত্র character খুঁজতে ব্যবহার করা হয়
[charlist]	একাধিক character এর লিস্ট উল্লেখ করা হয় যেগুলো দিয়ে শুরু হওয়া ডাটা বাছাই করে
[^charlist] or [!charlist]	একাধিক character এর লিস্ট উল্লেখ করা হয় যেগুলো বাদ রেখে অন্য সব অক্ষর দিয়ে শুরু হওয়া ডাটা বাছাই করে

এই টিউটিরিয়ালে আমরা Northwind স্যাম্পল ডাটাবেজটি ব্যবহার করব, যেটি মাইক্রোসফট Excel এবং MS SQL Server এর সাথে শিক্ষার্থীদের জন্য তৈরী অবস্থায় (readymade) সংযুক্ত করা থাকে। সেই ডাটাবেজের "Customers" টেবিল থেকে কিছু ডাটা নির্বাচন করা হল:

CustomerID	CustomerName	ContactName	Address	City	PostalCode	Country
1	Alfreds Futterkiste	Maria Anders	Obere Str. 57	Berlin	12209	Germany
2	Ana Trujillo Emparedados y helados	Ana Trujillo	Avda. de la Constitución 2222	México D.F.	05021	Mexico
3	Antonio Moreno Taquería	Antonio Moreno	Mataderos 2312	México D.F.	05023	Mexico
4	Around the Horn	Thomas Hardy	120 Hanover Sq.	London	WA1 1DP	UK
5	Berglunds snabbköp	Christina Berglund	Berguvsvägen 8	Luleå	S-958 22	Sweden

SQL “%” ওয়াইল্ডকার্ড এর ব্যবহার:

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "ber" দিয়ে।

SELECT * FROM Customers
WHERE City LIKE 'ber%';

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নামের মাঝে কোথাও "es" আছে:

SELECT * FROM Customers
WHERE City LIKE '%es%';

SQL “ _” ওয়াইল্ডকার্ডের ব্যবহার:

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে যেকোন অক্ষর দিয়ে, কিন্তু তার পরের অবস্থানেই "erlin" আছে:

SELECT * FROM Customers
WHERE City LIKE '_erlin';

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে “L” দিয়ে, তারপরের অবস্থানে যেকোন অক্ষর, তার পরের অবস্থানে “n”, তার পরের অবস্থানে যেকোন অক্ষর, তার পরেই একসাথে থাকবে "on".

SELECT * FROM Customers
WHERE City LIKE 'L_n_on';

SQL [charlist] ওয়াইল্ডকার্ডের ব্যবহার:

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "b", "s" কিংবা "p" দিয়ে।

SELECT * FROM Customers
WHERE City LIKE '[bsp]%';

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "a", "b" কিংবা "c" দিয়ে।

SELECT * FROM Customers
WHERE City LIKE '[a-c]%';

নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "b", "s" কিংবা "p" বাদ দিয়ে।

SELECT * FROM Customers
WHERE City LIKE '[!bsp]%';

SELECT * FROM Customers
WHERE City NOT LIKE '[bsp]%';

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ ডাটা টাইপ (PHP 5 Data Types)

February 4, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আক্তারুজ্জামান

Department of CSE, University of Chittagong
ভেরিয়েবল বিভন্ন রকমের ডাটা স্টোর করতে পারে, এবং বিভন্ন ডাটা টাইপ বিভন্ন রকম কাজ করে। পিএইচপি নিচে উল্লেখিত ডাটা টাইপ গুলো সাপোর্ট করে।

স্ট্রিং (String):

স্ট্রিং তৈরি হয় এক বা একাধিক ক্যারেক্টার মিলে । সোজা কথায় স্ট্রিং হচ্ছে ক্যারেক্টারের সমষ্টি । যেমনঃ “Hello World” হচ্ছে একটি স্ট্রিং।
ডাবল কিংবা সিঙ্গল কোট ব্যবহার করে স্ট্রিং (string) ভেরিয়েবল তৈরি করতে হয়।
উদাহরণঃ

 <?php 
 $x = "Hello world!";
 $y = 'Hello world!';
 
 echo $x;
 echo "<br>"; 
 echo $y;
 ?>

এইখানে $x এবং y হল দুটি string টাইপ ভেরিয়েবল

ইন্টিজার (integer)

ইন্টিজার মানে হল পূর্ণ সংখ্যা । এইটি -2,147, 483, 648 এবং +2, 147, 483, 647 এর মধ্যে যে কোন একটি সংখ্যা হতে পারে। নিচের উদাহরণে $x হল একটি ইন্টিজার (integer) টাইপের ভেরিয়েবল।

<?php 
 $x = 5985;
 var_dump($x);
 ?>

var_dump() ফাংশনটি ডাটা টাইপ এবং মান রিটার্ন করে।

ফ্লোটিং পয়েন্ট (Float)

ফ্লোট হল একটি decimal point নাম্বার। নিচের উদাহরণে $x হল একটি ফ্লোট টাইপের ভেরিয়েবল।

<?php 
 $x = 10.365;
 var_dump($x);
 ?>

বুলিয়ান (boolean)

কোন কিছু সত্য না মিথ্যা তা প্রকাশ করার জন্য বুলিয়ান ডাটা টাইপটি ব্যাবহার করা হয়।বুলিয়ান এর দুইটি মান হতে পারে – true অথবা false
উদাহরনঃ

$x = true
$y = false

এ্যারে (Array)

একটি সিঙ্গেল ভেরিয়েবলে একের অধিক মান স্টোর করার জন্য এ্যারে ব্যাবহার করা হয়। নিচের উদাহরণে $cars হল একটি এ্যারে।

<?php 
 $cars = array("Volvo","BMW","Toyota");
 var_dump($cars);
 ?>

এইখানে $cars এ্যারেতে তিনটি স্ট্রিং টাইপের মান রয়েছেঃ
Volvo, BMW এবং Toyota।

অবজেক্ট টাইপ (Object)

কোন নির্দিষ্ট একটি ক্লাসের instance কে অবজেক্ট বলা হয়। অবজেক্ট হচ্ছে ভেরিয়েবল এবং ফাংশন এর সমস্টি। অবজেক্ট ইন্সট্যান্স তৈরি করতে হয় new কিওয়ার্ডটি ব্যবহার করে।
উদাহরনঃ

<?php
 class Car {
     function Car() {
         $this->model = "VW";
     }
 }
 
 // create an object
 $herbie = new Car();
 
 // show object properties
 echo $herbie->model;
 ?>

নাল টাইপ (Null)

নাল একটি বিশেষ ধরণের ডাটা টাইপ যেটার মান হতে পারে শুধুমাত্র একটি- এবং এইটি হল null । একটি ভেরিয়েবলে কোন মান এসাইন করা না হলে ওইটাকে নাল ডাটা টাইপের ভেরিয়েবল বলা হয়।
উদাহরনঃ

<?php
$x = "Hello world!";
$x = null;
var_dump($x);
?>

এইখানে $x হল একটি নাল টাইপের ভেরিয়েবল।

jQuery Mobile । জেকুএরি মোবাইল

jQuery Mobile – Popups

February 4, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

লিখছেন সুদীপ্ত সাহা

জেক্যুয়েরি মোবাইল পপআপস

পপআপ হল অনেকটা বার্তার মতো, যেগুলো একটি পেজের কোন অংশের ওপর দিয়ে আস্তরনের মতো বিস্তৃত হয়। ছোট কোন টেক্সট, ইমেজ, ম্যাপ বা অন্য কোন কন্টেন্ট প্রদর্শনের জন্য পপআপ বক্স উপযোগী।
পপআপ তৈরি করার জন্য ইলিমেন্ট এবং

ইলিমেন্ট দ্বারা শুরু করতে হয়। ইলিমেন্টে অ্যাট্রিবিউট data-rel="popup" এবং

ইলিমেন্টে অ্যাট্রিবিউট data-role="popup" অ্যাড করতে হবে। তারপর

এর id নির্দিষ্ট করে এর হাইপারলিঙ্ক সেট করে দিতে হবে যেন নির্দিষ্ট id’র সঙ্গে ম্যাচ করে। ইউজার যখন লিঙ্কে ক্লিক করবে তখন

এর মধ্যে যেই কন্টেন্টগুলো থাকবে সেগুলোই প্রদর্শিত হবে।
ইঙ্গিতঃ পপআপের

এবং লিঙ্ক অবশ্যই এক পেজে হতে হবে।

উদাহরনঃ
Show Popup

This is a simple popup.

আপনার পপআপ বক্সে অতিরিক্ত প্যাডিং বা মার্জিন অ্যাট্রিবিউট ব্যবহার করতে চাইলে

এর ক্লাস "ui-content" দিতে হবে।

উদাহরনঃ

পপআপ ক্লোজিং
পপআপ বক্সের বাইরে ক্লিক করলে অথবা “Esc” কী প্রেস করলে স্বয়ংক্রিয়ভাবে একটি পপআপ শেষ হয়ে যায় বা বন্ধ হয়ে যায়। কিন্তু পপআপ বক্সের বাইরে ক্লিক করলে পপআপ বন্ধ হয়ে যাবে, এরকম যদি আপনি না চান তাহলে আপনি পপআপে অ্যাট্রিবিউট data-dismissible="false" অ্যাড করতে পারেন (প্রয়োজনীয় নয়)। পপআপের ডানে অথবা বামে অথবা অন্য কোন দিকে আপনি একটি ক্লোজ বাটনও অ্যাড করতে পারেন। এর জন্য পপআপ কন্টেইনারে বাটন লিঙ্ক অ্যাট্রিবিউট data-rel="back" অ্যাড করতে হবে এবং বাটনের অবস্থান সিএসএস ক্লাসে নির্দিষ্ট করে দিতে হবে।

রাইট ক্লোজ বাটনের উদাহরনঃ
Show Popup

CloseI have a close button at the top right corner.Tip: You can also click outside to close me.

লেফট ক্লোজ বাটনের উদাহরনঃ
Show Popup

CloseI have a close button at the top left corner.Tip: You can also click outside to close me.

আনডিসমিসেবল পপআপের উদাহরনঃ
Show Popup

CloseI am an undismissible button (data-dismissible="false). The only way to close me is by clicking on the close button, which is positioned at the top right corner. You cannot close me by clicking outside of me.

পজিশনিং পপআপ
পপআপগুলো স্বয়ংক্রিয়ভাবে একেবারে ক্লিকড ইলিমেন্টের উপরেই প্রদর্শিত হয়। কিন্তু পপআপের অবস্থান নিয়ন্ত্রণের জন্য যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-position-to অ্যাট্রিবিউট ব্যবহার করতে হয়।
পপআপের অবস্থান নিয়ন্ত্রণের তিনটি পদ্ধতি হলঃ

অ্যাট্রিবিউট ভ্যালু বর্ণনা
data-position-to="window" পপআপ উইন্ডোর মাঝে প্রদর্শিত হবে
data-position-to="#myId" কোন নির্দিষ্ট id’র বর্ণনার অবস্থান অনুসারে পপআপ প্রদর্শিত হবে
data-position-to="origin" ডিফল্ট পপআপ সরাসরিভাবে ক্লিকড ইলিমেন্টের উপর প্রদর্শিত হবে

উদাহরনঃ
Window
id="demo"
Origin

ট্রানজিশনস
পপআপের সাথে স্বয়ংক্রিয়ভাবে কোন ট্রানজিশন ইফেক্ট অ্যাড করা থাকে না। ট্রানজিশন চ্যাপ্টারে বর্ণিত ইফেক্টগুলোর যেকোনোটি আপনি ব্যবহার করতে পারেন। শুধুমাত্র যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-transition="value" অ্যাট্রিবিউট অ্যাড করতে হবে।

সকল ট্রানজিশন ইফেক্টের জন্য একটি ড্যামো দেখানো হলঃ
Fade

পপআপ অ্যারো
পপআপের বর্ডারের মধ্যে কোন অ্যারো ব্যবহারের জন্য data-arrow অ্যাট্রিবিউট অ্যাড করতে হয় এবং লেফট এর জন্য “l” রাইটের জন্য “r” টপের জন্য “t” বোটমের জন্য “b” নির্দিষ্ট করে দিতে হয়।

উদাহরনঃ
Open Popup

There is an arrow on my LEFT border.

পপআপ ডায়ালগ
আপনি একটি মানসম্মত বা পছন্দস্বরূপ কোন ডায়ালগ আপনার পপআপে অ্যাড করতে পারেন (হেডার, ফুটার এবং কন্টেন্ট মার্কআপ)

উদাহরনঃ
Open Dialog Popup

Header Text..

Some text..

some links..

Footer Text..

পপআপ ফটো
পপআপে কোন ইমেজও প্রদর্শন করতে পারবেন।

উদাহরনঃ

AngularJS - 001

অ্যাংগুলার-জেএস অ্যাপ্লিকেশন . AngularJS Application

February 3, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

অ্যাংগুলার-জেএস অ্যাপ্লিকেশন
Sheikh Mahfuzur Rahman

অ্যাংগুলার-জেএস অ্যাপ্লিকেশন

আপনি পূর্বের সবগুলো টিউটোরিয়াল পড়ে থাকলে, একটি প্রকৃত অ্যাংগুলার-জেএস সিংগেল পেজ অ্যাপ্লিকেশন(SPA) তৈরির জন্য এটাই উপযুক্ত সময়!

একটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের উদাহরণ
আশা করি পূর্বের টিউটোরিয়ালগুলো পড়ে আপনি আপনার প্রথম অ্যাংগুলার-জেএস অ্যাপ্লিকেশন তৈরির জন্য যথেষ্ট কৌশল শিখে নিয়েছেনঃ
My Note

Number of characters left: 100

উদাহরণসহ অ্যাপ্লিকেশনটির ব্যাখ্যাঃ

myNoteApp">

<head>

</head>

<body>

myNoteCtrl">

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

</body>
</html>

অ্যাপ্লিকেশন ফাইলটি হলো "myNoteApp.js":

var app = angular.module("myNoteApp", []);

কন্ট্রোলার ফাইলটি হলো "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved");};
});

<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশন ng-app="myNoteApp" এর কন্টেইনার হিসেবে কাজ করেঃ

একটি <div> এলিমেন্ট এইচটিএমএল পেজে কন্ট্রোলার ng-controller="myNoteCtrl" এর স্কোপ হিসেবে কাজ করেঃ

একটি ng-model ডিরেক্টিভ একটি <textarea> কে কন্ট্রোলার ভ্যারিয়েবল ম্যাসেজে বাইন্ড করেঃ

ng-click ইভেন্ট দু'টি কন্ট্রোলার ফাংশন clear() এবং clear() কে ইনভোক বা আহবান করেঃ

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

একটি ng-bind ডিরেক্টিভ বাকি থাকা ক্যারেকটারগুলো দেখিয়ে কন্ট্রোলার ফাংশন left() কে <span> তে বাইন্ড করেঃ

Number of characters left: <span ng-bind="left()"></span>

পেজে অ্যাপনার অ্যাপ্লিকেশন লাইব্রেরিকে যোগ করা হয়েছে (লাইব্রেরির পরে):

অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের কাঠামো

উপরে ব্যবহার উপযোগী একটি বাস্তব অ্যাংগুলার-জেএস (single page application অর্থাৎ SPA) এর কাঠামো দেয়া হয়েছে।
<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের (ng-app=) কন্টেইনার।
<div> এলিমেন্টটি একটি অ্যাংগুলার-জেএস কন্ট্রোলারের (ng-controller=) স্কোপ ঠিক করে দেয়।
একটি অ্যাপ্লিকেশনে অনেকগুলো কন্ট্রোলার ব্যবহার করতে পারবেন।
একটি অ্যাপ্লিকেশন ফাইল (my...App.js) অ্যাপ্লিকেশন মড্যুল কোড নির্ধারণ করে।
এক বা একাধিক কন্ট্রোলার ফাইল (my...Ctrl.js) কন্ট্রোলার কোড নির্ধারণ করে।

পুরো প্রক্রিয়াটির সারাংশ?

অ্যাংগুলার-জেএস লাইব্রেরিটি <head> এ লোড হয়, কারন সঠিকভাবে কম্পাইলড হওয়ার জন্য স্ক্রিপ্টগুলো লাইব্রেরি কোডের উপর নির্ভর করে।
ng-app ডিরেক্টিভটি অ্যাপ্লিশনের রুট এলিমেন্টে রাখা হয়।
সিংগেল পেজ অ্যাপ্লিকেশনের(SPA) জন্য <html> এলিমেন্টটিই অধিকাংশ সময় অ্যাপ্লিকেশন রুট হয়ে থাকে।
এক বা একাধিক ng-controller ডিরেক্টিভ অ্যাপ্লিকেশন কন্ট্রোলার নির্ধারণ করে দেয়। প্রত্যেকটি কন্ট্রোলারের নিজস্ব স্কোপ (যে এইচটিএমএল এলিমেন্টে সেগুলো ডিফাইন করা হয়েছে) রয়েছে।
HTML DOMContentLoaded ইভেন্টে অ্যাংগুলার-জেএস সয়ংক্রিয়ভাবে সচল হয়ে যায়। যদি একটি ng-app ডিরেক্টিভ পাওয়া যায় অ্যাংগুলার-জেএস ঐ ডিরেক্টিভে উল্লেখিত (নেমড) যেকোন মড্যুলকে লোড করবে এবং DOM কে ng-app দিয়ে অ্যাপ্লিকেশনের রুট হিসেবে কম্পাইল করবে।
পুরো পেজটিই অ্যাপ্লিকেশনের রুট হতে পারে; অথবা এর ক্ষুদ্রতর অংশও হতে পারে। পেজের অংশটি যত ক্ষুদ্র হবে অ্যাপ্লিকেশনটি তত দ্রুত কম্পাইল ও অ্যাকজিকিউট করবে।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ ফর্ম রিকোয়ার্ড ফিল্ডস (PHP 5 Forms – Required Fields)

February 3, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ফর্ম ব্যবহার করে ডাটাকে আমরা পোস্ট করে থাকি। কিন্তু অনেক সময় ইউজার কোন ফিল্ড কে খালি রেখে অথবা কোন কিছু পুরণ না করে পোস্ট করতে পারে এই ক্ষেত্রে তাকে এই এররটা ইউজার কে দেখিয়ে দেওয়ার জন্য আমরা পিএইচপি তে কিছু কোড ব্যবহার করব। এখন আমরা একটি উদাহরণ দেখব যেখানে এইচটিএমএল ব্যবহার করে একটি ফর্ম ব্যবহার করা হয়েছে তাতে ফিল্ড খালি রেখে পোস্ট করলে পরবর্তীতে তাকে যেই ফিল্ড গুলো সে পূর্ণ করে নি সেখানে এরর মেসেজ দেখাবে। কোড গুলো নিম্মরুপ

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                                          /*ডাটা পোস্ট করা হবে*/
 
 Name: <input type="text" name="name">    /*একটি নামের ফিল্ড*/
 <span class="error">* <?php echo $nameErr;?></span>
                            /*যদি ফাকা রেখে সাবমিট করা হয় তাহলে পিএইচপি এর মাধ্যমে 
                            এররর মেসেজ দেখাবে এই span id এর ভিতরে*/
 <br><br>
 E-mail:
 <input type="text" name="email">
 <span class="error">* <?php echo $emailErr;?></span>
 <br><br>
 Website:
 <input type="text" name="website">                    
 <span class="error"><?php echo $websiteErr;?></span>

                    /*যদি ফাকা রেখে সাবমিট করা হয় 
                      তাহলে পিএইচপি এর মাধ্যমে এররর 
                      মেসেজ দেখাবে এই span id এর ভিতরে*/

 <br><br>
 <label>Comment: <textarea name="comment" rows="5" cols="40"></textarea>
 <br><br>
 Gender:
 <input type="radio" name="gender" value="female">Female
 <input type="radio" name="gender" value="male">Male
 <span class="error">* <?php echo $genderErr;?></span>
                  /*যদি ফাকা রেখে সাবমিট করা হয় তাহলে পিএইচপি 
                    এর মাধ্যমে এররর মেসেজ দেখাবে এই span id এর ভিতরে*/
 <br><br>
 <input type="submit" name="submit" value="Submit">
                 /*সমস্ত ডাটাগুলো লেখার পর পোস্ট বাটন এ ক্লিক করলে 
                   ডাটাগুলো পিএইচপি পরবে তার জন্য আমরা এখন কোড লিখব*/ 
 
 </form>

ফাংশন

 < ?php
       // ফাকা ডাটা বা variable গুলো চিহ্নিত করার জন্য।

 $nameErr = $emailErr = $genderErr = $websiteErr = "";
 $name = $email = $gender = $comment = $website = "";

 if ($_SERVER["REQUEST_METHOD"] == "POST")
        /*যদি পোস্ট নামের বাটন এ ক্লিক করা হয়ে থাকে তাহলে 
          পরবর্তী ভিতরের অংশ কাজ করবে।*/
   {
     if (empty($_POST["name"]))
         /*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল 
           কিনা যদি না করে থাকে তাহলে span id এর ভিতরে 
           এইচটিএমএল পার্ট এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
       {
         $nameErr = "Name is required";
 /*এই টেক্সট টি নাম ফিল্ড ফাকা থাকলে তার পাসে দেখাবে*/
      }
        else { 
          $name = test_input($_POST["name"]);
            /*অথবা যদি পোস্ট করে থাকে তাহলে এই কোড 
              এর মাধ্যমে পিএইচপি দতা টা পরবে*/
         }
         if (empty($_POST["email"]))
            /*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা যদি না করে
              থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট এর ভিতরে যেখানে
              আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
          {
            $emailErr = "Email is required";
          }
         else 
          { 
            $email = test_input($_POST["email"]);
          }
         if (empty($_POST["website"]))
             /*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা
               যদি না করে থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট
               এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
         {
           $website = "";
         }
         else 
         {
           $website = test_input($_POST["website"]);
         }
           if (empty($_POST["comment"]))
               /*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা
                 যদি না করে থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট
                 এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
         {
           $comment = "";
         }
         else {
           $comment = test_input($_POST["comment"]);
         }
         if (empty($_POST["gender"]))
               /*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা
                 যদি না করে থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট
                 এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
         {
           $genderErr = "Gender is required";
         }
         else {
           $gender = test_input($_POST["gender"]);
         }
     }
 ?>

PHP Form Validation Example

* required field.

AngularJS - 001, Complete Courses, Professional, Root

AngularJS References

February 2, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

AngularJS References
parijat biswas
student of CSE
university of Asia Pacific

AngularJS Directives
যেসব AngularJS Directives এই টিউটোরিয়ালে ব্যবহৃত হয়ছেঃ
Directive বর্ণনা ব্যাখ্যা
ng-app একটি অ্যাপ্লিকেশন এর মূল উপাদান সংজ্ঞায়িত করার জন্য ব্যবহৃত Directives
ng-bind HTML element এর innerHTML এপ্লিকেশন ডাটাতে যুক্ত করে । Introduction
ng-click একটি উপাদান ক্লিক করা হলে আচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় । HTML Events

ng-controller একটি অ্যাপ্লিকেশনের object control করার জন্য ব্যবহৃত হয় । Controllers

ng-disabled HTML disabled attribute এ এপ্লিকেশন ডাটা যুক্ত করে । HTML DOM

ng-hide html উপাদান hide বা show করে । HTML DOM
ng-include একটি অ্যাপ্লিকেশন মধ্যে html যুক্ত করে । Includes

ng-init একটি অ্যাপ্লিকেশনের জন্য প্রাথমিক মান সংজ্ঞায়িত করার জন্য ব্যবহৃত Directives

ng-model এপ্লিকেশন ডাটাতে html control এর মান যুক্ত করে । Directives

ng-repeat প্রতিটি ডাটার জন্য একটি টেমপ্লেট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় । Directives

ng-show html উপাদান show অথবা hide করে । HTML DOM

AngularJS Filters
AngularJS Filters

যেসব AngularJS Filters এই টিউটোরিয়ালে ব্যবহৃত হয়ছেঃ
Filter বর্ণনা
Currency একটি নাম্বারকে currency format এ রূপান্তর করে ।

Filter একটি array থেকে subset নির্বাচন করে ।

Lowercase একটি string কে lower case এ রুপান্তর (format) করে ।

orderBy expression এর মাধ্যমে একটি array কে order করে ।

uppercase একটি string কে upper case এ রুপান্তর (format) করে ।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি – মাইএসকিউএল এ একাধিক রেকর্ড প্রবেশ করানো (PHP – Insert Multiple Records Into MySQL in Bangla)

February 2, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

MySQLi এবং PDO ব্যবহার করে মাইএসকিউএল এর মধ্যে একাধিক ডাটা রেকর্ডস প্রবেশ করান

একাধিক SQL statements কে executed (উদ্দিপ্ত) করার জন্য mysqli_multi_query() function (ফাংশন) ব্যাবহার করতে হবে।

নিম্নলিখিত উদাহরণগুলি "MyGuests" টেবিল এ তিনটি নতুন রেকর্ড যোগ করাবে:

MySQLi Object-oriented এর উদাহরণ-

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', 'john@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Mary', 'Moe', 'mary@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Julie', 'Dooley', 'julie@example.com')";

if ($conn->multi_query($sql) === TRUE) {
    echo "New records created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

MySQLi Procedural এর উদাহরণ-

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', 'john@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Mary', 'Moe', 'mary@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Julie', 'Dooley', 'julie@example.com')";

if (mysqli_multi_query($conn, $sql)) {
    echo "New records created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>

PDO এর উপায়টা সামান্য একটু ভিন্ন-

PDO এর উদাহরণ-

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // begin the transaction
    $conn->beginTransaction();
    // our SQL statememtns
    $conn->exec("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('John', 'Doe', 'john@example.com')");
    $conn->exec("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('Mary', 'Moe', 'mary@example.com')");
    $conn->exec("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('Julie', 'Dooley', 'julie@example.com')");

    // commit the transaction
    $conn->commit();
    echo "New records created successfully";
    }
catch(PDOException $e)
    {
    // roll back the transaction if something failed
    $conn->rollback();
    echo "Error: " . $e->getMessage();
    }

$conn = null;
?>

এস ই ও - ০০৩ । SEO Details - 003

চিফ মার্কেটিং কর্মকর্তা হিসেবে যে আটটি এসইও ট্রেন্ড সম্পর্কে আপনাকে জানতেই হবে . 8 SEO Trends Your CMO Needs to Know for 2015

February 1, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শেখ মাহ্ফুজুর রহমান

২০১৫ সালের বাজেট ও স্ট্র্যাটেজি তৈরির সময় বিবেচনায় রাখার মতো সেরা আটটি এসইও ট্রেন্ড

বছরের এই সময়টিই, যখন বাৎষরিক মার্কেটিং বাজেট এবং সিদ্ধান্তগুলো নেয়া হয়, আগামী বছরের লাভ-লোকসানের ভিত্তি তৈরি করে। এখন শুধু প্ল্যানিং, অ্যাকাউন্টিং এবং প্রশাসন ব্যবস্থাপনাই যথেষ্ট নয়, ব্র্যান্ড মার্কেটারদের বজায় রাখতে হয় সর্বশেষ স্ট্র্যাটেজি এবং কৌশলকে যা অর্গ্যানিক সার্চের (যেখানে পরিবর্তনই হলো স্থীতিশীলতা) ক্রমোন্নতিকে গতিশীল করবে।

অবশ্য, চিফ মার্কেটিং অফিসাররা সার্চ এলগরিদমের ছোটখাটো পরিবর্তন নিয়ে মাথা না ঘামিয়ে ইন্ডাস্ট্রির বড় ধরণের ট্রেন্ডগুলোর দিকে দৃষ্টিপাত করেই সার্চের নতু নতুন পরিবর্তনের কৌশল নির্ধারণ করতে পারেন। "2015 Enterprise Buyer's Guide to SEO" থেকে নেয়া সেরা আটটি অর্গ্যানিক সার্চ ট্রেন্ড নিয়ে আজকের আলোচনাটি সাজানো হয়েছে যা সিএমও (চিফ মার্কেটিং অফিসার) এবং মার্কেটিং অর্গ্যানাইজেশনগুলো ২০১৫ সালের পরিকল্পনা তৈরির সময় বিবেচনায় রাখতে পারে।

১) ট্রুলি আর্নড লিংকের সংখ্যার ক্রমবৃদ্ধি

দীর্ঘকাল ধরেই ইনবাউন্ড বা ব্যাক লিংকগুলো সার্চ ইঞ্জিনগুলোর কাছে মূল্য, বিশ্বাস ও আস্থার প্রাথমিক অফ-সাইট ইন্ডিকেটর হিসেবে বিবেচিত হয়ে আসছিল এবং তা এখনো রয়েছে।

ব্র্যান্ডেড কন্টেন্ট সাইটেশন অর্জনের লক্ষ্যে অর্গ্যানিক সার্চ চ্যানেল নিয়ে চিন্তিত সিএমও'দের উচিত মূল্যবান কন্টেন্ট তৈরি করা এবং তা নির্দিষ্ট শ্রোতাদের কাছে প্রমোট করা। এগুলো শুধু মাত্র প্রোডাক্ট পেজের প্রতি কতগুলো টেক্সট লিংক না হয়ে হাই কোয়ালিটি ব্র্যান্ডেড কন্টেন্টের প্রতি উদৃতি ও লিংক হওয়া বাঞ্চনীয়।

যা হলো কর্তৃত্বস্থানীয় পাবলিশার অথবা ইনফ্লুয়েন্সারের কাছ থেকে প্রাসঙ্গিক সাইটেশন বা উল্লেখ এসইও, ব্র্যান্ড অ্যাওয়ারনেস, অনলাইন সেইল, লিড জেনারেশন, শ্রোতার বৃদ্ধি এবং অন্যান্য সব দূর্লভ ও অত্যন্ত মূলবান মার্কেটিং বা বিপণন সূচককে প্রভাবিত করে-- তাই এসইও'র জন্য এই স্ট্র্যাটেজিটিকে কেন ব্যবহার করবেননা?

২) মোবাইলের অব্যাহত গুরুত্ব বৃদ্ধি

২০১৪ সালটি ছিল মার্কেটিং এর জন্য একটি স্মারক বর্ষ যখন মোবাইল ইন্টারনেটের ব্যবহার ডেস্কটপ ইন্টারনেটের ব্যবহারকে ছাড়িয়ে গিয়েছিল। এই ঘটনাটি কনজ্যুমার বা ভোক্তার আচরণের একটি মৌলিক পরিবর্তনকে চিহ্নিত করে যা সার্চ এবং সার্চ ইঞ্জিন অপটিমাইজেশনের একটি বড় নিহিতার্থকে প্রকাশ করে।

মোবাইল সার্চ এলগরিদম ডেস্কটপের থেকে ভিন্নতর উৎকৃষ্ট পথকে নির্দেশ করে, তাই মার্কেটিং ব্যয়কে সঠিকভাবে পরিচালিত করার জন্য সিএমও'দের মোবাইল সার্চের দিকগুলো বুঝা অত্যন্ত গুরুত্বপূর্ণ। একটি ব্র্যান্ডের দ্রুততার সাথে কার্যকরভাবে উচ্চমানের মোবাইল এক্সপেরিয়েন্স সরবারহ করার সক্ষমতাই নিশ্চিতভাবে একটি প্রতিযোগিতামূলক সুযোগ তৈরি করে দেবে।

৩) প্লাটফর্ম, ডিভাইস, চ্যানেল অনুসারে সার্চকে বিভক্ত করা

সার্চ কোয়ারিগুলো শুধু লং টেইল কিওয়ার্ডেই বিভক্ত হচ্ছেনা সেগুলো প্লাটফর্ম ও চ্যানেল অনুযায়ীও বিভক্ত করে। অনলাইন সার্ভিস প্রোভাইডার, মোবাইল ডিভাইস এবং সফটওয়্যার অ্যাপ্লিকেশনগুলো তাদের শ্রোতাদের ভালো সেবা দেয়ার জন্য ইন্টারনাল সার্চ ফাংশন গড়ে তুলছে-- এবং এর মানে হলো ওয়েব ব্রাওজার সার্চ ইঞ্জিনের থেকে সার্চ ভল্যুম সেখানে চলে যাচ্ছে।

২০১৫ সালে, সিএমও'দের উচিত গুগল ছাড়াও আমাজন, উইকিপিডিয়া, ইয়েল্প এবং মোবাইল অ্যাপ্লিকেশনের মতো প্লাটফর্মগুলোর সার্চে ব্র্যান্ড এর উপস্থিতিকে অপটিমাইজ করার দিকে নজর দেয়া।

৪) সোশ্যাল এঙ্গেজম্যান্টের সাথে থট লিডারশিপের সমন্বয়

থট লিডারশিপ (বা চিন্তার নেতৃত্ব) সামসময়িক বছরগুলোতে একটি হট টার্ম হিসেবে বিবেচিত হচ্ছে যখন অনেক ব্র্যান্ড নিজেদেরকে তাদের নিজস্ব অনলাইন কমিউনিটিগুলোতে দক্ষ হিসেবে প্রতিষ্ঠিত করতে আগ্রাসী কন্টেন্ট মার্কেটিং স্ট্যাটেজি গ্রহন করেছে। যেহেতু কিছু থট লিডারশীপ কেম্পেইন মিইয়ে গেছে, এখন দৃষ্টি পড়েছে অফ-সাইট সিগন্যাল (সোশ্যাল মিডিয়া শেয়ার) এর উপর যা অর্গ্যানিক স্ট্র্যাটেজি'র একটি অবিচ্ছেদ্য অংশ।

প্রাসঙ্গিক শ্রোতাদের কাছ থেকে সোশ্যাল এঙ্গেজমেন্ট ছাড়া শুধু থট লিডারশিপের পক্ষে সার্চে দীর্ঘস্থায়ী সফলতা অর্জন সম্ভব নয়। দুটোকেই একসাথে চলতে হবে।

৫) লং-টেইল সার্চ ট্রাফিকের ক্রমবর্ধনশীল গুরুত্ব

এক-দুই শব্দের কি ফ্রেজ (key phrase) দিয়ে সার্চে র‍্যাংক পাওয়া কষ্টসাধ্য এবং তা পুরোপুরি কভার করেনা। সেই তুলনায়, লং-টেইল কিওয়ার্ড কোয়ারিগুলো অনেক বেশি প্রাসঙ্গিক হয়ে থাকে এবং উচ্চমাত্রায় কনভার্ট হয়ে থাকে এর নির্দিষ্টতার জন্য, পরিণামে উদ্দেশ্যের সফলতা অর্জিত হয়। যেসব ব্র্যান্ড লং-টেইল কোয়ারিগুলোর শক্তি ও প্রভাবকে যুথবদ্ধ করতে পারবে সেগুলোই ২০১৫ সালে সূচাগ্র পার্থক্য দেখতে পাবে।

২০১২ সালের একটি গবেষণা এটি নির্দেশ করে যে দৈনন্দিন কোয়ারির ১৬ থেকে ২০ ভাগ পূর্বে দেখাই যায়নি। এই পরিস্থিতির আরও বেশি উন্নতি ঘটছে যখন মোবাইল ডিভাইসগুলোতে ভোকাল সার্চের অ্যাপ্লিকেশনগুলো প্রকাশিত হচ্ছে এবং সার্চ ইঞ্জিনগুলো লং-টেইল কিওয়ার্ড বুঝার ক্ষেত্রে আরও দক্ষ হয়ে উঠছে। যদিও লং-টেইল সার্চ ট্রাফিক পেতে ব্যাপক সময় লাগবে, তবে এটি দীর্ঘপথযাত্রায় যথার্থ ভালো ফল দেবে।

৬) সার্চ রেজাল্ট দৃশ্যপটের পরিবর্তন

যখন গুগল একটি লক্ষ্যস্থানে পরিণত হতে চাইছে তখন আমরা আরও বেশি খেলাধুলার স্কোর, আবহাওয়ার খবর এবং খুচরা বিক্রেতাদের সম্পর্কিত ইন-স্ট্রিম আন্সার বা উত্তর প্রত্যাশা করতে পারি। কাস্টমাররা যেভাবে সার্চ রেজাল্টকে দেখে ও ইন্টারেক্ট করে সে অনুযায়ী গুগলের নলেজ গ্রাফ এবং কারোজাল ফিচারগুলোর মৌলিক পরিবর্তন ঘটছে। সিএমও'দের সার্চ স্পেসে তাদের ব্র্যান্ড কেমনভাবে উপস্থাপিত হয় সে সম্পর্কে অবশ্যই সচেতন হতে হবে যেহেতু গুগল একটি ইনফর্মেশন ইঞ্জিনকে নলেজ ইঞ্জিনে রূপান্তরিত করছে।

৭) কিওয়ার্ড ও র‍্যাঙ্কিং এর গুরুত্ব হ্রাস

গুগলের কিওয়ার্ড সার্চ ডাটার এনক্রিপশন নিকট ভবিষ্যতে কি অপেক্ষা করছে তাই নির্দেশ করেছিল। যতই প্লাটফর্ম, চ্যানেল, ডিভাইস এবং অ্যাপ্লিকেশনে তথ্যের ব্যবহার বিভক্ত হয়ে যাবে ততই কিওয়ার্ড ও র‍্যাংকিং এর সাথে সার্চ ইঞ্জিন অপটিমাইজশনের সম্পর্ক হ্রাস পাবে। সিএমও'দের উচিত বহুবিধ প্রপার্টিতে ব্রান্ডের দৃশ্যমানতা এবং ডিজিটাল স্পেসের প্রতিটি কোনায়, যেখানে ভাগ্য ও ক্রেতা আছে, এর উপস্থিকেই সার্চ অপটিমাইজেশন হিসেবে দেখতে শেখা।

৮) পারসোনালাইজেশনের প্রয়োজনীয়তা বৃদ্ধি

যতই সার্চ প্রক্রিয়াগুলো জটিল হচ্ছে কাস্টমাররা ততই উচ্চতর পর্যায়ের পারসোনালাইজেশনের অন্তর্ভূক্ত হচ্ছে। একই কোয়ারির জন্য অঞ্চল, সাওইকোগ্রাফিক এবং ডেমোগ্রাফিক ডাটা অনুসারে, যেগুলো পূর্ববর্তী ব্যবহারের উপর সংগ্রহ করা হয়েছে, প্রত্যেক ব্যক্তি আলাদা আলাদা রেজাল্ট পেতে পারে। কনভার্সান ঐ ব্র্যান্ডগুলোর দিকেই যাবে যারা সবগুলো সার্চ প্লাটফর্মের কাস্টমারদের উচ্চতর পারসোনালাইজেশন সরবরাহ করতে প্রস্তুত রয়েছে। প্রমিনেন্ট কন্টেন্ট মার্কেটারদের ব্র্যান্ডের দৃশ্যমান হওয়ার সম্ভবনা তাই অনেক বেশি।

অর্গ্যানিক সার্চ এখনো সবকিছুর উপরে

যে চ্যানেলটি এখনো বিটুবি (B2B) এবং বিটুসি (B2C) কোম্পানিগুলোর মধ্যে বেশিরভাগ ভিজিটর, কনভার্সান এবং কাস্টমারদের চালিত করে থাকে, অর্গ্যানিক সার্চ তেমন চ্যানেল নয় যা মার্কেটিং একজিকিউটিভরা অগ্রাহ্য করতে পারে। যেসব কোম্পানি এই চ্যানেলটিকে ম্যাক্সিমাইজ করতে পারবে তারাই অবশেষে ডিজিটাল স্পেসে অধিকার পাবে এবং সেই সাথে দেখা পাবে লাভের।

এস ই ও - ০০৩ । SEO Details - 003

২০১৫ সালে যে পাঁচটি এসএইও ট্রেন্ডকে বিবেচনায় রাখা উচিত . 5 SEO Trends You Need to Consider for 2015

February 1, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আশা করি আপনারা "সার্চ ইঞ্জিন অপটিমাইজেশনের যুগ শেষ" এবং "সোশ্যাল মিডিয়াই হলো নতুন সার্চ" এই দু'টি সর্বশেষ অত্যুক্তিতে বিশ্বাস করেননা। বাস্তবতা হলো, এসইও কতগুলো বহুল পরীক্ষিত এসইও কৌশল, কন্টেন্ট মার্কেটিং এবং সোশ্যাল মিডিয়া অপটিমাইজেশনের মধ্যকার সংযুক্তিতে বিবর্তিত হচ্ছে। এটি আরও বেশী জটিল হয়েছে কিন্তু এর মূল্য সামান্য পরিমাণেও কমেনি। এই ধারণাটি মাথায় রেখে ২০১৫ সালের পাঁচটি এসইও ট্রেন্ড সম্পর্কে আলোচনা করা হলো, যেগুলো আপনি এবছর পরিকল্পনা করবেন।

১) সিম্যান্টিক সার্চ

গুগল সম্প্রতি সার্চ এলগরিদমের "Hummingbird" আপডেট প্রকাশ করেছে। পূর্বের পান্ডা ও পেঙ্গুইন আপডেটের মতো না হয়ে হামিংবার্ড আপডেটটি ছিল সম্পূর্নরূপে সিম্যান্টিক সার্চ নির্ভর। যেখানে সিম্যান্টিক হলো ভাষাতত্ত্বের একটি বিভাগ যা শব্দের অর্থঘটিত বিষয় নিয়ে আলোচনা করে। সিম্যান্টিক সার্চ সার্চ কোয়ারির (আপনি সার্চ বারে যা লিখে সার্চ করেন) অর্থ এবং যে ব্যক্তি সার্চ করছেন তার মনোভাব বুঝার চেষ্টা করে। সার্চ ইঞ্জিন ল্যান্ডের ডেনি সুলিভান বিষয়টিকে এভাবে ব্যাখ্যা করেছেনঃ

"হামিংবার্ড কোয়ারির প্রত্যকটি শব্দের দিকে আরও বেশি মনোযোগ দেয় যাতে পুরো কোয়ারিটিকে নিশ্চিত করা যায়-- নির্দিষ্ট কতগুলো শব্দ নয় বরং পুরো বাক্য বা আলোচনা বা অর্থকে বিবেচনায় নেয়া হয়। লক্ষ্য হলো, পেজের অর্থের সাথে সার্চের অর্থ মেলানো; এখানে অল্প কিছু কিওয়ার্ড কে আর ধর্তব্যে নেয়া হয়না।"

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

২) মোবাইল সার্চ অপটিমাইজেশন

গুগলের তথ্য অনুযায়ী মোবাইল সার্চের ৫০ভাগ কোয়ারিই হয়েছে অঞ্চলগত দিক লক্ষ্য করে। এর মানে হল সার্চকারি ব্যক্তিরা স্থানীয় ব্যবসাগুলোকে খুঁজেছেন যেন তারা ইন-স্টোর কেনাকাটা করতে পারেন। তারপরও সব মোবাইল সার্চ অঞ্চলবিশেষ লক্ষ্য করে করা হয়নি।

তাই এক্ষেত্রে মোবাইল সার্চের ব্যবহার বৃদ্ধি, মোবাইল-ওনলি ইউজারদের উত্থান এবং গুগলের নতুন ''মোবাইল ফ্রেন্ডলি" লেবেলগুলো কিভাবে সার্চ রেজাল্টকে প্রভাবিত করছে সে সম্পর্কে ভালো ধারণা রাখতে হবে। বলাবাহুল্য, সাম্প্রতিক সময়ে স্মার্টফোনের ব্যবহারের বৃদ্ধিকে ভোক্তা সংগ্রহের একটি প্রধান ক্ষেত্র হিসেবে ধরে নিতে হবে।

৩) সোশ্যাল সিগনেলগুলোর অকার্যকারিতা

সোশ্যাল সিগনেল যেমন টুইট, শেয়ার ও গুগলপ্লাস সার্চ রেঙ্কিংকে প্রভাবিত করে? তা করে, কিন্তু আপনি যেভাবে ভাবেন তেমন নয়।

সব সময়ই বলা হয়েছে যে টপ সার্চ রেঙ্কিংয়ে উপরের যাওয়ার উপায় হলো সোশ্যাল মিডিয়ায় শেয়ার। এটি সেই ২০১০ সালের কথা যখন গুগলের ওয়েব-স্পাম বিষয়ক প্রধান বলেছিলেন, আমরা আমাদের সার্চ রেঙ্কিং এ টুইটার ও ফেসবুকের লিংক ও রেঙ্কিংকে ব্যবহার করি। কিন্তু ২০১৪ সালে যখন তাকে একই প্রশ্ন করা হয় তখন বলেছিলেন, বর্তমানে আমাদের সার্চ এলগরিদমে তেমন কোন সিগন্যাল নেই।"

তারপরও কিছু সার্চ অপটিমাইজাররা প্রমাণ করে দেখিয়েছেন যে সোশ্যাল শেয়ার সার্চে সত্যিকার অর্থেই প্রভাব রাখে। তাই সোশ্যাল মিডিয়া সিগন্যাল একেবারেই অপ্রয়োজনীয় তেমন বলা যাবেনা তবে তা আরও বৃহৎ পরিসরে মার্কেটিং স্ট্র্যাটেজি নিয়ে অপটিমাইজ করতে হবে। আপনার এবং অন্যদের শেয়ার করা কন্টেন্ট ব্যাকলিংক তৈরি করে, আরও ট্রাফিককে আপনার সাইটের দিকে ধাবিত করে যা আপনার ব্র্যান্ড সংশ্লিষ্ট কোয়ারিকে বাড়িয়ে দেয়।

৪) আর্নড লিংকের ক্রমবর্ধমান গুরুত্ব বৃদ্ধি

একটি সফল এসইও স্ট্র্যাটেজি নির্ভর করে গুণগত ও পরিমাণগত ব্যাকলিংকের উপর। এক্ষেত্রে আপনার নিজের তৈরি লিংক যেমন আপনার ওয়েব পেজ ও সোশ্যাল মিডিয়া পেজ, পেইড লিংক যেমন গুগল অ্যাডওয়ার্ড বিজ্ঞাপন, টুইটার প্রমোট অথবা অন্যান্য সংস্থার বিজ্ঞাপনী সেবার লিংকের চেয়ে অর্জিত লিংক যেগুলো অন্যান্যরা স্বেচ্ছায় আপনার পণ্য সম্পর্কে আলোচনা ও শেয়ারের মাধ্যমে তৈরি করেছে সেগুলোর গুরুত্ব সার্চ রেঙ্কিংএ অনেক অনেক বেশি। সবসময় লো-কোয়ালিটি লিংক তৈরি থেকে বিরত থাকা উচিত যা আপনার সাইটকে সার্চ ইঞ্জিনে পেনালাইজড করতে পারে।

সুতরাং বুঝা যাচ্ছে যে উচ্চমানসম্পন্ন কন্টেন্ট তৈরিই এসইওর জন্য সবচেয়ে গুরুত্বপূর্ণ! তাছাড়া সামজিক কার্যকলাপের মাধ্যমে অফলাইন সম্পর্ক বৃদ্ধি এবং ব্রোকেন লিংক বিল্ডিংকেও মাথায় রাখতে হবে।

৫) ব্র্যান্ড সম্পর্কে উল্লেখ এবং সাইটেশন

একটি সাইটেশন হলো আপনার ওয়েবসাইট ছাড়া অন্য কোন ওয়েব সাইটে আপনার ব্র্যান্ডের নাম, ঠিকান, ফোন নাম্বার সম্পর্কে যেকোন উদ্দৃতি। একটি কো-সাইটেশন হলো আপনার ব্যবসায়ের মতো একই রকম অন্য ব্যবসায়িক প্রতিষ্ঠানের সাইটে আপনার ব্র্যান্ড সম্পর্কিত উল্যেখ। এক্ষেত্রে লোকাল সাইটেশন, ইন্ডাস্ট্রি সাইটেশন ও নিচ্‌(Niche) সাইটেশন সম্পর্কে জানতে হবে।

সাইট স্ট্রাকচার সম্পর্কে বোনাস টিপ

আপনার সাইটটি ভিজিটরদের কাছে যত বেশী আকর্শনীয় হবে ততো বেশি তা সার্চ ইঞ্জিনের কাছে গ্রহনযোগ্য হবে। তাই সাইটকে যতটা সম্ভব সহজবোধ্য করুন। বাউন্স রেটকে কমানো এবং সাইটে ভিজিটরদের অতিবাহিত সময় বাড়ানোকে গুরুত্ব দিয়ে সাইট ডিজাইন করুন। একটি ত্রুটিমুক্ত এক্সএমএল সাইট ম্যাপ সাবমিট করুন। সাইটের ইউজেবিলিটি বৃদ্ধি করুন।

পরিশেষে, সন্দেহ নেই এসইও বিবর্তিত হয়েছে মানুষ ও সার্চ ইঞ্জিন উভয়ের রুচির দিকে লক্ষ্য রেখে। সিম্যান্টিক সার্চ, মোবাইল ওয়েব এবং সামাজিক যোগাযোগ মাধ্যমের প্রাসঙ্গিকতার উত্থান আপনার কন্টেন্টকে মানুষের কাছে পৌছে দিচ্ছে; কিন্তু তা আগের চেয়ে আরও বেশি জটিলতা ও নতুন নতুন সমস্যাকে অন্তর্ভূক্ত করেছে। তবে অনেক পরিবর্তনের মধ্যেও কিছু জিনিস একই রকম রয়ে গেছেঃ প্রাসঙ্গিক উচ্চমানের কন্টেন্ট এবং এর ভালো উপসস্থাপন আপনার জন্য কাজে লাগবে। এবং লিংক অ্যাসিস্ট্যান্ট এর এসইও পাওয়ার স্যুইট এসইও টুল আপনার সিদ্ধান্ত গ্রহনে ও আপনার সাইটকে প্রমোট করতে ভূমিকা রাখবে। তাই আজই এসইও পাওয়ার স্যুইটকে ট্রাই করে দেখুন।