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<sub> subscript</sub> and <sup>superscript</sup></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

Level New

আমি মোহাম্মদ রকিবুল হায়দার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 77 টি টিউন ও 206 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

www.downloadzone3.tk


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level New

ওহ অনেক দিন পর এসেই টিটি তে html টিউন পেয়ে গেলাম। নিজের একটা (ফ্রী) ওয়েবসাইট এর জন্য কাজ করছি বলে খুবই উপকারে আসবে রকিবুল ভাইয়ের টিউনগুলো। দশটি পর্ব হলে একসাথে প্রিন্টঅঊট দিব।html আল্প স্লপ জানি তাই web page maker দিয়ে কাজ করছি।
সমস্যায় পড়লে রকিবুল ভাই তো আছেই…

    টিউনগুলো আপনার উপকারে আসবে শুনে খুবই ভালো লাগছে। আর যেকোন সমস্যায় পড়লে জানাতে সঙ্কোচ বোধ করবেন না।

Level 0

ধন্যবাদ হায়দার ভাই , চালিয়ে যান । ভাল লাগছে,,,,,,,,,,,,,,,,,,,,,,,,

খুব ভাল হয়েছে।
ধন্যবাদ নিয়মিত গুরুত্বপূর্ন টিউটোরিয়ালটি চালিয়ে যাওয়ার জন্য।
সকল ইন্টারনেট ব্যবহার কারীদের কমপক্ষে html এর ধারনা নেয়া উচিৎ এবং খুব কম সময়েই তা সম্ভব।

ধন্যবাদ খব ইইইই ভাল লাগল …………………খ ব ই ভাল হইসে…………।ভাল থাকবেন

ধন্যবাদ নিয়মিত চালিয়ে যান

ধন্যবাদ নিয়মিত চালিয়ে যান
আল্লাহ আপনা কা দীরগ জিব্য করুন

ধন্যবাদ শিখছি!

Level 0

লিখতে ভাল লাগে তা্ই লিখি কারো সাথে ……….. আপনার এই কথা আমার খুব ভাল লেগেছে…েআর লেসন গুলোর উপস্থাপনা ও ভাল লেগেছে…

"আরো অতিরিক্ত কিছু ট্যাগ "
এই শিরোনামের ট্যাগগুলোর ব্যবহার কোথায় করব।
Emphasized text: ইত্যাদি।
জানালে খুশি হব।আর আপনার এই কাজটি নিসন্দেহে প্রশংসনীয়।
শুভ কামনায়
তানভীর আহমেদ
[email protected]

Level 0

আমি একটা সমস্যায় পড়েছি ।ভুল করে নেট থেকে একটা বিজ্ঞাপন ড়াউনলোড করেছি।এখন এটা ডিলিট করতে পারছিনা।
ডিলিট করতে গেলে নিচের এই বক্স আসছে,
Error Deleting file or folder
Cannot delete (file name):Access is denied make sure the disk is not full or write-protected and that the file is not currently in use.
ok

আপানর জানা থাকলে হেল্প করেন প্লিজ।

আমি কিভাবে আমার তৈরি করা ওয়েব পেজ কোন ফ্রী ওয়েব সাইট এ পাবলিশ করব?

আমি কিভাবে আমার তৈরি করা ওয়েব পেজ কোন ফ্রী ওয়েব সাইট এ পাবলিশ করব?

[email protected]

Level 0

ভাই ভালো লিখেসেন । চালিয়ে যান ।

আসসালামুআলাইকুম। অনেক ভালো হয়েছে। ধন্যবাদ।

দারুন দারুন !!

এবারের পর্বটা ও খুব ভাল হইছে,চালিয়ে যান।