Popular Post

zwani.com myspace graphic comments

Archive for 2013-08-25

Html শেখার সহজ উপায়:অধ্যায় ৯

অনেক সময় পর আবার লিখতে বসা ।আপনাদের উত্সাহ নাই , লেখার জন্য প্রয়োজনীয় ধৈর্য্য আর পাইনা ।তবুও লিখতে বসলাম ।কি যে লিখি মাঝে মধ্যে নিজেই বুঝি না ।যাক আর পেচাল নয় টিউটোরিয়ালে আসি। আ্রমার আগের টিউন গুলো না দেখে থাকলে নিচে দেওযা লিংক থেকে দেখে নিন । আজকে আমি আলোচনা করব html-এর iframe নিয়ে ।
iFrame:
একই পেজের মধ্যে দুটি পৃথক সাইটের পেজ দেখানোর জন্য এটি ব্যবহার করা হয় l
এর প্রাথমিক গঠন হল
<iframe src=”URL”></iframe>
এর কয়েকটি Attributes হল width, height, frameborder ইত্যাদি ।
height দিয়ে Frame–এর দৈর্ঘ্য ঠিক করা হয়
গঠন <iframe src=”URL” height=”300″></iframe>
width দিয়ে Frame–এর প্রস্হ ঠিক করা হয়
গঠন <iframe src=”URL” height=”300″ width=”300″></iframe>
Frameborder দিয়ে ফ্রেমের চারিদিকের ছকের আকার পরিবর্তন করা হয় ।
গঠন <iframe src=”URL” frameborder=”0″></iframe>

অনুশীলন করুন
নিচের ছবিতে দেওয়া কোড গুলি নোটপ্যাডে লিখে .html দিয়ে সংরক্ষন করুন ।


 ব্রাউজারে আউটপুট 
Tag : ,

html শেখার সহজ উপায় : অধ্যায় ৮

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

Form:-

Form- ট্যাগটির সাহায্যে পেজ থেকে কোন প্রকার ডেটা  সরাসরি ডেটাবেসে প্রবেশ করান যায় । Form-টি অনেক গুলি Attributes -এর সাহায্য নিয়ে কাজ করে । form-এর প্রাথমিক গঠন হল <form>………</form> -এরকম ।এই ট্যাগটির দুটি গুরুত্বপূর্ণ Attribute হল method,action ।এছাড়াও কত গুলি ট্যাগ ফ্রম ট্যাগের অধীনে কাজ করে । নিচের ছকে কত গুলি উদাহরণ দেখান হল ।
Attributes-এর নাম মান কাজ
input নির্দিষ্ট নয় নির্দিষ্ট নয়
type text পেজে লেখার স্হান তৈরী করা
textarea name,rows,cols পেজে লেখার স্হান তৈরী করা
type submit পেজে বটন তৈরী করে
type radio ঠিক চিহ্ন দেবার বাক্স তৈরী করে
type password পাসওয়ার্ড দেবার বাক্স তৈরী করে
type checkbox নির্বাচন-বাক্স তৈরী করে
type file আপলোড বাক্স তৈরী করে
select option ক্রম অনুযায়ী নির্বাচন-বাক্স তৈরী করে
type reset ডেটা পুনরায় নতুন করে দেবার জন্য
১.Text field:-
পেজে কোন লেখার স্হান তেরী করতে এটি ব্যবহার করা হয় । ঠিক যেমন টা আপনি নিচে মন্তব্য বাক্সে দেখতে পারছেন । এর প্রাথমিক গঠন
ইনপুট কোড ব্রাউজারে আউটপুট
<form>
<input type="text">
</form>
REMI
text field-এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোড ব্রাউজারে আউটপুট
<form method="post" action="mailto:kaktadua@tunerpage.com">
নাম: <input type="text" size="10" maxlength="40" name="name" id="name">
</form>
REMI
২.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>
REMI
৪.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>
REMI
৫.Password field:-
পেজে পাসওয়ার্ড দেবার বাক্স তৈরী করার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোড ব্রাউজারে আউটপুট
<form>
গোপন সংখ্যা : <input type="password" name="pwd" maxlength="8" />
</form>
REMI
৬.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>
REMI
৭.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>
REMI
৮. 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>
remi
৯.Reset button:-
আমরা পেজে যে সমস্ত ডেটা দিলাম তা পুনরায় নতুন করে দেবার জন্য এটি ব্যবহার করা হয় ।এর মধ্যে অনেক গুলি  Attribute-ও ব্যবহার করা যায় । এর Attribute যুক্ত গঠন নিচে দেখান হল ।
ইনপুট কোড ব্রাউজারে আউটপুট
<form actiion="somefile.php" onReset="return confirm
('আপনি কি সব তথ্য মুছে আবার নতুন করে দিতে রাজি আছেন ?')">
<input type="reset" value="সব তথ্য রিসেট করব">
</form>
REMI
Tag : ,

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>
১ম স্তম্ভ ২য় স্তম্ভ ৩য় স্তম্ভ
১ম সারি, ১ম স্তম্ভ ১ম সারি,২য় স্তম্ভ ১ম সারি, ৩য় স্তম্ভ
২য় সারি,২য় স্তম্ভ ২য় সারি, ৩য় স্তম্ভ
৩য় সারি, ১ম স্তম্ভ

নিচের উদাহরণটি নিজে করার চেষ্টা করুন
REMI REMI
remi
remi
Tag : ,

Html শেখার সহজ উপায় : অধ্যায় ৬

আশা করি আপনারা আমার আগের পোস্টগুলি দেখেছেন না দেখে থাকলে একটু চোখ বুলিয়ে আসুন ।আজকে আমি আলোচনা করব 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″/> tunerpage

Tag : ,

html শেখার সহজ উপায় : অধ্যায় ৫

আমার আগের html শেখার পোষ্ট গুলো যদি না দেখে থাকেন তবে চট করে একটু দেখে আসুন এতে আপনাদের বুঝতে সুবিধা হবে ।আমার আজকের আলোচনার বিষয় হল 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 অর্থাত্‍ # চিহ্নের পর তিন জোড়া হেক্সাডেসিমেল সংখ্যা যার প্রথম জোড়া লাল রঙের গাঢ়ত্ব,২য় জোড়া সবুজ রঙের গাঢ়ত্ব,৩য় জোড়া নীল রঙের গাঢ়ত্ব প্রকাশ করে ।আমরা তো অনেকেই ডেসিমেল আর হেক্সাডেসিমেল সংখ্যা পদ্ধতি গনিতে শিখেছি,আর না শেখা থাকলে নিচে দেওয়া ছকটি দেখুন ।
ডেসিমেল 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
হেক্সাডেসিমেল 1 2 3 4 5 6 7 8 9 A B C D E F
অর্থাত্‍ ডেসিমেল সংখ্যা পদ্ধতির 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)
নিচের ছকে ২টি রঙ পদ্ধতির উদাহরণ দেওয়া হল
remi

Bgcolor:-


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

html শেখার সহজ উপায় : অধ্যায় ৪

আমার আগের পোষ্ট গুলো যদি না দেখে থাকেন তবে চট করে একটু দেখে আসুন এতে আপনাদের বুঝতে সুবিধা হবে ।আজকে আমি আলোচনা করব html-এর font আর list  নিয়ে ।

Html font:-

ওয়েব পেজের font বা হরফের বিভিন্ন রকম স্টাইল প্রদর্শন করার জন্য ব্যবহৃত হয় Html font । ফন্টের গঠন <font> … </font> এই রকমের হয় ।তবে ফন্ট ট্যাগটি একাই কিছু করতে পারে না এজন্য তাকে সাহায্য করে থাকে কয়েকটি Attribute ।ফন্ট ট্যাগটি এবং Attribute গুলি নিয়ন্ত্রন করা যায় হরফের আকার ,বর্ন(রং) এবং হরফের ধরণ । নিচের ছকে ফন্ট ট্যাগের কয়েকটি প্রয়োজোনীয় Attribute দেখান হল ।
Attribute(-র নাম) মান কাজের বর্ননা
color rgb(x,x,x)[যেমন rgb(102,204,51)]
#xxxxxx (যেমন  #66cc33)
colorname (যেমন green)
হরফের রং পরিবর্তন করতে ব্যবহৃত হয়
size 1 থেকে 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>

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

বিশ্লেষণ:-
উপরের ছবিতে দেওয়া কোড গুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন । 
  • ছয় নং লাইন থেকে নয় নং লাইনে Font ট্যাগ ব্যবহৃত হয়েছে ।
  • ১০ নং লাইন থেকে ১৬ নং লাইনে ব্যবহৃত হয়েছে ordered list ট্যাগ ।
  • ১৭ নং লাইন থেকে ২২ নং লাইনে ব্যবহৃত হয়েছে unordered list ট্যাগ ।
  • ২৩ নং লাইন থেকে ২৮ নং লাইনে ব্যবহৃত হয়েছে Definition list ট্যাগ ।
REMI
ব্রাউজারে আউটপুট
Tag : ,

html শেখার সহজ উপায় : অধ্যায় ৩

আমার পূর্ববর্তী পোষ্টগুলো না দেখে থাকলে দেখে চট করে একবার চোখ বুলিয়ে আসুন ,আশা করি বুঝতে পারবেন । না বুঝতে পারলে মন্তব্যে বলবেন বুঝিয়ে দেবার চেষ্টা করব ।
আজকে আমি আলোচনা করব 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> -এই ধরনের হয় ।
remmi অনুশীলন করুন :-
আজকের অলোচিত বিষয় গুলো সম্পর্কে ধারনা পরিস্কার করতে পাশের প্রদত্ত ছবিতে দেওয়া কোডগুলি নোডপ্যাডে লিখুন । লেখা শেষে নথিটিকে যেকোন নাম দিয়ে .html ফরম্যাট দিয়ে সংরক্ষণ  করুন ।এবার সংরক্ষিত html নথিটিকে ক্লিক করে ব্রাউজারে খুলুন ।আমি এখানে notepad++ ব্যবহার করছি ।
বিশ্লেষণ:-
উপরের ছবিতে দেওয়া কোড গুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন ।
  • ছয় নং লাইন থেকে দশ নং লাইনে Heading ট্যাগ ব্যবহৃত হয়েছে ।
  • ১১ নং ও ১২ নং লাইনে ব্যবহৃত হয়েছে Comments ট্যাগ ।
  • ১২ নং লাইনের Comments ট্যাগটি মুছে নথিটি আবার সেভ করে ব্রাউজারে খুলুন ।
  • ১৪ নং লাইনে ব্যবহৃত হয়েছে <b> ট্যাগ ।
  • ১৫ নং লাইনে ব্যবহৃত হয়েছে <i> এবং <em> ট্যাগ ।
  • ১৬ নং লাইনে ব্যবহৃত হয়েছে <u> এবং <ins> ট্যাগ ।
  • ১৭নং লাইনে ব্যবহৃত হয়েছে <del> ট্যাগ ।
  • ১৮নং লাইনে ব্যবহৃত হয়েছে <kbd> এবং <tt> ট্যাগ ।
  • ২০ নং আর ২১ নং লাইনে ব্যবহৃত হয়েছে <pre> ট্যাগ ।
  • ২২ নং আর ২৩ নং লাইনে ব্যবহৃত হয়েছে <sub> এবং <sup> ট্যাগ ।
  • ২৪ নং লাইনে ব্যবহৃত হয়েছে <blink> ট্যাগ ।
  • ২৫ নং লাইনে ব্যবহৃত হয়েছে <marquee> ট্যাগ ।
remi
ব্রাউজারে আউটপুট
Tag : ,

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 ।

remi অনুশীলন করুন :-
আমি উপরে যে বিষয় গুলো তুলে ধরেছি তা এই উদাহরন থেকে ভাল ভাবে বোঝা সম্ভব ।পাশের ছবিতে যে কোডগুলি আছে তা নোটপ্যাডে লিখে নথিটিকে যে কোন নাম দিয়ে .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 ব্যবহৃত হয়েছে ।
remi
বি.দ্র-কিছু কিছু ট্যাগ আছে যাদের সূচনাকারী ট্যাগ ও সমাপ্তকরন ট্যাগ একটি যেমন <br/>
Tag : ,

Html শেখার সহজ উপায় : অধ্যায় ১

একটু একটু করে অনেকেই শুরু করল ধারাবাহিক টিউন ।উদ্যোগটি খবুই ভাল এবং কল্যানধর্মী ।আমি ভাবলাম আমি কেন চুপ করে বসে থাকি পৃথিবী থেকে যা শিখেছি তা যদি অণ্যদের মাঝে ছড়িয়ে দিতে পারি তাহলে ক্ষতি কি ।অন্যরা ব্লগিং বিষয়ে টিউন শুরু করেছে ।ব্লগের পোস্টকে সুন্দর করতে HTML-এর আবদান অনস্বীকার্য । তাই আমি আপনাদের HTML বিষয়ে ধারাবাহিক টিউন দেব ।আর পরে সময় পেলে CSS এবং pHp -এর টিউন দেবার চেষ্টা করব ।আপনাদের জানিয়ে রাখি আমি কিন্তু কোন কম্পিউটার সংস্হা থেকে HTML ,CSS বা pHp শিখিনি আমার এই জ্ঞান দাতা ইন্টারনেট কাজেই কোন ভূল হলে ধরিয়ে দেবেন ।
HTML-এর সারসংক্ষেপ:-

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

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

  • প্রথমে নোটপ্যাড খুলুন । তারপর পাশের ছবিতে  দেওয়া কোডগুলি টাইপ করুন ।
  • remi
    remi লেখা শেষ হলে নথিটিকে খুশিমত নাম দিয়ে .html ফরম্যাটে সংরক্ষন করুন ।
    এরপর এই html নথিটিকে ক্লিক করুন আর ব্রাউজারে আপনার তৈরিকৃত প্রথম ওয়েব পেজটিকে দেখুন । remi
    উপরের কোডগুলির প্রাথমিক বিশ্লেষণ:-
    • লক্ষ্য করুন উপরের কোডটি শুরু হয়েছে ট্যাগ দিয়ে<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> এর ভেতরে থাকে আপনার পেজের যাবতীয় তথ্য ।
    Tag : ,

    How to use an ATM booth easily( tutorial with image)











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

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

    CL ad posting job

    এক্ষেত্রে আমি যে অসুবিধায় পড়ি তাহলে বায়াররা একে সংক্ষিপ্ত ভাবে CL add posting হিসাবে প্রজেক্টের বর্ননায় লিখত। আসলে এটি হল আমেরিকা জনাব ক্রেইগ নিউমার্ক ১৯৯৫ প্রতিষ্ঠিত একটি সাইট যেখানে আপনি আপনার বিভিন্ন ধরনের পন্যের কেনাবেচার এ্যাড, চাকুরির বিজ্ঞাপন, রেজুইমি, ফোরাম আলোচনা ইত্যাদি বিনা মূল্যে পোস্ট করতে হবে। সাইটটির ঠিকানা হলো www.craiglist.org যাহোক এব্যাপারে আপনা উইকিপিডিয়া আরও তথ্য পাবেন। তবে আমি আপনাদের যে সম্পর্ক জানাব তাহলে এতে কিভাবে এ্যাডপোস্ট করতে হয় । প্রথমেই বলে নেই , এই সাইটিতে কিন্তু খুব বেশি গ্রাফিক্সের ব্যবহার নেই এবং পেজ লোড হতে খুবই কম সময় লাগে। কিন্ত তারপর এতে এ্যাড পোস্ট করা বেশ ঝামেলার কাজ যখন আপনি আমেরিকার কোন শহরের জন্য এ্যাড পোস্ট করতে চাইবেন। এজন্য দরকার আপনার PVA ( বিস্তারিত জানতে আমার এসম্পর্কিত পোস্টটি পড়ুন) । বায়াররা সাধারনত চায় বিভিন্ন শহরে বিভিন্ন সময় তাদের এ্যাডটি পোস্ট করা হোক – এতে তাদের সাইটে বা প্রতিষ্ঠানে ভিজিটর আসার সম্ভাবনা বৃদ্ধি পায় কিনা ! এছাড়া বায়াররা সাধারনত ১০০ টি করে এ্যাড পোস্ট করতে বলে এবং এর জন্য তারা ৩ – ৪ দিন সময় সীমা নিদ্ধারন করে থাকে। এসময়ের ভিতর আপনাকে প্রতিদিন নিদিষ্ট সংখ্যক শহরে একই বা বিভিন্ন এ্যাড পোস্ট করতে হয় এবং সেগুলোর লিক্ঙ বায়ারকে রিপোর্ট করতে হয়। কাজটি বেশ সহজ এবং এতে আয় করা যায়ও সহজে যদি আপনার একটি PVA থাকে! তবে অনেক সময় বাযাররাও PVA এর যোগান দিয়ে থাকে। সেক্ষেত্রে কোন কথাই নেই। এসম্পর্কিত কাজ গুলো গেটএফ্রিল্যান্সার সাইটেই বেশি দেখা পাওয়া যায়।
    Tag : ,

    Free bangla tutorial on google adsense

    আমরা অনেককই গুগুল এ্যাডসেন্স এর সম্পর্কে অনেক কথা শুনেছি কিন্তু এর সঠিক ব্যবহার না জানায় অনেকে আবার বিভ্রান্তও হয়েছি।আসলে google ad sense এর ব্যবহার অত্যন্ত সহজ যা কিনা একজন নবীন ব্যবহারকারীও ব্যবহার করতে পারে এজন্য আপনার থাকতে হবে নিচের পাঁচটি জিনিস যথা-


    ১। একটি ইমেল এ্যাকাউন্ট
    ২। একটি সম্পুর্ন editable web page( যা কিনা ফ্রিতেও তৈরি করা যায়)
    ৩। একটি গুগুল ad sense free account।
    ৪। পরিশ্রম করার মানসিকতা আর
    ৫। আমার তৈরি google ad sense Free tutorial

    কিন্তু টিউটোরিয়ালটি পড়তে নিচের যেকোন একটি link এ কিক্ল করুন এবং ৩০ সেকেন্ড অপেক্ষা করুন তারপর free tutorial নামক লিঙ্কে কিক্ল করে user name হিসাবে rafiq এবং password হিসাবে rafiq লিখে ফোল্ডারটি প্রবেশ করুন সেখানে এটি দেয়া আছে....
    যদি না প্রবেশ করতে পারেন তবে আবার একটি নিচের অন্য link এ কিক্ল করে একইভাবে একই password ও user name দিয়ে চেষ্টা করুনধন্যবাদ আপনি সফল ভাবে টিউটোরিয়ালটি শুরু করতে পেরেছেন

    Tag : ,

    Free adsense Bangla tutorial

    এবার আমরা google ad sense সম্পর্কে বিস্তারিত জানবসবার প্রথমে আপনার দরকার একটি ফ্রি ওয়েব সাইট(ব্যক্তিগত হলেও চলবে) তৈরি করার এজন্য আপনি যেতে পারেন নিচের সাইট গুলোতে
    1.www.blogger.com 2.www.synthasite.com 3.www.wordpress.com
    মনে রাখবেন আপনি যে সাইটেই ওয়েব পেজ তৈরি করেন না কেন তা সম্পুর্ন ভাবে সম্পাদনা করার ব্যবস্থা থাকতে হবে। এবার আপনার ব্যক্তিগত সাইটটিকে বিভিন্ন content দিয়ে সাজান মনে রাখবেন আপনার সাইটিকে সাজানো কিন্তু খুবই গুরুত্বপূর্ন কেকনা আপনার সাইটে যদি কোন content না থাকে তবে আপনি গুগুল এ্যাডসেন্সের কোন এ্যাকাউন্টা করতে পারবেন না। তাই আপনার ওয়েব পেজটিকে যথাসম্ভব সুন্দর করে সাজান।
    এবার আপনাকে গুগুল এ্যাডসেন্সের একটি ফ্রি এ্যাকাউন্ট খুলতে হবে এবং তা করার জন্য আপনাকে www.google.com/adsense এ যেতে হবে এবং সেখানকার singUp অপশনে কিক্ল করে প্রাপ্ত ফর্ম সঠিক ভাবে পূরণ করতে হবে । ফর্মটি সঠিক ভাবে পূরণ করার পর গুগুল আপনার ওয়েব সাইটটি পর্যালোচনা করে ১-২ দিনে ভেতর আপনার ইমেল এ্যাডরেসে ইমেল করে জানিয়ে দেবে আপনার সাইটটি এ্যাডসেন্সের উপযোগী কিনা। আশা করি আপনি এভাবে একটি সফল গুগুল এ্যাকাউন্ট তৈরি করতে পেরেছেন। এবার আপনার এ্যাডসেন্স এ্যাকাউন্টে user name ও password (যা আপনার ইমেল এ্যাকাউন্টে পাঠিয়ে দেয়া হবে) দিয়ে লগ ইন করুণ ও সেখান হতে adsense set up tab এ কিক্ল করে বিভিন্ন রেডিও বাটনে কিক্ল করে পরপর continue নামক বাটনে কিক্ল করুন। সবশেসে আপনি কিছু HTML কোড পাবেন। এই কোড গুলো সেভ করে নিন ।এবার আপনার আপনার ওয়েব সাইটের html Editor এ কোড গুলো কাট করে পেষ্ট করে দিন তাহলেই আপনার সাইটে এই এ্যাড গুলো প্রর্দশিত হবে এবং ইউজাররা আপনার সাইটে প্রবেশ করে এসব এ্যাডগুলোতে কিক্ল করলেই আপনি পাবেন ডলার! এবার আপনার সাইটটিকে জনপ্রিয় করে তুলন
    Tag : ,

    অন্যের মাথায় কাঠাল ভাঙ্গি গুগুলে নিজের সাইট লিষ্টি করি (গুগুল ডাটাবেজে আপনার সাইট ২৪ ঘন্টার ভেতর লিষ্ট আপ করার গোপন কৌশল)

    (গুগুল ডাটাবেজে আপনার সাইট ২৪ ঘন্টার ভেতর লিষ্ট আপ করার গোপন কৌশল)

    আমরা যখন সাধারনত একটি নতুন সাইট হোস্ট করি তখন স্বভাবত সেই সাইটটির কোন তথ্য গুগুল বা অন্য কোন সার্চ ইঞ্জিনের কাছে থাকে না। যেমন ধরা যাক আমরা একটি 'লাউ' নিয়ে ওয়েব সাইট করেছি যার url হলে www.lou.com.bd। আমরা যদি এখন গুগুলে গিয়ে এই সাইটটি সার্চ করি কোন রেজাল্ট দেখতে পারব না বা দেখতে পেলেও আমাদের কাঙ্ক্ষিত সাইটটি সেই রেজাল্টের মধ্যে থাকবে না।

    যাইহোক, আমাদের নতুন সাইটটি গুগুল সার্চ রেজাল্টে না আসার কারন হলো তাদের ডেটাবেস বা সুচিতে আমাদের সাইটের কোন তথ্য নেই। তাই তারা আমাদের সাইটটির কোন পেইজ র‌্যাঙ্ক দিতে পারে না। তাই গুগুলে পেইজ র‌্যাঙ্ক পেতে হলে আমাদের অবশ্যই প্রথমে তাদের সূচিতে তথা ডেটাবেসে অন্তর্ভূক্ত হতে হবে।

    এজন্য আমরা যে কাজটি প্রায়ই করে থাকি তাহল গুগুলের এ্যাডইউআরএল পেইজে গিয়ে আমরা আমাদের সাইটের উৎকৃষ্ট একটি বর্ণনা লিখে (আমাদের উদারহনের ক্ষেত্রে হতে পারে - বাংলার আদিম ও অকৃত্রিম লাউ এখন আপনার হাতের নাগাল ...অথবা সেই বিখ্যাত উক্তি যাহা কদু তাহাই লাউ) আমাদের সাইটের ঠিকানা সেখানে সাবমিট করে থাকি।

    এটি মূলত গুগুলে একটি ওয়েব সাইট সাবমিট ফর্ম। এখানে গুগুল বলে থাকে যে আপনার সাইটটি আগামী চার সপ্তাহের ভেতর তাদের ডেটাবেসে অন্তর্ভূক্ত হবে। আপনাদের কথা জানি না কিন্তু আমার ব্যক্তিগত অভিমত হলো চার সপ্তাহ একটি দীর্ঘ সময়। আর এভাবে টপর‌্যাঙ্কিং পেতে না জানি আরো কতদিন লাগবে।

    আর ঠিক এই কারনেই কখনই গুগুল বা অন্য কোন সার্চ ইঞ্জিনের ওয়েব সাইট সাবমিশন ফর্ম ব্যবহার করা উচিৎ নয়। কারন এটা শুধুই সময়ের অপচয়।

    তাহলে আমরা কিভাবে ২৪ ঘন্টা ভেতর আমাদের সাইটটিকে গুগুলে সার্চ রেজাল্টে দেখাতে পারি? আমার কাছ থেকে জেনে নিন সেই গোপন কৌশল। এজন্য আমাদের যা করতে হবে তা হল-

    -গুগুলে গিয়ে আমাদের কাঙ্ক্ষিত কি ওয়াডের জন্য সার্চ দিতে হবে।

    -এবার সেই কি ওয়ার্ডের জন্য এমন একটি সাইট খুজে বের করতে হবে যার পেইজ র‌্যাঙ্ক ৫ কিংম্বা তার উপরে।

    -এরপর দেখতে হবে সেই সাইটের লিঙ্ক পেইজ বা রিসোর্স নামে কোন সুবিধা আছে কিনা।

    এখন আমাদের যা করতে হবে তা হলো ঐসমস্ত সাইট গুলোর(পেইজ র‌্যাঙ্ক ৫ কিংম্বা তার উপর) যেকোন একটিতে আমাদের সাইটের লিঙ্কটি সাবমিট করতে হবে। এজন্য আমরা সেই সমস্ত সাইটের 'contact us' লিঙ্কে গিয়ে তাদের ইমেল এ্যাডরেসে মেইল করতে পারি যে তারা যদি আমাদের সাইটটির লিঙ্ক তাদের সাইটে সংযুক্ত করে তবে আমরাও আমাদের সাইটে তাদেরটা …...........আপনি যদি এই কথাগুলো গুছিয়ে অন্য পক্ষকে জানাতে পারে আশা করা যায় তারা অবশ্যই আপনার ডাকে সাড়া দেবে।

    মনে রাখবেন, একবার যদি আপনি একটি পেইজ র‌্যাঙ্ক ৫ বিশিষ্ট সাইট হতে আপনার সাইটের লিঙ্ক পেয়ে যান তবে নিশ্চিত ভাবে আপনি ২৪ ঘন্টার ভেতর গুগুল ডেটাবেসে লিষ্টি হয়ে যাবেন। ব্যাপারটা অনেকটা অন্যের মাথায় কাঠাল ভাঙ্গার মতই সহজ।

    যাইহোক অনেক সময় পেইজ র‌্যাঙ্ক ৫ বা তার উপরের র‌্যাঙ্ক বিশিষ্ট ওয়েব ওয়ালাদের লিঙ্ক বিনিময়ে রাজি করানো যায় না । সেই ক্ষেত্রেও একটি সমাধান আছে। সেটি হলো টেক্সট লিঙ্ক ক্রয়।

    হ্যা, আমরা আমাদের প্রয়োজনীয় লিঙ্কটি পেতে বিভিন্ন উচ্চ পেইজ র‌্যাঙ্ক বিশিষ্ট সাইট হতে টেক্সট লিঙ্ক ক্রয় করতে পারি। এজন্য আমরা খুব সহজে যেকোন একটি লিঙ্ক বিক্রয় করা সাইটে গিয়ে আমাদের ওয়েব সাইটের জন্য একটি টেক্সট লিঙ্ক কিনতে পারি। এধরনে কয়েকটি সাইট হলো-
    http://www.linkadage.com
    http://www.text-link-ads.com
    http://www.linkadage.com

    এধরনে ওয়েব সাইটে আপনি একটি ৭ পেইজ র‌্যাঙ্ক বিশিষ্ট সাইটের লিঙ্ক এক মাসের জন্য ১৫০ ডলারে কিনতে পারেন। আর একমাস পর আপনা বাড়তি ১৫০ ডলার খরচ করা কোনই দরকার নেই। কারন আপনি ইতিমধ্যে গুগুলের ডেটাবেসে অন্তভূক্ত হয়ে গেছেন- তাই না?

    গুগুলে ডেটাবেসে দ্রুত অন্তর্ভূক্ত হবার আরেকটি টেকনিক হলো যদি আপনার কোন পুরাতন ওয়েব সাইট থেকে থাকে যার পেইজ র‌্যাঙ্ক উচ্ছ পর্যায়ের তবে আপনি যে কাজটি করতে পারেন তা হলো আপনার নতুন সাইটটির একটি লিঙ্ক আপনার পুরাতনটি অন্তর্ভূক্ত করুন। এতে আপনি অতি দ্রুত গুগুলে সার্চ রেজাল্টে আপনার নতুন সাইটটিকে খুজে পাবেন। একবার পর আপনার পুরাতন সাইট হতে ঐ লিঙ্ক সরিয়ে ফেলতে পারেন – এতে নতুন সাইটটির কোন অসুবিধা হবে না।
    Tag : ,

    গুগুল পেজ র‌্যাঙ্ক কি ও কেন?

      চিত্র -

      চিত্র -
    • গুগুলে পেজ র‌্যাঙ্কিং হলো একটি ওয়েব সাইট কতটা গুরুত্বপূর্ন সেটি প্রদর্শনের একটি সাধারন উপায়। গুগুল ধরে নেয় যে যখন একটি সাইট অপর একটি সাইটের লিঙ্ক নিজের মধ্যে স্থাপন করে তখন সেটি প্রকৃতপক্ষে অপর সাইটিকে একটি ভোট দিল। তাই আপনার সাইটের জন্য যত বেশি ভোট থাকবে তত বেশি সেটির গুরুত্ব গুগুলে কাছে বৃদ্ধি পাবে।
    • এছাড়াও গুগুল অন্যান্য যেসব সাইট আপনার সাইটটিকে লিঙ্ক করে থাকে তাদের নিজস্ব প্রাপ্ত ভোটকেও গুরুত্ব দিয়ে থাকে। তাই অন্যান্য সাইট যেগুলো আপনার সাইটটিকে লিঙ্ক করেছে বা ভোট দিয়েছে তাদের নিজের প্রাপ্ত ভোট যদি বেশি হয়, তবে গুগুলের দৃষ্টিতে আপনার সাইটের গুরুত্ব ততই বৃদ্ধি পাবে এবং আপনার পেজ র‌্যাঙ্ক বৃদ্ধি পাবে। উপরে ঘটনাটি বুঝার জন্য নিচের চিত্রটি দেখা যেতে পারে -
    উপরের চিত্র -১ এর A সাইটি আপনা সাইটকে যে ভোট দেবে তার গুরুত্ব চিত্র – ২ এর সাইট B এর চেয়ে বেশি হবে। কেননা সাইট A এর যেখানে নিজস্ব প্রাপ্ত ভোট হল চার তখন সাইট B এর জন্য তা মাত্র দুটি। বিষয়টি আরো সুন্দর ভাবে বুঝার জন্য আরেকটি উদারহন দেয়া যেতে পারে - ধরা যাক কোন একটি শহরে একটি আইন পাশ করার জন্য ভোটাভুটির আয়োজন করা হয়েছে যেখানে তিনটি পক্ষ ভোট দেবে। যথা -
    1. নেতা পক্ষ (শাসক)
    2. টাউন কাউন্সিল সদস্যবৃন্দ
    3. সাধারন নগরবাসী
    এখন যদি প্রশ্ন করা হয় আইনটি পাশ করার জন্য কাদের ভোট বেশি গুরুত্বপূর্ন হবে, তবে অবশ্যই তা হবে নেতা তথা শাসক পক্ষের – তাই নয় কি? কারন শাসক পক্ষ, টাউন কাউন্সিল সদস্য ও সাধারন নগরবাসীর চেয়ে অবশ্যই বেশি ক্ষমতাবান। কিন্তু এরপরও কাউন্সিল সদস্য ও সাধারন নগরবাসীর ভোট আইনটি পাশ করার ক্ষেত্রে অনেক ক্ষেত্রে অবদান রাখে।
    পেজ র‌্যাঙ্ক বিষয়টিও ঠিক এমন ভাবেই মাপা হয়। সেজন্য একটি পেজ যার কিনা নিজেরই প্রাপ্ত ভোট তথা গুরুত্ব বেশি সেটি যখন আপনাকে লিঙ্ক করবে তথা ভোট দেবে তখন আপনার সাইটের গুরুত্ব গুগুলের কাছে বৃদ্ধি পাবে (স্বভাবত আপনার সাইটের পেজ র‌্যাঙ্ক বৃদ্ধি পাবে) । স্মরন রাখা প্রয়োজন – একটি সাইটের পেজ র‌্যাঙ্ক কত তা পরিমাপের সহজ উপায় হলো সাইটটিকে কতগুলো সাইট লিঙ্ক করেছে তথা ভোট দিয়েছে তা গননা করা এবং সেই সাইট গুলো নিজস্ব প্রাপ্ত ভোট তথা তাদের গুরুত্ব বিবেচনা করা।
    Tag : ,

    মেঘ না চাইতে জল- SEO সম্পর্কিত সম্ভবত সবচাইতে বড় ভুল।

    আমরা জানি সার্চ ইঞ্জিন অপটিমাইজেশন মূলত দুধরনের
    ১। অনপেইজ অপটিমাইজেশনঃ যার মধ্য অন্তর্ভূক্ত-
    ক। টাইটেল ট্যাগ ব্যবহার
    খ। হেডার ট্যাগ ব্যবহার
    গ। মেইন কিওয়ার্ড বোল্ড, ইটালিক ও আনডারলাইনিং ইত্যাদি করা
    ঘ। Alt ট্যাগ ইমেজ এর ব্যবহার
    ঙ। মেটা ট্যাগের ব্যবহার ইত্যাদি।
    ২। অফপেইজ অপটিমাইজেশনঃ যার মধ্য অন্তর্ভূক -
    ক। লিংকের এ্যাঙ্কর টেক্সট
    খ। লিংক সাইটের টাইটেল
    গ। লিংক করা সাইটের পেইজ র‌্যাঙ্ক
    ঘ। লিংক করা সাইটের বিষয় বস্তু ইত্যাদি
    কিন্তু সার্চ ইঞ্জিন অপটিমাইজেশনের ক্ষেত্রে অনেকেই যেভুলটি করে তা হলে তারা অনপেইজ অপটিমাইজেশন করেই ভেবে থাকে যে এতে করে তাদের সাইটটি সার্চ রেজাল্টের প্রথমে দেখা যাবে। আসলে অনপেইজ অপটিমাইজেশন ততটা গুরুত্বপূর্ন নয়। এমনি কি অনেক ক্ষেত্রে একটি সাইট শুধুমাত্র অফপেইজ অপটিমাইজেশন দ্বারাই একটি নিদির্ষ্ট কি ওয়াডের জন্য সার্চ রেজাল্টের প্রথম সারিতে দেখা যেতে পারে। যদিও সেই সাইটটি ঐ বিশেষ কিওয়াডের জন্য অনপেইজ অপটিমাইজেশন না করা থাকে!

    একটি উদারহন দিলে বোধহয় ভাল হয়। আপনার কি কখনও গুগুল বা ইয়াহুতে “Click Here” এই কিওয়ার্ডের জন্য সার্চ করেছেন?না করে থাকলে একবার করে দেখুন যে এরজন্য যে ফলাফল পাওয়া যায় তার প্রথম লিঙ্কটি টি হলো adobe.com সাইটের জন্য! আমরা জানি এ্যাডবি হলো বিভিন্ন ধরনের গ্রাফিক্স সফটওয়্যার তৈরী ও উন্নয়নের জন্য বিখ্যাত। সেক্ষেত্রে নিচের যেকোন কিওয়ার্ডের জন্য এর সাইটটি প্রথমে আসলে তা স্বাভাবিক হত-
    ? graphic design programs
    ? create printable documents
    ? web design programs
    ? and other keywords related to what they sell...

    এখানে কিছু বিষয় লক্ষ্য করার মত -
    ১। “click here” এই কিওয়ার্ডটি উক্ত সাইটের পেইজ টাইটেল নয়
    ২। “click here” কিওয়ার্ডটি উক্ত সাইটের url এর অংশ বিশেষও নয়
    ৩। এমনকি “click here” ওয়ার্ডটি উক্ত সাইটের কোথাও উল্লেখও করা হয়নি।

    তাহলে ঠিক কোন কারনে adobe.com এই কিওয়ার্ডের জন্য সার্চ রেজাল্টের প্রথমে আসল? এরজন্য আসলে দুটি কারন দায়ী -

    ১। adobe.com সাইটটিকে লিঙ্ক করা সাইটসমুহের নিজস্ব পেইজ র‌্যাঙ্ক তথা বিষয়গুরুত্ব।

    ২। ঐ সাইটগুলো adobe.com সাইটকে লিঙ্ক করার ক্ষেত্রে click এবং here এইদুটি ওয়ার্ডকে এ্যাঙ্কর টেক্সট হিসাবে বেশ কয়েক বার ব্যবহার করা।
    অথ্যাৎ দেখা যাচ্ছে adobe.com এক্ষেত্রে মেঘ না চাইতে জল পেয়ে বসে আছে। তাই বলা যায় সার্চ ইঞ্জিন অপটিমাইজেশনের ক্ষেত্রে অফপেইজ অপটিমাইজেশনই মুখ্য বিবেচ্য বিষয়।
    Tag : ,

    চোরে চোরে মাসতুতো ভাই, লিঙ্কে লিঙ্ক হোক বিনিময়!

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

    আর এইক্ষেত্রেও পিছয়ে নেই গুগুল! আমরা গুগুলের এই সুবিধাটি ব্যবহার করে সেই সমস্ত সাইটগুলো খুজে বের করতে পারি যাদের লিঙ্ক সাবমেটিং ফর্ম রয়েছে। নিচের ইমেজটি দেখুন-

    লক্ষ্য করলে দেখতে পাবেন এতে আপনাকে বেশ কিছু বিষয় সাবমিট করতে হবে -
    ১।আপনার সাইটের নাম (এ্যাঙ্কর টেক্সট)
    ২। আপনার সাইটের url
    ৩। আপনার সাইটের বর্ণনা।
    ৪। আপনার সাইটের অপর সাইটির ফিরতি লিঙ্কেরজ url

    যখন আপনি আপনার সাইটের জন্য প্রাথামিক পর্যায়ে অপটিমাইজেশন শুরু করবেন তখন এই উপায় আপনি অসংখ্য ব্যাকলিঙ্ক পেতে পারেন।এজন্য আপনাকে যা করতে হবে -
    ১।গুগুলে যান।
    ২। সার্চ বক্সে ঠিক নিচের মত করে সার্চ আইটেম টাইপ করুন-
    [Keyword] "Please also suggest my link to the LinkPartners.com Directory."
    এখানে খেয়াল রাখতে হবে যে আপনার কাঙ্ক্ষিত কিওয়ার্ড [keyword] এর স্থলে বসাতে হবে যাতে আপনার কিওয়ার্ডের সাথে সংগতি সম্পন্ন ওয়েব সাইট সার্চ রেজাল্ট প্রদর্শিত হয়।
    ৩। এরপর সাবমিট বাটনে ক্লিক করুন।

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

    উপরের চিত্র হতে দেখা যাচ্ছে যে সাইটটি পাঁচটি লিঙ্ক বিনিয়ম অনুরোধের পাঁচটিতেই সাড়া দিয়েছে।স্বাভাবিক ভাবেই একটি উচ্চ রেটিং সমৃদ্ধ সাইটের সাথে আপনার সাইটের লিঙ্ক বিনিময়ের অনুরোধ পাঠালে তাতে মেম্বার সাড়া দেবেই (কারন তারও যে আরেক চোরকে দরকার – তাই না?) আর এরূপ করাটাও বেশ নিরাপদ। কারন যেহেতু এক্ষেত্রে লিঙ্ক বিনিময় একটি তৃতীয় পক্ষের মাধ্যমে সংঘটিত হচ্ছে তাই অপরদিক হতে স্পামের ভয় থাকছে না।

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

    এই বইয়ের লেখক উক্ত সাইটে সাইন আপ করার দুইদিনের ভেতরই ২০ টি লিঙ্ক তার সাইটের জন্য পেয়েছিলেন। আর এজন্য তাকে প্রায় কিছুই করতে হয়নি - অন্যান্য মেম্বারদের অনুরোধে সাড়া দেওয়া ছাড়া।

    তো এতক্ষন নিশ্চয় ঐ সাইটটির ঠিকানা জানতে প্রান আইটাই করছিল তাই না ? যাইহোক সাইটটির ঠিকানা হলো-
    www.linkmetro.com


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

    Demo Video 1 (Request a Link Exchange)
    http://www.linkmetro.com/Demos/Demo1.htm

    Demo Video 2 (Approve a Link Request)
    www.linkmetro.com/Demos/Demo2.htm

    আমি আপনাদের আরো একবার এই সাইটটির বিনামূল্য সাইন আপ সুবিধার কথা স্মরন করিয়ে দিতে চাই …. … কারন হয়তো খুব শীঘ্রই এর এই সুবিধাটি নাও থাকতে পারে!
    Tag : ,

    Free Backlinks Generators For Your Site

    I already described  about important of backlinks in my old post,today i give some helpful backlinks generators that you get hundred hundred backlinks for free some backlinks are do follow and some other,backlinks generators is a procces that you get very easily more backlinks and backlinks is a process of seo to improving fast google page rank of your site,so go to blew backlinks generators and get free more quality backlinks for your site
    Tag : ,

    13 Semantic Markup Tips For 2013: A Local SEO Checklist

    One of the least-tapped areas of local business website optimization continues to be semantic markup. Semantic markup can increase chances that information from your website will be highlighted in search engine results pages via rich snippets, attracting greater attention and clickthroughs. So, read on and use this checklist to see if you’re exploiting all elements possible for your local business website.
    While special markup likely may not directly improve your rankings in search, it does apparently increase clickthrough rate or “CTR,” as consumers are more drawn to your site’s listings. The increase is reportedly 15% on average, and potentially higher!
    Just this increase in CTR alone could benefit your rankings over time, as clickthroughs can influence rankings; so, there are a few reasons why semantic markup is worthwhile. Semantic markup optimizes for Google, Bing, and Facebook search, too.
    If you think most Microformats/RDFa/Micro Data/Schemas don’t apply to your local business website — think again! While only a few of these may impact your listing in the local 7-pack or in Google Maps, your site can also attract customers via the regular, keyword search results pages; and, regular listings can and do appear on the same results pages as the 7-pack!
    So, check to see if you’ve added the following semantic markups to your local website (if applicable). Improving your traffic, even on search results which are not directly related to something you sell, can help benefit all the rest of your website as your overall popularity becomes augmented.

    13 Semantic Markup Strategies For Local Business Websites

    1.  Authorship Markup
    The number-one, best semantic markup is likely authorship — it allows your personal photo to appear with pages you author, and your website, when they are listed in search engine results.
    For instance, check out listings of articles from Search Engine Land, and you’ll frequently see icon pics and names of authors paired up with their article listings.
    For local search, this may be even more compelling in Google, making your listing appear far more interesting and professional in the 7-pack. In the search below for personal injury attorneys in Seattle, the first two listings sport pics of the attorneys: Photos in Local Search Listings 7-Pack - author tags
    To enable this to happen, you must have a Google+ profile for the business proprietor, link to it from your website including a querystring with rel=author:
    <a href=”[profile_url]?rel=author”>Google</a>
    Then, link back to your site from your Google+ profile in the “Contributor To” section. It’s also a good idea to have a good author photo for Google+.
    2.  Local Business Schema and Geotag
    Schema.org provides a few different types of semantic markup that I’ll be listing in this article, and the prime one is for describing local businesses. Essentially, you can use this to markup your address and contact information on your site, although there are additional fields you can include such as hours of operation, payment types accepted, and more.
    Example markup: Local Business Schema.org Markup Code
    You can also geotag your location (or “Place” in Schema.org lingo) by including your geocoordinates with your LocalBusiness code. As I’ve noted before, if you’ve been using hCard Microformat for this purpose, you can continue to do so, although Schema markup has become more preferred.
    If desired, you can use both simultaneously, such as what I’ve done with my business address on my homepage at Argent Media. For LocalBusiness Schema instructions, go here.
    3.  Testimonial
    Testimonials on a business website can often aid in persuading visitors to become customers.
    Because of this, Google allows local businesses to disclose that they have a testimonial by using semantic markup for reviews, and Google sometimes will display that information in conjunction with the business’s listings in SERPs. I believe tagging your testimonials can increase their chances of being displayed in the snippet text beneath your listing, and in the sample text callouts shown variously in the cached image of your webpage.
    For instance, check out the EagleLift foundation repair company in Los Angeles which has a testimonial page marked-up with the Schema for testimonials — and that testimonial text now shows up in both the description snippet and the cached page callout: Testimonials displayed in snippet text via Review Schema
    4.  Breadcrumbs
    Many sites I run across neglect to use breadcrumb navigation, despite it being highly useful, according to usability experts. Even on relatively small sites, breadcrumbs can help a user orient themselves in the site’s hierarchy, and provide them with related pages that they might wish to visit. For this reason, Google began bubbling-up this data to display in rich snippets as additional links beneath the hyperlinked page name.
    Simply from a statistical perspective, having additional links to your site on search results pages increases the odds of you having users click through over time — so, breadcrumb links are highly desirable! Google does a fair job of automatically detecting these, but there are times when a page’s breadcrumb code isn’t interpreted successfully by them in order to be displayed in the snippet. To increase your chances, use the breadcrumb markup on your site pages.
    For local sites targeting a few local city names or with multiple offices around a metro area, breadcrumbs are very worthwhile. For example, here’s a breadcrumb from my company site:
    Argent Media breadcrumb navigationOnce you’ve coded your page, check the code in Google’s Structured Data Testing Tool, which should reflect the breadcrumb links properly. The tool shows a search listing preview for my page at Argent Media, in addition to the extracted structured data.
    5.  Events
    If your company participates in some events or provides special services at different times/dates during the year, you might consider incorporating the Events Schema markup. If you are too intimidated to do structured data on your site, or you don’t feel confident at doing the coding necessary, Google does give you another option for Events at this time.
    In your Webmaster Tools account, Google has provided a beta service called the Data Highlighter for Events. Using this interface, you can highlight elements of events and tell Google which data item is which event element — Name, Date, Venue, Address, URL, etc.
    Data Highlighter In Use - example screengrab

    *If Google deems the Data Highlighter to be successful, they’ll likely expand it to include other types of rich snippets as well. I hope they do — this would be a great boon for small business websites!
    6.  Coupons/Offers
    If you have coupons or special offers, use the Offer Schema. It’s not clear to me that Google or Bing does any special snippet treatment for coupons or offers at this time, but they included it in Schema.org, and it would make sense for them to consider incorporating it more visibly at a future date, since they’re obviously interested in it, and it would be the sort of thing that end users would like a lot.
    7.  Videos
    Google recommends that you use the VideoObject Schema to help them to better interpret and represent your video content in search results. If you’re not using videos on your site, you should — video listings in search results take up more room in search results and are more attention-grabbing.
    Consumers apparently like seeing videos of products or of businesses providing services, so this can help with conversions as well. Here’s an example video page listing in search results from the Wasp Barcode Technologies company in Plano, Texas:
    Wasp Bar Code Video Page in Search Results
    8.  Recipes
    White House Honey Ale RecipeRecipes get tons of searches on the net, and for that reason search engines highlight the presentation of their listings in search results.
    Most local businesses don’t feel that they really lend themselves to food themes, so it might not occur to them to show a recipe or two on their site and mark it up for search engines. True, recipes may make more sense for a restaurant, hotel, caterer, or even a coffee shop, but there’s no reason why a business couldn’t publish some favorite recipe and get some extra traffic and ranking power by doing so.
    For instance, a lawyer recently made headlines by filing a Freedom of Information Request with the government in order to obtain President Obama’s beer recipe (“White House Honey Ale”). The lawyer was likely satisfied that the recipe is now published on the White House’s website, but he’s missed out on the opportunity of publishing the recipe on his own website and marking it up for search.
    The White House’s recipe is actually very non-optimal, because it was published in a couple of images instead of in text, and it won’t look as pretty in search results as recipes at the Food Network or AllRecipes.com.
    Your reason for publishing a recipe doesn’t have to be dramatic, though — just do it to interact with the Web community more and your business may benefit.
    9.  Individuals
    I’ve written before on how highlighting your employees can help with local search rankings. In addition to displaying author information, you can also mark up information about executives and employees on your site as well by using the Schema for a Person.
    10.  Tables & Bulleted Lists
    This doesn’t really require any special semantic markup — but, if you have tabular data or content that lends itself to presentation in a list, providing this on your website can again make your listing in search results get more attention, and it affords you the opportunity to display more info about your products and services before potential customers have even reached your website.
    Example — rental cabins in Gatlinburg, TN: Cabins of the Smokey Mountains listing in search resultsThe Cabins of the Smokey Mountains webpage presents their rental properties and features in a table, and Google has featured that below their listing. To enable this to happen, consider whether you have any information that might lend itself to a table or bullet list format, and create a page for it.
    For example, this could work great for many restaurants, if they put their menu in an HTML table — preferable, compared with the Flash/PDF/image formats that many eateries use instead.
    11.  Products
    If your business sells products, seriously consider incorporating data about them on your site and marking it up with the Product Schema. The product markup can enable your listings to show price, ratings, and availability in the search results: Note that the Product markup can be particularly effective in combination with breadcrumbs! (Shout out to Zachary Palmer for reminding me of this one.)
    12.  Meta Descriptions
    While it doesn’t involve Schema, Meta Descriptions have been one of the earliest and longest surviving semantic markup elements. They’re possibly the most-influential as well, since they often appear as the entire snippet text in search results.
    Despite all this, the Description Meta Tag is still frequently neglected on many small business websites. The Meta Description should briefly describe what a particular page is all about, incorporating good keywords. You should not use the same description for all pages, or even more than one page on your site!
    Don’t just parse the first sentence of a blog post into the description field, either — make them custom, describing the page. Twenty-five words ought to do it. Check in your Webmaster Tools and see if any changes are recommended, too — warnings about being too short or duplicated tags should alert you to adjust.
    13.  Facebook Open Graph
    Instead of cooperating with the search engines to make life easier for millions of webmasters and developers, Facebook uses the Open Graph protocol. To help ensure your site’s pages are presented well in Facebook search and various interfaces, incorporate Open Graph for local businesses as I suggested previously. Use it simultaneously with Schema.org protocol — the two do not conflict with one another.
    Each time you insert semantic markup, be sure to check it using Google’s Structured Data Testing Tool (previously called the “Rich Snippet Testing Tool”). I’ve seen many instances where designers and programmers think they’ve incorporated semantic markup, but instead it’s incorrectly configured and erroneous.
    So, go through this checklist and add any of the semantic markup options you can, and it may help you achieve a very rosy year for your website and business in 2013!
    Postscript: Regarding Testimonials, I made a mistake in citing the EagleLift company’s testimonial page and suggesting using the “Schema for testimonials”, which doesn’t exist. I realized after seeing a number of comments around this that it was confusing, and the page I provided as an example actually has a mistake in their structured code which Google’s Structured Data Tool did not catch when I looked at it. Their code referred to an item type for “http://schema.org/testimonial“, which is nonexistant. I had found the example, and the Structured Data Tool appeared to validate it, and I’d unintentionally recommended it.
    To clarify, as I stated earlier in that section, “Google allows local businesses to disclose that they have a testimonial by using semantic markup for reviews” on their website. That is correct guidance. Use the review schema at: http://schema.org/Review
    Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.
    Tag : ,

    How To: Social Media Marketing ........ Use Twitter Cards For Branding & Local SEO


    I’ve written before about the benefits of using various semantic protocols to improve your search engine optimization efforts. Using Schema.org markup and geotagging webpages can help search engines associate your website with online business listings, and a variety of semantic markup types can help your site’s listings appear more attractive in search engine results with rich snippets.
    Authorship markup, in particular, is my number one tactic for local SEO this year, enabling proprietors’ photos to appear as icons next to their listings in SERPs, drawing in consumers’ eyes and clicks.
    I’ve also previously recommended the use of Facebook’s Open Graph protocol, which facilitates Facebook’s understanding of websites and pages, enabling the pages to appear with more attractive treatment in Facebook search results and their various interfaces.
    In a similar fashion, the Twitter Cards protocol allows tweets containing links to display in a richer format, with more content visible and integrated as part of the tweet.
    Twitter provides a number of types of Cards: Summary, Product, Photo, Summary Large Image, Player, App and Gallery. Twitter also recently released a Lead Generation Card for a select group of brands.
    If you use Twitter much, you’ve probably seen Cards in the wild for major news sites and blogs. For instance, here’s a Summary card that shows up for Search Engine Land:
    Twitter Summary Card
    What many small businesses don’t realize is that they can also qualify for this enhanced display, and they ought to implement it.
    If you’re an SMB that follows my column here regularly, you will hopefully already be involved in blogging and Twitter for SEO and social marketing value. If so, you’re already well positioned to benefit from Twitter cards.
    This tweet treatment is probably not worthwhile unless you’re regularly blogging or adding articles to your site, as the primary benefit is for those who are actively posting links back to their sites from their Twitter accounts. The Card makes their tweets expandable, allowing their content to be visible inline within Twitter.
    Here’s an example of how a small business’ tweets could look with the Twitter Cards Summary code:
    Local business Twitter Card
    For small business blogs, Twitter cards can be great for online brand development. Similar to rich snippets in search engine results, the enhanced layout makes the account’s tweets more noticeable and engaging, causing their links to appear more legitimate, thereby reducing consumers’ hesitancy to click through. This treatment likely will correlate to increased click-throughs.
    However, if you need more incentive, your enhanced tweets could also be beneficial for SEO. Some tweet pages get indexed by search engines, and the Twitter Card contents get indexed with them. Sure, the links on these pages are nofollowed, so PageRank will not flow. However, nofollow doesn’t necessarily apply to social signals, and these pages could also convey local citation value in some cases. (Local citations are a ranking factor for Google Local Searches.)
    If retweets or Author Rank influence rankings are associated with your account, then a more attractive and engaging tweet treatment may help beef up your ranking ability over time. The added text or image content will certainly make the Twitter status pages more effective in and of themselves.
    The code to enable Twitter Cards is very simple to include on blog posts – it consists of a few meta tags. Here’s an example of tags for a Summary card:
    Example Code for Implementing Twitter Cards on a Blog
    WordPress users can simply install Joost de Valk’s WordPress SEO Plugin and enable Twitter Cards in the settings. There are other Twitter Cards plugins as well, but the SEO Plugin provides an all-in-one plugin for meta descriptions, titles, robots meta tags, Open Graph and more.
    There are relatively few sites that have implemented Twitter Cards, so it’s too early for there to be a whole lot of data to establish how much impact they may really have on local search performance. However, there are sufficient parallels with other similar online display treatments to logically infer that this will also be beneficial, and it certainly enhances social media brand building efforts.
    Besides, the code is very simple to include with blogs — so why not?
    Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.
    Tag : ,

    The Won Blog Of EARN FOR TEICKS. The Blog Created by Bijoy Kumar Biswas. Designed by বিজয়*বিজন*বিজু