Bangla courses
September 15, 2022

HTML কী ও কীভাবে html তৈরি করা যায়

এইচটিএমএল এর মাধ্যমে সাধারণত ওয়েব ডেভলপাররা ওয়েবসাইটে কাজ করে থাকে।

আপনি যে সমস্ত ওয়েবপেজ গুলো ইন্টারনেটে খুঁজেপান সেগুলো তৈরি করতে ব্যবহার করা হয় এইচটিএমএল। এইচটিএমএল হলো একটি মার্কআপ ভাষা। আজকের আর্টিকেলে আমরা এইচটিএমএল সম্পর্কে জানানোর চেষ্টা করব।

HTML কী?

এইচটিএমএল মানে হল হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ।এটি “<”এর থেকে কম এবং “>” চিহ্নের চেয়ে বড় বন্ধনীর ভিতরে বিন্যাস করা “ট্যাগ” ব্যবহার করে একটি ওয়েব পেজের বিন্যাস এবং কাঠামো সংঙ্গায়িত করা।প্রতিটি ওয়েব পেজের উপাদান একটি নির্দিষ্ট লেবেল অন্তরর্ভুক্ত করে।ব্রাউজারের পেজের বিষয়গুলো কীভাবে ফরমেট বা গঠন করতে হয় তা সম্পূর্ণ ওয়েব পেজের সেই উপাদানগুলির সিরিজের উপরে নির্ভর করে। 

চলুন দেখে নিই এইচটিএমএল করতে কী কী ট্যাগ ব্যবহার করে হয়।এইচটিএমএল এর এসব মৌলিক বিষয়গুলো ওয়েব পেজে কাজ করতে ব্যবহার করা হয়।  

  • <html>: একটি HTML ফাইলের শুরু এবং শেষ চিহ্নিত করে।
  • <head>: ওয়েব পেজ হেডার তথ্যের শুরু এবং শেষ চিহ্নিত করে।
  • <title>: ব্রাউজার শিরোনাম বারে প্রদর্শিত শিরোনামটিকে লেবেল করে।
  • <body>: ওয়েব পেজের বিষয়বস্তুর শুরু এবং শেষ চিহ্নিত করে।
  • <h1> থেকে <h6>: বড় (H1) থেকে খুব ছোট (H6) নথি জুড়ে সাইজ হেডার।
  • <p>: দুটি ক্যারেজ রিটার্ন হিসাবে একটি অনুচ্ছেদ বিরতি সন্নিবেশ করায় (লাইনের মধ্যে একটি স্থান)।
  • <br>: একটি লাইন বিরতি সন্নিবেশ করান (লাইনের মধ্যে কোন স্থান নেই)।
  • <b>: ট্যাগগুলির মধ্যে পাঠ্যকে বোল্ড করে।
  • <em>: ট্যাগগুলির মধ্যে পাঠ্যটিকে তির্যক করে।
  • <img src>: যেখানেই এই ট্যাগটি বিদ্যমান সেখানে একটি চিত্র সন্নিবেশ করান
  • <a href>: নথির ভিতরে অন্য ওয়েব পৃষ্ঠার একটি লিঙ্ক সন্নিবেশ করান।

আপনি ব্যবহার করতে পারেন এমন আরও অনেক এইচটিএমএল ট্যাগ আছে, কীন্তু উপরের ট্যাগগুলি ইন্টারনেট জুড়ে বেশিরভাগ ওয়েব পেজে এগুলো বেশি ব্যবহার হয়ে থাকে। 

HTML এর ব্যবহার কীভাবে করব

কম্পিউটার বেশিরভাগ পেজই সংরক্ষন করতে পারে না।এতকরে পেজগুলো ইন্টরনেট ওয়েব সার্ভারে সংরক্ষন করতে হয়।সুতরং আপনি যখন কোন ওয়েবসাইটে কোন নিবন্ধন বা অন্যান বিষয়বস্তু পরিদর্শন করেন, সার্ভার আপনার ব্রাউজারটিকে .html ফাইল পাঠায় যেখানে পেজটি সংরক্ষিত রয়েছে।

আপনি ক্রোম ব্রাউজারের যেকোন ওয়েব পেজের জন্য এইচটিএমএল কোড দেখতে পারেন পেজের যেকোন জায়গায় ডান-ক্রিক করে।এইচটিএমএল আপনাকে ওয়েব পেজের পিছনের কোড দেখাবে এবং ফাইলের শীর্ষে প্রথম ট্যাগ দ্বারা একটি এইচটিএমএল ফাইল দেখতে পাবেন।

আপনি আর একটা বিষয় লক্ষ্য রাখবেন যে সার্চ কোডে আরো অনেক ধরণের ট্যাগ রয়েছে যা মোটেও এইচটিএমএল ট্যাগ নয়।

HTML এর আরো কিছু ট্যাগ

আপনি যদি নিজের এইচটিএমএল ফাইল তৈরি করা শুরু করতে চান, তাহলে আপনাকে জানতে হবে কীভাবে উপরের বর্নিত মৌলিকগুলোর বাইরে সবচেয় সাধারণ এইচটিএমএল এর ব্যবহার করতে হয়।

আপনি আপনার নিজের ওয়েব পেজে কোড করার সময় ব্যবহার করতে পারেন এমন আরও কিছু এইচটিএমএল ট্যাগের কয়েকটি উদাহরণ নিচে দেওয়া হল৷

HREF to Insert Links

আপনার ওয়েব পৃষ্ঠার ভিতরে একটি লিঙ্ক এম্বেড করতে, একটি href ব্যবহার করুন।

<ahref=”https://www.groovypost.com/tips/lifehack-find-your-iphone-using-hey-siri/”>Find Your iPhone Using Hey Siri</a>

এটি "He Siri ব্যবহার করে আপনার আইফোন খুঁজুন" পাঠ্যটিকে লিঙ্ক করবে যে URL লিঙ্কটি আপনি "href=" এর পরে ডবল-উদ্ধৃতিতে অন্তর্ভুক্ত করেছেন।

IMG SRC to Insert Pictures

আপনি img src ব্যবহার করে একটি ওয়েব পেজে ছবি সন্নিবেশ করতে পারেন।

<img src="my-picture.jpg" alt="আমার প্রোফাইল ফটো" style="wifth:150px; height:120px">

এটি ওয়েব সার্ভার থেকে my-picture.jpg ছবিটি টেনে আনবে এবং 150 পিক্সেল প্রশস্ত এবং 120 পিক্সেল উচ্চতা সহ আপনি এই ট্যাগটি যে পেজেরেখেছেন সেখানে এটি প্রদর্শন করবে৷

Alt প্যারামিটার ব্রাউজারগুলিতে "আমার প্রোফাইল ফটো" পাঠ্যটি প্রদর্শন করে, যা চিত্রটি প্রদর্শন করতে পারে না। আপনি যদি "স্টাইল" প্যারামিটারটি অন্তর্ভুক্ত না করেন, তাহলে ছবিটি তার আসল রেজোলিউশনে প্রদর্শিত হবে, যা আপনি যে পৃষ্ঠাটি এম্বেড করছেন সেই পৃষ্ঠার ক্ষেত্রের জন্য খুব বড় বা খুব ছোট হতে পারে।

UL এবং OL তালিকা তৈরি করতে

আপনি যদি আপনার পেজের বুলেট বা সংখ্যাযুক্ত তালিকা ব্যবহার করতে চান তবে দুটি ট্যাগ রয়েছে যা আপনাকে এটি করার অনুমতি দেয়।

নিম্নলিখিত কোড একটি অসংক্ষ্যায়িত তালিকা (বুলেট) সন্নিবেশ করাবে:

<ul>
  <li>আইটেম 1</li>
  <li>আইটেম 2</li>
  <li>আইটেম 3</li>
</ul>

ফলাফলঃ

তালিকার শুরুতে <ul> এবং তালিকার নীচে </ul> ব্যবহার করুন। প্রতিটি আইটেমকে <li> এবং </li> ট্যাগের মধ্যে আবদ্ধ করুন।

আপনি <ol> ব্যবহার করে একটি সংখ্যাযুক্ত তালিকার জন্য একই পদ্ধতি ব্যবহার করতে পারেন যার অর্থ "অর্ডার করা তালিকা"।

<ol>
  <li>আইটেম 1</li>
  <li>আইটেম 2</li>
  <li>আইটেম 3</li>
</ol>

Inserting Tables

ওয়েব ডিজাইনাররা ওয়েব পেজ ফরম্যাট করার জন্য বড় টেবিল ব্যবহার করতেন। কীন্তু ক্যাসকেডিং স্টাইল শীট (সিএসএস) এর আবির্ভাবের সাথে, এটি আর প্রয়োজনীয় নয়। পরিবর্তে, CSS ফাইলগুলি ওয়েব সার্ভারে সংরক্ষণ করা হয়, এবং এইচটিএমএল পেজগুলি সেই ফাইলগুলিকে কল করে কীভাবে মার্জিন, ফন্টের আকার, রঙ এবং আরও অনেক কিছু ফর্ম্যাট করতে হয়।

যাইহোক, টেবিলগুলি ডেটার মতো জিনিসগুলি প্রদর্শন করতে এখনও কার্যকর। একটি টেবিল সন্নিবেশ করতে, বিষয়বস্তুর শুরুতে <TABLE> দিয়ে আবদ্ধ করুন এবং </TABLE> দিয়ে শেষ করুন।

প্রতিটি সারি <TR> এবং </TR>, এবং প্রতিটি পৃথক কলাম শিরোনাম <TH> এবং </TH> দিয়ে আবদ্ধ করুন। প্রতিটি নিয়মিত কক্ষ, <TD> এবং </TD> দিয়ে আবদ্ধ করুন।

<table border=1>
  <tr> <!--Table Row--!>
    <th>নাম</th> <!--Table Heading--!>
    <th>ঠিকানা</th>
   <th>ফোন নম্বর</th>
  </tr>
  <tr>
    <td>রায়হান মিয়া</td>
    <td>উত্তরা, ঢাকা-১২৩০ </td>
    <td>০১৭xx-xxx-xxx</td>
  </tr>
</ table>

শুধুমাত্র এই মৌলিক উপাদানগুলির সাহায্যে, আপনি ইন্টারনেটে আপনার বিষয়বস্তু প্রদর্শনের জন্য দরকারী স্ট্যাটিক ওয়েব পেজের তৈরি করতে পারেন৷আপনি যদি এটিকে সর্বজনীন এবং বিশ্ব দ্বারা দর্শনযোগ্য করতে চান তবে আপনার যা দরকার তা হল একটি ওয়েব হোস্টিং অ্যাকাউন্টের জন্য সাইন আপ করা এবং আপনার ফাইলগুলিকে আপনার অ্যাকাউন্টের মধ্যে সর্বজনীন ফোল্ডারে সংরক্ষণ করা৷

আসলে, আপনার নিজস্ব ওয়েবসাইট চালু করা আশ্চর্যজনকভাবে সহজ, বিশেষ করে যদি আপনি ওয়ার্ডপ্রেসের মতো একটি বিষয়বস্তুর ব্যবস্থাপনা প্ল্যাটফর্ম ব্যবহার করতে চান।

HTML ফাইলের উদাহরণ

আপনার নিজস্ব ওয়েব পেজ তৈরি করতে কোনো প্রোগ্রামিং ব্যাকগ্রাউন্ড লাগে না। আসলে, আপনি এখনই নোটপ্যাড খুলতে পারেন, কিছু সাধারণ টেক্সট টাইপ করতে পারেন এবং এটিকে .html বা .htm ফাইল হিসাবে সংরক্ষণ করতে পারেন।এটি আপনার তৈরি করা প্রথম ওয়েব পৃষ্ঠা হতে পারে এবং আপনার যা দরকার তা হল আপনার নিজের কম্পিউটার৷

নীচে একটি খুব সাধারণ HTML ফাইলের উদাহরণ।

  <!DOCTYPE html>
  <html lang="en">

   <head>
     <title>ওয়েব পেজের শিরোনাম</title>

   </head>
   <body>
      <h1>এটি প্রথম শিরোনাম</h1>
        <p>এটি আমার প্রথম অনুচ্ছেদ।<br>
        <p>এটি দ্বিতীয় লাইন</p>
      <p>এটি আরেকটি অনুচ্ছেদ।</p>
    </body>
  </html>

হাইপার টেক্সট মার্কআপ (HTML) কীভাবে কাজ করে

প্রথম দুটি লাইন ব্রাউজার বলে যে নথিটি HTML বিন্যাসে এবং ভাষাটি ইংরেজি।

  • <title> এবং </title> দ্বারা আবদ্ধ পেজের শিরোনামটি "ওয়েব পজের শিরোনাম" হিসাবে প্রদর্শনের জন্য ব্রাউজারটির জন্য ওয়েব পৃষ্ঠা সেট করে।
  • <body> এবং </body> এর সাথে আবদ্ধ বিভাগটি ব্রাউজারকে বলে যে এই লাইনগুলিতে ওয়েব পৃষ্ঠায় প্রদর্শনের জন্য সামগ্রী রয়েছে।
  • <h1> এবং </h1> ট্যাগ দ্বারা আবদ্ধ হেডারটি HTML এ উপলব্ধ বৃহত্তম হেডার ফন্টে "এটি প্রথম শিরোনাম" তৈরি করে।
  • <p> এবং </p> ট্যাগগুলি </p> ট্যাগের পরে একটি স্থান সন্নিবেশ করে।
  • <br> ট্যাগ সেই বাক্যের পরে একটি একক লাইন বিরতি সন্নিবেশিত করে।
  • </html> ডকুমেন্টটি শেষ করে, এবং ওয়েব পেজটি এই সময়ে লোড হওয়া বন্ধ করবে।

এখানে উপরের ওয়েব পেজ ফাইলটি আপনি যখন আপনার ব্রাউজার দিয়ে খুলবেন।

মন্তব্য

এইচটিএমএল হলো একটি নেটওয়ার্ক ভিত্তিক কাজ।ওয়েবপেজ সুন্দর ভাবে গঠন করতে এইচটিএমএল এর গুরুত্ব অনেক।আশাকরি আজকের আর্টিকেলে এইচটিএমএল সম্পর্কে কিছুটা হলেও ধারণা দিতে পেরেছি।সাথে থাকর জন্য ধন্যবাদ। 

আরও পড়ুন

October 28, 2024
Why Apple Gift Cards Are Essential for Bangladeshi Consumers
The popularity of Apple products and services has surged in Bangladesh, particularly with the availability…
October 27, 2024
বাংলাদেশের সেরা ১০টি হেলথ কেয়ার স্টার্টআপ
এই আর্টিকেলেটিতে আমি বাংলাদেশের সেরা হেলথ কেয়ার স্টার্টআপগুলোর বিষয়ে বিস্তারত আলোচনা করেছি। সতেরো কোটিরও অধিক…
June 6, 2024
অর্থোপেডিক ডাক্তার কে? অর্থোপেডিক ডাক্তার কী করেন?
আমাদের দৈনন্দিন জীবনে শরীরের প্রতিটি অংশের সুস্থতা অত্যন্ত গুরুত্বপূর্ণ, বিশেষ করে হাড় ও জয়েন্ট। যখন…

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link