Monday, August 29, 2016

css_part6



External CSS Class তৈরী
অনান্য External CSS ফাইল তৈরীর মত এটিও একই নিয়মে তৈরী করতে হয়। Style অংশের কোড গুলি আলাদা ফাইলে লিখে একটি নাম দিয়ে .CSS নামে সেভ করতে হবে এবং HTML ফাইলের <head> সেকশনে যথারীতি Link ফাইলটি Call করতে হবে href কমান্ডের মাধ্যমে।

নিচের মত কোডিংসহ একটি ফাইল তৈরী করে style010.css নাম দিয়ে সেভ করুন।
body {background-color:PowderBlue;}
.red  {color:red;font-size:20px;}
.green {color:green;font-size:25px;}
.blue {color:blue;text-align:center;}
.magenta {color:magenta;text-align:center;}
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"  
href="style010.css">
</head>
<body>
This is Normal body text.
<p class="blue"> This is First para</p>
<h1 class="red">Word Processor</h1>
Microsoft Word is a word processing program.
It is use to Write application, News Letter,
Writting Pad, etc.

<p class="green"> This is Second para</p>
<h1 class="green">Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.

<p class="magenta"> This is Third para</p>
<h1 class="blue"> Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and analise table and database.
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।



নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:PowderBlue;}
p#red  {color:red;font-size:20px;}
p#green {color:green;font-size:25px;}
h1#blue {color:blue;text-align:center;}
h1#magenta {color:magenta;text-align:center;}
</style>
</head>
<body>
This is Normal body text.
<p id="red"> This is First para</p>
<h1 id="blue">Word Processor</h1>
Microsoft Word is a word processing program.
It is use to Write application, News Letter,
Writting Pad, etc.

<p id="green"> This is Second para</p>
<h1 id="magenta">Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.

<p> This is Third para</p>
<h1> Database</h1>
Microsoft Access is a Spread Database  Managementprogram.
It is use to create and analise table and database.
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।


Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************
Next_

css_part5



একাধিক SectorClass তৈরী
উপরের প্রোগ্রামে আমরা <p> ট্যাগে  red green নামে ২টি Class তৈরী করেছিলাম। এখন আমরা head ট্যাগে  blue magenta নামে ২টি Class তৈরী করে আগের ফাইলে ব্যবহার করে দেখবো। এখানে প্রথমে ২টি হেডিংএ blue magenta নামের Class সংযোজন করা হয়েছে কিন্তু শেষের হেডিং এ ডিফল্ট h1ভ্যালু রয়েছে।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:PowderBlue;}
p.red  {color:red;font-size:20px;}
p.green {color:green;font-size:25px;}
h1.blue {color:blue;text-align:center;}
h1.magenta {color:magenta;text-align:center;}
</style>
</head>

<body>
This is Normal body text.

<p class="red"> This is First para</p>
<h1 class="blue">Word Processor</h1>
Microsoft Word is a word processing program.
It is use to Write application, News Letter,
Writting Pad, etc.

<p class="green"> This is Second para</p>
<h1 class="magenta">Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.

<p> This is Third para</p>
<h1> Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and analise table and database.
</body> </html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।


Global Class ডিক্লারেশন
আমরা এতক্ষণ <p> <h1>  ট্যাগের জন্য Class তৈরী করেছি । এভাবে নির্দিষ্ট সিলেক্টরের জন্য Class নির্ধারণ করে, সবার জন্য উমুক্ত Class তৈরী করা যাবে। যা কিনা যে কোন Sector এ স্বাধীন ভাবে ব্যবহার করা যাবে । নিচের প্রোগ্রামে আগের ৪টি Class কে আমরা স্বাধীন করে দিয়েছি  এবং বিভিন্ন Sector এর সাথে ব্যবহার উপযোগী করেছি। এটি তৈরীর জন্য <p>, <h1> বা যে কোন Sector বাদে শুধুমাত্র ডট (.)চিহ্ন দিয়ে Class শুরু করতে হবে এবং HTML অংশে যে কোন ট্যাগের সাথে ব্যবহার করা যাবে।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:PowderBlue;}
.red  {color:red;font-size:20px;}
.green {color:green;font-size:25px;}
.blue {color:blue;text-align:center;}
.magenta {color:magenta;text-align:center;}
</style>
</head>
<body>
This is Normal body text.
<p class="blue"> This is First para</p>
<h1 class="red">Word Processor</h1>
Microsoft Word is a word processing program.
It is use to Write application, News Letter,
Writting Pad, etc.
<p class="green"> This is Second para</p>
<h1 class="green">Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.

<p class="magenta"> This is Third para</p>
<h1 class="blue"> Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and analise table and database.
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।

Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************
Next_

css_part4



CSS Comments
কোডের বিস্তারিত ব্যাখ্যা দেওয়ার জন্য কোডিং এর মধ্যেই Text লিখে Comments করতে হবে। তবে এজন্য নিদিষ্ট সিম্বল ব্যবহার করতে হবে। না হলে এটি কোডিং এর অংশ হয়ে যাবে । HTML কোডিং এ কিভাবে কমান্ড লিখতে হয় তা আগেই বলা হয়েছে । এখন CSS Comments লেখা দেখাবো। কমেন্টস Source Code এর এডিট এর জন্য ব্যবহৃত হয় তবে এটি ব্রাউজারে প্রদর্শিত হয় না। CSS কমান্ড শুরু হয় /* ( স্লাস ও asterisk চিহ্ন সহযোগে) এবং শেষ হয় */ (asterisk চিহ্ন আগে ও পরে স্লাস) সহযোগে অর্থা্যৎ নিচের মত
/* This is a css Comments */
P {………..}
/* This is another css Comments */
Color:red

নিচের মত কোডিংসহ একটি ফাইল তৈরী করে style003.css নাম দিয়ে সেভ করুন।
/* This is CSS Coad */
/* This is for body color*/
body {background-color:PowderBlue;}
/* This is for Para color*/
p {color:green;font-size:20px;} 
h1 {color:red; text-align:left; font-size:16px; font-family:arial;}

নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<!-- This code for External CSS file-->
<link href="style002.css" rel="stylesheet"   
 type="text/css" >
<!-- This code for Internal CSS code-->
<style type="text/css">
h1 { text-align:center; font-size:30px}
</style>
</head>
<body>
This is Normal body text.
<p> This is First para</p>
<h1>Word Processor</h1>
Microsoft Word is a word processing program.
It is use to Write application, News Letter,
Writting Pad, etc.

<p> This is Second para</p>
<h1 >Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.

<p> This is Third para</p>
<!-- This code for Inline CSS code-->
<h1 style="color:green;"> Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and analise table and database.
</body>
</html>
<html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।


সি এস এস IDClass
HTML এর ডিফল্ট সিলেক্টর  ছাড়াও সিলেক্টরকে মডিফাই করে আপনি আপনার নিজস্ব সিলেক্টর তৈরী করে নিতে পারেন IDClass তৈরীর মাধ্যমে। এগুলি InternalExternal দুই ধরণের CSS ফাইলেই ব্যবহার করা যেতে পারে।

Class সিলেক্টর
Class সিলেক্টরটি HTML ফাইলের মধ্যে গ্রূপ এলিমেন্টের মধ্যে অর্থ্যাৎ একাধিক এলিমেন্টের মধ্যে বার বার ব্যবহার করা হয় । Class সিলেক্টরটি HTML এর যেকোন একটি Element (Tag) এর সাথে ব্যবহৃত হয়। তারপর Sector এর একটি নাম দিতে হয় এবং Properly:Valve দিতে হয়। আমরা জানি <p> বা <h1> এলিমেন্ট দ্বারা প্যারা বা হেডিং বোঝানো হয়। মনে করুন আপনার HTML ডকুমেন্টে বিভিন্ন ধরণের প্যারা হেডিং h1 ব্যবহার করবেন। এক্ষেত্রে প্রতিটির জন্য একটি Class তৈরী করতে হবে। Internal CSS ফাইলে করলে শুধুমাত্র বর্তমানে পেইজে এটি ব্যবহৃত হবে আর External CSS ফাইলে তৈরী করলে যে কোন পেজ বা যে কোন পেইজে অসংখ্য বার ব্যবহার করা যাবে। মনে করুন <p> এলিমেন্টের  জন্য red নামের একটি Class তৈরী করবেন এবং ফন্টের color=red size=20px হবে সেক্ষেত্রে CSS অংশে কোড হবে।
p.red {color:red; font-size : 20px}
আবার  HTML অংশে আমরা সাধারণ কোড লিখি নিচের মত
<p> This is a Paragraph </p>
কিন্তু  Class এর জন্য Class লিখে একটি সমান চিহ্ন (=) দিয়ে ডাবল কোটেশনের মধ্যে Class এর নাম দিতে হবে। যেমন
<p class = “red”> This is a Paragraph</p>
এখন red কালারের ও 20px সাইজের টেক্সট পাওয়া যাবে।
আমরা এখন p.red p.green নামের ২টি Class তৈরী ও ব্যবহার দেখাবো।

নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন। 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:PowderBlue;}
p.red  {color:red;font-size:20px;}
p.green {color:green;font-size:25px;}
h1 {color:red;text-align:center;}
</style>
</head>



<body>
This is Normal body text.
<p class="red"> This is First para</p>
<h1>Word Processor</h1>
Microsoft Word is a word processing program.
It is use to Write application, News Letter,
Writting Pad, etc.

<p class="green"> This is Second para</p>
<h1>Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.

<p> This is Third para</p>
<h1> Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and analise table and database.
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।

Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************
Next_