Bangladesh Internet Club

***Well Come to all Friends Bangladesh Internet Club***
* ওয়েব ডিজাইনিং লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান
* ওয়েব ডিজাইনিং লেবেলটি সহ পোস্টগুলি দেখানো হচ্ছে৷ সকল পোস্ট দেখান

বুধবার, ১ আগস্ট, ২০১২

*** html শেখার উপায় : অধ্যায় ৮

googleb74d12566e23c282

আমি আজকে আলোচনা  করব html -এর Form নিয়ে ।এটি অত্যান্ত গুরুত্বপূ্র্ণ বিষয় কেননা পিএইচপি -তে এটি বেশী ব্যবহৃত হয় ।একেও ক্ষেত্র বিশেষে সার্ভার সাইট স্কীপটিং বলা হয়ে থাকে । আমার আগের পোস্ট গুলো না দেখে থাকলে নিচে লিংক দেওয়া আছে ওখান থেকে দেখে নেবেন ।

Form:-

Form- ট্যাগটির সাহায্যে পেজ থেকে কোন প্রকার ডেটা  সরাসরি ডেটাবেসে প্রবেশ করান যায় । Form-টি অনেক গুলি Attributes -এর সাহায্য নিয়ে কাজ করে । form-এর প্রাথমিক গঠন হল <form>………</form> -এরকম ।এই ট্যাগটির দুটি গুরুত্বপূর্ণ Attribute হল method,action ।এছাড়াও কত গুলি ট্যাগ ফ্রম ট্যাগের অধীনে কাজ করে । নিচের ছকে কত গুলি উদাহরণ দেখান হল ।
Attributes-এর নামমানকাজ
inputনির্দিষ্ট নয়নির্দিষ্ট নয়
typetextপেজে লেখার স্হান তৈরী করা
textareaname,rows,colsপেজে লেখার স্হান তৈরী করা
typesubmitপেজে বটন তৈরী করে
typeradioঠিক চিহ্ন দেবার বাক্স তৈরী করে
typepasswordপাসওয়ার্ড দেবার বাক্স তৈরী করে
typecheckboxনির্বাচন-বাক্স তৈরী করে
typefileআপলোড বাক্স তৈরী করে
selectoptionক্রম অনুযায়ী নির্বাচন-বাক্স তৈরী করে
typeresetডেটা পুনরায় নতুন করে দেবার জন্য
১.Text field:-
পেজে কোন লেখার স্হান তেরী করতে এটি ব্যবহার করা হয় । ঠিক যেমন টা আপনি নিচে মন্তব্য বাক্সে দেখতে পারছেন । এর প্রাথমিক গঠন
ইনপুট কোডব্রাউজারে আউটপুট
<form>
<input type="text">
</form>
12 html শেখার সহজ উপায় : অধ্যায় ৮
text field-এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form method="post" action="mailto:kaktadua@tunerpage.com">
নাম: <input type="text" size="10" maxlength="40" name="name" id="name">
</form>
2 html শেখার সহজ উপায় : অধ্যায় ৮
২.Multi-line text:-
এক্ষেত্রে ব্যবহার করা হয় textarea ট্যাগটি ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<textarea name="suggestions" rows="5" cols="25">আপনার মতামত</textarea>
৩.Submit field:-
পেজে বটন তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form method="post" action="anyphpfile.php">
<input type="submit" value="submit" id="প্রদান"/>
</form>
4 html শেখার সহজ উপায় : অধ্যায় ৮
৪.Radio field:-
পেজে ঠিক চিহ্ন দেবার বাক্স তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form method="post" action="anyphpfile.php">
আমার টিউন গুলি আপনাদের কেমন লাগল ?
<p><input type="radio" name="rating" value="excellent">ব্যপক !!! <br/>
<input type="radio" name="rating" value="good">ভাল  <br/>
<input type="radio" name="rating" value="bad">ভাল না   <br/>
<input type="radio" name="rating" value="verybad">খুব খারাপ <br/>
</p>
</form>
51 html শেখার সহজ উপায় : অধ্যায় ৮
৫.Password field:-
পেজে পাসওয়ার্ড দেবার বাক্স তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form>
গোপন সংখ্যা : <input type="password" name="pwd" maxlength="8" />
</form>
63 html শেখার সহজ উপায় : অধ্যায় ৮
৬.Checkbox field:-
পেজে নির্বাচন-বাক্স তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form method="post" action="anyphpfile.php">
আপনার কি আমার সাহায্য প্রয়োজন  ?
<input type="checkbox" name="sendmail" value="send"
 checked="checked" />হ্যা ,আমার সাহায্য প্রয়োজন </br>
<input type="checkbox" name="sendmail" 
value="dontsend"  /> না,আমার সাহায্য প্রয়োজন নেই</br>
<input type="checkbox" name="nxttime"  />পরে দেখা যাবে
</form>
3 html শেখার সহজ উপায় : অধ্যায় ৮
৭.File upload field:-
পেজে আপলোড বাক্স তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form method="post" action="anyphpfile.php">
<input type="hidden" name="max_file_size" value="100" />
<input name="file" type="file" />
</form>
63 html শেখার সহজ উপায় : অধ্যায় ৮
৮. Selection field:-
পেজে ক্রম অনুযায়ী নির্বাচন-বাক্স তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form method="post" action="mailto:kaktadua@tunerpage.com">
বাংলা সাইট গুলোর মধ্যে আপনি যা যা পরিদর্শন করেছেন
<select multiple name="music" size="4">
<option value="tunerpage" selected>TunerPage</option>
<option value="techtunes" >Techtunes</option>
<option value="techtweets" >Techtweets</option>
<option value="BDnews24 " >BD news 24 </option>
<option value="Prothom Alo  " >Prothom Alo  </option>
<option value="Ananda Bazar " >Ananda Bazar </option>
<option value="Kaler kantho " >Kaler kantho </option>
</select>
</form>
9 html শেখার সহজ উপায় : অধ্যায় ৮
৯.Reset button:-
আমরা পেজে যে সমস্ত ডেটা দিলাম তা পুনরায় নতুন করে দেবার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোডব্রাউজারে আউটপুট
<form actiion="somefile.php" onReset="return confirm
('আপনি কি সব তথ্য মুছে আবার নতুন করে দিতে রাজি আছেন ?')">
<input type="reset" value="সব তথ্য রিসেট করব">
</form>
71 html শেখার সহজ উপায় : অধ্যায় ৮
আজ এ-পর্যন্তই ।ধন্যবাদ
 ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

Lesson 1 Learn HTML


আমার আজকের অলোচ্য বিষয় হল  html-এর Table  ট্যাগ ।
***Table Tag:-
ওয়েবপেজের মধ্যে কোন ছক বা Table তৈরি করতে ব্যবহার হয় এই ট্যাগটি ।Table Tag-টি <tr> Tag-এর মাধ্যমে ছকের মধ্যে সারি(row) এবং <td> Tag-এর মাধ্যমে ছকের মধ্যে স্তম্ভ(Column or Cell) তৈরি করে । টেবিল ট্যাগটিতে কতগুলি বিশেষ Attributes-ও ব্যবহার করা যায় ।Attributes গুলি হল border,cellspacing,cellpadding ইত্যাদি ।

**এর প্রাথমিক গঠন
ইনপুট কোডব্রাউজারে আউটপুট
<table border=”2″>
<tr><td>১ম সারি,১ম স্তম্ভ </td><td>১ম সারি,২য় স্তম্ভ </td><td>১ম সারি,৩য় স্তম্ভ </td></tr>
<tr><td>২য় সারি,১ম স্তম্ভ </td><td>২য় সারি,২য় স্তম্ভ </td><td>২য় সারি,৩য় স্তম্ভ </td></tr>
</table>
১ম সারি,১ম স্তম্ভ১ম সারি,২য় স্তম্ভ১ম সারি,৩য় স্তম্ভ
২য় সারি,১ম স্তম্ভ২য় সারি,২য় স্তম্ভ২য় সারি,৩য় স্তম্ভ
border,cellspacing,cellpadding Attributes-গুলির মান হয় কোন একটি পূর্ণাঙ্গ গানিতিক মান ।border Attribute-টি ছকের বহিঃরেখা নির্দেশ করে ।cellspacing আর cellpadding Attribute-দুটি ছক-মধ্যস্হ লেখার মধ্যে ব্যবধান তৈরি করে ।এছাড়াও  <td> tag-টির জন্য কিছু বিশেষ Attributes আছে ।যেমন  rowspan,colspan । rowspan Attribute-টি সারিকে সংকুচিত করে আর colspan Attribute-টি স্তম্ভকে সংকুচিত করে ।ছকের মধ্যে কোন লেখাকে শিরোনাম হিসেবে ব্যবহার করার জন্য সেই সারির <td> গুলিকে <th> লিখতে হয় ।প্রসঙ্গত উল্লেখ্য যে tr-এর অর্থ  Table Row, td-এর অর্থ Table Data, th-এর অর্থ Table Heading ।
যেমন
ইনপুট কোডব্রাউজারে আউটপুট
<table border=”1″ cellspacing=”3″ cellpadding=”4″>
<tr><th bgcolor=”red”>১ম স্তম্ভ</th><th>২য় স্তম্ভ</th><th>৩য় স্তম্ভ</th></tr>
<tr><td rowspan=”2″>১ম সারি, ১ম স্তম্ভ</td><td>১ম সারি,২য় স্তম্ভ</td><td>১ম সারি, ৩য় স্তম্ভ</td></tr>
<tr><td>২য় সারি,২য় স্তম্ভ</td><td>২য় সারি, ৩য় স্তম্ভ</td></tr>
<tr bgcolor=”green”><td colspan=”3″> ৩য় সারি, ১ম স্তম্ভ</td></tr></table>
১ম স্তম্ভ২য় স্তম্ভ৩য় স্তম্ভ
১ম সারি, ১ম স্তম্ভ১ম সারি,২য় স্তম্ভ১ম সারি, ৩য় স্তম্ভ
২য় সারি,২য় স্তম্ভ২য় সারি, ৩য় স্তম্ভ
৩য় সারি, ১ম স্তম্ভ

নিচের উদাহরণটি নিজে করার চেষ্টা করুন
facebook logo square webtreatsetc html শেখার সহজ উপায় : অধ্যায় ৭google logo html শেখার সহজ উপায় : অধ্যায় ৭
yahoo logo2 html শেখার সহজ উপায় : অধ্যায় ৭
bing logo html শেখার সহজ উপায় : অধ্যায় ৭

আজ এ-পর্যন্তই ।ধন্যবাদ ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

Learn HTML Lesson 2

googleb74d12566e23c282
আজকে আমি আলোচনা করব Html-এর Link এবং Image  সম্পর্কে ।

*** Html Link:-

ওয়েব পেজের মধ্যে কোন লিংক যোগ করার জন্য ব্যবহৃত হয় Html Link । Html Link হিসেবে যে-কোন টেক্সস্ট বা ছবি ব্যবহৃত হয়ে থাকে । তবে লিংক বলে কোন ট্যাগ নেই ।ওয়েব পেজে যেকোন Link যোগ করার জন্য <a> ট্যাগ এবং এই ট্যাগের একটি Attribute, href ব্যবহৃত হয় ।<a> ট্যাগের link সংক্রান্ত আরও একটি Attribute হল target । href Attribute-টির ধরন রেফারেন্সের উপর ভিত্তি করে তিন রকমের হয়ে থাকে ।যে কোন সর্ভারে তিন ধরনের রেফারেন্স থাকে এগুলি হল ১.ইন্টারনাল -একই ওয়েব পেজে বিদ্যমান, ২.লোকাল -নিজস্ব ডোমেইনে বিদ্যমান, ৩.গ্লোবাল -অন্য কোন স্হানে বিদ্যমান ।ইন্টারনাল রেফারেন্সের ক্ষেত্রে href Attribute-টির মান হবে href=”#কককককক”-এই ধরনের,লোকাল রেফারেন্সের ক্ষেত্রে href Attribute-টির মান হবে href=”../খখখখ/খখখখখখখ”-এই ধরনের, আর গ্লোবাল রেফারেন্সের ক্ষেত্রে href Attribute-টির মান হবে href=”http://www.xxxxxx.xxx”-এই ধরনের । সার্বিকভাবে গ্লোবাল রেফারেন্সটিই বহুল ব্যবহৃত ।

1.Text Link:-

এর গঠন  <a href=”http://www.xxxx.xxx”>yyyyy</a> -এই রকমের হয় ।এখানে www.xxxx.xxx -এর মান হবে আপনি যে লিংকটি যোগ করতে চাচ্ছেন তার URL এবং yyyyy -এর মান হবে আপনি যে নামে লিংকটিকে ওয়েব পেজে দেখাতে চান বা  সেটি ।<a> ট্যাগের link সংক্রান্ত আরও একটি Attribute হল target ।target Attribute-এর মান _blank, _parent, _self, _top এই চারটি হয় । target=”_blank” Attribute-টি ব্রাউজারের নতুন উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে ।target=”_self” Attribute-টি ব্রাউজারের বর্তমান উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে ।অধিকাংশ C.M.S-র মধ্যে এটি ডিফল্ট হিসেবে ব্যবহৃত হয় ।  target=”_parent” Attribute-টি ব্রাউজারের বর্তমান উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে । target=”_top” Attribute-টি সমস্ত ফ্রেম বাতিল করে ব্রাউজারের বর্তমান উইন্ডোতে নতুন পেজে আপনার প্রদত্ত লিংকটি প্রকাশ করবে ।
যেমন
inputব্রাউজারে output
স্বাগতম <a href=”http://www.themore.cz.cc” target=”_blank”>মোর কুঁড়েঘরে</a>
স্বাগতম <a href=”http://www.themore.cz.cc” target=”_self”>মোর কুঁড়েঘরে</a>
স্বাগতম <a href=”http://www.themore.cz.cc” target=”_parent”>মোর কুঁড়েঘরে</a>
স্বাগতম <a href=”http://www.themore.cz.cc” target=”_top”>মোর কুঁড়েঘরে</a>
স্বাগতম মোর কুঁড়েঘরে
স্বাগতম মোর কুঁড়েঘরে
স্বাগতম মোর কুঁড়েঘরে
স্বাগতম মোর কুঁড়েঘরে

2.Image Link:-

গঠন Text Link-এর মতই কেবল yyyyy-এর মান কোন Text-এর পরিবর্তে যে ছবিটি ওয়েব লিংক হিসেবে ব্যবহার করতে চান তার লিংক বা অবস্হান লিখতে হবে ।
যেমন
inputব্রাউজারে output
<a href=”http://www.tunerpage.com” target=”_blank”><img src=”http://www.tunerpage.com/uploads/2011/07/ert.png”/></a>

3.Internal Link:-

একই পেজের মধ্যে উপর থেকে নিচে বা নিচ থেকে উপরে কোথাও যাবার জন্য এই লিংকটি ব্যবহার করা হয় ।এক্ষেত্রে আমাদের করণীয় কাজ দুটি ।প্রথমে যে টেক্সস্টটিকে লিংকের আউটপুটের ফলাফল হিসেবে ব্যবহার করা হবে তাতে <a> ট্যাগের name Attribute টি ব্যবহার করা করতে হবে ।দ্বিতীয়ত আউটপুটে প্রদর্শিত টেক্সটিতে  <a> ট্যাগের href Attribute টি ব্যবহার করা করতে হবে ।অর্থাত্‍ এরকম হবে  xxxxxxxx<a name=”yyyy”></a> (১ম টি) ,<a href=”#yyyy”>zzzzz</a> (২য় টি) ।
যেমন
inputব্রাউজারে output
Html Link:-<a name=”about_link”></a>
Learn About<a href=”#about_link”>Html Link</a>
Learn About 
Html Link

4.Email Link:-

কোন বৈ-ডাকের ঠিকানাকে ওয়েবপেজে তুলে ধরতে ব্যবহার করা হয় Email Link । এর গঠন  <a href=”mailto:xxxxxx@xxxxxx.xxx”>yyyyyy</a> । এর আউটপুটের yyyyyy-তে ক্লিক করলে আপনার কম্পিউটারে ইনস্টল থাকা মেইল সার্ভারটি xxxxxx@xxxxxx.xxx ঠিকানায় একটি মেইল পাঠাবার জন্য প্রস্তুত হবে ।
যেমন
inputব্রাউজারে output
সাহায্যের জন্য <a href=”mailto:tunerpage@hotmail.com”>এখানে</a> মেইল করুন ।সাহায্যের জন্য এখানে মেইল করুন ।

Html Image:-

ওয়েবপেজের একটি গুরুত্বপূর্ণ বিষয় হল ছবি।পেজের মধ্যে যত ভাল ছবি বা ব্যানার থাকবে পরিদর্শক তত বেশি আকর্ষিত হবে।ওয়েব পেজের মধ্যে কোন ছবি যোগ করতে ব্যবহৃত হয় img ট্যাগ আর src  Attribute । src Attribute টির মান হয় যে ছবিটি ওয়েবপেজে প্রকাশ করতে চান তার অবস্হান ।এর গঠন <img src=”http://www.xxxxxx.xxx/xxxxx/xxxx.jpg”/> । লক্ষ্য করুন img ট্যাগটির সমাপ্তকরণ সূচক নেই ।img ট্যাগটির আরও কয়েকটি Attribute হল alt,align,valign,width,height । নেটওয়ার্কের কারনে ছবিটি প্রদর্শিত না হলে alt Attribute লেখা টেক্সটটি প্রদর্শিত হবে ।align Attribute-টির মান right,left,center-এই তিনটি,valign Attribute-টির মান top,bottom,center-এই তিনটি হয় । align ও valign Attribute দুটি দিয়ে ছবির প্রকাশের অবস্হান ঠিক করা হয় ।width ও height Attribute দুটি দিয়ে ছবির দৈর্ঘ্য ও প্রস্হ নির্দিষ্ট করা হয় ।Attribute দুটির মান হয় পূর্নাঙ্গ কোন গানিতিক সংখ্যা ।
যেমন
inputব্রাউজারে output
<img src=”http://www.tunerpage.com/uploads/2011/07/ert.png” alt=”tunerpage” align=”right” width=”250″ height=”150″/>


আজ এ-পর্যন্তই ।

***html শেখার উপায় :: অধ্যায় ৫

googleb74d12566e23c282
আমার আজকের আলোচনার বিষয় হল html -এর Colour code এবং Bgcolor ।

Colour code:-

সব রঙই কিছু কথা বলে তাইতো রঙের মধ্যেও রয়েছে ভিন্নতা । html-এর মধ্যে রঙের এই বিভন্নতা প্রকাশ করা হয় কালার কোড দিয়ে ।ব্যাকগ্রাউন্ডের রঙ থেকে ফন্টের রঙ সবই পরিবর্তন করা যায় তিনটি কালার কোডিং সিস্টেমের দ্বারা ।এই তিনটি কালার কোডিং সিস্টেম হল যথাক্রমে ১.সাধারণ নাম দিয়ে ,যেমন:- black,white,red,blue,green ২.হেক্সাডেসিমেল নম্বর দ্বারা, যেমন:- #000000,#FFFFFF,#FF0000,#0000FF,#00FF00 ৩.rgb পদ্ধতি দ্বারা ,যেমন:- rgb(0,0,0),rgb(255,255,255),rgb(255,০,০),rgb(০,255,০),rgb(০,০,255) ।এই তিন ধরনের রঙ বর্ননার পদ্ধতি থাকলেও ব্যবহারের ক্ষেত্রে কিন্তু মূলত ব্যবহার হয় হেক্সাডেসিমেল পদ্ধতিটিই ।সাধারণ নামের পদ্ধতিটিও ক্ষেত্র বিশেষে ব্যবহৃত হয়ে থাকে ।আর rgb পদ্ধতিতে ব্যবহৃত রঙ অনেক ব্রাউজারে প্রদর্শিত হয় না বলে বহুল ব্যবহৃত নয় ।নিচে তিনটি পদ্ধতি আলোচনা করা হল ।

১.সাধারণ নাম দিয়ে:-

এটির ক্ষেত্রে জানার কিছুই নেই আমরা যে নামে বিভিন্ন রঙকে জানি তাই এক্ষেত্রে ব্যবহার করা হয় ।

২.হেক্সাডেসিমেল নম্বর দ্বারা:-

এর গঠন #RRGGBB অর্থাত্‍ # চিহ্নের পর তিন জোড়া হেক্সাডেসিমেল সংখ্যা যার প্রথম জোড়া লাল রঙের গাঢ়ত্ব,২য় জোড়া সবুজ রঙের গাঢ়ত্ব,৩য় জোড়া নীল রঙের গাঢ়ত্ব প্রকাশ করে ।আমরা তো অনেকেই ডেসিমেল আর হেক্সাডেসিমেল সংখ্যা পদ্ধতি গনিতে শিখেছি,আর না শেখা থাকলে নিচে দেওয়া ছকটি দেখুন ।
ডেসিমেল123456789101112131415
হেক্সাডেসিমেল123456789ABCDEF
অর্থাত্‍ ডেসিমেল সংখ্যা পদ্ধতির 10 হেক্সাডেসিমেল সংখ্যা পদ্ধতিতে A -এর সমান এবং অনুরূপে 11,12,13,14,15 যথাক্রমে B,C,D,E,F -এর সমান ।হেক্সাডেসিমেল সংখ্যা পদ্ধতিতে সর্বোচ্চ মান F পর্যন্ত হতে পারে । এখন হেক্সাডেসিমেল নম্বরের দ্বারা ওয়েব পেজে লাল রঙ ব্যবহার করতে হলে প্রথম জোড়া হেক্সাডেসিমেল সংখ্যার মান সর্বোচ্চ অর্থাত্‍ F হতে হবে বাকি দুই জোড়া হেক্সাডেসিমেল সংখ্যার মান সর্বনিম্ন অর্থাত্‍ ০ হতে হবে তাই হেক্সাডেসিমেল নম্বরে লাল রঙের কোড হবে #FF0000 অনুরূপে সবুজ আর নীল রঙের ক্ষেত্রেও হবে ।

৩.rgb পদ্ধতি দ্বারা:-

এর গঠন rgb(r,g,b) অর্থাত্‍ rgb(লাল রঙের গাঢ়ত্ব,সবুজ রঙের গাঢ়ত্ব,নীল রঙের গাঢ়ত্ব) ।এখানে r-এর মান 0 থেকে 255 পর্যন্ত যেকোন একটি সংখ্যা হয়ে থাকে অনুরূপে g এবং b-এর মানও হয় ।rgb পদ্ধতি দ্বারা ওয়েব পেজে লাল রঙ ব্যবহার করতে হলে r-এর মান সর্বোচ্চ অর্থাত্‍ 255 হতে হবে এবং g ও b-এর মান সর্বনিম্ন অর্থাত্‍ ০ হতে হবে তাই rgb পদ্ধতিতে লাল রঙের কোড হবে rgb(255,০,০) অনুরূপে সবুজ আর নীল রঙের ক্ষেত্রেও হবে ।

rgb পদ্ধতি এবং হেক্সাডেসিমেল নম্বর পদ্ধতির মধ্যে সম্পর্ক:-

হেক্সাডেসিমেল নম্বর পদ্ধতির যেকোন রঙকে খুব সহজেই rgb পদ্ধতিতে রূপান্তরিত করা সম্ভব ।এক্ষেত্রে #RRGGBB=rgb(R*16+R,G*16+G,B*16+B) উদাহরণ সরূপ লাল রঙের ক্ষেত্রে #FF0000=rgb(F*16+F,0*16+0,0*16+0)=rgb(15*16+15,0,0)=rgb(255,0,0)
নিচের ছকে ২টি রঙ পদ্ধতির উদাহরণ দেওয়া হল
colorchart html শেখার সহজ উপায়  : অধ্যায় ৫

Bgcolor:-


এটি কোন ট্যাগ নয় এটি একটি Attribute । এটি body,font,table,td,tr ইত্যাদি ট্যাগ গুলির মধ্যে বসে ।এই Attribute-এর = পরে কোটেশনের মধ্যে কালার কোডিংয়ের মান বসে ।অর্থাত্‍ এরকম <body Bgcolor=”#FF0000″> … </body>

%E0%A6%A1%E0%A6%BE%E0%A6%89%E0%A6%A8%E0%A6%B2%E0%A7%8B%E0%A6%A1 html শেখার সহজ উপায়  : অধ্যায় ৫


ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

** html শেখার উপায় :: অধ্যায় ৪

googleb74d12566e23c282
আজকে আমি আলোচনা করব html-এর font আর list  নিয়ে ।

***Html font:-

ওয়েব পেজের font বা হরফের বিভিন্ন রকম স্টাইল প্রদর্শন করার জন্য ব্যবহৃত হয় Html font । ফন্টের গঠন <font> … </font> এই রকমের হয় ।তবে ফন্ট ট্যাগটি একাই কিছু করতে পারে না এজন্য তাকে সাহায্য করে থাকে কয়েকটি Attribute ।ফন্ট ট্যাগটি এবং Attribute গুলি নিয়ন্ত্রন করা যায় হরফের আকার ,বর্ন(রং) এবং হরফের ধরণ । নিচের ছকে ফন্ট ট্যাগের কয়েকটি প্রয়োজোনীয় Attribute দেখান হল ।
Attribute(-র নাম)মানকাজের বর্ননা
colorrgb(x,x,x)[যেমন rgb(102,204,51)]
#xxxxxx (যেমন  #66cc33)
colorname (যেমন green)
হরফের রং পরিবর্তন করতে ব্যবহৃত হয়
size1 থেকে 7 পর্যন্ত যে কোন পূর্ন গানিতিক মান
(যেমন 4)
হরফের আকার পরিবর্তন করতে  ব্যবহৃত হয়
faceহরফ গোষ্ঠির নাম
(যেমন  SolaimanLipi)
হরফের ধরণ  পরিবর্তন করতে  ব্যবহৃত হয়
rgb(x,x,x),#xxxxxx সম্পর্কে পরে বিস্তারিত আলোচনা করব ।
যেভাবে লিখবেন
প্রথমে ফন্ট ট্যাগটি লিখে ফেলুন এরপর সূচনাকারি ট্যাগ অর্থাত্‍   <font>-এর মধ্যে Attribute-র নাম লিখে সমান চিহ্ন দিয়ে কোটেশন(“) চিহ্নের মধ্যে রাখুন Attribute-র মানটিকে
অর্থাত্‍  এরকম  হবে <font size=”3″ color=”red”> বিষয়বস্তু</font>

Html list:-

ওয়েব পেজে লেখার মধ্যে তালিকা করার সময় প্রয়োজন হয় list ট্যাগের ।তিন ধরনের Html list বিদ্যমান যথা ordered list,unordered list,definition list  ।
Ordered list:-
ordered list শুরু হয় <ol> ট্যাগ দিয়ে শেষ হয় </ol> ট্যাগ দিয়ে ।এর দুটি Attribute আছে , type আর start এই দুটি ।type Attribute-এর মান a,A,i,I,1 এই পাঁচটি হতে পারে ।start Attribute-এর মান type Attribute-এর উপর নির্ভর করে ।যদি type Attribute-এর মান a বা A হয় তবে start Attribute-এর মান a থেকে z পর্যন্ত যে কোন অক্ষর বা 1 থেকে 26 পর্যন্ত যে কোন পূর্ন গানিতিক সংখ্যা হতে পারে ।যদি type Attribute-এর মান i,I বা 1 হয় তবে start Attribute-এর মান যে কোন পূর্ন গানিতিক সংখ্যা হতে পারে ।
এর গঠন    নিচের কাঠামোর হয় ।
<ol type="1" start="1">
<h3>টপ টিজে </h3>
    <li>পুদিনা পাতা</li>
    <li>অনির্বাচিত টিউনার</li>
    <li>সার্ভার কুইন</li>
    <li>বান্দা_ ইখতিয়!র </li>
</ol>
Unordered list:-
unordered list শুরু হয় <ul> ট্যাগ দিয়ে শেষ হয় </ul> ট্যাগ দিয়ে ।এর শুধু type Attribute আছে , type  Attribute-এর মান square,circle বা dics ইত্যাদি হয়ে থাকে ।
এর গঠন নিচের কাঠামোর হয়
<ul type="circle" ><h3>টপ টিজে </h3>
    <li>পুদিনা পাতা</li>
     <li>অনির্বাচিত টিউনার</li>
     <li>সার্ভার কুইন</li>
     <li>বান্দা_ ইখতিয়!র </li></ul>
**Definition list:-
Definition list এর ব্যবহার সাধারনত অভিধানে দেখা যায়।definition list শুরু হয় <dl> ট্যাগ দিয়ে শেষ হয় </dl> ট্যাগ দিয়ে ।<dl> tag ব্যাবহার করে Definition list তৈরী করা হয়। যাকে Define  করতে চাই তাকে bold আকারে দেখানো দরকার। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো <dt> আর <dd> ।এর গঠন
<dl>
<dt><b>Rose</b></dt>
<dd>Rose is a pink coloured sweet smelled flower</dd>
<dt><b>William Shakespeare</b></dt>
<dd>William Shakespeare is one of the greatest writer.he said in his
 "Romeo and Juliet", "What's in a name? That which we call 
a rose by any other name would smell as sweet". - (Act II, Scene II).</dd>
</dt>

html11 html শেখার সহজ উপায় : অধ্যায় ৪অনুশীলন করুন :-
আজকের অলোচিত বিষয় গুলো সম্পর্কে ধারনা পরিস্কার করতে পাশের প্রদত্ত ছবিতে দেওয়া কোডগুলি নোডপ্যাডে লিখুন । লেখা শেষে নথিটিকে যেকোন নাম দিয়ে .html ফরম্যাট দিয়ে সংরক্ষণ করুন ।এবার সংরক্ষিত html নথিটিকে ক্লিক করে ব্রাউজারে খুলুন ।আমি এখানে notepad++ ব্যবহার করছি ।

বিশ্লেষণ:-
উপরের ছবিতে দেওয়া কোড গুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন ।
  • ছয় নং লাইন থেকে নয় নং লাইনে Font ট্যাগ ব্যবহৃত হয়েছে ।
  • ১০ নং লাইন থেকে ১৬ নং লাইনে ব্যবহৃত হয়েছে ordered list ট্যাগ ।
  • ১৭ নং লাইন থেকে ২২ নং লাইনে ব্যবহৃত হয়েছে unordered list ট্যাগ ।
  • ২৩ নং লাইন থেকে ২৮ নং লাইনে ব্যবহৃত হয়েছে Definition list ট্যাগ ।
html1output html শেখার সহজ উপায় : অধ্যায় ৪
ব্রাউজারে আউটপুট
আজ এ-পর্যন্তই ।ধন্যবাদ ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

*** html শেখার উপায় :: অধ্যায় ৩

googleb74d12566e23c282
আজকে আমি আলোচনা করব html-এর Comments, Heading এবং Formatting Tags নিয়ে ।বিষয় গুলো খুবই মজার একটু ভালভাবে দেখলেই বুঝতে পারবেন ।

HTML Comments:-

Comments বা মন্তব্য হল সেইসব বাক্য বা বাক্যাংশ যা html পেজের গঠনগত কোন কাজে ব্যবহৃত হয় না কিন্তু সাহায্য করে ।কমান্ট শুরু হয় “<!–”-এই চিহ্ন দিয়ে আর শেষ হয় “–>”-চিহ্ন দিয়ে অর্থাত্‍ “<!–” চিহ্ন আর “–>” চিহ্নের মাঝে থাকে মন্তব্যটি ।
**প্রয়োজোনীয়তা
  • কোন  কাজ, কোড বা স্কীপটকে পেজের মধ্যে মনে রাখার জন্য ।
  • পেজের মধ্যে কোন কাজকে অসম্পূর্ণ রাখে পরে শেষ করার জন্য ।

**HTML Heading:-

ওয়েব পেজের কোন বাক্য বা বাক্যাংশকে শিরোণাম হিসেবে ব্যবহার করার জন্য এই HTML Heading ট্যাগটি ব্যবহৃত হয় ।ওয়ার্ডপ্রেসের যেকোন ব্লগে পোস্ট করার সময় এই ট্যাগটি সরাসরি ব্যবহার করা যায় ।HTML Heading-এর প্রধান কাজ হল পেজ মধ্যস্হ কোন বাক্য বা বাক্যাংশকে মোটা(bold) এবং আকারে বড় করা । এই ট্যাগটি শুরু হয় “<h1>”-এই চিহ্ন দিয়ে আর শেষ হয় “</h1>” -চিহ্ন দিয়ে ।ট্যাগটির h-এর পাশের 1-এর মান 1 থেকে 6 পর্যন্ত হতে পারে ।অর্থাত্‍ <h1> …… </h1>,<h2> …… </h2>,<h3>……</h3>,<h4>……</h4>,<h5>……</h5>,<h6>……</h6> এই রূপে হয়ে থাকে ।এর মধ্যে <h1>-এর লেখার আকার সবচেয়ে বড় আর সবচেয়ে ছোট হল <h6>-এর লেখার আকার ।

***HTML Formatting Tags:-

ওয়েব পেজের প্রদর্শিত অক্ষরের গঠন কেমন হবে তা নিয়ন্ত্রন করা যাবে Formatting ট্যাগের মাধ্যমে ।Formatting-ট্যাগের সংখ্যা অনেক এখানে সচারাচর ব্যবহৃত হয় এমন কয়েকটি ট্যাগকে তুলে ধরলাম ।

<b> Tag:-
স্বাভাবিক আকারের কিন্তু bold বা মোটা হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <b> …. </b> -এই ধরনের হয় ।
<i> Tag:-
ইটালিক্স বা বাকানো হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <i> …. </i> -এই ধরনের হয় ।
<em> Tag:-
ট্যাগটির ব্যবহার  <i> Tag-এর মত ।এর গঠন <em> …. </em> -এই ধরনের হয় ।
<u> Tag:-
Underline বা নিম্নরেখাযুক্ত হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <u> …. </u> -এই ধরনের হয় ।
<ins> Tag:-
ট্যাগটির ব্যবহার  <u> Tag-এর মত ।এর গঠন <ins> …. </ins> -এই ধরনের হয় ।
<del> Tag:-
Strikethrough বা মধ্যরেখাযুক্ত হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <del> …. </del> -এই ধরনের হয় ।
<sup> Tag:-
Superscript বা বাক্য উপরিস্হ (আর বাংলা পেলাম না) অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <sup> …. </sup> -এই ধরনের হয় ।
<sub> Tag:-
Subscript বা বাক্যনিম্নস্হ অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <sub> …. </sub> -এই ধরনের হয় ।
<kbd> Tag:-
Keyboard বা লেখনীয় যন্ত্র( typwriter)  সদৃশ লেখার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <kbd> …. </kbd> -এই ধরনের হয় ।
<tt> Tag:-
ট্যাগটির ব্যবহার  <kbd> Tag-এর মত ।এর গঠন <tt> …. </tt> -এই ধরনের হয় ।
<pre> Tag:-
ওয়েব পেজে যখন কোন বড় বাক্য লেখা হয় তখন শেষে এটি নিজে থেকে নতুন অনুচ্ছেদ তৈরি করে ।একে নিয়ন্ত্রন করা যায়  <pre> Tag দিয়ে ।এর গঠন <pre> …. </pre> -এই ধরনের হয় ।
<blink> Tag:-
blinking বা নেভা-জ্বলা অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <blink> …. </blink> -এই ধরনের হয় ।(আমার জানা মতে এটি Opera , Firefox কাজ করে)
<marquee> Tag:-
চলমান অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <marquee> …. </marquee> -এই ধরনের হয় ।
html311 html শেখার সহজ উপায় : অধ্যায় ৩অনুশীলন করুন :-
আজকের অলোচিত বিষয় গুলো সম্পর্কে ধারনা পরিস্কার করতে পাশের প্রদত্ত ছবিতে দেওয়া কোডগুলি নোডপ্যাডে লিখুন । লেখা শেষে নথিটিকে যেকোন নাম দিয়ে .html ফরম্যাট দিয়ে সংরক্ষণ  করুন ।এবার সংরক্ষিত html নথিটিকে ক্লিক করে ব্রাউজারে খুলুন ।আমি এখানে notepad++ ব্যবহার করছি ।
বিশ্লেষণ:-
উপরের ছবিতে দেওয়া কোড গুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন ।
  • ছয় নং লাইন থেকে দশ নং লাইনে Heading ট্যাগ ব্যবহৃত হয়েছে ।
  • ১১ নং ও ১২ নং লাইনে ব্যবহৃত হয়েছে Comments ট্যাগ ।
  • ১২ নং লাইনের Comments ট্যাগটি মুছে নথিটি আবার সেভ করে ব্রাউজারে খুলুন ।
  • ১৪ নং লাইনে ব্যবহৃত হয়েছে <b> ট্যাগ ।
  • ১৫ নং লাইনে ব্যবহৃত হয়েছে <i> এবং <em> ট্যাগ ।
  • ১৬ নং লাইনে ব্যবহৃত হয়েছে <u> এবং <ins> ট্যাগ ।
  • ১৭নং লাইনে ব্যবহৃত হয়েছে <del> ট্যাগ ।
  • ১৮নং লাইনে ব্যবহৃত হয়েছে <kbd> এবং <tt> ট্যাগ ।
  • ২০ নং আর ২১ নং লাইনে ব্যবহৃত হয়েছে <pre> ট্যাগ ।
  • ২২ নং আর ২৩ নং লাইনে ব্যবহৃত হয়েছে <sub> এবং <sup> ট্যাগ ।
  • ২৪ নং লাইনে ব্যবহৃত হয়েছে <blink> ট্যাগ ।
  • ২৫ নং লাইনে ব্যবহৃত হয়েছে <marquee> ট্যাগ ।
html3.1 html শেখার সহজ উপায় : অধ্যায় ৩
ব্রাউজারে আউটপুট
আজ এ-পর্যন্তই ।ধন্যবাদ ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

*** html শেখার উপায় : অধ্যায় ২


আজকে আমি আলোচনা করব Elements, Attributes,tag ইত্যাদি নিয়ে ।

***Elements বা উপাদান:-

HTML-এর Elements হল একটি ট্যাগের সম্পূর্ন অংশ যা কোন ট্যাগ দিয়ে শুরু হয় এবং শেষ হয় আর একটি ট্যাগ দিয়ে ।প্রশ্ন হল ট্যাগ কি ! ট্যাগ হল কিছু সংকেত যা ল্যাঙ্গুয়েজে ব্যবহৃত হয় ।আগের অধ্যায়ের উদাহরণে আপনারা  <html>,</html>,<body>,</body> …ইত্যাদি সংকেতগুলো ব্যবহার করেছেন ।এইগুলিই হল ট্যাগ ।ট্যাগের মূলত তিনটি অংশ যথা সূচনাকারী ট্যাগ,ধারণকারী ট্যাগ,সমাপ্তকরন ট্যাগ ।সূচনাকারী ট্যাগে সাধারনত “<>”-চিহ্ন থাকে, সমাপ্তকরন ট্যাগে থাকে “</>”-এই চিহ্ন আর ট্যাগের ধারণকারী অংশে থাকে HTML Elements ।
HTML Element-এর অবস্হানের ভিত্তিতে HTML Element-কে কয়েক ভাগে ভাগ করা যায় ।
<html> element:-
<html> element কোন HTML নথির সম্পূর্ন অংশকে প্রদর্শন করে ।<html> element ,<html> ট্যাগ দিয়ে শুরু হয় আর শেষ হয় </html> দিয়ে ।এটি <head>,<title>,<body>,<p> ইত্যাদি elements গুলিকে ধারণ করে ।
<head> element:-
<head> element ,<head> ট্যাগ দিয়ে শুরু হয় আর শেষ হয় </head> দিয়ে। <head> element এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট <head> element-এর মাধ্যমে প্রকাশ করতে পারি ।
<title> element:-
<title> element ,<title> ট্যাগ দিয়ে শুরু হয় আর শেষ হয় </title> দিয়ে। <head> এলিমেন্ট এর মাঝে <title> এলিমেন্ট রাখতে হয় ।
<body> element:-
<body> element,<body> ট্যাগ দিয়ে শুরু হয় আর শেষ হয় </body> দিয়ে।<body> element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা <body> element ট্যাগ এর মধ্যে রাখতে হয়।
<p> element:-
<p> element,<p> ট্যাগ দিয়ে শুরু হয় আর শেষ হয় </p> দিয়ে।<body> এলিমেন্ট এর মাঝে <p> এলিমেন্ট থাকে । এটি ওয়েব পেজে নতুন একটি paragraph বা অনুচ্ছেদ তৈরি করে ।

Attributes:-

Attributes-এর অর্থ হল বৈশিষ্ট্য,ধর্ম বা গুন ।অর্থাত্‍ যা ট্যাগের বিভিন্ন বৈশিষ্ট্য বহন করে তাই হল Attributes । সাধারণ ভাবে বলতে গেলে ট্যাগের মধ্যে যে অংশে “=” (সমান চিহ্ন) থাকে সেটিই হল ঐ ট্যাগের Attributes ।

p2 html শেখার সহজ উপায় : অধ্যায় ২অনুশীলন করুন :-
আমি উপরে যে বিষয় গুলো তুলে ধরেছি তা এই উদাহরন থেকে ভাল ভাবে বোঝা সম্ভব ।পাশের ছবিতে যে কোডগুলি আছে তা নোটপ্যাডে লিখে নথিটিকে যে কোন নাম দিয়ে .html  ফরম্যাটে সংরক্ষন করুন ।এবার সংরক্ষিত .html  নথিটিকে ক্লিক করে ব্রাউজারে খুলুন ।
আলোচনা :-
উপরের কোডগুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন
  • <html> ট্যাগ দিয়ে <html> element  শুরু হয়েছে । মাঝে রয়েছে<head> ,<title>,<body>  element গুলি ।শেষ হয়েছে </html> ট্যাগ দিয়ে ।
  • <head> ট্যাগ দিয়ে <head> element শুরু হয়েছে । মাঝে রয়েছে <title>,<body>  element গুলি।এখানে <link rel=”stylesheet” type=”text/css” />  কোডটি ব্যবহৃত হয়েছে কোন css ফাইলকে যুক্ত করার জন্য ।যদিও আমি কোন লিংকে যুক্ত করিনি, এখানে link ট্যাগের rel ও type দুটি Attributes ব্যবহৃত হয়েছে ,এটি বোঝানোর জন্য এই কোডটি লিখিছি । আর <head> element শেষ হয়েছে </head> ট্যাগ দিয়ে ।
  • <title> ট্যাগ দিয়ে <title> element শুরু হয়েছে । মাঝে রয়েছে <title> element , মোর কুড়েঁঘর ।শেষ হয়েছে </title> দিয়ে ।
  • <body> element-এ রয়েছে <h1>,<h2>,<font> ট্যাগগুলি, এগুলি নিয়ে পরে আলোচনা করব ।শুধু খেয়াল করুন এখানে align বলে ১টি Attributes ব্যবহৃত হয়েছে ।
p211 html শেখার সহজ উপায় : অধ্যায় ২
বি.দ্র-কিছু কিছু ট্যাগ আছে যাদের সূচনাকারী ট্যাগ ও সমাপ্তকরন ট্যাগ একটি যেমন <br/>

আজ এ-পর্যন্তই ।ধন্যবাদ ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

***Html শেখার উপায় : অধ্যায় ১

<h1>Lesson 1 HTML</h1> googleb74d12566e23c282

*** HTML-এর সারসংক্ষেপ:-

HTML-এর সম্পূর্ণ রূপ হাইপার টেক্সট মার্ক আপ ল্যাঙ্গুয়েজ ( Hyper Text Markup Language) ।এটি একটি ফর্ম্যাট যাতে বিভিন্ন প্রকারের ফর্ম্যাটিং ও হাইপারলিংক ব্যবহার করা যায়। ইন্টারনেটে, তথা ওয়েবসাইটে এইচ টি এম এল সবচেয়ে বেশি ব্যবহৃত হয়। এই ফাইলের এক্সটেনশন .htm অথবা .html উভয়ই হতে পারে। এতে বিভিন্ন ট্যাগ ব্যবহার করে বিভিন্ন ফর্ম্যাটিং, অবজেক্ট ও লিংক প্রকাশ করা করা হয়।ওয়েব ডেভলোপিং শিখার হাতে-খরি এটিই । খুবই সহজ সরল একটা কোডিং পদ্ধতি ।বর্তমানে HTML5 বলে আরও একটি ল্যাঙ্গুয়েজ আছে । HTML5 মূলত HTML-এরই পরিবর্তিত রূপ । তবে অনেক কাজ আছে যেগুলি শুধু HTML-তেই হয়,HTML5-এ হয় নাlearn html১ Html শেখার সহজ উপায় : অধ্যায় ১
HTML শেখার প্রয়োজোনীয় উপকরণ:-


উপরের লেখাগুলি পড়তে পড়তে হাফিয়ে গেছেন তাই না ! আসুন HTML-কে আপনাদের কাছে একটু আকর্ষনীয় করে তুলি ।প্রস্তুত হোন আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য ।

  • প্রথমে নোটপ্যাড খুলুন । তারপর পাশের ছবিতে  দেওয়া কোডগুলি টাইপ করুন ।
  • nopad Html শেখার সহজ উপায় : অধ্যায় ১
    nopad11 Html শেখার সহজ উপায় : অধ্যায় ১লেখা শেষ হলে নথিটিকে খুশিমত নাম দিয়ে .html ফরম্যাটে সংরক্ষন করুন ।
    এরপর এই html নথিটিকে ক্লিক করুন আর ব্রাউজারে আপনার তৈরিকৃত প্রথম ওয়েব পেজটিকে দেখুন ।nopad2 Html শেখার সহজ উপায় : অধ্যায় ১
    উপরের কোডগুলির প্রাথমিক বিশ্লেষণ:-
    • লক্ষ্য করুন উপরের কোডটি শুরু হয়েছে ট্যাগ দিয়ে<html> এবং শেষ হয়েছে</html>  ট্যাগ দিয়ে ।অর্থাত্‍ যে কোন HTML ফাইল অবশ্যই<html>  ট্যাগ দিয়ে শুরু এবং শেষ হয় </html>ট্যাগ দিয়ে ।
    • শুধু তাই নয় HTML-এর যে কোন ট্যাগ শুরু করতে <> চিহ্ন এবং শেষ করতে </>  চিহ্ন ব্যবহৃত হয় । যেমন:- <body> … </body>
    প্রাথমিক HTML পেজের গঠন:-
    নিচে একটি HTML পেজের গঠন দেখান হল ।
    <html>
    <head>
    <title>আপনার ওয়েবসাইটের নাম যেমন Tunerpage</title>
    </head>
    <body>
    <h2>আমি HTML শিখতে চলেছি ।কি মজা !</h2>
    </body>
    </html>
    বিশ্লেষণ:-
    • <head>…</head> এর ভেতরে সাধারনত বিভিন্ন স্কিপট যেমন javascript,css ইত্যাদি থাকে ।
    • <title>…<title> এর ভেতরে  আপনার ওয়েবসাইটের নাম থাকে ।যেমন টিউনার পেজ খুললে ব্রাউজারের উপরে দেখতে পারবেন ” Tunerpage । The Ultimate Path of Bangla Technology ” এটি মূলত এই অংশে লেখা ।
    • <body> … </body> এর ভেতরে থাকে আপনার পেজের যাবতীয় তথ্য ।




    Thanks।

    বৃহস্পতিবার, ২৬ জুলাই, ২০১২

    Wapsite বা Blog এর জন্য অতি প্রয়োজনীয় একটি সফট্ওয়ার

    googleb74d12566e23c282
    বন্ধুরা আপনারা সকলে কেমন আছেন । আশা করি ভাল আছেন ।

    আমাদের অনেকেরই বিভিন্ন ধরনের পার্সোনাল Wapsite বা Blog রয়েছে । এটাকে সুন্দর করে সাজানোর জন্য আমরা কত কী করি । একটি Wapsite বা Blog এর মূল সৌন্দর্য তার টাইটেল । কিন্তু আমরা টাইটেলের আকৃতি কেমন করবো বা কেমন করে ডিজাইন করবো বা User কে কীভাবে আকৃষ্ট করবো তা বুঝে উঠতে পারি না ।
     আপনার Wapsite বা Blog এর জন্য অতি প্রয়োজনীয় একটি সফট্ওয়ার
    আজ আমি আপনাদের এই সমস্যার সমাধান দেব । সমাধানটি হল আমি আপনাদের একটি জটিল সফট্ওয়ার উপহার দেব যেটির মাধ্যমে আপনি আপনার নিজের ইচ্ছামত আপনার Wapsite বা Blog এর জন্য টাইটেল তৈরী করতে পারবেন । আপনাকে আর কষ্ট করে টাইটেল খুজতে হবে না । এই সফট্ওয়ারটিতে টাইটেলের জন্য অনেক ডিজাইন দেয়া আছে । আপনি শুধু সফট্ওয়ারটি ডাউনলোড করে ইনস্টল করবেন এবং সেখান আপনার পছন্দের ডিজাইনটি সিলেক্ট করে নিজের ইচ্ছামত ইডিট করবেন ।

    সফট্ওয়ারটি ডাউনলোড করতে এখানে ক্লিক করুন ।

    ব্লগে ভিজিটর পেতে আপনার করনীয় কাজগুলো

    googleb74d12566e23c282
    এদানিং সবাই নিজের একটা ব্লগ বা ওয়েবসাইট বানাছে। কেউ শখের বসে , কেউ বা টাকা ইনকামের জন্য । কিন্তু অনেকের মধ্যে একটা ভুল ধারন আছে , তারা মনে করে ব্লগ বানালেই মনে হয় হাজার হাজার ভিজিট এসে যাবে ! কেউ কেউ নিজে নিজে লিখতেছে আবার কেউ কেউ বিভিন্ন জায়গা হতে কপি-পেস্ট করে ব্লগ ভরিয়ে দিচ্ছে , কিন্তু ব্লগ তেমন ভিজিটর পাচ্ছে না। ফলাফল কয় একদিন পর ব্লগিং থেকে বিদায় নিচ্ছে। ঝড়ে যাচ্ছে কিছু ভাল মেধা , যাদের কাছ থেকে হয়ত বা আমরা আর নতুন কিছু পেতে পারতাম। তবে আমার আজকের এই পোস্ট সেই সব ব্লগারদের জন্য যারা নিজে নিজে ব্লগ লিখতেছে কোন কপি-পেস্ট করতেছে না এবং অনেক শ্রম দিচ্ছেন।

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

    সুন্দর একটা ব্লগের নাম নির্বাচন করুন

    একটা ব্লগ বা ওয়েবসাইটের ডিজাইন ভাল হলে হয় না এর ডোমেইন নাম অনেক বড় একটা ব্যপার। আপনার প্রথমে একটা ভাল ডোমেইন নাম সংগ্রহ করতে হবে। আপনি আগে আপনার ডোমেইন নেম টা নির্বাচন করুন এরপর আপনার ডোমেইন নেম চেক করে দেখুন আছে কি না। যদি থাকে আপনি এটা ইন্টারনেট থেকে কিনতে পারবেন । অনলাইন এ ডোমেইন নেম রেজিস্ট্রেশন করার কয় একটা পপুলার সাইট হল
    এগুলো থেকে ডোমেইন নেম রেজিস্ট্রেশন করতে আপনার খরজ হবে ৭-১০ ডলারের মত যা বাংলাদেশি টাকায় প্রায় ৬০০-৭০০ টাকা । এবং প্রতি বছর এর রেনু ফি ৭-১০ ডলার অর্থাৎ আপনার প্রতি বছর ব্যয় হচ্ছে প্রায় ৭০০ টাকা । খূব একটা বেশি না । আর আপনি অনলাইনে এই ডোমেইন নেম কিনতে আপনাকে পেপাল বা ভিসা কার্ড ,মার্স্টার কার্ড ব্যবহার করতে হবে। এছাড়া এ ব্যবস্থা না থাকলে আপনি বাংলাদেশী কোম্পানি গুলো হতে আপনি বাংলাদেশী টাকায় ডোমেইন নেম রেজিস্ট্রেশন করতে পারবেন ।

    এবার আমি ডোমেইন নেম নেয়ার সময় যে দিক গুলোর কথা আপনার খেয়াল রাখতে হবে তাহল
    • সবচেয়ে সহজ নামে ডোমেইন নেম নির্বাচন করুন যাতে আপনার ভিজিটরা সহজে আপনার ডোমেইন নেম টা মনে রাখতে পারে ।
    • যেমনwww.bdtutorial24.com
    • আপনার ডোমেইন নেম যাতে কোন বড় মানের ওয়েবসাইটের [www.google.com ,www.yahoo.com] সাথে মিলে না যায় । 
    • যেমনwww.bdyahoo24.com , www.bdgoogle24.com ইত্যাদি। এতে আপনার ডোমেইন নেম সমস্যা হতে পারে এবং আপনার নামে বাতিল হতে পারে ।তাই এ বিষয় টা মনে রাখবেন ।
    • ডোমেইন নেম বড় হলে 
    • যেমন www.fahimrezabadhon.com এটা মনে রাখা কঠিন হতে পারে , তাই এই নামের মাঝে আপনি ডেশ [-] ব্যবহার করতে পারেন 
    • যেমন www.fahim-reza-badhon.com ।
    • ডোমেইন নেম বড় করা হতে বিরত থাকুন । যেমনwww.thelongestlistofthelongeststuffatthelongestdomainnameatlonglast.com

    ব্লগের জন্য ভাল একটা লোগো ডিজাইন করুন

    ব্লগ সুন্দর কাজ করলেন কিন্তু একটা ভাল লোগো নাই জিনিস্ টা কেমন হল বলুন তো? লোগো আপনার সাইটের নাম এর বৈশিস্ট বহন করে! লোগো দেখে যেন বুঝা যায় এটা অমুখ ভাই/বোনের ব্লগ বা ওয়েব সাইট, তাই না। আপনি নিজে যদি লোগো ডিজাইন না জানেন কিছু পয়সা খরজ করেন না কেন? এখানে তো একবারেই ইনভেস্ট করবেন কিন্তু এর প্রফিট সারা জীবন পাবেন। তাই একটা ভাল লোগো ডিজাইন করুন এতে আপনার সাইটের কিছু টা হলেও গ্রহন যোগ্যতা বাড়বে।

    নিয়মিত পোস্ট দিন

    খুব ধুম ধাম ব্লগ ডিজাইন করলেন কিন্তু আপনি আপনার ব্লগে নিয়মিত না তাহলে আপনার পাঠকরা কেন নিয়মিত হবে? ব্লগ এর প্রান হচ্ছে পাঠক ও পোস্ট । আপনার ব্লগে যত মানসম্পন পোস্ট দিবে সেরকম হারে পাঠক পাবেন। আপনি ব্লগে নিয়মিত পোস্ট করে দেখুনতো পাঠক কেমন হারে বাড়তে থাকে।এভাবে দেখবেন একটা সময় আপনার ব্লগে এমন একটা পাঠকগোষ্টী সৃস্টি হয়েছে যারা নিয়মিত আপনার ব্লগ পড়তেছে এবং মন্তব্য করতেছে। তাই আপনার ব্লগে আপনি একটু নিয়মিত হবার চেস্টা করুন।

    বিজ্ঞাপন দিন

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

    অন্যের ব্লগে মন্তব্য করুন এবং মন্তব্যের জবাব দিন

    আপনি অন্য ব্লগে মন্তব্য করুন এবং সেখানে আপনার আইডি হিসাবে আপনার সাইটের নাম দিন। এছাড়া আপনি বিভিন্ন ফোরামের সাথে থাকুন , সেখানে যে সাক্ষর দেওয়ার স্থানে আপনি আপনার লোগো সাথে আপনার সাইটের লিঙ্ক দিন দেখবেন এখান থেকে আপনি ভাল কিছু ভিজিটর পাবে এবং এতে আপনার পেজ র‍্যাংক একটু উন্নতি হবে।

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

    ইউনিক আর্টিকেল লিখুন

    সব সময় ইউনিক পোস্ট দেওয়ার চেস্টা করবেন অর্থাৎ আপনি যে পোস্ট করবেন অন্য ব্লগ যেন এই পোস্ট না থাকে । চেস্টা করবেন সাম্প্রতিক ঘোটে যাওয়া বিষয় গুলো নিয়ে লিখতে, এতে ভাল ভিজিটর পাওয়া যায়। সময় এমন টপিক নির্বাচন করুন যা পাঠকরা চায় , পাঠকদের চাহিদার কথা জানার চেস্টা করুন এবং সেই রকমের পোস্ট দিন।

    ভাল ছবি ব্যবহার করুন

    আপনি যে পোস্ট গুলো করবেন তাতে প্রয়োজনীয় ছবি বা স্কিন শর্ট অবশ্যই যুক্ত করবেন, কারন এই ছবি গুলো দেখলে ভিজিটর খুব সহজে সব কিছু বুঝে এবং আপনি এই ছবি গুলো থেকে অনেক ভিজিটর পেতে পারেন। আপনি যদি ওয়ার্ডপ্রেস ইউজার হয়ে থাকেন তবে আপনি এই ইমেজ সাইটম্যাপ প্লাগইন ব্যবহার করতে পারেন। এটি তৈরি করেছেন আমার প্রিয় একজন ব্লগার Amit Agarwal । এই প্লাগিন নিয়ে আর জানতে এই পেজ টি দেখুন।

    ই-মেইলে সাক্ষর ব্যবহার করুন

    আপনি আপনার ইমেইল এ সাক্ষর ব্যবহার করুন।আপনার সাক্ষর হিসাবে আপনার ব্লগের লোগো এবং তাতে আপনার লিঙ্ক দিয়ে দিন। আপনি বিভিন্ন সময় অনেকেই মেইল করে থাকেন , এতে আপনার ব্লগের লিঙ্ক বিভিন্ন যায়গায় চলে যাবে এবং এ থেকে আপনি কিছু ভিজিটর পেতে পারেন।

    নিউজলেটার সিস্টেম চালু রাখুন

    আপনি আপনার ব্লগে নিউজলেটার সার্ভিস চালু রাখুন। কারন সব ভিজিটরের পক্ষে প্রতিদিন আপনার ব্লগ আসা সম্ভব না , তাই তাদের সুবিধার জন্য নিউজলেটার সার্ভিস চালু রাখুন। আর আপনাদের এই সুবিধা দিচ্ছে FeedBurner ।

    ব্লগ কমিউনিটির সাথে যুক্ত থাকুন

    আপনি আপনার ব্লগকে ব্লগ কমিউনিটি তে সাবমিট করুন। কারন এথেকে আপনি অনেক পরিমান ভিজিটর পেতে পারেন। জনপ্রিয় কিছু ব্লগ কমিউনিটি হলঃ

    • www.Blogged.com
    • www.Fuelmyblog.com
    • www.Mybloglog.com
    • www.Blogcatalog.com
    • www.Networkedblos.com
    আপনি ব্লগ কমিউনিটি গুলোতে নিবন্ধন করে আপনার ব্লগ লিঙ্ক সাবমিট করুন, দেখবেন এখান হতে অনেক ভাল পরিমা ভিজিটর পাবেন।

    ফেসবুকে শেয়ার করার ব্যবস্থা রাখুন

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

    টুইটারে শেয়ার করার ব্যবস্থা রাখুন

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

    অপ্রয়োজনীয় পোস্ট করা থেকে বিরত থাকুন

    অনেকে দেখায় যায় তারা যা পায় তা নিয়ে লিখে , কিন্তু আপনাকে চিন্তা করতে হবে বর্তমান পাঠকরা কি চায় ! আপনার ব্লগে সব সময় চেস্টা করবেন অপ্রয়োজনীয় পোস্ট না করা। কারন এথেকে আপনি অনেক পাঠক হারাতে পারেন। আপনি যদি সঠিক ভাবে পাঠকদের চাহিদা মিটাতে না পারেন তাহলে একসময় আপনার ব্লগ পাঠক শূন্য হয়ে যাবে। তাই অপ্রয়োজনীয় পোস্ট করা বন্ধ করে কম হলেও কাজের পোস্ট করুন।

    সফল ব্লগারদের ব্লগ পড়ুন

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

    সহজ শব্দ বা বাক্য ব্যবহার করুন

    শব্দ বা বাক্য একটা পোস্ট অনেক বড় জিনিস। আপনি যদি এমন শব্দ ব্যবহার করেন যা আপনার পাঠকরা বুঝতে না পারে তাহলে সেই পোস্ট করার কোন মানে হয়। কোন ভাল আর্টিকেল লেখার সময় মনে রাখবেন যত সহজ ভাষায় আপনি আপনার পাঠকে বুঝাতে পারেন। অঝথা কঠিন কোন বাক্য বা শব্দ ব্যবহার করবেন না। আশা করি এই ব্যপার টা মাথায় রাখবেন।


    প্রতিযোগিতার আয়োজন করুন

    ব্লগকে চাংগা রাখার জন্য প্রতিযোগিতার আয়োজন করুন। সেখানে পুরস্কারের ব্যবস্থা রাখুন। পাঠকদের আকৃষ্ট করার জন্য ভাল ভাল সুবিধা রাখুন। তাদের সকল বিষয় সাহায্য করুন।

    অথিতি ব্লগার হিসাবে পোস্ট দিন

    ভাল পাঠক পাবার আর একটা উপায় হল অন্য কোন জনপ্রিয় ব্লগে অথিতি লেখক হিসাবে লেখা। এতে সেই ব্লগ থেকে আপনি ভাল পাঠক পেতে পারেন। কারন আপনি যখন অন্য কোন ব্লগে আপনি ভাল কোন লেখা দিবেন তখন তারা আপনার আর লেখা দেখতে আপনার ব্লগ আসবে। তাই অথিতি হিসাবে ভাল মানের লেখা জমা দিন।

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

    ব্লগে যুক্ত করুন Skype কল বাটন

    googleb74d12566e23c282

    আপনাদের জন্য নিয়ে আসলাম মারত্তক একটি জিনিস…। এর মাধ্যমে আপনার ব্লগ বা ওয়েবসাইট থেকে যে কেউ আপনাকে সরাসরি skype থেকে কল দিতে পারবে। (তার PC তে অবশ্যই স্ক্যাইপ সেটাপ দেয়া থাকতে হবে)
    আপনাকে এর জন্য যা করতে হবে, প্রথমে এই লিঙ্ক এ প্রবেশ করুন ► Click Me
    এর পর নিচের ফটোর মত একটা পেজ আসবে ↓

    s1 আপনার ব্লগে যুক্ত করুন Skype কল বাটন
    এখন 1 আপনার স্কাইপ নাম প্রবেশ করান…। expl> Jonaid66
    এবার 2 এখানে আপনার ইচ্ছা মত বাটোন সিলেক্ট করুন ,
    এরপর 3 এখানে কিছু সিলেক্ট না করাই উত্তম , এটা হচ্ছে আপনি কোন মোড এ আছেন এটা দেখাবে, এটা সিলেক্ট করলে একটা সমস্যা আছে , সবসময় Offline মোড দেখাবে…।।
    এখন নিচে লিক্ষ করে দেখেন HTML কোড আসছে এবার কোড টি কপি করুন ↓
    s2 আপনার ব্লগে যুক্ত করুন Skype কল বাটন
    এরপর আপনার ব্লগে লগইন করুন , এইবার  লেআউট >  একটি গেজেট যুক্ত করুন
    > HTML/JavaScripT এ যান এরপর আগের কপি করা কোড টি এখানে পেস্ট করে সেভ করুন
    কাজ হয়ে গেল…………নিচের চিত্র থেকে সাহায্য নিতে পারেন………………………………………………
    ভাল লাগলে  আমার ব্লগ টি থেকে একটু ঘুরে আসুন > CLICK PLZ

    ওয়াপমাস্টারদের জন্য কিছু জনপ্রিয় প্রিমিয়াম স্ক্রিপ্ট এর কালেকশন

    googleb74d12566e23c282
    সবাইকে শুভেচ্ছা জানিয়ে শুরু করছি । আশা করছি সকলে ভালো আছেন ।
    আজ আপনাদের জন্য কিছু প্রিমিয়াম স্ক্রিপ্ট এর কালেকশন নিয়ে এলাম ।
    স্ক্রিপ্ট কি জিনিস তা নিয়ে কিছু বলার প্রয়োজন আছে বলে আমার মনে নেই ।
    কথা না বাড়িয়ে চলুন সরাসরি মূল বিষয়ে যায় । আমি এখন যে প্রিমিয়াম স্ক্রিপ্টগুলো শেয়ার করতেছি তার সবগুলো Php স্ক্রিপ্ট এবং এই স্ক্রিপ্টগুলোর ওরজিনাল দাম $১০০ এর বেশী ।
    তাহলে চলুন স্ক্রিপ্টগুলো ডাউনলোড করে নিই ।
    [বিদ্রঃ লগিন না করে ফাইল ডাউনলোড করা যায় না]
    ১। Mediafire..CoM Script[DOWNLOAD]
    .
    .
    ২। Myspace..CoM Script[DOWNLOAD]
    .
    .
    ৩। Blogger..CoM Script[DOWNLOAD]
    .
    .
    ৪। Digg..CoM Script[DOWNLOAD]
    .
    .
    ৫। Co.Cc Hosting Script[DOWNLOAD]
    .
    .
    ৬। Papal Donation Script[DOWNLOAD]
    .
    .
    ৭। Seo Stats Script[DOWNLOAD]
    .
    .
    ৮। Dating Script[DOWNLOAD]
    .
    .
    ৯। Picture Gallery Maker Script[DOWNLOAD]
    .
    .
    ১০। Rapidshare Premium File Download Script[DOWNLOAD]
    .
    .
    ১১। X7 Chat Script[DOWNLOAD]
    .
    .
    ১২। Adswap..CoM Script[DOWNLOAD]
    .
    .
    ১৩। Z3host.tk[DOWNLOAD]
    .
    .
    ১৪। File Sharing Script[DODNLOAD]
    এই স্ক্রিপ্টগুলো আপনাদের ভালো লাগলে আরও আকর্ষনীয় স্ক্রিপ্ট এর কালেকশন নিয়ে টিউন করব ।
    .
    .
    এই স্ক্রিপ্টগুলো ছাড়া যদি আপনার অন্য কোন স্ক্রিপ্ট এর প্রয়োজন হয় তাহলে [এখানে] ভিজিট করে আপনার প্রয়োজনীয় স্ক্রিপ্ট এর নাম অথবা যে সাইটে ইনস্টল করা আছে সেই সাইটের নাম লিখে একটি পোষ্ট করুন ।
    পোষ্টটি কেমন লাগল তা অবশ্যই জানাবেন ।

    ***লিঙ্কসমূহ আপনার ব্লগে এড করুন , ড্রপ ডাউন মেনুর সাহায্যে .

    googleb74d12566e23c282
    আজ আপনাদের সাথে শেয়ার করবো একটি ড্রপ ডাউন লিঙ্ক উইডগেট ।যা আপনার ব্লগ/ওয়েব
    সাইটে লাগাতে পারবেন এবং যেখানে বাংলাদেশের সব প্রয়োজনীয় সাইটের লিঙ্ক
    দেয়া আছে ।। এবং সেগুলো আপনার ওয়েবপেজ বিদ্যমান রেখে নিউ টাবে অপেন হবে।।
    এতে আপনি আপনার ভিসিটর হারাবেন না ।।

    নিচে এর একটি ডেমো ফটো দেয়া হলঃ
    100 প্রয়োজনীয় লিঙ্কসমূহ আপনার ব্লগে এড করুন , ড্রপ ডাউন মেনুর সাহায্যে ..


    এবার এটা যেভাবে করতে হবে ঃ  
    ১.প্রথমে আপনার ব্লগ বা সাইটে লগ ইন করুন
    ২.এবার ড্যাসবোর্ডের(DeshBoard) লেআউট টাব সিলেক্ট করুন ।।                                 101 প্রয়োজনীয় লিঙ্কসমূহ আপনার ব্লগে এড করুন , ড্রপ ডাউন মেনুর সাহায্যে ..
    ৩.এড এ গেজেট(Add a Gadget) / একটি গেজেট যুক্ত করুন এ ক্লীক করুন।।
    102 প্রয়োজনীয় লিঙ্কসমূহ আপনার ব্লগে এড করুন , ড্রপ ডাউন মেনুর সাহায্যে ..
    ৪. এড এ গেজেট(Add a Gadget) অপেন হলে Html /JavaScript সিলেক্ট করুনঃ
    222222222 প্রয়োজনীয় লিঙ্কসমূহ আপনার ব্লগে এড করুন , ড্রপ ডাউন মেনুর সাহায্যে ..
    ৬.এবার Html/JavaScript বক্সে নিচের লিঙ্ক এ গিয়ে কোড টুকু কপি করে পেস্ট করুনঃ

    লিঙ্ক > ক্লিক করুন  (TP তে কিভাবে html কোড দিতে হয় , আমাকে কি কেউ এই বিষয়ে হেল্প করতে পারবেন)
    ৬.এবার Save বাটনে ক্লিক করুন ।। এবার আপনার সাইটটি দেখুন ।।

    ভাল লাগলে কমেন্ট করতে ভুলবেন না ।।

    ### .htaccess এর ব্যাবহার অথবা ট্রিক্স। [সিকুরিটি/এসইও]

    .htaccess অথবা হাইপার টেক্সট একসেস কনফিগারেশন ফাইল এটা একটি শক্তিশালী টুল এটির বিশেষত্ব হচ্ছে এটা সহজেই ব্যাবহার এবং এডিট করা যায়। আজকে আমরা এই শক্তিশালী টুলটির কিছু ব্যাবহার দেখব।

     ♦. হটলিঙ্ক বন্ধ করুন

    আপনার সাইটে আপলোডকৃত ইমেজ অন্য কেউ কি তার সাইটে ব্যাবহার করে আপনার সাইটের ব্যান্ডউইথ নিয়ে নিচ্ছে?? তাহলে আপনার .htaccess ফাইলে নিচের কোডগুলো যোগ করে দিন।
    Options +FollowSymlinks
    #Protect against hotlinking
    RewriteEngine On
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://(www.)?domainname.com/ [nc]
    RewriteRule .*.(gif|jpg|png)$ http://domainname.
     com/img/stop_stealing_bandwidth.gif[nc]

    ♦বিভিন্ন প্রকার খারাপ বট(Bot) থেকে সাইটকে বাচান

    অনেক হ্যাকিং টুল যখন সাইটে স্ক্যান,ক্রুলিং ইত্যাদি করে তখন সাধারনত যেসব বট ব্যাবহার করা হয় সেগুলোকে ব্লক করার জন্য
    #Block bad bots
    SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
    SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
    SetEnvIfNoCase user-Agent ^Microsoft.URL [NC,OR]
    SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
    SetEnvIfNoCase user-Agent ^Offline.Explorer [NC,OR]
    SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit [NC,OR]
    SetEnvIfNoCase user-Agent ^Zeus [NC]
    
    Order Allow,Deny
    Allow from all
    Deny from env=bad_bot

    ♦নিদৃস্ট আইপিকে ব্লক/ব্যান করুন

    যখন দেখবন একই নিদৃস্ট আইপি থেকে স্পামিং,ব্রুট ফোর্স, অথবা অন্য কোন কিছু করার চেস্টা করছে তখন সেই আইপির ব্যাবহারকারিকে ব্লক করে দিতে পারেন।
    allow from all
    deny from 145.186.14.122
    deny from 124.15

    এখানে 145.186.14.122 এর যায়গায় সেই আইপিটি বসান এবং ব্লক করে দিন। এভাবে আপনার যতগুলো ইচ্ছাততগুলো আইপিকে ব্যান করতে পারবেন। icon wink ১০টি .htaccess এর ব্যাবহার অথবা ট্রিক্স। [সিকুরিটি/এসইও]

    ♦৪০৪/৪০৩/৫০০/৪০১ এরর পেজ তৈরি করুন

    প্রায় বেশীরভাগ ওয়ার্ডপ্রেস থীমেই ৪০৪ এরর পেজ থাকে, আবার কোনটাতে থাকলেও কাজ করে না। এখন আপনি নিজেই একটা পেজ এ রিডারেক্ট করে নিতে পারবেন ৪০৪/৪০৩/৪০১/৫০০ এরর গুল।
    ErrorDocument 401 /error/401.php
    ErrorDocument 403 /error/403.php
    ErrorDocument 404 /error/404.php
    ErrorDocument 500 /error/500.php
    খেয়াল করুন, এখানে /error নামে একটা ডাইরেক্টিতে 401.php নামে একটা ফাইল আছে। সুতারাং এটি রিপ্লেস করে আপনার তৈরি করা ৪০৪ পেজটি দিয়ে দিন।

    ♦ নিদৃষ্ট কোন ফাইলে প্রটেক্ট করুন

    নিচের .htaccess টির মাধম্যে আপনি আপনার ইচ্ছামত কোন ফাইলকে পাবলিক একসেস থেকে রক্ষ্যা করতে পারবেন।
    #Protect the .htaccess File
    
    order allow,deny
    deny from all
    এতে কেউ .htaccess ফাইলটিকে ওপেন করলে ৪০৩ফরবিডেন আসবে। আমি এখানে .htaccess দিয়েই দেখালাম, কারন এটা প্রটেক্ট করলে সিকুউরিটি ইম্প্রভ হয়।

    ♦ কোন ফাইল অথবা ফোল্ডারে পাসওয়ার্ড দিন

    কোন ডাইরেক্টরিতে অথবা ফাইলে পাসওয়ার্ড দিতে চাইলে নিচের কোডটি খেয়াল করুন।
    password-protect a file
    
    AuthType Basic
    AuthName "Prompt"
    AuthUserFile /home/path/.htpasswd
    Require valid-user
    
    # password-protect a directory
    resides
    AuthType basic
    AuthName "This directory is protected"
    AuthUserFile /home/path/.htpasswd
    AuthGroupFile /dev/null
    Require valid-user

    ♦ gZip এনাবল করে সাইট ফাস্ট করুন

    এটির মাধমে সাইটকে দ্রুত করতে পারবে।
    AddOutputFilterByType DEFLATE text/html text/plain  
    text/xml application/xml application/xhtml+xml  
    text/javascript text/css application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html

    ♦ এ্যাড্রেস থেকে ‘ক্যাটাগরি’ রিমুভ

    ধরি, আপনার সাইটে ‘downloads’ নামে ক্যাটাগরি আছে। এখন সাধারনত কেউ এইভাবে URL লিখলে ওইক্যাটাগরির সকল পোস্ট দেখাযাবেঃ http://YourSite.com/catagory/downloads
    এখন আপনি চাচ্ছেন লিঙ্কের ভিতর থেকে /catagory/ টুকু বাদ দিয়ে YourSite.com/downloads   এইরকম সংক্ষিপ্ত করতে। এতে ইউজার সহজেই তার পছন্দের ক্যাটাগরিতে ভিসিট করতে পারবে। এবং লিঙ্কও ছোট হবে। তাহলে নিচের কোডটি দেখুনঃ

    RewriteRule ^category/(.+)$ http://www.YourSite.com/$1 [R=301,L]

    ♦ ওয়ার্ডপ্রেস এর ডিফল্ট ফিড থেকে ফিডবার্নারে পরিবর্তন

    ওয়ার্ডপ্রেস এর ডিফল্ট যে RSS ফিডটি থাকে সেটা আপনার ভালো লাগে না?? তার থেকে FeedBurner ভাল লাগে? FeedBurner ভালো লাগলে নিচের কোডটি আপনার জন্য
    #Redirect wordpress content feeds to feedburner
    
    RewriteEngine on
    RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
    RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
    RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds. 
    feedburner.com/yourfeed [R=302,NC,L]

    ♦ লিঙ্ক থেকে এক্সটেনশন মুছে ফেলুন। [SEO]

    সাইটের ঠিকানার শেষে যদি ফাইলের এক্সটেনশন যোগ হয় সেটা দেখতে একটু কেমন কেমন দেখায়! যেমনঃ http://yoursite.com/YourPage.php  শেষের .php কে রিমুভ করে শুধু http://Yoursite.com/YourPage এই রকম করাতে পারেন ।

    RewriteRule ^(([^/]+/)*[^.]+)$ /$1.php [L]

    ***আপনার ব্লগ এ বাংলা নিউজ পেপার যুক্ত করুন Widget এর মাধ্যমে!!!

    আপনার ব্লগ এ বাংলা নিউজ পেপার যুক্ত করতে পারেন খুব সহজে।
    banglanews1 আপনার ব্লগ (blogger) এ বাংলা নিউজ পেপার যুক্ত করুন Widget এর মাধ্যমে
    এর জন্য  নিন্মে দেয়া কোড টি কপি করুন
    <iframe id=”myframe” src=”http://allbangladeshi.com/bangladesh.html” frameborder=”0″ height=”500px” width=”165px”>
    <p>Your browser does not support iframes.</p>
    </iframe><noscript>Get the <a href=”http://www.allbangladeshi.com/”>Bangla News Paper</a> bangla news <a href=”http://www.allbangladeshi.com/”>bangladesh news paper</a> at <a href=”http://www.allbangladeshi.com/”>bangladeshi news paper</a>allbangladeshi (<a href=”http://www.allbangladeshi.com/”>bangladesh</a>)</noscript>

    তারপর আপনার ব্লগার এ login করুন ।
    Layout > Add a gadget > HTML/JavaScript > এবং আপনার কোড কপি কৃত কোড টি এর উপর পেস্ট করুন । এবং সেভ করুন। ব্যস কাজ শেষ।
    allbangladeshi আপনার ব্লগ (blogger) এ বাংলা নিউজ পেপার যুক্ত করুন Widget এর মাধ্যমে

    আরো জানতে আমার সাইটে দেখতে পারেন,   bangla news

    অথবা আপনার WordPress সাইট হলে বাংলা নিউজ পেপার যুক্ত করতে পারেন  WordPress sidebar Plugins এর মাধ্যমে
    Plugin টি ডাউন লোড করতে নিচের ডাউনলোড লিংকে Click করুন,
    Plugin টি ডাউনলোড করতে  এখানে Click করুন
    কিভাবে ব্যবহার করবেন?
    1,    Download the plugin zip archive.
    2,    Extract it in your wp-content/plugins folder or upload via admin panel.
    3,    Browse to your plugins section and active the plugin.
    4,    Add the widget to your sidebar from Appearance->Widgets>Bangla News Paper> and configure the widget options.

    আরো জানতে  bangla news paper  সাইটে দেখতে পারেন

    ***কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন !!!

    বর্তমানে প্রচুর বাংলা ও ইংরেজি উভয় ধরনের ব্লগ বা সাইট তৈরী হচ্ছে। এগুলোর মধ্যে রয়েছে কমিউনিটি সাইট, পার্সোনাল সাইট, ই- কমার্স সাইট, কোম্পানির সাইট এবং রিয়েল স্টেট সাইট গুলো। বর্তমানে বেশিরভাগ সাইট গুলো জুমলার পরিবর্তে ওয়ার্ডপ্রেস ব্লগ ইঞ্জিন দ্বারা তৈরী হচ্ছে। কারন জুমলার থেকে ওয়ার্ডপ্রেসের টেমপ্লেট বা থিম ডিজাইনঅনেক সহজ ও ফ্ল্যাক্সিবল। এই পোষ্টে আমি পার্সোনাল সাইট এর জন্যে কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম আপনাদের সাথে শেয়ার করবো। কারন বর্তমানে প্রচুর পার্সোনাল সাইট তৈরী হচ্ছে। প্রয়োজন অনুযায়ী আপনারা আপনাদে পছন্দের টি ডাউনলোড করুন।

    animeblog 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন 

    ডাউনলোড

    arberra 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

     

    ডাউনলোড

    aurelios 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    beautyanime 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    blognotes 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    bluepress 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    bluezine 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    bubbleblue 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    businessman 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    collageblog 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    colornotes 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    communityblog 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    dangerousgames 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    devine 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    ebusiness 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    eleana 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    ermiro 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    eureka 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    fallingarrows 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    feelgood 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    fightingjam 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    footballblog 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    fragile 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    gameworld 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    gogreen 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    ibusiness 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    iconcept 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    infinitygames 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    innovation 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    lightenblog 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    luxury 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    magnumblog 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    mimoza 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    monostyle 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    moviestar 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    nautica 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    nightspectrum 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    nitromac 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    onetechstop 300x225  কিছু প্রোফেশনাল ওয়ার্ডপ্রেস থিম ডাউনলোড করুন

    ডাউনলোড

    আপডেটউপরের থিম গুলো সহ মোট ৫৯ টি থিম ডাউনলোড করার জন্যে এখানে ক্লিক করে টেক্সট ফাইলটি ডাউনলোড করে নিন।

    আমার একটা সুন্দর  ব্লগ আছে , আপনাদের নিমন্ত্রণ রইলো। আমার ব্লগে কনটেন্ট WRITING এর জন্য  এখানে যোগাযোগ করুন ।