HTML শিখুন- পর্ব ১

heading কি এবং কোথায় লাগেঃ

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

<h1>Web Design</h1>
<h2>Web Design</h2>
<h3>Web Design</h3>
<h4>Web Design</h4>
<h5>Web Design</h5>
এর আউট পুট দেখলে এরকম দেখাবে ।

Web Design

Web Design

Web Design

Web Design

Web Design

এখানে ৫ টি  ট্যাগ ই দেখান হয়েছে । পার্থক্য হচ্ছে এগুলো আস্তে আস্তে ছোট হয়ে আসতেছে । আপনার যেটা দরকার সেটা বেছে  নিন । ধন্যবাদ ।
প্যারাগ্রাফ কিভাবে বানাবেনঃ  HTML  এ কোন প্যারাগ্রাফ  লিখার জন্য সাধারণত ছোট ১ টি ট্যাগ <p></p> ব্যবহার করা হয় ।
নিচের উদাহরন টি লক্ষ করুন -
<p>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</p>
দেখুন এখানে ছোট ১ টি.প্যারাগ্রাফ লিখা হয়েছে  যা রান করলে আপনি ব্রাউজার এ এই  পারাগ্রাফ টি দেখতে পাবেন ।
এবার আসুন হেড লাইন এবং .প্যারাগ্রাফ একসাথে হলে কেমন দেখায় ।
<h1>About Bangladesh</h1>
<p>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</p>
রান করলে দেখতে পাবেন এরকম ।

About Bangladesh

Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh
একটি সুন্দর হেড লাইন  সম্বলিত পারাগ্রাফ আপনি খুব সহজেই তৈরি করতে পারলেন।

HTML লিস্টঃ অনেক সময় বিভিন্ন ডাটা ওয়েব পেজ এর মধ্যে লিস্ত আকারে দেখাতে হয় । এর জন্যই এই লিস্ত এর ব্যবহার ।

লিস্ত সাধারণত ২ ধরনের হয়  -
<ul></ul>
<ol></ol>
এগুলোর পুরা নাম হল .
<ul></ul>==unordered list
<ol></ol>==ordered list
unordered list এভাবে লিখতে হয় -
<ul>
<li>Dhaka</li>
<li>Rajshahi</li>
<li>Khulna</li>
</ul>
রান করলে আউট পুট দেখতে পাবেন এরকম-

• Dhaka
• Rajshahi
• Khulna

এবার আসুন ordered list <ol></ol> এর ব্যবহার-
<ol>
<li>Dhaka</li>
<li>Rajshahi</li>
<li>Khulna</li>
</ol>

আউট পুট হবে এরকম  -

1. Dhaka
2. Rajshahi
3. Khulna

এখন নিশ্চয় আপনি বুঝতে  পাচ্ছেন কোনটার কি কাজ ।
কোন লিস্ত এর ভিতরে কি কি আইটেম থাকবে তার জন্য  <li></li> ট্যাগ ব্যবহার করা হয় । <li> এর পুরা নাম list item ।
HTMLএ টেবিল এর ব্যবহারঃ 
সাধারণত টেবিল আকারে কোন তথ্য ওয়েবপেজ এ দেখানর জন্য এটি ব্যবহার করা হয় । টেবিল সাধারণত এভাবে লিখতে হয় ।
<table border=”1″>
<tbody>
<tr>
<td>First Row , First Column</td>
<td>First Row , Second Column</td>
</tr>
<tr>
<td>Second Row , First Column</td>
<td>Second Row , Second Column</td>
</tr>
</tbody>
</table>
আউট পুট এরকম হবে ।

First Row , First Column	First Row , Second Column
Second Row , First Column	Second Row , Second Column

<tr> দিয়ে টেবিল এর সারি আর  <td> দিয়ে টেবিল এর  কলাম লেখা হয় ।
এখন যদি টেবিল এ  header  যোগ করতে চাইলে নিচের কোড টি পেস্ট করুন ।
<table border=”1″>
<tr>
<th width=”98″>Country</th>
<th width=”122″>Capital</th>
</tr>
<tr>
<td>Bangladesh</td>
<td>Dhaka</td>
</tr>
<tr>
<td>India</td>
<td>Dilli</td>
</tr>
</table>

এর আউট পুট দেখতে পাবেন

Country	Capital
Bangladesh	Dhaka
India	Dilli

<th> হল mainly টেবিল এর  header যার নিচে অনেকগুলো একই টাইপ এর ডাটা দেখান হয় ।

HTML ছবিঃ

HTML দিয়ে কোন ওয়েবপেজ এ ছবি সেট করার জন্য নিচের এই কোড টি ব্যবহার করা হয় ।
<img src=”dhaka-city.gif” alt=”Dhaka” />
src=কোন ছবি picture বা image   সেট করার জন্য । alt== সেই image  টার description নির্দেশ করে  যদিও এটি দেখা যাবেনা  কিন্তু এটি  সার্চ ইঞ্জিন অপটিমাইজেশন  এর কাজে লাগে । সার্চ ইঞ্জিন অপটিমাইজেশন নিয়ে আমরা পরে আলোচনা করব  ইনশাল্লাহ ।

HTMLইতালিক লেখাঃ 
অনেক সময় ওয়েবপেজ এর কোন পারাগ্রাফ কে দৃষ্টিনন্দন ও সুন্দর করার জন্য লেখাকে বাঁকা করে দিতে হয় যেটা কিনা HTML এর ছোট ১ টি কোড দিয়েই করা যায় । এটি  হল-  <i></i> ট্যাগ । পুরা পারাগ্রাফ টি এই ট্যাগ এর মধ্যে দিয়ে দিলেই আপনার পুরা প্যারাগ্রাফ টি ইতালিক স্টাইল এ হয়ে যাবে । যেমন-
<i><p>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</p></i>

রান করলে যা দেখাবে টা হল এরকম- 
Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh

এবার যদি আপনি এতাকে বোল্ড বা মোটা করতে চান তাহলে আপনাকে <i></i> ট্যাগ এর পরিবরতে  <b></b> ট্যাগ ব্যবহার করতে হবে -
<b><p>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</p></b>
এবার রান করলে দেখুন এরকম -
Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh

লাইনে ব্রেকঃ

অনেক সময় ২ টি লাইনের মধ্যে গ্যাপ বা দূরত্ব সৃষ্টি করার জন্য HTML এর <br /> কোড টি ব্যবহার করা হয় । যেমন নিচের উদাহরন টি দেখুন ।
<i>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</i>
<br />
<i>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</i>

এবার রান করে আউট পুট দেখুন নিচের মত -
Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh
Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh

এখন নিশ্চয় বুঝতে পারছেন <br /> ট্যাগ এর কি কাজ ।
২ টি ওয়ার্ড এর মাঝখানে গ্যাপ বা দূরত্বঃ

অনেক সময় লেখাকে আর ফুটে তোলার জন্য ২ টি শব্দের মাঝখানে ফাঁকা রাখতে হয় ।  আর টা দেওয়ার জন্য এই কোড টি &nbsp ব্যবহৃত হয় ।
যেমন-
<i>Welcome &nbsp;&nbsp;&nbsp;To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</i>

এর আউট পুট এরকম হবে ।
Welcome    To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh
লক্ষ করলে দেখবেন যে  Welcome এবং  To লেকার মাঝখানে অনেক বড় ১ টা ফাঁকা হয়েছে । আপনি আর বেশি ফাঁকা করতে চাইলে অনেকগুলো  &nbsp; কোড ব্যবহার করবেন । মোটকথা লেখাকে সাজাতে গোছাতে যা লাগে টা আপনাকে করতে হবে । ধন্যবাদ ।
Horizontal Line ব্যবহার করাঃ

অনেক সময় লেখাকে সুন্দর করার জন্য Horizontal Line এর কোড <hr /> ব্যবহার করা হয়  যা কোন লেখাকে আরও আকর্ষণীয় করে তলে ।। যেমন নিচের উদাহরন টি লক্ষ করুন ।
<i>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</i>
<br />
<hr />
<i>Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh</i>

এটি রান করলে আপনি এরকম দেখবেন ।
Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh

---

Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh.Welcome To Digital Bangladesh
এখানে ২ টি প্যারাগ্রাফ এর মাঝখানে    <hr /> ব্যবহার করা হয়েছে যার কারনে মাঝখানে এটি দেখাচ্ছে ।

<pre>ট্যাগ এর ব্যবহার করাঃ
এতক্ষন আমরা সিখলাম ওয়ার্ড গুলোকে এবং লেখাগুলোকে সাজানর জন্য &nbsp; এবং <br /> কোড ব্যবহার করেছি ।  এখন এমন ১ টি কোড শিখব যা দিয়ে আপনি অনায়াসে লেখাকে সাজাতে পারবেন ।
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>
এবার রান করে দেখুন কি আউট পুট দেখায় ।

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks

দেখুন লক্ষ করে যে আপনি যেভাবে লেখাকে লিখেছেন হুবহু সেভাবেই ব্রাউজার এ দেখতে পাচ্ছেন ।
এবার আমরা <pre> ট্যাগ ব্যবহার করে নতুন ১ টি জিনিস শিখব । টা হল পিকচার গ্যালারী । নিচের উদাহরন টি লক্ষ করুন ।
<pre><img src=”1.gif” />&nbsp;&nbsp;<img src=”2.gif” />&nbsp;&nbsp;<img src=”3.gif” />&nbsp;&nbsp;</pre>
রান করলে আপনি সুন্দর ১ টি পিকচার গ্যালারী ।

দেখলেন তো ১ টি গ্যালারী কিভাবে অনায়াসে তৈরি করা হয়ে গেল । এবার আপনি আপনার মত বানিয়ে ফেলেন ।
HTML এর ২ টি গুরুত্বপূর্ণ ট্যাগঃ

<div>=সাধারণত এই ট্যাগ এর ভিতরে অনেকগুলো HTML ট্যাগ নেয়া যায় । যেমন -
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
এখানে  <h3> এবং  <p> ২ টি ট্যাগ ই <div></div> ট্যাগ টির মধ্যে লিখা হয়েছে ।এর ১ টি ট্যাগ হল <span> ট্যাগ যা অনেক বড় কোন লেখা থেকে বা অন্য কোন ইনফর্মেশন থেকে ছোট কোন কিছুকে সেটার থেকে আলাদা স্টাইল করার জন্য ব্যবহার করা হয় । যেমন-
<p>Welcome<span>To</span>Digital Bangladesh.</p>
এখানে  To লেখাটি  <span> ট্যাগ এর মধ্যে থাকার কারনে এই সম্পূর্ণ লেখাটির  থেকে আলাদা একটা স্টাইল হবে । আপনি পুরা প্যারাগ্রাফ টির কালার যদি লাল দেন আর এটির কালার যদি নীল দেন তাহলে সুধু এটিই নীল হবে আর পুরা প্যারাগ্রাফ  টি লাল হবে ।
HTML লিঙ্কঃ 
আপনারা যেকোনো ওয়েবসাইট দেখলেই দেখবেন সেখানে অনেকগুলো মেনু থাকে যাতে ক্লিক দিলেই অন্য একটি পেজ এ চলে যায় । অথবা অন্য কোন ওয়েবসাইট এ চলে যায় । এটিই হল লিঙ্ক যা দিলে অন কোন পেজ এ চলে যাবে । এর জন্য HTML এর ছোট্ট একটা কোড হল <a></a> ট্যাগ ব্যবহার করা । যেমন নিচের উদাহরন টি লক্ষ করুন ।
<a href=”http://www.google.com/”>Visit Google</a>
এটি আপনি রান করলে দেখতে পাবেন এরকম -
Visit Google

এখানে href=”http://www.google.com/”> দেওয়া হয়েছে । যার কারনে এই লিঙ্কটিতে ক্লিক দিলেই গুগল এ চলে যাবে । আপনি যদি এটার বদলে অন্য কোন পেজ এর লিংক দেন তাহলে ক্লিক দিলে সেই পেজ এ চলে যাবে ।
এবার আপনি যদি এরকম চান যে অন্য কোন পেজ এ না গিয়ে এই পেজ এর কোন জায়গায়  যাক তাহলে আপনি নিচের কোড টি ব্যবহার করুন ।
<a href=”#tips”>Click</a>
এই লিংক এ ক্লিক দিলে এই পেজ এর যেখানে   id=”tips” দেয়া আছে সেখানে চলে যাবে -
<div  id=”tips”>Hello you are welcome</div>
উপরের  Click এ ক্লিক দিলেই  Hello you are welcome লেখার কাছে চলে যাবে যেহেতু এর id=”tips” দেয়া আছে । আশা করি বুঝতে পেরেছেন ।
এর পরবর্তী লেসন গুলোতে আমরা এইচটিএমএল এর আরও বিস্তারিত আলোচনা করব  ইনশাল্লাহ ।