Tag Archives: ID

এইচটিএমএল HTML

এইচটিএমএল এর সিএসএস (HTML Style – CSS)

Huge Sell on Popular Electronics

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

শরিফুল ইসলাম
Php Coder

 

HTML Styles - CSS

 উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

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

</body>
</html>

 

সিএসএস দ্বারা এইচটিএমএল কে স্টাইল করা

সিএসএস(css) এর পূর্ণ নাম হল Cascading Style Sheets ।

তিনভাবে স্টাইল কে এইচটিএমএল এর সাথে যুক্ত করা যায়

• Inline-স্টাইল attribute ব্যবহার করে এইচটিএমএল এর সাথে যুক্ত করা যায়

• Internal- <style> এলিমেন্ট এইচটিএমএল এর head সেকশন এর মধ্যে যুক্ত করা যায়

• External- এক বা একাধিক বাইরের সিএসএস ফাইল যুক্ত করে কাজ করা যায়।

তবে সব থেকে কমন হল বাইরে থেকে একটি সিএসএস ফাইল যুক্ত করা। কিন্তু আমরা এইখানে internal স্টাইল ব্যবহার করব। কারন এতে আমাদের জন্য স্টাইল এর জন্য ভিন্ন ভিন্ন ফাংশন গুলো বুজতে ঝুব সুবিধা হবে।

 

সিএসএস syntax

সিএসএস স্টাইলিং এর জন্য নিন্মোক্ত সিনটেক্স ব্যবহার করা হয়

element { property:value ; property:value }

 

এই element হল এইচটিএমএল এর একটি উপাদানের নাম। property হল সিএসএস একটি প্রপার্টি। value হল সিএসএস প্রপার্টি এর একটি মান।

অনেকগুলো স্টাইল থাকলে তাহলে সেগুলো সেমিকোলন দিয়ে আলাদা করতে হয়।

 

Inline স্টাইল (inline css)

এইচটিএমএল উপাদানের ক্ষেত্রে একটি ইউনিক স্টাইল এর জন্য inline styling খুবই উপযোগী। এই উদাহরনে ইনলাইন স্টাইল এর মাধ্যমে একটি ইউনিক heading এর টেক্সট এর কালার পরিবর্তন করা হচ্ছে

উদাহরণ

<h1 style="color:blue">This is a Blue Heading

 

 

Internal স্টাইল (internal css)

একটি পেজ এর সকল এইচটিএমএল উপাদানের জন্য একটি কমন স্টাইল ব্যবহার করা হয়েছে আর তা হল internal style sheet।

সাধারনত এটি <style> এলিমেন্ট এর সাহায্যে হেড সেকশন এর মধ্যে ইনক্লুড করতে হয়।

উদাহারন

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

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

</body>
</html>

 

External স্টাইল (External সিএসএস)

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
 </head>
<body>

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

</body>
</html>


 


সিএসএস ফন্টস


সিএসএস এর color প্রপার্টি দ্বারা এইচটিএমএল পেজ এর টেক্সট এর কালার কি হবে তা ডিফাইন করা হয়। সিএসএস এর font-family দ্বারা টেক্সট এর ফন্ট কোন ফন্ট হবে তা ডিফাইন করে। সিএসএস এর font-size প্রপার্টি দ্বারা টেক্সট এর আকার কতটুকু হবে তা ডিফাইন করে।


উদাহরণ




<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>

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

</body>
</html>




তবে <font> ট্যাগ টি এইচটিএমএল এর পুরাতন ভার্সন এ কাজ করে এইচটিএমএল৫ এ কাজ করে না।


 


সিএসএস বক্স মডেল


প্রত্যেকটি এইচটিএমএল এর উপাদানের জন্য একটি বক্স নির্দিষ্ট করা থাকে কিন্তু আমরা তখনি এটা দেখতে পারব যখন আমরা সিএসএস এর মধ্যে border প্রপার্টি ঘোষণা করব


উদাহরণ




p {
    border:1px solid black;
}




border এর মধ্যে ফাকা তৈরি করার জন্য আমরা padding প্রপার্টি ব্যবহার করব


উদাহারন




p {
    border:1px solid black;
    padding:10px;
}




বর্ডার এর বাইরে মার্জিন এর জন্য আমরা margin প্রপার্টি ব্যবহার করব


উদাহরণ




p {
    border:1px solid black;
    padding:10px;
    margin:30px;
 }




সিএসএস উদাহরণ এ px ব্যবহার করা হয়েছে এতে পিক্সেল বুঝায়


 


ID Attribute


উপরের সবগুলো উদাহরণ এ সিএসএস এর সাধারন নিয়ম ব্যবহার করা হয়েছে।


যদি কোন একটি নির্দিষ্ট স্টাইল নির্দিষ্ট কোন এইচটিএমএল এর উপাদানের ক্ষেত্রে প্রয়োগ করতে হয় তাহলে id attribute প্রথমে এইচটিএমএল এর মধ্যে যোগ করতে হবে


উদাহরণ




<p id="p01">I am different</p>




 


এরপর id কে সিএসএস এর মধ্যে কল করে স্টাইল যোগ করতে হবে


উদাহরণ




p#p01 {
    color:blue;
}






 


Class attribute


কোন নির্দিষ্ট উপাদানের ধরন পরিবর্তন করার জন্য ক্লাস (class) attribute এইচটিএমএল এর উপাদানের মধ্যে যোগ করতে হয়


উদাহরণ




<p class="error">I am different</p>




একন আপনি নির্দিষ্ট ক্লাস এর সাথে সকল এলিমেন্ট এ ভিন্ন ভিন্ন স্টাইল দিতে পারবেন।


উদাহরণ




p.error {
    color:red;
}




নোটঃ id ব্যবহার করা হয় একটি ইউনিক উপাদানের জন্য এবং class ব্যবহার করা হয় একটি এলিমেন্ট এর গ্রুপ এর জন্য।


 


সীমাবদ্ধতা


পুরাতন এইচটিএমএল ভার্সন এর অনেক ট্যাগস এবং attributes ব্যবহার করা হয় স্টাইল documents এ। কিন্রু এইগুলো এইচটিএমএল ৫ এ সাপোর্ট করে না।


যে উপাদান বা elements গুলো বাদ দিতে হবে ব্যবহার করা বাদ দিতে হবে: <font>, <center> এবং <strike>.


যে attribute গুলো বাদ দিতে হবে: color এবং bgcolor


 


একনজরে প্রপার্টি গুলো


Inline styling এ এইচটিএমএল এর স্টাইল attribute এর ব্যবহার


Internal css এ এইচটিএমএল এর <style> এলিমেন্ট এর ব্যবহার


External css এ এইচটিএমএল এর <link> উপাদানের ব্যবহার


সেকশন এ <style> এবং <link> elements যুক্ত করার জন্য এইচটিএমএল এর <head> এলিমেন্ট এর ব্যবহার


Text কালার করার জন্য এ সিএসএস এর কালার প্রপার্টি এর ব্যবহার


Text এর ফন্ট নির্দারণের জন্য সিএসএস এর font-family প্রপার্টি এর ব্যবহার


Text এর ফন্ট সািইজ নির্দারণের জন্য সিএসএস এর font-size প্রপার্টি এর ব্যবহার


উপাদানের বর্ডার দেখানোর জন্য সিএসএস এর border প্রপার্টি এর ব্যবহার


বর্ডার এর ভিতরে স্পেস নির্দারনের জন্য সিএসএস এর padding প্রপার্টি এর ব্যবহার


বর্ডার এর বাহিরের দিকের স্পেস নির্দারনের জন্য সিএসএস এর margin প্রপার্টি এর ব্যবহার


এইচটিএমএল স্টাইল ট্যাগ


<style> - একটি document মধ্যে সমস্ত স্টাইল এর তথ্যকে সঙ্গায়িত করে


<link> -  document এবং external রিসোর্স ফাইল এর মধ্যে সম্পর্ক নির্দারণ করে




	

	
	




	
	

				

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

			
পিএইচপি – টেবিলে শেষ প্রবেশকৃত রেকর্ড এর আইডি বের করা (PHP Get ID of Last Inserted Record in Bangla)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

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

  
  




















auto-increment ফাংশন এর মাধ্যমে যদি আমরা টেবিলে কোন ডাটা যোগ বা পরিবর্তন করে থাকি তাহলে এর ID এর নাম্বারটি আমরা অতি দ্রুতই পেতে পারি।


Phpmyadmin এ গিয়ে "MyGuests" নামের একটি ডাটাবেস টেবিল তৈরি করি । এখানে আইডি কলাম হচ্ছে AUTO_INCREMENT ফিল্ড:




 CREATE TABLE MyGuests (
 id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
 firstname VARCHAR(30) NOT NULL,
 lastname VARCHAR(30) NOT NULL,
 email VARCHAR(50),
 reg_date TIMESTAMP
 )




এবং সেভ বাটন এ ক্লিক করি। তাহলে আমাদের ডাটাবেস এবং টেবিল তৈরি হয়ে গেল।


এখন আমরা পরবর্তী পিএইচপি পেজ তৈরি করব জার মাধ্যমে আমরা ডাটা ইনপুট বা আপডেট করলে তার ID নাম্বার টা পাই।




< ?php 
$servername = "localhost";     /*সারভার নাম*/ 
$username = "username";        /*xampp server এ root ব্যবহার করা হয়*/ 
$password = "password";        /*xampp সারভার এ পাসওয়ার্ড ব্লাঙ্ক থাকে*/ 
$dbname = "myDB";              /*ডাটাবেস এর নাম*/ 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname);
                               /*এর মাধ্যমে ডাটাবেস এর সাথে connection তৈরি করা হোল */ 
// Check connection 
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
                               /*যদি connection ঠিক না থাকে তাহলে “connection failed” 
                               দেখাবে*/
}


$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', 'john@example.com')";
                               /*ডাটাবেস টেবিল এর মধ্যে একটি ডাটা যোগ করা হোল*/


if ($conn->query($sql) === TRUE) 
                               /*একটি শর্ত দিয়ে দেয়া হোল যদি SQL QUERY টা ঠিক মত হয়ে থাকে 
                               তাহলে নিচের মতন হবে*/ 
{
   $last_id = $conn->insert_id;
   echo "New record created successfully. Last inserted ID is: " . $last_id;
                              /*আমাদের একটি ID auto-increment সেট করে দেওয়া হয়েছিল এই লাইন 
                              এর মাধ্যমে আমরা সেই ID টা দেখতে পারব*/
} else {                      /*যদি আমাদের ডাটাবেসের সাথে query তে ভুল থাকে তাহলে 
                              সে এরর দেখাবে মানে কোন ডাটা অ্যাড হয় নি */
   echo "Error: " . $sql . "<br>" . $conn->error;
}


$conn->close();                /*এই কোড এর মাধ্যমে আমরা ডাটাবেস এর connection বন্ধ করে দিব */
?>




 


নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন php_mysql_insert_lastid.php দিয়ে। আপনার ফাইল টি localhost > htdocs> test ফোল্ডার এর ভিতর রাখুন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/ php_mysql_insert_lastid.php . Go বাটন এ ক্লিক করলে একটি ফলাফল আপনি খুজে পাবেন। আপনি যে ID এর মাধ্যমে ডাটা অ্যাড করেছেন সেই ID নাম্বার টা ডিসপ্লে হবে।




	

	
	




	
	

				

			সি এস এস টিউটোরিয়াল (css tutorial)
		

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

		

			 		

	


		

		




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>