বর্তমানে, কম্পিউটার সায়েন্স ও ইঞ্জিনিয়ারিং এ পড়ালেখা করছি । এছাড়া, ওয়েব ডিজাইন ও ডেভেলপমেন্ট নিয়ে কাজ করি এবং অবসর সময়ে প্রযুক্তি বিষয়ক লেখালেখি করি ।

টিউটোরিয়ালটি সর্বশেষ আপডেট করা হয়েছেঃ ১১ জানুয়ারি, ২০১৮

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

ওয়েব ব্রাউজার

ওয়েব ব্রাউজার হল এমন একটি সফটওয়ার যা ওয়ার্ল্ড ওয়াইড ওয়েব রিসোর্স থেকে তথ্য খুঁজে বের করে, উপস্থাপন করে এবং সংরক্ষণ করে ।
জনপ্রিয় কয়েকটি ব্রাউজারের নাম হচ্ছেঃ Mozilla Firefox, Google Chrome, Internet Explorer, Safari ইত্যাদি ।

Google হচ্ছে সার্চ ইঞ্জিন এবং Google Chrome হচ্ছে ওয়েব ব্রাউজার ।

টেক্সট এডিটর

এইচটিএমএল শেখার জন্য একটি টেক্সট এডিটর এবং একটি ওয়েব ব্রাউজার প্রয়োজন । কয়েকটি জনপ্রিয় টেক্সট এডিটর এর নামঃ Notepad, Notepad Plus Plus, Sublime Text.

এইচটিএমএল

এইচটিএমএল এর পূর্ণরূপ হচ্ছে Hyptertext Markup Language. এটি কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় । এটি একটি মার্কআপ ল্যাঙ্গুয়েজ । টীম বার্নার্স লি এইচটিএমএল এর জনক । এইচটিএমএল এর সর্বশেষ সংস্করণ হচ্ছে HTML5. এইচটিএমএল কোড কেস-সেনসিটিভ নয় । অর্থাৎ, HTML কোড ছোট হাতের অক্ষরে লিখলেও কাজ করে এবং বড় হাতের অক্ষরে লিখলেও কাজ করে । তবে, HTML ট্যাগগুলো ছোট হাতের অক্ষরে লেখা উচিত । এইচটিএমএল ফাইলের এক্সটেনশন .html বা .htm

এইচটিএমএল ট্যাগ

এইচটিএমএল ট্যাগ একজোড়া অ্যাঙ্গেল ব্র্যাকেট (< >) দ্বারা বেষ্টিত থাকে । HTML ট্যাগ এর সিনট্যাক্সঃ

<tagname> Content </tagname>
  • এইচটিএমএল ট্যাগ সাধারণত জোড়ায় জোড়ায় থাকে। প্রথম অংশটি হচ্ছে Opening Tag এবং শেষের অংশটি হচ্ছে Closing Tag । যেসব ট্যাগ এর ক্লোজিং ট্যাগ নেইঃ br, hr, img, input.
  • ক্লোজিং ট্যাগ ওপেনিং ট্যাগ এর মতই শুধু tagname এর পূর্বে একটি ফরওয়ার্ড স্ল্যাশ দেওয়া হয় । 

নিচের উদাহরণটি লক্ষ্য করুনঃ

<b> Thank You </b>

আউটপুটঃ

Thank You.

উপরের লেখাটি বোল্ড হয়েছে ।

এইচটিএমএল অ্যাট্রিবিউট

অ্যাট্রিবিউট ওপেনিং ট্যাগ এ ব্যবহার করা হয় । HTML অ্যাট্রিবিউট এর সিনট্যাক্সঃ

<tagname attributename="value"> Content </tagname>
  • অ্যাট্রিবিউট ওপেনিং ট্যাগ এ ব্যবহার করতে হয় ।
  • প্রথমে অ্যাট্রিবিউট এর নাম দিতে হয় । এরপর একটি সমান চিহ্ন (=) দিয়ে ইনভার্টেড কমা (“”) এর ভিতরে অ্যাট্রিবিউট এর ভ্যালু দিতে হয় ।

এইচটিএমএল লাইন ব্রেক

লাইন ব্রেক ট্যাগ এর সাহায্যে আমরা লাইনকে ভেঙ্গে ফেলতে পারি । লাইন ব্রেক ব্যবহার করার জন্য br ট্যাগ ব্যবহার করা হয় । br একটি এম্পটি এলিমেন্ট অর্থাৎ, এই ট্যাগ এর শুধু ওপেনিং ট্যাগ আছে কোন ক্লোজিং ট্যাগ নেই ।

HTML কোডঃ

HTML is a markup language. <br> It is not a programming language. <br> HTML is easy to learn.

আউটপুটঃ

HTML is a markup language.
It is not a programming language.
HTML is easy to learn.

এইচটিএমএল প্যারাগ্রাফ

প্যারাগ্রাফ ট্যাগ এর মাধ্যমে আমরা একটি বড় লেখাকে কয়েকটি অনুচ্ছেদে ভাগ করে ফেলতে পারি । অনুচ্ছেদে ভাগ করার জন্য p ট্যাগ ব্যবহার করা হয় ।

HTML কোডঃ

<p> The full form of HTML is Hypertext Markup Language. </p>
<p> HTML is not a programming language. It is a Markup Language. </p>
<p> If we want to learn Web Design and Development, we have to learn HTML. </p>

আউটপুটঃ

The full form of HTML is Hypertext Markup Language.
HTML is not a programming language. It is a Markup Language.
If we want to learn Web Design and Development, we have to learn HTML.

এইচটিএমএল হেডিং

ওয়েবসাইট এ লেখার শিরোনাম দেওয়ার জন্য হেডিং ট্যাগ ব্যবহার করা হয় । HTML এ ছয়টি হেডিং ট্যাগ রয়েছে, h1 – h6 পর্যন্ত । সবচেয়ে বড় হেডিং হচ্ছে h1 এবং সবচেয়ে ছোট হেডিং হচ্ছে h6. এখানে ছয় ধরনের হেডিং এর উদাহরণ দেওয়া হল ।

HTML কোডঃ

<h1> I am a student. </h1>
<h2> I am a student. </h2>
<h3> I am a student. </h3>
<h4> I am a student. </h4>
<h5> I am a student. </h5>
<h6> I am a student. </h6>

আউটপুটঃ

I am a student.

I am a student.

I am a student.

I am a student.

I am a student.
I am a student.

[ব্যাখ্যাঃ heading one কে সংক্ষেপে h1 লেখা হয় এবং একইভাবে, h1, h2, h3, h4, h5, h6 লেখা হয়েছে]

* head এবং heading ট্যাগের মধ্যে কোন সম্পর্ক নেই।

ওয়েবসাইট এ বাংলা লেখা

ওয়েবসাইট এ বাংলা লেখার জন্য font ট্যাগ ব্যবহার করতে হয় এবং font ট্যাগ এ face অ্যাট্রিবিউট ব্যবহার করতে হয় । face অ্যাট্রিবিউট এ ফন্ট এর নাম দিতে হবে । বাংলা লেখার জন্য face অ্যাট্রিবিউট এ SutonnyMJ ব্যবহার করা হয় ।

HTML কোডঃ

<font face=”SutonnyMJ”> বাংলাদেশ </font>

আউটপুটঃ

বাংলাদেশ

* SutonnyMJ বানানটি খেয়াল রাখতে হবে ।

font ট্যাগ এ size অ্যাট্রিবিউট ব্যবহার করে লেখা বড় কিংবা ছোট করা যায় ।

এইচটিএমএল ইমেজ

ওয়েবসাইট এ ছবি যুক্ত করার জন্য এইচটিএমএল ইমেজ ব্যবহার করা হয় । HTML এ ছবি যোগ করার জন্য img ট্যাগ ব্যবহার করা হয় এবং এই ট্যাগ এ অ্যাট্রিবিউট ব্যবহার করতে হয় । img ট্যাগ এ src অ্যাট্রিবিউট ব্যবহার করতে হয় ।

ইমেজের সিনট্যাক্সঃ

<img src="imagename" >

ধরা যাক, আমাদের কাছে notebook.jpg নামে একটি ইমেজ আছে এখন আমরা ইমেজটি ওয়েবসাইট এ প্রদর্শন করতে চাচ্ছি ।

<img src="notebook.jpg" >

আউটপুটঃ

 

[ব্যাখ্যাঃ image কে সংক্ষেপে img লেখা হয় এবং এই ট্যাগ অ্যাট্রিবিউট ছাড়া কাজ করে না । img ট্যাগ এ src নামক অ্যাট্রিবিউট ব্যবহার করা হয় । source কে সংক্ষেপে src লেখা হয়েছে]

এছাড়া, img ট্যাগ এ আরও ৩ টি অ্যাট্রিবিউট ব্যবহার করা যায় । যেমনঃ alt, height, width । অর্থাৎ, ইমেজ ট্যাগ এ মোট ৪ টি অ্যাট্রিবিউট ব্যবহার করা যায় । নিচে অ্যাট্রিবিউটগুলোর বর্ণনা দেওয়া হলঃ

  • src = ওয়েব সাইট এ কোন ইমেজটি দিব সেটা বাছাই করার জন্য এই অ্যাট্রিবিউট ব্যবহার করা হয় । এখানে, ইমেজের নাম এক্সটেনশনসহ দিতে হবে । অর্থাৎ, শুধুমাত্র computer দিলে কাজ করবে না ।
  • alt = যদি কোন কারণে ছবিটি নষ্ট/ডিলেট/হারিয়ে যায় তাহলে ছবির স্থানে কি প্রদর্শিত হবে সেটা নির্ধারন করা যায় ।
  • height = ছবির উচ্চতা নির্ধারন করা যায় । এখানে পিক্সেল এককে সাইজ দিতে হবে ।
  • width = ছবির প্রস্থ নির্ধারন করা যায় । এখানে পিক্সেল এককে সাইজ দিতে হবে ।

৪ টি অ্যাট্রিবিউটসহ একটি ইমেজের উদাহারন;

<img src=”notebook.jpg” alt=”Computer” height=”160” width=”240”>

আউটপুটঃ

* ইমেজের এক্সটেনশনগুলো হচ্ছে; .png, .jpg, .jpeg, .gif, .bmp ইত্যাদি ।

এইচটিএমএল হাইপারলিঙ্ক

একটি ওয়েবপেইজের সাথে অন্য একটি পেইজের সম্পর্ক স্থাপনের জন্য এইচটিএমএল হাইপারলিঙ্ক ব্যবহৃত হয় । HTML হাইপারলিঙ্ক ব্যবহার করার জন্য a ট্যাগ ব্যবহার করা হয় এবং এই ট্যাগ এ href অ্যাট্রিবিউট ব্যবহার করতে হয় ।
হাইপারলিঙ্ক এর সিনট্যাক্সঃ

<a href="url"> Keyword </a>

এবার আমরা একটি উদাহরণ দেখবো;

HTML কোডঃ

<a href="http://www.google.com"> Google </a>

আউটপুটঃ

উপরের Google লেখাটিতে ক্লিক করলে http://www.google.com এ প্রবেশ করবে ।

[ব্যাখ্যাঃ anchor কে সংক্ষেপে a লেখা হয় এবং এই ট্যাগ অ্যাট্রিবিউট ছাড়া কাজ করে না । img ট্যাগ এ href নামক অ্যাট্রিবিউট ব্যবহার করা হয় । hypertext reference কে সংক্ষেপে href লেখা হয়েছে]

হাইপারলিংক ব্যবহার করার ক্ষেত্রে অবশ্যই লিংক এ http:// ব্যবহার করতে হবে । তবে, লোকাল লিঙ্ক এ http://www ব্যবহার করার প্রয়োজন নেই ।

এইচটিএমএল লিস্ট

ওয়েবসাইট এ তালিকা প্রকাশ করার জন্য HTML লিস্ট ব্যবহার করা হয় ।

তালিকা ২ ধরনেরঃ

  1. Order List (ol)
  2. Undorder List (ul)

Order List: অর্ডার লিস্ট এ তালিকা ক্রমানুসারে থাকে । HTML এ Order List কে সংক্ষেপে ol লেখা হয় ।

HTML কোডঃ

<ol>
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol>

আউটপুটঃ

  1. Saturday
  2. Sunday
  3. Monday
  4. Tuesday

 

Unorder List: আনঅর্ডার লিস্ট এ তালিকা সাধারণত বুলেট চিহ্ন (কালো ছোট বৃত্ত) আকারে থাকে । HTML এ unorder List কে সংক্ষেপে ul লেখা হয় ।

HTML কোডঃ

<ul>
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ul>

আউটপুটঃ

  • Saturday
  • Sunday
  • Monday
  • Tuesday

এইচটিএমএল টেবিল

এইচটিএমএল টেবিল খুবই গুরুত্বপূর্ণ একটি অংশ । HTML টেবিল এর জন্য কিছু ট্যাগ এর বর্ণনাঃ

ট্যাগ বর্ণনা
table HTML টেবিল এর সকল কোড table ট্যাগ ভিতরে রাখতে হবে ।
th Table Heading কে th লেখা হয়েছে ।
td Table Data কে td লেখা হয়েছে ।
tr Table Row কে tr লেখা হয়েছে ।

* border অ্যাট্রিবিউট ব্যবহার না করলে বর্ডার ছাড়া টেবিল তৈরি হবে ।

এখানে বেশকিছু টেবিল দেওয়া আছে, এই টেবিলগুলো প্র্যাকটিস করলে আশাকরি টেবিল সংক্রান্ত কোন সমস্যা হবে না । টেবিল মুখস্ত করা যাবে না । টেবিল ভালভাবে বুঝলে যেকোনো টেবিল নিজেই তৈরি করতে পারবে ।

১। নিচের টেবিলটি আউটপুট পেতে প্রয়োজনীয় HTML কোড লিখঃ

One Two
Three Four

উত্তরঃ উদ্দীপকের টেবিলটি আউটপুট পেতে প্রয়োজনীয় এইচটিএমএল কোডঃ

<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border=”1”>
     <tr>
        <td> One </td>
        <td> Two </td>
      </tr>
      <tr>
         <td> Three </td>
         <td> Four </td>
      </tr>
    </table>
</body>
</html>

২। নিচের টেবিলটি আউটপুট পেতে প্রয়োজনীয় HTML কোড লিখঃ

Name Class
Shakib Five
Sajjad Six

উত্তরঃ উদ্দীপকের টেবিলটি আউটপুট পেতে প্রয়োজনীয় এইচটিএমএল কোডঃ

<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Name </th>
        <th> Class </th>
      </tr>
      <tr>
         <td> Shakib </td>
         <td> Five </td>
      </tr>
      <tr>
         <td> Sajjad </td>
         <td> Six </td>
      </tr>
    </table>
</body>
</html>

 

৩। নিচের টেবিলটি আউটপুট পেতে প্রয়োজনীয় HTML কোড লিখঃ

Name Phone
Shakib 0123456789 123456789

উত্তরঃ উদ্দীপকের টেবিলটি আউটপুট পেতে প্রয়োজনীয় এইচটিএমএল কোডঃ

<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Name </th>
        <th colspan="1"> Phone </th>
      </tr>
      <tr>
         <td> Shakib </td>
         <td> 0123456789 </td>
         <td> 123456789 </td>
      </tr>
    </table>
</body>
</html>

৪। নিচের টেবিলটি আউটপুট পেতে প্রয়োজনীয় HTML কোড লিখঃ

Name Shakib
Phone 0123456789
123456789

উত্তরঃ উদ্দীপকের টেবিলটি আউটপুট পেতে প্রয়োজনীয় এইচটিএমএল কোডঃ

<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Name </th>
        <td> Shakib </td>
      </tr>
      <tr>
         <td rowspan="2"> Phone </td>
         <td> 0123456789 </td>
      </tr>
      <tr>
         <td> 123456789 </td>
      </tr>
    </table>
</body>
</html>

৫। নিচের টেবিলটি আউটপুট পেতে প্রয়োজনীয় HTML কোড লিখঃ

Name Photo
Notebook

উত্তরঃ উদ্দীপকের টেবিলটি আউটপুট পেতে প্রয়োজনীয় এইচটিএমএল কোডঃ

<html>
  <head>
       <title> HTML Table </title>
  </head>
  <body>
   <table border="1">
     <tr>
        <th> Name </th>
        <th> Photo </th>
      </tr>
      <tr>
         <td> Computer </td>
         <td>  <img src= ”notebook.jpg” />  </td>
      </tr>
    </table>
</body>
</html>

গুরুত্বপূর্ণ তথ্য

  • এইচটিএমএল একটি মার্কআপ ল্যাঙ্গুয়েজ । এটি কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় ।
  • HTML এর সর্বশেষ সংস্করণ HTML5
  • অ্যাট্রিবিউট ওপেনিং ট্যাগ এ ব্যবহার করা হয় ।
  • HTML ফাইলের এক্সটেনশন .html বা .htm
  • HTML কোড ছোট হাতের লেখা উচিত ।
  • কয়েকটি জনপ্রিয় ওয়েব ব্রাউজারের নামঃ Mozilla Firefox, Google Chrome, Safari, Opera, Internet Explorer.
  • কয়েকটি জনপ্রিয় টেক্সট এডিটর এর নামঃ Notepad, Notepad Plus Plus, Sublime Text.
  • কয়েকটি জনপ্রিয় সার্চ ইঞ্জিনের নামঃ Google, Yahoo, Bing.
  • ওয়েবসাইট এ ছবি/ইমেজ ব্যবহার করার ক্ষেত্রে অবশ্যই ইমেজের এক্সটেনশন দিতে হবে । যেমনঃ pen.jpg
  • হাইপারলিংক ব্যবহার করার ক্ষেত্রে অবশ্যই লিংক এ http:// ব্যবহার করতে হবে । লোকাল লিঙ্ক এ http://www প্রয়োজন নেই ।
  • HTML কোড টেক্সট এডিটর (যেমনঃ নোটপ্যাড) এ লিখতে হয় এবং ওয়েব ব্রাউজারে ফলাফল প্রদর্শিত হয় ।
  • HTML এর যেসব ট্যাগ অ্যাট্রিবিউট ছাড়া কাজ করে নাঃ a, img, input.
  • HTML এর যেসব ট্যাগ শেষ করার প্রয়োজন নেই অর্থাৎ কোন ক্লোজিং ট্যাগ নেইঃ br, hr, img, input.
  • Google হচ্ছে সার্চ ইঞ্জিন এবং Google Chrome হচ্ছে ওয়েব ব্রাউজার ।

Abbreviations

  • HTML – Hypertext Markup Language.
  • URL – Uniform Resource Locator.
  • DNS – Domain Naming System.
  • HTTP – Hypertext Transfer Protocol.

কিছু এইচটিএমএল ট্যাগের আউটপুট

HTML Code Results
 <b> I am a student. </b> I am a student.
  <u> I am a student. </u> I am a student.
  <i> I am a student. </i> I am a student.
  <del> Welcome. </del> Welcome.
  <big> Dhaka. </big> Dhaka.
  <small> I am a student </small> Dhaka.
  H <sup> 2 </sub> H 2
  a <sup> 2</sup> a 2
  I am a <br> student  I am a
student.
  <h1> I am a student </h1>

I am a student.

  <h2> I am a student </h2>

I am a student.

  <h3> I am a student </h3>

I am a student.

  <h4> I am a student </h4>

I am a student.

  <h5> I am a student </h5>
I am a student.
  <h6> I am a student </h6>
I am a student.

 

এইচটিএমএল আরও ভালভাবে শিখতে এই লিংক এ ক্লিক করুন ।