Tag Archives: প্রোপার্টি

সিএসএস৩ গোলাকৃতির কর্ণার (CSS3 Rounded Corners in Bangla)

Huge Sell on Popular Electronics

সিএসএস৩ border-radius প্রোপার্টি সাহায্যে আপনি যেকোন এলিমেনন্ট এর “গোলাকৃতির কোর্ণার বা পার্শ্ব” তৈরি করতে পারেন।

ব্রাউজার সাপর্ট

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

-webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে।

Property  Internet Explorer Google Crome  Mozila Firefox  Safari Opera
border-radius 9.0 5.0
4.0 -webkit-
4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

 

সিএসএস৩ border-radius প্রোপার্টি

সিএসএস৩ এ এ border-radius  প্রোপার্টি এর সাহায্যে যেকোন এলিমেন্ট  এর "rounded corners" প্রদান করতে পারেন।

এখানে কিছু উদাহরণ দেয়া হলো:

নির্দিষ্ট ব্যাকগ্রাউন্ড রং বিশিষ্ট একটি এলিমেন্ট এর গোলাকৃতি পার্শ্ব :

Rounded corners!

 

বর্ডার বিশিষ্ট একটি এলিমেন্ট এর গোলাকৃতি পার্শ্ব:

Rounded corners!

 

নির্দিষ্ট ব্যাকগ্রাউন্ড ছবি বিশিষ্ট একটি এলিমেন্ট এর গোলাকৃতি পার্শ্ব :

Rounded corners!

 

এর কোড হচ্ছে:


#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

 

টিপস: border-radius হচ্ছে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius এর সংক্ষিপ্ত প্রোপার্টি।

 

সিএসএস৩ border-radius প্রতিটি আলাদা পার্শ্ব পরিবর্তন

যদি আপনি border-radius প্রোপার্টি এর একটিমাত্র মান নির্ধারণ করেন তাহলে তা চারটি কর্ণারের উপরই কার্যকর হবে।

যদি আপনি চান তাহলে প্রতিটি আলাদা পার্শ্ব এর মান নির্ধারণ করে দিতে পারেন। এখানে তার নিয়ম দেয়া হলো:

  • চারটি মান: প্রথম মান উপরের বাম পাশের, দ্বিতীয় মান উপরের ডান পাশের, তৃতীয় মান নিচের ডান পাশের এবং চতুর্থ মান নিচের বাম পাশের কর্ণারের উপর প্রয়োগ হয়।
  • তিনটি মান: প্রথম মান উপরের বাম পাশে, দ্বিতীয় মান উপরের ডান পাশ ও নিচের বাম পাশে এবং তৃতীয় মান নিচের ডান পাশের কর্ণারের উপর কাজ করে।
  • দুইটি মান: প্রথম মান উপরের বাম পাশ ও নিচের ডান পাশ এবং দ্বিতীয় মান উপরের ডান পাশ ও নিচের বাম পাশের কর্ণারের উপর কাজ করে।
  • একটি মান: চারটি কর্ণরকেই সমানভাবে গোলাকৃতি করে।

 

এখানে তিনটি উদাহরণ দেয়া হলো:

১. চারটি মান - border-radius: 15px 50px 30px 5px:

Rounded corners!

২. তিনটি মান - border-radius: 15px 50px 30px:

Rounded corners!

৩. দুইটি মান - border-radius: 15px 50px:

Rounded corners!

 

এখানে এর কোড দেয়া হলো:


#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

 

আপনি উপবৃত্তাকার কোণও তৈরি করতে পারেন:


#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

জাভাস্ক্রিপ্ট স্ট্রিং (JavaScript Strings)

Huge Sell on Popular Electronics

জাভাস্ক্রিপ্ট স্ট্রিং (JavaScript Strings)

  • জাভাস্ক্রিপ্ট স্ট্রিং টেক্সট (লেখা) সংরক্ষণ ও কাজে লাগানোর জন্য ব্যবহার করা হয়।
  • জাভাস্ক্রিপ্ট স্ট্রিং সাধারণভাবে একগুচ্ছ বর্ণকে পরবর্তীতে ব্যবহারের জন্য সংরক্ষণ করে। যেমন: "John Doe"
  • স্ট্রিং কোটেশনর এর ভিতরে যেকোন লেখা হতে পারে। আপনি একক বা ডবল কোটেশন ব্যবহার করতে পারেন।

যেমন:


var carname = "Volvo XC60";
var carname = 'Volvo XC60';


 

 

আপনি স্ট্রিং এর ভিতরে যতবার খুশি কোটেশন ব্যবহার করতে পারেন, যতক্ষন পর্যন্ত না প্রথম ও শেষ কোটেশন মিলে যায়।

উদাহরণ:


var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';


 

 

স্ট্রিং এর দৈঘ্য

একটি স্ট্রিং এর দৈর্ঘ্য হবে প্রোপার্টি এ নির্দিষ্টকৃত দৈর্ঘ্য (length):

উদাহরণ:


var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;


 

 

বিশেষ বর্ণ

যেহেতু স্ট্রিং কোটেশন এর ভিতরে লিখতে হয়, সেহেতু নিচের উদাহরণটিকে ভুল বুঝে:


var y = "We are the so-called "Vikings" from the north."


উপরের স্ট্রেংটিকে মনে করে, "We are the so-called" .

এই সমস্যা সমাধানের উপায় হল, \ অক্ষরের অব্যাহতি (escape character) ব্যবহার করা।

এই অক্ষরের অব্যাহতি ব্যাকস্লাসটি বিশেষ বর্ণকে স্ট্রিং হিসেবে ফেরত দেয়।:

উদাহরণ:


var x = 'It\'s alright';
var y = "We are the so-called \"Vikings\" from the north."


অব্যাহতি অক্ষর (\) অন্যান্য বিশেষ বর্ণকেও স্ট্রিং হিসেবে ব্যবহার করতে ব্যবহৃত হয়।

এখানে বিশেষ বর্ণের একটি তালিকা দেওয়া হল যা ব্যাকস্লাস (\) এর মাধ্যমে টেক্স স্ট্রিং হিসেবে ব্যবহার করা যায়:

কোড আউটপুট
\' একক কোটেশন
\" ডবল কোটেশন
\\ ব্যাকস্লাস
\n নতুন লাইন
\r বহন ফেরত
\t ট্যাব
\b ব্যাকস্পেস
\f ফর্ম ফিড

 

লম্বা কোড এর লাইনকে ভেঙ্গে দেওয়া

সহজে পড়ার উপযোগী করার জন্য অনেক সময় প্রোগ্রামাররা 80 বর্ণের অধিক ক্যারেকটার এর লম্বা লাইনকে ভেঙ্গে লেখেন।

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

উদাহরণ:


document.getElementById("demo").innerHTML =
"Hello Dolly.";


 

আপনি টেক্স স্ট্রিং এর ভিতরে একটি একক ব্যাকস্লাস (\) ব্যবহার করেও লাইটকে ভাঙ্গতে পারেন।

উদাহরণ:


document.getElementById("demo").innerHTML = "Hello \
Dolly!";


 

নোট : \ মেথড ECMAScript (জাভাস্ক্রিপ্ট) স্ট্যান্ডার্ড নয়। কিছু ব্রাউজার \ (স্লাস) এর পেছনে স্পেস সাপোর্ট করে না।

একটি দীর্ঘ স্ট্রিং কে ভাঙ্গার নিরাপদ (কিন্তু একটু সময়সাপেক্ষ) পথ হচ্ছে স্ট্রিং সংযোযন ব্যবহার করা:

উদাহরণ:


document.getElementById("demo").innerHTML = "Hello" +
"Dolly!";


 

আপনি কোড লাইনকে ব্যাকস্লাস দিয়ে ভাঙ্গতে পারবেন না:

উদাহরণ:


document.getElementById("demo").innerHTML = \
"Hello Dolly!";


 

 

স্ট্রিং অবজেক্টও হতে পারে

সাধারণভাবে জাভাস্ক্রিপ্ট স্ট্রিং হচ্ছে আদিম মান (primitive values), অক্ষর দিয়ে তৈরি: var firstName = "John"

কিন্তু স্ট্রিং কে new কীওয়ার্ড এর সাহায্যে অবজেক্ট হিসেবেও ব্যবহার করা যেতে পারে : var firstName = new String("John")

উদাহরণ :


var x = "John";
var y = new String("John");

// typeof x will return string
// typeof y will return object


 

নোট: স্ট্রিং কে অবজেক্ট হিসেবে ব্যবহার করবেন না। এটি প্রক্রিয়াকরণ গতিকে ধরি করে ফেলে এবং বাজে পার্শ্বপ্রতিক্রিয়া উৎপন্ন হয়।

 

যখন == সমান অপারেটর ব্যবহার করবেন, সমান স্ট্রিংগুলো সমান দেখাবে:

যেমন:


var x = "John";
var y = new String("John");

// (x == y) is true because x and y have equal values


 

যখন আপনি === সমান অপারেটর ব্যবহার করবেন, সমস্ট্রিংগুলো সবসময় সমান থাকবে না, কারণ === অপারেটর মান এবং টাইপ একই হবে বলে আশা করে।


var x = "John";
var y = new String("John");

// (x === y) is false because x and y have different types


 

বা, অবজেক্ট এর সাথে অবজেক্ট তুলনা করা যায় না:

যেমন:


var x = new String("John");
var y = new String("John");

// (x == y) is false because objects cannot be compared


 

 

স্ট্রিং প্রোপার্টি এবং মেথড

আদিম মান, যেমন "John Doe" এর কোন প্রোপার্টিজ এবং মেথড থাকতে পারে না (কেননা এরা অবজেক্ট নয়)।

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

 

স্ট্রিং মেথড সম্পর্কে পরবর্তী অধ্যায় এ আলোচনা করা হয়েছে।

 

স্ট্রিং প্রোপার্টিজ

প্রোপার্টি (Property) বর্ণনা
constructor যে ফাংশনটি স্ট্রিং অবজেক্ট এর প্রোটোটাইপ তৈরী করেছিলেন তা ফেরত দেয়
length স্ট্রিং এর length ফেরত দেয়
prototype আপনাকে একটি অবজেক্ট এর ভিতরে প্রোপার্টি এবং মেথড যোগ করার অনুমতি প্রদান করে।

 

স্ট্রিং মেথড

মেথড (Method) বর্ণনা
charAt() সুনির্দিষ্ট ইনডেক্স এর (অবস্থান) নির্দিষ্ট বর্ণ ফেরত দেয়।
charCodeAt() সুনির্দিষ্ট ইনডেক্স এর নির্দিষ্ট ইউনিকোড বর্ণ ফেরত দেয়।
concat() দুই বা ততোধিক স্ট্রিং কে যুক্ত করে এবং তার একটি অনুলিপি ফেরত দেয়।
fromCharCode() ইউনিকোড মানকে বর্ণে পরিবর্তন করে।
indexOf() স্ট্রিং এর নির্দিষ্ট মান এর ভিতরে প্রথম পাওয়া কাঙ্খিত ঘটনা এর অবস্থান ফেরত দেয়।
lastIndexOf() স্ট্রিং এর নির্দিষ্ট মান এর ভিতরে শেষ পাওয়া কাঙ্খিত ঘটনা এর অবস্থান ফেরত দেয়।
localeCompare() বর্তমান অবস্থানের দুটি স্ট্রিং এর মধ্যে তুলনা করে।
match() রেগুলার এক্সপ্রেশন এর মধ্যে একটি স্ট্রিং কে খুঁজে এবং খুঁজে পাওয়া ফলাফল ফেরত দেয়।
replace() স্ট্রিং এর নির্দিষ্ট মান খোঁজে এবং নতুন একটি স্ট্রিং দ্বারা প্রতিস্থাপণ করে তা ফেরত দেয়।
search() স্ট্রিং এর নির্দিষ্ট মান খোঁজে এবং এর অবস্থান ফেরত দেয়।
slice() স্ট্রিং এর সার অংশ বের করে এবং নতুন একটি স্ট্রিং ফেরত দেয়।
split() স্ট্রিং কে বিভাজন করে সাবস্ট্রিং এর অ্যারে তৈরি করে।
substr() স্ট্রিং এর নির্দিষ্ট অংশ এর সার অংশ বের করে কিছুসংখ্যক বর্ণের মাধ্যমে।
substring() দুইটি নির্দিষ্ট অবস্থান এর মধ্যে একটি স্ট্রিং এর নির্দিষ্ট অংশ এক্সট্রাক্ট করে।
toLocaleLowerCase() স্ট্রিং কে ছোট হাতের অক্ষরে পরিণত কর।
toLocaleUpperCase() স্ট্রিং কে বড় হাতের অক্ষরে পরিণত করে।
toLowerCase() স্ট্রিং কে ছোট হাতের অক্ষরে পরিণত কর।
toString() স্ট্রিং অবজেক্ট এর মান ফেরত দেয়।
toUpperCase() স্ট্রিং কে বড় হাতের অক্ষরে পরিণত করে।
trim() স্ট্রিং এর উভয় প্রান্ত থেকে ফাঁকা স্পেস মুছে ফেলে।
valueOf() স্ট্রিং অবজেক্ট এর আদি মান ফেরত দেয়।

 

নিজে নিজে অনুশীলন কর!

অনুশীলন 01:

ইঙ্গিত: ভেরিয়েবল টেক্সট এ স্ট্রিং "Hello World!" নির্ধারণ কর।


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var txt;
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>


 

 

অনুশীলন 02:

ইঙ্গিত: টেক্সট ভেরিয়েবল এর মান  এর দৈর্ঘ্য প্রদর্শনের জন্য length প্রোপার্টি ব্যবহার কর।


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var txt = "Hello World!";
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>


 

অনুশীলন 03:

ইঙ্গিত: স্ট্রিং টি ভেঙ্গে গেছে - ঠিকভাবে প্রদর্শনের জন্য অক্ষরের অব্যাহতি (escape character) ব্যবহার কর।


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "We are "Vikings".";
</script>

</body>
</html>


 

অনুশীলন 04:

ইঙ্গিত: শ্রেণীবদ্ধভাবে সংযুক্ত দুটি স্ট্রিং প্রদর্শন করে "হ্যালো ওয়ার্ল্ড!"


<!DOCTYPE html>
<html>
<body>

<p id="demo">Display the result here.</p>

<script>
var str1 = "Hello ";
var str2 = "World!";
</script>

</body>
</html>


 

 

 

এইচটি এম এল ইমেজ (HTML Image)

Huge Sell on Popular Electronics

এইচটি এম এল ইমেজ (HTML Images)

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

 

উদাহরণঃ


DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">

</body>
</html>


 

 

ফলাফলঃ


Spectacular Mountains

pic_mountain


অবশ্যই ইমেজ (ছবির) উচ্চতা এবং প্রসস্থতা উল্লেখ করে দিতে হবে। যদি উচ্চতা এবং প্রসস্থতা নির্দিষ্ট করে না দেয়া হয়ে তাহলে পেজে ইমেজ লোড হওয়ার সময় ইমেজটি ফ্লিক (পেজের সাথে ছবিটি সামঞ্জস্য হওয়ার সময় ছবিটি লাফালাফি) করবে।

 

এইচটিএমএল ইমেজ সিনট্যাক্স

এইচটিএমএল এ ইমেজকে <img> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।

<img> ট্যাগ এর ভিতরে শুধুমাত্র্ অ্যাট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ থাকে না।

src অ্যাট্রিবিউটম ইমেজ এর ইউআরএল (ওয়েব ঠিকানা বা ইমেজ এর অবস্থান এর ঠিকানা) কে সংজ্ঞায়িত করে।


<img src="url" alt="some_text">


 

 

Alt অ্যাট্রিবিউট

Alt অ্যাট্রিবিউট দ্বারা ওয়েব এ যদি কোন কারনে ইমেজ লোড না হতে পারে তাহলে উক্ত ইমেজ এর বিকল্প হিসেবে কি Text প্রদর্শিত হবে তা নির্ধারণ করে।

Alt অ্যাট্রিবিউট এর ভেলু (মান) হবে আপনি যে Text টি ইমেজ লোড না হলে প্রদর্শন করতে চান সেই Text.


<img src="html5.gif" alt="The official HTML5 Icon">


 

ফলাফল


The official HTML5 Icon


 

Alt অ্যাট্রিবিউট অবশ্যই প্রদান করত হবে। এটি ছাড়া একটি ওয়েব পেজ সঠিকভাবে যাচাই করা যায় না।

 

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

স্ক্রিণ রিডার সফটওয়্যারগুলো পর্দায় কি প্রদর্শিত সকলকিছু পড়তে পারে।

ওয়েব এ ব্যবহৃত এইচটিএমএল কোড Text থেকে বক্তৃতা, শব্দের আইকন বা যেকোন প্রতীকি আউটপুট পুনরুদ্ধার করতে পারে।

স্ক্রিণ রিডার সাধারণত যারা অন্ধ, দৃষ্টিপ্রতিবন্ধি, অশিক্ষিতদের জন্য ব্যবহৃত হয়।

নোট: স্ক্রিন রিডার Alt অ্যাট্রিবিউট পড়তে পারে।

 

ছবির আকার - প্রস্থ এবং উচ্চতা

ইমেজ (ছবির) width (প্রস্থ) এবং height (উচ্চতা) নির্ধারণের জন্য আপনি style অ্যাট্রিবিউট ব্যবহার করতে পারেন।

এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):


<img src="Mountain.jpg" alt="Mountain View" style="width:128px;height:128px">


 

ফলাফল:


pic_mountain


 

 

বিকল্প হিসেবে আপনি width এবং height অ্যাট্রিবিউট ব্যবহার করতে পারেন।

এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):


<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


 

 

Width এবং Height বা Style?

উভয় width, height, এবং style অ্যাট্রিবিউট লেটেস্ট HTML5 সাপর্ট করে।

আমরা আপনাকে style অ্যাট্রিবিউট ব্যবহারের পরামর্শ দেব। এটি স্টাইল শীটকে ইমেজ এর ডিফল্ট আকার পরিবর্তন করতে বাধা দেয়।

উদাহরণঃ


<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></body>
</html>



অন্য ফোল্ডার এর ছবি যদি উল্লেখ করে দেয়া না হয় তাহলে ব্রাউজার ছবি খুঁজে পেতে ওয়েব পেজ এর একই ফোল্ডার এ খোঁজ করে। ওয়েব পেজ এ এটিই সাধারণ, যদি আপনি কোন সাব ফোল্ডার এ ইমেজটি রাখেন তাহলে এভাবে তা উল্লেখ করে দিতে হবে:


<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">


ব্রাউজার যদি ইমেজটি খুঁজে না পায় তাহলে সে একটি ব্রোকেন লিঙ্ক আইকন প্রদশণ করবে। উদাহরণ


<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">


ফলাফল


HTML5 Icon


 

অন্য সার্ভারের ছবি

কিছু ওয়েব সাইট তাদের ইমেজগুলো ইমেজ সার্ভারে লোড করে রাখে, আসলে আপনি বিশ্বের যে কোনো ওয়েব ঠিকানার ইমেজ এ প্রবেশ করতে পারেন:


<img src="http://www.rasta.edu.pk/images/EducationTraining1.jpg">


ফলাফল



 

অ্যানিমেটেড ছবি

GIF ফরমেট অ্যানিমেটেড ইমেজ সমর্থন করে।


<img src="Tree.gif" alt="Rain Tree" style="width:240px;height:320px">


ফলাফল


Stormy-island-cell-phone-wallpaper-animated-240x320


নোট: অ্যানিমেটেড ইমেজ ও ননঅ্যানিমেটেড ইমেজ এর সিনটেক্স এ কোন পার্থক্য নেই।

লিঙ্ক হিসেবে ইমেজ ব্যবহার

ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ ব্যাপার



   <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
 


ইমেজ ম্যাপ

একটি ইজেজ এর জন্য আপনি ক্লিক করা যায় এমনভাবে ইমেজ ম্যাপ তৈরি করতে পারেন।

উদাহরণ


usemap="#planetmap" style="width:145px;height:126px">

<map name="Bangladesh">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>


 

 

ফলাফল


Planets


 

Sun Mercury Venus

 

ইমেজ ফ্লোটিং

আপনি ইজেমকে প্যারাগ্রাফ এর বাম বা ডানে ভাসমান অবস্থায় রাখতে পারেন

উদাহরণ


<p>
60px;height:40px">
A paragraph with an image. The image floats to the left of the text.
</p>


 

 

ফলাফল:


Bangladesh Flag
A paragraph with an image. The image floats to the left of the text.

 


 

 অধ্যায় সারসংক্ষেপ

  • এইচটিএমএল এ <img> এলিমেন্ট ইমেজকে সংজ্ঞায়িত করে।
  • এইচটিএমএল এ src অ্যাট্রিবিউট ইমেজ এর ফাইল নেমকে সংজ্ঞায়িত করে।
  • এইচটিএমএল এ alt অ্যাট্রিবিউট ইমেজ এর বিকল্প টেক্সকে সংজ্ঞায়িত করে।
  • এইচটিএমএল এ width এবং height অ্যাট্রিবিউট ইমেজ এর আকারকে সংজ্ঞায়িত করে।
  • সিএসএস এ width and height প্রোপার্টি ইমেজ এর আকারকে সংজ্ঞায়িত করে (বিকল্পভাবে)।
  • সিএসএস এ float প্রোপার্টি ইমেজকে ফ্লোট করতে সহায়তা করে।
  • এইচটিএমএল এ usemap অ্যাট্রিবিউট ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়।
  • এইচটিএমএল এ <map> এলিমেন্ট ইমেজ ম্যাপকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।
  • এইচটিএমএল এ <area> এলিমেন্ট ইমেজ ম্যাপ এর কোন এরিয়া ব্যবহার করতে তা সংজ্ঞায়িত করে।

জাভাস্ক্রিপ্ট নাম্বার (JavaScript Numbers)

Huge Sell on Popular Electronics

জাভাস্ক্রিপ্ট নাম্বার (JavaScript Numbers)

নয়ন চন্দ্র দত্ত

 

জাভাস্ক্রিপ্ট এর শুধুমাত্র এক ধরনের নাম্বার আছে। নাম্বার দশমিক দিয়ে বা না দিয়েও লেখা যায়।

জাভাস্ক্রিপ্ট নাম্বার

নাম্বার দশমিক দিয়ে বা না দিয়েও লেখা যায়ঃ

উদাহরণ


var x = 34.00;         // A number with decimals
var y = 34;             // A number without decimals


 

 

অতিরিক্ত বড় বা অতিরিক্ত ছোট সংখ্যা বৈজ্ঞানিক (সূচক) স্বরলিপি দিয়ে লেখা যেতে পারে।

উদাহরণ


var x = 123e5;    // 12300000
 var y = 123e-5;  // 0.00123

 

 

জাভাস্ক্রিপ্ট নাম্বার সর্বদা 64 বিট ফ্লোটিং পয়েন্ট হয়

অন্যান্য অনেক প্রোগ্রামিং ভাষা থেকে ভিন্ন, জাভাস্ক্রিপ্ট বিভিন্ন ধরনের নাম্বার সংজ্ঞায়িত করেনা; যেমন- ইন্টিজার, ছোট, লম্বা, ফ্লোটিং-পয়েন্ট ইত্যাদি।
জাভাস্ক্রিপ্ট নাম্বার সবসময় আন্তর্জাতিক আইইইই 754 মান অনুসরণ করে, ডবল স্পষ্টতার ফ্লোটিং পয়েন্ট নাম্বার হিসেবে সংরক্ষণ করা হয়।
এই ফরম্যাট 64 বিট নাম্বার বিন্যাস করে যেখানে নাম্বার (ভগ্নাংশ) 0 থেকে 51 বি্টের মধ্যে সংরক্ষিত হয়। বিটের সূচক 52 থেকে 62 এবং বিটের সাইন ইন 63 হয়।

 

মান (ওরফে ভগ্নাংশ / অংশক) 52 bits (0 - 51)
সূচক 11 bits (52 - 62)
সাইন 1 bit (63)

 

যথার্থতা

ইন্টিজার (নির্দিষ্ট সময়ের বা সূচক স্বরলিপি ছাড়া নাম্বার) 15 সংখ্যার পর্যন্ত সঠিক বলে মনে করা হয়।

উদাহরণ


var x = 999999999999999;      // x will be 999999999999999
 var y = 9999999999999999;    // y will be 10000000000000000

 

 

দশমিক সর্বোচ্চ সংখ্যা 17 কিন্তু পাটীগণিতীয় ফ্লোটিং পয়েন্ট সবসময় 100% সঠিক হয়না।

উদাহরণ


var x = 0.2 + 0.1;            // x will be 0.30000000000000004

 

 

উপরে সমস্যা সমাধান করার জন্য, এটি সংখ্যাবৃদ্ধি এবং ডিভাইড করতে সাহায্য করেঃ

উদাহরণ


var x = (0.2 * 10 + 0.1 * 10) / 10;           // x will be 0.3

 

 

হেক্সাডেসিমেল

যদি তারা 0x দ্বারা পূর্বে হয় তাহলে জাভাস্ক্রিপ্ট হেক্সাডেসিমাল হিসাবে সাংখ্যিক ধ্রুবক ব্যাখ্যা করে।

উদাহরণ


var x = 0xFF;        // x will be 255

 

[ লিডিং শূন্য (যেমন 07) দিয়ে সংখ্যা লিখবেন না। ]

ডিফল্টরূপে, জাভাস্ক্রিপ্ট বেস 10 দশমিক সংখ্যা হিসাবে প্রদর্শন করে। কিন্তু বেস 16 (হেক্স), বেস 8 (অকট্যাল), বা বেস 2 (বাইনারি) হিসাবে আউটপুট toString() ব্যবহার করতে পারেন।

উদাহরণ


var myNumber = 128;
 myNumber.toString(16);     // returns 80
 myNumber.toString(8);      // returns 200
 myNumber.toString(2);      // returns 10000000

 

 

অসীম

উদাহরণ


var myNumber = 2;
 while (myNumber != Infinity) {          // Execute until Infinity
 myNumber = myNumber * myNumber;
 }

 

 

0 (শূন্য) দ্বারা ভাগ করেও অসীম তৈরি করা যায়।

উদাহরণ


var x = 2 / 0;         // x will be Infinity
 var y = -2 / 0;       // y will be -Infinity

 

 

অসীম একটি সংখ্যা। অসীম typeOf নাম্বার প্রদান করে।

উদাহরণ


typeof Infinity;       // returns "number"

 

 

NaN - কোন সংখ্যা নয়

NaN একটি জাভাস্ক্রিপ্ট সংরক্ষিত শব্দ একটি মান যা নির্দেশ করে যা কোন সংখ্যা নয়। একটি অ-সাংখ্যিক স্ট্রিং সঙ্গে গাণিতিক কাজ করার চেষ্টা করেলে রেজাল্ট NaN(কোন সংখ্যা নয়) হবে।

উদাহরণ


var x = 100 / "Apple";        // x will be NaN (Not a Number)

 

 

যাইহোক, স্ট্রিং এর একটি সাংখ্যিক মান রয়েছে। রেজান্ট একটি সংখ্যা হবেঃ

উদাহরণ


var x = 100 / "10";       // x will be 10

 

 

মান একটি সংখ্যা হয় তাহলে আপনি গ্লোবাল জাভাস্ক্রিপ্ট ফাংশন isNaN() ব্যবহার করে তা খুঁজে বের করতে পারেন।

উদাহরণ


var x = 100 / "Apple";
 isNaN(x);                // returns true because x is Not a Number

 

 

NaN দেখুন। আপনি যদি গাণিতিক অপারেশন এর মধ্যে NaN ব্যবহার করেন তাহলে রেজাল্ট নিম্নরূপ হবেঃ

উদাহরণ


 var x = NaN;
 var y = 5;
 var z = x + y;     // z will be NaN

 

 

NaN একটি নাম্বার। typeOf NaN নাম্বার প্রদান করে।

উদাহরণ


typeof NaN;         // returns "number"

 

 

নাম্বার অবজেক্টও হতে পারে

সাধারণত জাভাস্ক্রিপ্ট সংখ্যা লিটারেল থেকে তৈরি আদিম মানঃ var x = 123
কিন্তু নাম্বারকে নতুন শব্দ দ্বারা অবজেক্ট হিসাবেও সংজ্ঞায়িত করো যেতে পারেঃ var y = new Number(123)

উদাহরণ


var x = 123;
 var y = new Number(123);
          // typeof x returns number
          // typeof y returns object

 

 

কখনও নাম্বার অবজেক্ট তৈরি করবেন না। তারা সঞ্চালনের গতি মন্থর এবং কদর্য পার্শ্ব প্রতিক্রিয়া সৃষ্টি করে।
যখন সমতা == অপারেটর ব্যবহার করেন তখন সমান সংখ্যা সমান দেখায়:

উদাহরণ


var x = 500;
 var y = new Number(500);
// (x == y) is true because x and y have equal values

 

 

যখন সমতা === অপারেটর ব্যবহার করেন তখন সমান সংখ্যা সমান হয়না কারণ === অপারেটর টাইপ এবং মান উভয় সমতা বিবেচনা করে।

উদাহরণ


var x = 500;
 var y = new Number(500);
// (x === y) is false because x and y have different types

 

 

অথবা এমনকি খারাপ. অবজেক্টস তুলনা করা যাবে নাঃ

উদাহরণ


var x = new Number(500);
 var y = new Number(500);
// (x == y) is false because objects cannot be compared

 

জাভাস্ক্রিপ্ট অবজেক্টস তুলনা করা যায় না।

 

নাম্বার প্রোপার্টি এবং মেথড

আদিম মানের (3.14 বা 2014 এর মত) বৈশিষ্ট্য ও পদ্ধতি থাকতে পারে না(কারণ তারা অবজেক্ট না) ।

নাম্বার প্রোপার্টি

প্রোপার্টি ব্যাখ্যা
MAX_VALUE জাভাস্ক্রিপ্ট এ সম্ভব এমন বৃহত্তম সংখ্যা প্রদান করে।
MIN_VALUE জাভাস্ক্রিপ্ট এ সম্ভব এমন ক্ষুদ্রতম সংখ্যা প্রদান করে।
NEGATIVE_INFINITY অসীমে নেগেটিভ প্রতিনিধিত্ব করে।
NaN একটি "সংখ্যা নয়" মান প্রতিনিধিত্ব করে।
POSITIVE_INFINITY অসীম প্রতিনিধিত্ব করে।

 

উদাহরণ


var x = Number.MAX_VALUE;


 

এই প্রোপার্টিস শুধুমাত্র Number.MAX_VALUE হিসেবও ওয়াক্সেস করা যেতে পারে।

myNumber.MAX_VALUE, ব্যবহার করে, যেখানে MyNumber একটি পরিবর্তনশীল, অভিব্যক্তি, অথবা মান তা অনির্ধারিত হিসেবে ফিরে আসে।

উদাহরণ


var x = 6;
var y = x.MAX_VALUE; // y becomes undefined


 

সিএসএস ডিসপ্লে এন্ড ভিজিবিলিটি (CSS Display and Visibility)

Huge Sell on Popular Electronics

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> মত কাজ হবে।

এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।

  1. display:inline-table;
  2. display:list-item;
  3. display:table-caption;
  4. display:table-column-group;
  5. display:table-header-group;
  6. display:table-footer-group;
  7. display:table-row-group;
  8. display:table-column;
  9. display:run-in;
  10. display:flex;

 

সি এস এস প্যাডিং (CSS Padding)

Huge Sell on Popular Electronics

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 Outlines)

Huge Sell on Popular Electronics

এটি 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 Lists)

Huge Sell on Popular Electronics

সিএসএস লিস্ট প্রোপার্টি আপনাকে অনুমতি দেবে:

  • তালিকার ক্রম (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 Background)

Huge Sell on Popular Electronics

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 একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি হবে তা নির্ধারণ করে