Popular Post

zwani.com myspace graphic comments

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 : ,

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