HTML হাতেখড়ি [পর্ব-৩] HTML ফরমেটিং (Formatting), লিস্টিং (Listing) এবং কমেন্ট(Comment)

আজ আমরা HTML Comment, Listing  এবং Formatting আলোচনা করব নিয়ে।

HTML Comment:

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

HTML Comment কি?

উত্তর: কোডিং এর সুবিধার্থে যে সাইডনোট কোডিং এর ভিতরে লেখা হয় এবং যা ব্রাউজার প্রদর্শন করে না তাই হল HTML Comment ।

HTML Comment কেন ব্যবহার করা হয়?

উত্তর: এর সুবিধাগুলো নিম্নে দেওয়া হল:

• HTML Comment দিলে কোড ফরমেট করতে সুবিধা হয়।
• একের অধিক ব্যক্তি একই ওয়েব সাইটে কাজ করলে তারা পরস্পরের কাজ সম্পর্কে ধারণা পায়।
• ডেভলপার তার নিজের নাম ও ওয়েব সাইটের ইনফরমেশন খুব সহজেই কোডের ভিতর রাখতে পারে।

HTML Comment কিভাবে লেখা হয়?

HTML Comment লেখার জন্য নিচের কোডটি টাইপ করুন এবং ফাইলটি যেকোন নামে সেভ করে আউটপুট দেখার জন্য ডাবল ক্লীক করুন এবং আউটপুট হিসেবে আপনি কিছুই দেখবেন না।
<!-- This is a comment -->
কিন্তু এবার সিম্বল ভুল করে দেখুন অর্থা‍ৎ এই <! ‍চিহ্নটি ছাড়া দেখুন, দেখবেন আপনার ভুল করা লাইনটি সিম্বলসহ দেখাচ্ছে। আশাকরি ব্যাপারটি বুঝতে পেরেছেন।

HTML List:

HTML List শিখতে গেলে প্রথমেই আমাদের মনে যে প্রশ্নগুলো এসে যায় তা প্রশ্নের সাথে উত্তরসহ নিম্নরূপ:

HTML List কত প্রকার?

উত্তর: HTML List সাধারণত ‍দুই ধরণের হয়ে থাকে। যথা:

• Ordered List
• Unordered List

এখন আমাদের বুঝতে হবে Ordered List কি এবং Unordered List কি?

Ordered List:

যেকোন নাম্বার বা character যুক্ত লিস্টকে Ordered List বলা হয়। Ordered List  <ol> ট্যাগ দিয়ে শুর হয়।

Unordered List:

যেকোন সিম্বল যুক্ত লিস্টকে Unordered List বলা হয়। Unordered List  <ul> ট্যাগ দিয়ে শুর হয়।

HTML List কেন ব্যবহার করা হয়?

উত্তর: HTML List ব্যবহার করা হয় লেখার সৌন্দর্য বৃদ্ধির জন্য।

HTML List কিভাবে লেখা হয়?

উত্তর: HTML List <ol> অথবা <ul> ট্যাগ দিয়ে শুরু এবং শেষ(</ol> অথবা </ul>)  হয়। আর যে শব্দগুলো আপনি লিস্টের ভিতরে রাখবেন তারা প্রত্যেককে <li> ট্যাগ দিয়ে শুরু এবং শেষ(</li>) হবে। উদাহরণসরূপ আপনি নিম্নের কোডদুটি লক্ষ্য করুন।

Unordered List এর ক্ষেত্রে,

<ul>
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ul>

output:

• Mother Board
• Hard Disk
• Processor
• Ram

Ordered List এর ক্ষেত্রে,

<ol>
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ol>

output:

1. Mother Board
2. Hard Disk
3. Processor
4. Ram

Ordered HTML List কত প্রকার এবং কিভাবে লেখা হয়?

উত্তর: অনেক রকম Ordered HTML List রয়েছে। নিম্নে কিছু দেওয়া হল:

Numbered list:

<ol>
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ol>

output:

1. Mother Board
2. Hard Disk
3. Processor
4. Ram

Letters list:

<ol type="A">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ol>

output:

1. Mother Board
2. Hard Disk
3. Processor
4. Ram

Lowercase letters list:

<ol type="a">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ol>

output:

1. Mother Board
2. Hard Disk
3. Processor
4. Ram

Roman numbers list:

<ol type="I">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ol>

output:

1. Mother Board
2. Hard Disk
3. Processor
4. Ram

Lowercase Roman numbers list:

<ol type="i">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ol>

output:

1. Mother Board
2. Hard Disk
3. Processor
4. Ram

Unordered HTML List কত প্রকার এবং কিভাবে লেখা হয়?

উত্তর: অনেক রকম Unordered HTML List রয়েছে। নিম্নে কিছু দেওয়া হল:

Disc bullets list:

<ul type="disc">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ul>

output:

• Mother Board
• Hard Disk
• Processor
• Ram

Circle bullets list:

<ul type="circle">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ul>

output:

• Mother Board
• Hard Disk
• Processor
• Ram

Square bullets list:

<ul type="square">
<li>Mother Board</li>
<li>Hard Disk</li>
<li>Processor</li>
<li>Ram</li>
</ul>

output:

• Mother Board
• Hard Disk
• Processor
• Ram

উপরের উদাহরণগুলো থেকে বোঝা যাচ্ছে যে, শুধুমাত্র type পরিবর্তন করার ফলে লিস্ট পরিবর্তন হয়ে যাচ্ছে।

HTML Formatting:

আমরা যখন মাইক্রোসফট ওয়ার্ড কোন কিছু লিখি তখন অনেক নিয়ম মেনে আমাদের লিখতে হয়। যেমন: কোন লেখাকে  মাঝখানে লিখতে হলে Ctrl+E চাপ দিতে হয় অথবা সবগুলো অক্ষর বড় হাতের লিখতে হলে Caps Lock সুইচ অন করতে হয়। যাই হোক এই জিনিসগুলো হল ফরমেটিং এর একটা অংশ। এখন আপনি কোন কিছু লেখার সময় আপনাকে কিছু নিয়ম মানতে হবে অর্থা‍ৎ কিছু ট্যাগ ব্যবহার করতে হবে। আর এটাই হল HTML Formatting ।

HTML Formatting যেভাবে করা হয়:

লেখা মাঝখানে যেভাবে লিখব:

<center>This tag shows the paragraph center</center>

আউটপুট:

This tag shows the paragraph center

লেখা যেভাবে মোটা করে লিখব:

<b>This text is bold</b>

আউটপুট:

This text is bold

লেখা যেভাবে বাকা করে লিখব:

<i>This text is italic</i>

আউটপুট:

This text is italic

লেখা যেভাবে ছোট করে লিখব:

<small>This text is small</small>

আউটপুট:

This text is small

লেখায় যেভাবে subscript এবং superscript ব্যবহার করব:

<p>This is_subscript and ^superscript</p>

আউটপুট:

This is _subscript and ^superscript

আরো অতিরিক্ত কিছু ট্যাগ:

Emphasized text:

<em>Emphasized text</em>

আউটপুট:

Emphasized text

Definition term:

<dfn>Definition term</dfn>

আউটপুট:

Definition term

Sample computer code text:

<samp>Sample computer code text</samp>

আউটপুট:

Sample computer code text

Keyboard text:

<kbd>Keyboard text</kbd>

আউটপুট:

Keyboard text

Variable:

<var>Variable</var>

আউটপুট:

Variable

Citation:

<cite>Citation</cite>

আউটপুট:

Citation