Sunday, June 30, 2013

এইচটিএমএল এর খুটি নাটি পর্ব ১২ [ ফন্টের ব্যাবহার ]





আজকে আমরা দেখবো কিভাবে এইচটিএমএল  ইউজ করে ওয়েব পেজের  ফন্ট কে চেঞ্জ করা যায় । এছাড়া ফন্ট ট্যাগ ইউজ করে পেজের স্টাইল, কালার এবং ডিফল্ট ফন্ট কে চেঞ্জ করতে হয় ?

<font> ট্যাগ ইউজ করে পেজের কিছু নিদ্রিস্ট ফন্ট কে চেঞ্জ করা যায় এছাড়া

... <basefont>  ট্যাগ ইউজ করে , পেজের সকল ফন্ট কে চেঞ্জ করা যায় ।

font Size ...

Font Size "Attribute" ইউজ করে পেজের ফন্টের সাইজের মান চেঞ্জ করা যায়।

<p>
<font size="7"> Amader choto nodi chole bake bake ... </font>
</p>

** মনে রাখতে হবে , ফন্টের সর্বচ্চো হচ্ছে ৭ এবং সর্বনিম্ন হচ্ছে ১ .

Font color :


Font color  "Attribute" ইউজ করে পেজের ফন্টের  কালার  চেঞ্জ করা যায়।

<p>
<font color=" কালারের নাম/মান "> amader choto nodi chole bake bake .. </font>
</p>

Font Face ইউজ করে Font এর Style চেঞ্জ করা হয় । তবে চেঞ্জ করার আগে যে ফন্ট টা দিতে চান , সেটা পিসি তে ইন্সটল আছে কিনা চেক করে নিতে হবে , না হলে ডিফল্ট ফন্ট হিসাবে Times New Roman ফন্ট শো করবে ।

<p>
<font face="comic sans ms"> amader choto nodi chole bake bake .. </font>
</p>

তাহলে আজ এখানে শেষ করলাম ।

Read more »

Friday, June 28, 2013

এইচটিএমএল এর খুটি নাটি পর্ব ১১ [ কালার কোড ]

 
সবাইকে স্বাগতম,ধারাবাহিক পর্বে আজকে আমরা শিখবো এইচটিএমএল এর কালার কোডের ব্যাবহার।

>> এইচটিএমএল এ কালার সেট করার জন্য ৩ টা ওয়ে ফলো করা হয় , 

যেমনঃ 

১. সরাসরি কোন কালালের নাম লিখে , 
২. আর জি বি মান লিখে 
৩. হেক্সাডেসিমাল নিন্নয় করে । ( গানিতিক ভাবে ) 

আমরা এখন দেখবো ,কিবাবে সরাসরি কালালের নাম লিখে বডির কালার চেঞ্জ করা যায় । 

<body bgcolor="black">

২. আর জি বি মান লিখে 

জানিয়ে রাখা ভালো, Red ,Green এবং Black এই তিনটা কালার কে একসাথে  আর জি বি কালার বলে। 


bgcolor="rgb(0,255,0)" এটা হচ্ছে নীল , কালালের কোড । এভার দেখুন বডির কালার চেঞ্জ হয়ে ব্লু হয়ে গেছে :) 

৩. হেক্সাডেসিমাল নিন্নয় করে ।

এই কালার টি সবচেয়ে বেশি ব্যাবহার এবং জনপ্রিয় একটি কালার কোড । এটি ৬ ডিজিট দিয়ে লেখা হয় । 


প্রথম ২টি হচ্ছে = RR(Red )
 ২য় ২টি হচ্ছে = GG(Green)
৩য় ২টি হচ্ছে = BB(black )

এটি লিখা হয় bgcolor="#RRGGBB" এই ভাবে । 

এইচটিএমএল কালার কোড নেট থেকে ধার করে নিতে হয় :P 


 সব গুলোকালের একটা ফডু 

ফর আসল ছবিঃ http://www.theodora.com/gif4/html_colors.gif



এখানে দেখতে পারেনঃ http://www.immigration-usa.com/html_colors.html 

গুগলে গিয়ে htnl color code list লিখে সার্চ দিলে ,সব ধরনের কালালের লিস্ট পাবেন । 

অবশেষে বলেতে চাই , কালার কোড ইউজ করার জন্য এখন সবাই CSS ইউজ করে করে , কারন সহজ এবং নিরাপদ ।

Read more »

Friday, June 14, 2013

এইচটিএমএল এর খুটি নাটি পর্ব ১০ [ লিস্ট ট্যাগের ব্যাবহার ]

সবাইকে স্বাগতম,ধারাবাহিক পর্বে আজকে আমরা শিখবো এইচটিএমএল এর লিস্ট ট্যাগের ব্যাবহার ।
*** এইচটিএমএল   এ ৩ প্রকার লিস্ট থাকে । সেগুলো হলোঃ
১. ধারাবাহিক ভাবে শুরু হওয়া Ordered list = <ol>
২. ধারাবাহিক হীন ভাবে শুরু হওয়া unordered list = <ul>
৩. সংগামলুক ভাবে শুরু হওয়া definition list =<dl>
এখন বিস্তারিত দেখুনঃ লিস্ত বানাতে হলে , Ordered list/ unordered list/ definition list যাই থাকুন না ক্যান , এই গুলোর ভিতরে আমাদের কে লিস্ট আইটেম গুলো কে রাখতে হবে ।
লিস্ট আইটেম টাগ হচ্ছে  <li>  </li>..
প্রথমে , ১. ধারাবাহিক ভাবে শুরু হওয়া Ordered list = <ol> . যেমন ১.২.৩ এই ভাবে শ্রেণী ভাবে শুরু হবে । Ordered list আবার চার প্রকার ,
যেমন বড় হাতের A, ছোট হাতের a , রোমান নম্বর , বর্ণ টাইপের হতে পারে ।
নোটঃ ট্যাগের ভিতরে Attribute ইউজ করে নিদ্রিস্ত সংখ্যা থেকে শুরু করা যেতে পারে ।
উদারনঃ <ol start="4">

<ol>
<li> Money </li>
<li>Wife</li>
<li>Car</li>
</ol>

এখন প্রিভিউ দেখেন । ক্লিয়ার ............. :)
* এছাড়া বাকি চার প্রকার ordered list ইউজ করতে হলে , আরম্ব করতে হলে , এইভাবে লিখতে হবে ।
<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">

২. ধারাবাহিক হীন ভাবে শুরু হওয়া unordered list = <ul> .. এই ট্যাগ ইউজ করে বুলেট লিস্ট বানানো যায় ,
আবার বুলেট লিস্ত ৩ প্রকার.
>  squares
> discs
> circles


<ul>
<li> Money </li>
<li>Wife</li>
<li>Car</li>
</ul>
এখন প্রিভিউ করে দেখুন


কিভাবে squares ,discs,circles লিস্ট ইউজ করতে হয় ?
<ul> এই ট্যাগের ভিতরে Attribute হিসাবে উল্লেখ করে দিলেই হবে । অনেক টা উপরের Ordered list এর মতো ।
মনে করেন আমি square ইউজ করবো , তাহলে আমার ট্যাগ টা হবে
<ul type=" square ">
* মনে করুন আমি disc ট্যাগ ইউজ করব , তাহলে
<ul type="disc">
আর মনে করুন আমি circle ট্যাগ টা ইউজ করব , তাহলে
<ul type="circle">
এই ভাবে আমাকে লিখতে হবে ।

definition list ট্যাগ  হচ্ছে যাকে দেখাতে চান ,তাকে বোল্ড করে দেখনো ।
efinition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১. <dt> ২. <dd> ।

<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।

<dt> tag:   যাকে  সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।

<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।

<dl>
<dt><b>Bangladesh</b></dt>
<dd>Bangladesh is a Freedom country </dd>
</dl>এখন তাহলে লিস্ট ট্যাগের ইউজ সম্পর্কে জানতে পারলেন , তাহলে এখন চর্চা করা স্টার্ট ক্রএ দেন ;)




Read more »

Sunday, June 9, 2013

এইচটিএমএল এর খুটি নাটি পর্ব ৯ [ টেবিলের কাস্টোমাইজেশন ]



গত পর্বে আমরা দেখেছিলাম ,  কিভাবে টেবিল ক্রিয়েট করতে হয় , আজকে আমরা টেবিলের কাস্টোমাইজেশন টা দেখবো । কিভাবে বর্ডার এবং আরো আকর্ষণীয় করা যায় ।
আগের মতো নোটপ্যাড ওপেন করুন । আজকে চলুন এইচটিএমএল ইউজ করে একটা ফোন ডাইরেক্টরী বানিয়ে ফেলি ;)
<!DOCTYPE HTML>
<html>
<table border="5">
<th>PHONE DIRECTORY </th>
<tr>
<td>Name</td>
<td>Phhone Number</td>
<td>E-mail</td>
</tr>
<tr>
<td>Rifat</td>
<td>*************</td>
<td>********@gmail.com</td>
</tr>
<tr>
<td>Ahmed</td>
<td>*******</td>
<td>########@gmail.com</td>
</tr>

</table>

</html>

*** টেবিলে বর্ডার দিতে হলে border=" value " ইউজ করতে হবে । হতে পারে ৫ :)
এভার দেখুন : ইমেজ দেখার জন্য লিঙ্ক ে ক্লিক করুন http://prntscr.com/193u0e
** দেখুন PHONE DIRECTORY লেখা টা বাম সাইটে , চলুন এটা কে মাজ খানে নিয়ে আসি । এই জন্য আমাদের কে Table  হেডার  এর ভিতরে
"colspan " নামে Attribute টা ইউজ করতে হবে ,
উদারনঃ <table border="5" colspan="3">
ইমেজ দেখুনঃ http://prntscr.com/193v5s

**
একটা জিনিস খেয়াল করুন, টেবিলের ভিতরের লেখা গুলো অনেক টা ঠাসা ঠাসি ভাবে আছে , তাহলে চলুন দেখে নেই , কিভাবে টেবিলের লেখা গুলো + বক্স কে ফাকা করা যায় ?
এই জন্য আমাদের কে Cellpadding এবং cellspacing নামের ২টা Attribute কে ইউজ করতে হবে ,
উদারনঃ <table  border="5" colspan="3" cellpadding="5" cellspacing="10">
এখন দেখুন , প্রত্যেক টি কলাম + রু  এর মাঝে কিছু টা গেফ হয়ে গেছে ।
আজ তাহলে এখানেই শেষ করলাম । বাকি অংশ টা আগামী পর্বে আলোচনা করা হবে :)
আল্লাহ হাফেয

Read more »

Saturday, June 8, 2013

এইচটিএমএল এর খুটি নাটি পর্ব ৮ [ কিভাবে টেবিল বানাতে হয়]


অনেক দিন লম্বা বিরতির পর , আজকে আবার শুরু করতে যাচ্ছি এইচটিএমএল এর ধারাবাহিক পর্ব নিয়ে আমাদের লেখা :)
আজকে আমরা শিখবো কিভাবে এইচটিএমএল ট্যাগ ইউজ করে টেবিল বানাতে হয় ?
আগের মতো নোটপ্যাড ওপেন করুন , আশা করি নিচের ফরমেট টা আপনার কাছে আছে :)
যেহেতু এইচটিএমএল ইউজার ফ্রেন্ডলি ,তাই সহজেই বুজে নিতে পারেন , টেবিল টাগ এর জন্য আমরা কি ইউজ করবো ,
টেবিলের জন্য <table> ট্যাগ কে ইউজ করা হবে ,
<!DOCTYPE html>
<html>
<table>
           <tr>
<td>dhaka</td>
</tr>
          <tr>
<td>Raj</td>
</tr>
          <tr>
<td> khulna</td>
</tr>
          <tr>
<td>dhaka</td>
</tr>
          <tr>
<td>Borishal</td>
</tr>
          <tr>
<td>Ctg</td>
</tr>
          <tr>
<td>jessore</td>
</tr>
</table>
</html>
এভার সেভ করে , রান করে দেখুন , একটা লম্বা কলাম হইছে ,  আরো একটা কলাম ক্রিয়েট করি , একই ভাবে করতে হবে ...
           <tr>
<td>dhaka 1</td>
</tr>
          <tr>
<td>Raj1</td>
</tr>
          <tr>
<td> khulna</td>
</tr>
          <tr>
<td>dhaka</td>
</tr>
          <tr>
<td>Borishal 1 </td>
</tr>
          <tr>
<td>Ctg 1</td>
</tr>
          <tr>
<td>jessore 1 </td>
</tr>
</table>
সেভ করে দেখুন , রান করে প্রিভিউ দেখুন ।
কিছুই বুজেন নাই :P তাইলে চলুন ব্রডার দিয়ে দেখি ;)
ব্রডার দেওয়ার জন্য , border আট্টিবিউট টা ইউজ করতে হবে ,

<!DOCTYPE html>
<html>
<table border="3">
এখন রান করিয়ে দেখুন ,
এবার দেখবো কিভাবে টেবিলের হেডলাইন অ্যাড করতে হয় ?
টেবিলের হেডার অ্যাড করার জন্য  " th " ট্যাগ টা ইউজ করবো ।
<!DOCTYPE html>
<html>
<table border="3">
<th> Name of Division </th>
এখন দেখুন , টেবিলের মধ্যে একটা হেডার অ্যাড হয়ে গেছে ,
তাহলে আজ আর নয় , ভালো থাকুন , টেবিল নিয়ে আরো একটা লেখা শেয়ার করা হবে :)


Read more »

Tuesday, March 26, 2013

এইচটিএমএল এর খুটি নাটি পর্ব 7 [ ইমেজ ট্যাগের ব্যাবহার]


ইমেজ ট্যাগের ব্যাবহারঃ 

আজকে আমরা দেখবো ,কিভাবে ওয়েব পেজে ইমেজ অ্যাড করতে হয় ?

যখন আমরা ট্যাগ নিয়ে আলোচনা করেছিলাম ,তখন বলেছিলাম ট্যাগ হচ্ছে ২ ধরনের ,কিছু হচ্ছে ডাবল ট্যাগ , মানে যার অপেনিং এবং ক্লোজিং আছে , আর কিছু হচ্ছে সিঙ্গেল ট্যাগ যাদের কিছুই নাই :P

তেমনি ইমেজ ট্যাগ হচ্ছে সিঙ্গেল ট্যাগ

< img />

এবং ছবির উৎস হিসাবে আমরা Source ইউজ করবো ।, আর Source  কে লিখতে হবে src .

তাহলে ব্যাপার টা ক্লিয়ার ??

<img src=” ছবির বিস্তারিত ”/>

প্রথমিক ভাবে দেখবেন , আপনার ছবিটা অনেক বড় শো করতেছে , এখন
height এবং weight আট্টীবিউট ইউজ করে আমরা ছবির সাইজ বড় ছোট করতে পাড়ি ।

প্রমাণঃ <img src=”html.png”height=”150″ weight=”70″/>

এছাড়া Align ( Horizontal) এবং Valign (Vertical) আট্টীবিউট ইউজ করে ছবি কে উপরে নিচে , মাঝে ,ডানে বামে করতে পাড়ি ।

১. align ( Horizontal ) ব্যাবহার করে কি কি করতে পাড়ি ?
  • Right
  • Left
  • Center
  1. Valign(Vertical) ব্যাবহার করে কি কি করতে পাড়ি ?
  • Top
  • Bottom
  • Center

উদারনঃ

<img src=”html.png”height=”150″ weight=”70″ align=”right” />


এইচটিএমএল এ ইমেজ কে কিভাবে লিংক হিসাবে ব্যাবহার করতে হয় ??

আই মিন ছবিতে ক্লিক করলে , কিভাবে ওই ছবির ওয়েব পেজে চলে যেতে হয় ??

<a href=”http://google.com.bd”/><img src=”html.png”height=”150″ weight=”70″ align=”right” /></a>
এখন তাহলে বুজতে পেরেছেন , সবাই চর্চা চালিয়ে যান , তাহলে খুব দ্রুত শিখতে পাড়বেন ।

সেভ করে প্রিভিউ দেখুন .
. তাহলে আজ এখানে শেষ করলাম । বুজতে কোন প্রবলেম হলে , কমেন্ট এ জানাবেন ।

Read more »

এইচটিএমএল এর খুটি নাটি পর্ব ৬ [ মেইল লিংক ক্রিয়েট করতে হয় ]




আজকে আমরা শিখবো , কিভাবে মেইল লিংক ক্রিয়েট করতে হয় ,

আমরা অনেক সময় দেখে থাকি , অনেক ধরনের সাইটে লিখা আছে , Cont. Us তারপর mail us , এই সব হাবি যাবি । দেখবেন Mail us এ ক্লিক করার সাথে সাথে ওই ঠিকানাতে মেইল চলে যাবে , :) আপনার মনে হয়তো প্রস্ন হতে পাড়ে ,এটা কিভাবে হলো ।
তাহলে দেখুনঃ

<a href=”mailto:crkdwnbd@gmail.com”>MAil Us : </a>

আরো একটা জিনিস দেখে নিন ,
আমরা অনেক সময় ওয়েব পেজে ভিজিট করার সময় দেখা যায় , লিংক গুলোর উপরে মাউজের কার্সার নিয়ে গেলে , এক্সট্রা তত্ত্ব দেয় , নিচের ছবিটি দেখুন

আমি এখানে Getting Started এর উপরে আমার মাউজ নিয়ে যাওয়ার সাথে সাথে আমাকে নিচের বক্সসের লিখা টা দেখাইছে ,
তাহলে আসুন দেখে নেই , কিভাবে এই ট্যাগ টা ইউজ করতে হয় ।

আর একটা জিনিস মনে রাখতে হবে আমরা একটা ট্যাগের ভিতরে একাধিক Attribute ইউজ করতে পারি । আর এখন আমরা ইউজ করবো , Title কে , হুম এখন আপনার প্রশ্ন জাগতে পারে , তাহলে উপরে আমরা কিসের টাইটেল ইউজ করেছিলাম।

> টাইটেল হচ্ছে ২ ধরনের , একটা হচ্ছে ট্যাগ টাইটেল আর আরেক টা হচ্ছে  Attribute টাইটেল ।

এখন আমরা  Attribute টাইটেল ইউজ করবো , এটা কে টুলটিপস বলে ,

উদারনঃ <a href=”mailto:crkdwnbd@gmail.com” title=”Click here For send mail”>MAil Us : </a>

##নিচের ছবিটি দেখুনঃ

এখন তাহলে বুজতে পেরেছেন , সবাই চর্চা চালিয়ে যান , তাহলে খুব দ্রুত শিখতে পাড়বেন ।

সেভ করে প্রিভিউ দেখুন .
. তাহলে আজ এখানে শেষ করলাম । বুজতে কোন প্রবলেম হলে , কমেন্ট এ জানাবেন ।

Read more »