Tag Archives: ফন্ট

এইচটিএমএল 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 রিসোর্স ফাইল এর মধ্যে সম্পর্ক নির্দারণ করে




	

	
	




	
	

				

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

			
সিএসএস ৩ ওয়েব ফন্ট (CSS3 Web Fonts)

		

			 		

	


		

		




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
chrome
edge
ie
firefox
safari
opera




@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
ie
chrome
firefox
safari
opera




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"






 


	

	
	




	
	

				

			Complete Courses, Microsoft Word 2010 - 100, Professional, Root
		

			
লেকচার ১৮: মাইক্রোসফট ওয়ার্ড 2010 – ফন্ট এর সাথে পরিচয় (Word 2010 – Font Understanding)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

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