News

Maa Computer News !!
!!!!*** সাইটটে কাজ চলেছ, *** দেশে আনতে শুভ দিন কারগরি প্রশিক্ষণ নিন। !!!! ===MTCTC জুলাই-সেভটেম্বর/জুলাই- ডিসেম্বর (৩/৬মাস মেয়াদী) কম্পিউটার অফিস অ্যাপ্লিকেশন(৭৬) কোর্সে ভর্তি চলছে ভর্তি জন্য রেজি: করতে Click Here

Thursday, October 15, 2015

ফন্ট ট্যাগ

যা জানবো...

HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে। এখানে ফন্ট ট্যাগ ব্যবহারের বিস্তারিত পদ্ধতি আলোচনা করা হবে।

ফন্ট ট্যাগ

HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখানে size="5"  অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma"  প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> http://matechcomputer.blogspot.com/</title>
</head>
<body bgcolor=" green">
<font size="2" face="Verdana">
This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >
Bangladesh is a beautiful country.
</font>

</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে প্রদর্শিত দেখাবে। 

টেক্সট ফরমেটিং

যা জানবো...

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

 

টেক্সট ফরমেটিং

Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইত্যাদি টেক্সট ফরমেটিং এর জন্য ব্যবহৃত হয়। HTML এর ক্ষেত্রেও Microsoft Word এর মত টেক্সট ফরমেটিং এর বিশেষ গুরুত্ব রয়েছে। একটি ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করতে টেক্সট ফরমেটিং বিষয়ে উপযুক্ত জ্ঞান থাকা দরকার। HTML এ টেক্সট ফরমেটিং এর জন্য <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>, <strong>, <samp>, <tt>, <abbr>, <var>, <code>, <address> ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।


উদাহরণ প্রোগ্রাম

<html>
<head>
<title>www.matechcomputer.blogspot.com</title>
</head>
<body bgcolor="green">

<p>
<b> (Bold)</b>
This is an example of bold. <br />
<i>(Italic)</i>
This is an example of Italic. <br />
<u> (Underline) </u>
This is an example of Underline. <br />
<strike>(Strike) </strike>
This is an example of Strike. <br />
(CO<sub>2</sub>)
This is an example of Subscript. <br />
(E=MC<sup>2</sup>)
This is an example of Superscript. <br />
<big>(Big text)</big>
This is an example of Big. <br />
<small>(Small text)</small>
This is an example of Small. <br />
<strong>(Strong text)</strong>
This is an example of Strong. <br />
<samp>(Sample text) </samp>
This is an example of Sample. <br />
<tt>(Teletype)</tt>
This is an example of Teletype. <br />
(<abbr> U.N.O</abbr> United Nations Organization.)
This is an example of Abbreviation. <br />
(<var>x</var> is a variable.)
This is an example of Variable <br />
(<code>Computer code text.</code>)
This is an example of Code.<br /> <address>
(Written by Saifur<br />
Address:
http://matechcomputer.blogspot.com/<br />
E-mail:saifur258@gmail.com)</address>
This is an example of Address <br />
</p>


</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।  

প্যারাগ্রাফ

যা জানবো...

প্যারাগ্রাফ ট্যাগটি সর্বাধিক গুরুত্বপূর্ণ এবং অত্যন্ত প্রয়োজনীয় একটি ট্যাগ। প্যারাগ্রাফ ট্যাগের ভেতরেই টেক্সটগুলো বিভিন্নভাবে প্রকাশিত হয়। এখানে প্যারাগ্রাফ ট্যাগ সম্পর্কে উদাহরণসহ বিস্তারিত বিবরণ দেওয়া হবে।


প্যারাগ্রাফ

যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির   জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p>। ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br /> ট্যাগ ব্যবহার করা হয়।  


উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.matechcomputer.blogspot.com</title>
</head>
<body bgcolor=" green">
<p>This is a paragraph.</p>
<p>
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
</p>
<p>
This is a paragraph.<br />
This is a paragraph.<br />
This is a paragraph.<br />
This is a paragraph.<br />
</p>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে  প্রদর্শিত  দেখাবে। 

হেডিং

যা জানবো...

এইচটিএমএল এ হেডিং ট্যাগ একটি গুরুত্বপূর্ণ ট্যাগ । সাধারনত এর মাধ্যমে কোন প্যারাগ্রাফের শিরোনাম লেখা হয়। এ অধ্যায়ে আমরা হেডিং এর কোডিং পদ্ধতি সম্পর্কে জানবো।

হেডিং

HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6>  । যদি বড় সাইজের অক্ষরে শিরোনাম লেখার প্রয়োজন হয় তাহলে <h1> </h1> ট্যাগের মাঝে লেখা হয়। এবং অন্যান্য গুলো ব্যবহার করলে লেখার সাইজ আস্তে আস্তে ছোট হবে।


 

 

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.matechcomputer.blogspot.com</title>
</head>
<body bgcolor=" green">
<h1>This is an example of heading 1</h1>
<h2>This is an example of heading 2</h2>
<h3>This is an example of heading 3</h3>
<h4>This is an example of heading 4</h4>
<h5>This is an example of heading 5</h5>
<h6>This is an example of heading 6</h6>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত দেখাবে। 

HTML এট্রিবিউটস্

যা জানবো...

HTML এট্রিবিউটস্ সর্বাধিক গুরুত্বপূর্ণ এবং অত্যন্ত প্রয়োজনীয় একটি বিষয়। HTML ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য এট্রিবিউটস ব্যবহার করা হয়। এখানে উদাহরণ সহ HTML এট্রিবিউটস্ সম্পর্কে বিস্তারিত আলোচনা করা হবে।


HTML এট্রিবিউটস্

HTML এ এট্রিবিউটস ইলিমেন্ট এর আনুসাঙ্গিক তথ্য প্রকাশ করে । মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য এট্রিবিউটস ব্যবহার করা হয়। যেমন <font size="5" face="Tahoma" color="red"> This is a paragraph.</font>  এখানে size="5"  অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ This is a paragraph. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma"  প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।


কিছু  HTML এট্রিবিউটস্   

ট্যাগ
এট্রিবিউটস্   
<font>
size="5" face="Tahoma" color="red"
<h1>….<h6> <p>
align="center" align="left" align="right" title="Bangladesh"
<body>
bgcolor="green" background="../images/ele.png"
<div>
id="book" class="pen" align="center"
<img> <table>
height="100px" width="50px"  border="5px"
<input />
type="text" name="TextField"


উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.matechcomputer.blogspot.com</title>
</head>
<body bgcolor=" green">
<font size="5" face="Tahoma" color="red">
This is a paragraph.
</font>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত  দেখাবে। 

HTML ইলিমেন্ট

যা জানবো...

এখানে ধারাবাহিক ভাবে বাংলা ভাষায় HTML এর উপর টিউটোরিয়াল লেখা হয়েছে । ডান পাশের ধারাবাহিক লিংক থেকে HTML সম্পর্কিত বিস্তারিত জ্ঞান অর্জন করা যাবে।


HTML ইলিমেন্ট

HTML এ যেকোন শুরু ও শেষ ট্যাগ এবং মাঝের অংশকে ইলিমেন্ট বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে, তাই <h1> This is an example of element.</h1> একটি ইলিমেন্ট। কিছু কিছু ট্যাগের কোন ইলিমেন্ট থাকে না যেমন <br /> ,<img /> ইত্যাদি।

শরু ট্যাগ
ইলিমেন্ট কনটেন্ট
শেষ ট্যাগ
<h1>
This is an element.
</h1>
<p>
This is paragraph.
</p>
<br />


<img />



সাধারণতঃ যে সকল ট্যাগের শেষ ট্যাগ থাকে না তাদের ইলিমেন্টও থাকে না। এ ধরণের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভূক্ত থাকে, এবং এর আগে একটা স্পেস দিতে হয়। 

HTML ট্যাগ কি?

যা জানবো...

এইচটিএমএল এর সাধারন ট্যাগ সমূহ এবং এগুলোর কাজের সাধারন বিবরণ সম্পর্কে জানা খুবই গুরুত্বপূর্ণ। আমরা সহজেই এখান থেকে এইচটিএমএল এর সাধারন ট্যাগ সমূহ এবং এগুলোর কাজের সাধারন বিবরণ জেনে নিতে পারব।

HTML ট্যাগ কি?

HTML এ প্রোগ্রাম লেখার জন্য  <>  এবং </> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body  ইত্যাদি  Keyword  ব্যবহার করা হয়। <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন <html>  এবং </html> । <body> হল body শুরু ট্যাগ এবং </ body> হল body শেষ ট্যাগ।


HTML এর সাধারন ট্যাগ সমূহ


ট্যাগ সমূহ
বর্ণনা
<html> </html>
HTML ডকুমেন্ট নির্দেশ করে।
<head></head>
প্রোগ্রামের head  অংশ নির্দেশ করে ।
<title></title>
ডকুমেন্ট টাইটেল নির্দেশ করে।
<body></body>
প্রোগ্রামের মূল content অংশ নির্দেশ করে।
<a></a>         
Anchor ট্যাগ।
<abbr></abbr>         
Abbreviation ট্যাগ।
<b></b>
Bold টেক্সট নির্দেশ করে।
<i></i>
Italic টেক্সট নির্দেশ করে।
<big></big>
স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।
<small></small>
স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।
<blockquote> </blockquote>
বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
<br / >
একটা লাইন ব্রেক তৈরি করে ।
<code></code>
কম্পিউটার কোড টেক্সট প্রকাশ করে।
<table></table>
টেবিল তৈরিতে ব্যবহৃত হয়।
<col></col>
টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।
<td></td>
টেবিলের সেল তৈরিতে ব্যবহৃত হয়।
<tr></tr>
টেবিলের সারি তৈরিতে ব্যবহৃত হয়।
<form></form>
ফরম তৈরিতে ব্যবহৃত হয়।
<h1></h1>
হেডার ট্যাগ 1-6 পর্যন্ত হয়।
<hr/>
সমান্তরাল রেখা তৈরি করে।
<img/>
ছবি যুক্ত করতে ব্যবহৃত হয়।
<input></input>
ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।
<li></li>
লিষ্ট তৈরিতে ব্যবহৃত হয়।
<meta></meta>
Meta ট্যাগ
<ol></ol>
অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<ul></ul>
আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
<p></p>
প্যারাগ্রাফ নির্দেশ করে
<pre></pre>
pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।
<tt></tt>
টেলিটাইপ টেক্সট নির্দেশ করে।
<strong></strong>
Strong টেক্সট নির্দেশ করে।
<sub></sub>
sub-scripted text নির্দেশ করে।
<sup></sup>
superscripted text নির্দেশ করে।

এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি

যা জানবো...

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়।এখানে এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি, একটি প্রাথমিক প্রোজেক্ট এবং সাধারন ট্যাগসমূহ নিয়ে আলোচনা করা হবে।

প্রোগ্রাম লেখার পদ্ধতি

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।


HTML এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ

<html>
<head>
<title> www.matechcomputer.blogspot.com</title>
</head>
<body>
This is my first web page. I am learning now HTML.
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করতে হবে।

 

HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ

প্রোগ্রামের মধ্যে <> এবং < /> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body এগুলোকে Keyword বলে এবং <> বা < /> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে ট্যাগ বলা হয়। যেমন <head> অর্থ head ট্যাগ। HTML এ দুই ধরনের ট্যাগ রয়েছে , <> চিহ্ন ও keyword নিযে গঠিত ট্যাগকে শুরু ট্যাগ এবং < /> চিহ্ন ও keyword নিযে গঠিত ট্যাগকে শেষ ট্যাগ বলে যেমন < title> অর্থ title শুরু ট্যাগ এবং <title /> অর্থ title শেষ ট্যাগ।


<html> বা html ট্যাগ:

HTML এ প্রোগ্রাম লেখার জন্য সমস্ত code কে <html> </html> এর মাঝে লেখা হয়।


<head> বা head ট্যাগ:

<head></head> এর ভেতরে <title> </title> ট্যাগ লেখা হয় যার মাধ্যমে ওয়েবসাইটের title বা শিরোনাম প্রদর্শনের ব্যবস্থা করা হয়। এই code এ title হিসেবে www.matechcomputer.blogspot.com লেখা হয়েছে যা ব্রাউজারের title bar এ দেখা যাচ্ছে। এছাড়া css এর stylesheet কে head ট্যাগের মধ্যেই call করা হয়।


<body> বা body ট্যাগ:

<body> বা body ট্যাগ খুবই গুরুত্বপূর্ণ। একটি ওয়েব সাইটের মূল Content সমূহ Body ট্যাগের মধ্যে অবস্থান করে । <body></body> ট্যগের মধ্যেই বিভিন্ন Text , Image, Table ইত্যাদি ফরমেটিং এর জন্য বিভিন্ন ট্যাগ সমূহ লেখা হয় । এই code এ <body></body> ট্যগের মধ্যে  This is my first web page. I am learning now HTML. লেখা হয়েছে যা ব্রাউজারের মূল অংশে প্রদর্শিত হচ্ছে।

এইচটিএমএল এর সংক্ষিপ্ত ইতিহাস

যা জানবো...

HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। এখানে এইচটিএমএল এর সংক্ষিপ্ত ইতিহাস তুলে ধরা হবে।

HTML এর ইতিহাস

HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে WC3 কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।

HTML কি?

যা জানবো...

এখানে ধারাবাহিক ভাবে বাংলা ভাষায় HTML এর উপর টিউটোরিয়াল লেখা হয়েছে । ডান পাশের ধারাবাহিক লিংক থেকে HTML সম্পর্কিত বিস্তারিত জ্ঞান অর্জন করা যাবে।




HTML কি?

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>