Friday, 30 March 2012

কম্পিউটার থেকে চোখ রক্ষা করুন + লিনাক্সের জন্যও সমাধান

একবার কেউ একজন আমায় বলেছিল, “কম্পিউটারের দিকে তাকিয়ে থাকা মানে সূর্যের দিকে তাকিয়ে থাকা”। তখন তেমন গুরুত্ব না দিলেও এখন বুঝি, আসলেই কিন্তু সত্যি। এই কম্পু অকালে আমার চোখের যে অবস্থা করছে, ২৫-২৬ বছর হইতে হইতে আমি না কানাই হয়ে যাই। তবে আপনাদের যেন তা না হয়, সেই ব্যবস্থাই করি।
সফটওয়্যার টির নাম F.lux, যার সাথে আমরা সবাই পরিচিত, তবে যাদের পরিচয় নেই তাদের করিয়ে দিই। আর এই টিউনের বৈশিষ্ট্য হচ্ছে, আমি একটি নয়, দুইটি একই রকম সফট সম্পর্কে আলোচনা করব। ২য় টি তাদের জন্য যারা লিনাক্স/উবুন্টু ব্যবহার করেন।
যেভাবে কাজ করেঃ আগে এটাই জেনে নেয়া যাক। এক কাজ করুন। আপনার কম্পিউটারের ব্রাইটনেস/কন্ট্রাস্ট কমিয়ে দিন। দেখবেন, আগের চেয়ে বেশি আরাম লাগে। কিন্তু স্ক্রিন অন্ধকার হবে, অন্ধকারও চোখের জন্য সমস্যা। এই সফটওয়্যার গুলো ব্রাইটনেস কমায় না, কিন্তু কালার তাপমাত্রা (Temparature) নিয়ন্ত্রন করে। দিনের বেলা এরা আপনার কম্পুর আলো সূর্যের সাথে সামঞ্জস্য করে দেয়। ফলে আপনার চোখে অতিরিক্ত চাপ অনেকাংশে কমে যায়, এটি হল Temparature Cooling
আবার রাতের বেলা এরা Temparature Warming করে কম্পুর আলো একটা সামঞ্জস্য পর্যায়ে আনে। এটি আপয়ানার চোখের জন্য খুবই আরামদায়ক। সবচেয়ে বড় সুবিধা হচ্ছে, রাতের বেলা আপনি অনায়াসে কম্পিউটারে কাজ করতে পারবেন অন্ধকারেও এবং চোখ দিয়ে পানি পড়া, ব্যথা সব বন্ধ হয়ে যাবে। আসুন, মূল বিষয়ে আসা যাক।
F.Lux: Homepage

এটি খুবই সুন্দর একটি সফটওয়্যার। আপনারা এটা উইন্ডোজে ব্যবহার করতে পারেন (লিনাক্স সম্পর্কে পরে বলছি)।

প্রথমে লিংকে গিয়ে ডাউনলোড করে নিন এবং ইন্সটল করুন। উপরের মত স্ক্রিন দেখতে পাবেন। Settings এ যান, এখানে আপনার Location সিলেক্ট করার অপশন দেখতে পাবেন। যদি অক্ষাংশ,দ্রাঘিমাংশ জানা না থাকে, তাহলে ওখানে দেখবেন একটা অপশন আছে Locate জাতীয় (দুখিত, আমি এই পোস্ট উবুন্টু থেকে করছি বিধায় উইন্ডোজে গিয়ে দেখানো সম্ভব হচ্ছে না, তবে তাড়াতাড়ি আপডেট করব)। উক্ত ফাংশনে ক্লিক করলে একটা ম্যাপ আসবে আপনার ব্রাউজারে, আপনার শহরের নামে লিখুন তাহলে Longitude, Latitude পেয়ে যাবেন। পাওয়ার পর নম্বর দুটি নির্দিষ্ট ফিল্ডে পেস্ট করুন।
সেটিংস তেমন চেঞ্জ করার দরকার। তবে ইচ্ছা করলে Day Light 5000K করে দিতে পারেন তাহলে আরো ভাল হয়।

RedShift GUI: Page to Download
এটি আপনারা ইন্সটল করতে পারেন আপনার উবুন্টু/লিনাক্সে। হ্যাঁ, F.Lux উবুন্টুর জন্যও আছে তবে তার অবস্থা খুবই করুণ। অনেক ইউজার অভিযোগ করেছেন, পাশপাশি আমিও এটা থেকে সুফল পেতে অক্ষম হই। তাই REDSHIFTGUI এর কথা বলছি।


উল্লেখিত লিংকে গেলে ডাউনলোড লিংক পাবেন, প্রয়োজনমত একটি DEB প্যাকেজ ডাউনলোড করুন। এটি একটি DEB প্যাকেজ, তাই ইন্সটল সহজ। ডাবল ক্লিক করে Install Package এ ক্লিক করলেই ইন্সটল হবে।

ইন্সটল হলে উবুন্টুতে Applications>Accessories>RedShifGui এ গেলেই পেয়ে যাবেন জিনিসটি। এবার Location এ গিয়ে Method এ ক্লিক করুন। Lookup By IP সিলেক্ট করুন, তাহলে অটোমেটিকালি লোকেশন এড হয়ে যাবে। Disable auto-adjust এ টিক উঠিয়ে দিয়ে আবার টিক দিন, এটি করলে কাজ করা শুরু করবে। অন্য কোন সেটিংস পরিবর্তন করার দরকার নেই। তবে এখানেও Day Light 5000K করে দিতে পারেন যা আপনি Settings এ গিয়ে পাবেন।

প্রথম প্রথম অনেকে এটা পছন্দ করে না, কারন স্ক্রিন একটু লালচে দেখায়। কিন্তু কয়েকদিন ট্রাই করুন। তারপর একদিন হঠাৎ ডিসেবল করে দিন। তখনই বুঝিতে পারিবেন। আর হ্যাঁ, এক রিসার্চে দেখা গেছে এ ধরনের আলো রাতে ভাল ঘুম হতে সাহায্য করা, তাহলে আর দেরি কিসের? মূলত, যারা চশমা পড়েন বা অনেকক্ষন কম্পুর সামনে বসে থাকেন, তাদের জন্য এটি একরকমের অপরিহার্য সফটওয়্যার।

এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code)


                         ►বিসমিল্লাহির রাহমানির রাহীম◄

 
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।

১৬টি মৌলিক কালার:



Black
Gray
Silver
White

Yellow
Lime
Aqua
Fuchsia

Red
Green
Blue
Purple

Maroon
Olive
Navy
Teal

এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)

আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser,  HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে  rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।

Red, Green এবং Blue এর মান:




bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue



এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)

প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।

এইচটিএমএল হেক্সাডেসিমাল রং


bgcolor="#RRGGBB"

এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)

নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।

একটি বাস্তব হেক্সাডেসিমাল:

bgcolor="#FFFFFF"
এখানে "F" হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি ("#FFFFFF") সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।

হেক্সাডেসিমাল সূত্র:

(15 * 16) + (15) = 255
উপরের সূত্রটি বাস্তব। প্রথমে F এর মান(১৫) কে ১৬ দ্বারা গুন করে পরবর্তি মানের সাথে যোগ করতে হবে। ২৫৫ মানটি যেকোন প্রাথমিক কালারের মানের ক্ষেত্রে সর্বোচ্চ।নিচে আরও উদাহরন দেয়া হলো।
উদাহরন:

bgcolor="#CC7005"


CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

এইচটিএমএল লিস্ট টিউটোরিয়াল (HTML List Tutorial in Bangla)

►বিসমিল্লাহির রাহমানির রাহীম◄

তিন প্রকারের এইচটিএমএল লিস্ট বিদ্যমান। <ol> tag দিয়ে শুরু করে ধারাবাহিক লিস্ট(ordered list), <ul> ট্যাগ দিয়ে শুরু করে ধারাবাহিকতা হীন লিস্ট(unordered list), <dl> ট্যাগ দিয়ে শুরু করে সংজ্ঞামূলক লিস্ট(definition list)।
<ul> - unordered list; বুলেট
<ol> - ordered list; নম্বর
<dl> - definition list; অভিধান

এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists)

<ol> ট্যাগ দিয়ে ক্রমিক লিস্ট(ordered list) শুরু করা হয়। <li> ট্যাগ দ্বারা দ্রব্যের তালিকা (list item) বোঝায়।তালিকা তৈরীর জন্য  <li> ট্যাগ কে আপনার opening (<ol>) এবং closing (</ol>) tag এর মধ্যে রাখতে হয়।  ক্রমিক (ordered) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>
প্রদর্শন:


Goals

  1. Find a Job
  2. Get Money
  3. Move Out
Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>
প্রদর্শন:


Goals

4.Buy Food
5.Enroll in College
6.Get a Degree


এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists continued)

আরও চার প্রকারের ধারাবাহিক লিস্ট(ordered list) রয়েছে। এগুলো সাধারন ১,২,৩ নম্বরের পরিবর্তে রোমান নম্বর বা বর্ণ হতে পারে তা বড় হাতের বা ছোট হাতের। type attribute ব্যবহার করে নম্বর পরিবর্তন করা হয়।

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:


Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out

এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)

<ul> ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles । default হিসাবে সাধারনত full discs ব্যাবহার করা হয়।

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

প্রদর্শন:

Shopping List

  • Milk
  • Toilet Paper
  • Cereal
  • Bread

আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।
<ul type="square">
<ul> type="dics">
<ul> type="circle">

type="square" type="disc" type="circle"
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread

এইচটিএমএল ডেফিনেশন লিস্ট (HTML definition lists)

Definition list এর ব্যবহার সাধারনত অভিধানে দেখতে পাই। <dl> tag ব্যাবহার করে Definition list তৈরী করা হয়। যাকে Define অর্থ্যাৎ সংজ্ঞায়িত করতে চাই তাকে bold আকারে দেখানো উচিত। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১. <dt> ২. <dd> ।
<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।
<dt> tag:   যাকে  সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।
<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
প্রদর্শন:
Fromage
French word for cheese.
Voiture

French word for car.

এইচটিএমএল লাইন ব্রেক টিউটোরিয়াল

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

<p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>
প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি।
Will Mateson
Box 61
Cleveland, Ohio
আবার চিঠির সমাপ্ত ঘোষনা করতে পারি।

<p>Sincerely,<br />
<br />
<br />
Kevin Sanders<br />
Vice President</p>


প্রদর্শন:
Sincerely,


Kevin Sanders

Vice President

আরও একটা বিষয় মনে রাখা প্রয়োজন যে লাইন ব্রেক ট্যাগ এর কোন closing tag এর প্রয়োজন নেই।

HTML horizontal rule:

Horizontal rule কে

ট্যাগ দারা প্রকাশ করা হয়।

ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tag এর কোন closing tag নেই।





<hr>
Use
<hr><hr>
Them
<hr>
Sparingly
<hr>


প্রদর্শন:


Use




Them


Sparingly


Horizontal rule কোন গ্রন্থপঞ্জি বা কোন টেবিলের বিষয় সমুহ প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়।

<hr>
1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.
প্রদর্শন:


1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.

এইচটিএমএল হেডিং টিউটোরিয়াল (HTML Heading Tutorial in Bangla)

►বিসমিল্লাহির রাহমানির রাহীম◄


এইচটিএমএল এ হেডিং বা শিরোনাম সাধারনত টাইটেল বা সাবটাইটেল  হিসাবে দেখা যায়। হেডিং ট্যাগ এর মধ্যে রাখা টেক্স bold হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এর মধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>

Headings

are

great

for

titles
and subtitles
লক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে । এটা হেডিং এর built in attribute । হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক হয়ে যায়।

হেডিং এবং প্যারাগ্রাফ এর একত্রে ব্যবহার:


আমরা হেডিং এবং paragraph একসাথে ব্যবহার করতে পারি। নিচে উদাহরন দেয়া হল।
<h1 align="center">Essay Example</h1>
<p>Avoid losing floppy disks with important school/work projects...</p>
<p>For instance, let's say you had a
HUGE school or work project to complete.  Off ...</p>


প্রদর্শন:

Essay Example

Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)

কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।
<p> ট্যাগ দারা  অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।
<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>


প্রদর্শন:

Avoid losing floppy disks with important school/work projects on them. Use the web
to keep your content so you can access it from anywhere in the world. It's also a quick
way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far)it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand,
the easiest way to transfer the documents from your house could be a 3.5" floppy disk.
However, there is an alternative. Place your documents, photos, essays, or videos onto
your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-জাস্টিফিকেশন (HTML paragraph –justification)

ওয়ার্ড ডকুমেন্টে এ আমরা যেভাবে কোন লেখাকে justify করে সবদিকে সমান করতাম তেমনি ভাবে এইচটিএমএল এ justify ব্যবহার করে একই কাজ করতে পারি।
<p align="justify">For instance, let's say you had a HUGE school or work...</p>
প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-মাঝামাঝি (HTML paragraph –centering)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর মধ্যে অবস্থান করবে।
<p align="center">For instance, let's say you had a HUGE school or work...</p>


প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল প্যারাগ্রাফ-এলাইন ডানে (HTML paragraph –align right)

ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর ডানপাশে  অবস্থান করবে।
<p align="right">For instance, let's say you had a HUGE school or work...</p>


প্রদর্শন:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

এইচটিএমএল এট্রিবিউট টিউটোরিয়াল (HTML Attribute tutorial in Bangla)

বিসমিল্লাহির রাহমানির রাহীম◄ 
 
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবে attributes ব্যাবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ও উচ্চতার মান দিতে পারি।

<tag attributes ="value" attributes ="value">
<table width="150" height="100">
Class বা  id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা  id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।

<p>Paragraph type 1 Italics</p>
<p>Paragraph type 2 Bold</p>
প্রদর্শন
Paragraph type 1 Italics
Paragraph type 2 Bold

এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)

Name attribute টি Class বা  id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।

<input type="text" name="TextField" />
প্রদর্শন:

এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript , css)

এইচটিএমএল টাইটেল এট্রিবিউট (HTML- Title attributes)

এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।
<h2 title="Hello There!">Titled Heading Tag</h2>
প্রদর্শন

Titled Heading Tag

এইচটিএমএল এলাইন এট্রিবিউট (HTML- align attributes)

যদি আপনি এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করতে চান তবে তা align attribute দিয়ে করতে পারেন। align বিভিন্ন ভবে করা যায় যেমন left, right & center । ডিফল্ট হিসাবে left align টি নির্বাচিত থাকে।

<h2 align="center">Centered Heading</h2>

Centered Heading


<h2 align="left">Left aligned heading</h2>
<h2 align="center">Centered Heading</h2>
<h2 align="right">Right aligned heading</h2>

Left aligned heading

Centered heading

Right aligned heading

Generic attributes:

Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।

Attribute Options Function
align right, left, center সমান্তাল (Horizontally) aligns tags
valign top, middle, bottom উলম্ব(Vertically) aligns tags
bgcolor numeric, hexadecimal, RGB values Element এর  background color নিদের্শ করে।
background URL Background image উপর element নিদের্শ করে।
id ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর Name যা Cascading Style Sheets (css)   সাথে ব্যবহার করা হয়।

class ব্যবহারকারীর নির্দেশ অনুযায়ী Element  এর শ্রেনীবিন্যাস  যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।

width Numeric Value Tables, images, or table cells এর width নির্দেশ  করে ।
height Numeric Value Tables, images, or table cells এর height  নির্দেশ  করে ।
title ব্যবহারকারীর নির্দেশ অনুযায়ী আপনার elements এর "Pop-up" title ।
a