Skill

এইচটিএমএল (HTML)

2.7k

HTML (HyperText Markup Language) হলো একটি মার্কআপ ভাষা যা ওয়েব পেজ এবং ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি একটি স্ট্যান্ডার্ড ফরম্যাট, যা ওয়েব ডকুমেন্টের কাঠামো এবং কন্টেন্ট সংজ্ঞায়িত করে। HTML-এ লেখা ডকুমেন্টগুলি ব্রাউজার দ্বারা প্রদর্শিত হয় এবং এটি টেক্সট, ইমেজ, ভিডিও, অডিও, লিঙ্ক, এবং অন্যান্য কন্টেন্ট উপাদানগুলোকে একত্রিত করে একটি ওয়েব পেজ তৈরি করে।


HTML (HyperText Markup Language): একটি বিস্তারিত বাংলা টিউটোরিয়াল


HTML কি?

HTML (HyperText Markup Language) হলো একটি মার্কআপ ভাষা, যা ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। এটি মূলত ওয়েব পেজের স্ট্রাকচার এবং কন্টেন্ট নির্ধারণ করতে ব্যবহৃত হয়। HTML এর মাধ্যমে আপনি টেক্সট, ইমেজ, লিঙ্ক, ফর্ম এবং অন্যান্য উপাদান ওয়েব পেজে যোগ করতে পারেন।

HTML হলো ওয়েব পেজের বেসিক বিল্ডিং ব্লক, যা ব্রাউজার (যেমন Chrome, Firefox) দ্বারা রেন্ডার করা হয়। এটি কোনো প্রোগ্রামিং ভাষা নয়; বরং এটি একটি মার্কআপ ভাষা যা ডকুমেন্টের বিভিন্ন অংশকে ট্যাগের মাধ্যমে ডিফাইন করে।


HTML এর মূল উপাদানসমূহ

Elements (উপাদান):

  • HTML এর প্রতিটি অংশকে এলিমেন্ট বলা হয়। প্রতিটি এলিমেন্ট একটি ট্যাগ এর মাধ্যমে শুরু হয় এবং তার শেষে বন্ধ করা হয়। উদাহরণস্বরূপ:

Attributes (গুণাবলী):

  • HTML এলিমেন্টগুলোতে বিভিন্ন অ্যাট্রিবিউট থাকে, যা এলিমেন্টের সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করে। উদাহরণস্বরূপ:

Tags (ট্যাগ):

  • HTML এ ট্যাগ হলো মূল উপাদান, যা বিভিন্ন কন্টেন্ট এবং স্ট্রাকচার নির্ধারণ করে। ট্যাগ দুটি অংশে বিভক্ত: ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ

Comments (মন্তব্য):

  • HTML এ মন্তব্য ব্যবহার করা হয়, যা ডেভেলপারদের জন্য তথ্য প্রদান করে এবং ব্রাউজারে রেন্ডার হয় না।

HTML ডকুমেন্টের স্ট্রাকচার

HTML ডকুমেন্টের একটি নির্দিষ্ট স্ট্রাকচার থাকে। নিচে HTML ডকুমেন্টের একটি সাধারণ কাঠামো দেওয়া হলো:

প্রধান অংশসমূহ:

DOCTYPE Declaration:

  • এটি একটি ম্যান্ডেটরি ঘোষণা, যা ব্রাউজারকে জানায় কোন HTML ভার্সন ব্যবহার করা হচ্ছে। উদাহরণ:  

HTML Tag:

  • সব HTML কোড একটি <html> ট্যাগের ভিতরে থাকে।

Head Section:

  • <head> ট্যাগের মধ্যে মেটা ডেটা থাকে, যেমন ডকুমেন্টের শিরোনাম (title), স্টাইলশিট, স্ক্রিপ্ট, এবং মেটা ইনফরমেশন

Body Section:

  • <body> ট্যাগের ভিতরে ওয়েব পেজের প্রধান কন্টেন্ট থাকে। যেমন টেক্সট, ছবি, লিঙ্ক, টেবিল, ফর্ম ইত্যাদি।

HTML ট্যাগের ধরন

Block-level Elements:

  • Block-level elements পুরো লাইন জুড়ে কাজ করে এবং নতুন লাইনে শুরু হয়। যেমন: , , , ইত্যাদি।

Inline Elements:

  • Inline elements একই লাইনের ভিতরেই থাকে এবং পুরো লাইন নেয় না। যেমন: , , , ইত্যাদি।

HTML এর কিছু গুরুত্বপূর্ণ ট্যাগ

1. হেডিং ট্যাগ:

  • হেডিং ট্যাগের মাধ্যমে পৃষ্ঠার শিরোনাম তৈরি করা হয়। হেডিং ট্যাগের স্তর আছে ৬টি: থেকে পর্যন্ত।

2. প্যারাগ্রাফ ট্যাগ:

  • ট্যাগ ব্যবহার করে পৃষ্ঠার প্যারাগ্রাফ তৈরি করা হয়।

3. লিঙ্ক ট্যাগ:

  • ট্যাগ ব্যবহার করে একটি লিঙ্ক তৈরি করা হয়। লিঙ্কের href অ্যাট্রিবিউটে URL নির্ধারণ করা হয়।

4. ইমেজ ট্যাগ:

ছবির বিবরণ

5. তালিকা ট্যাগ:

অর্ডারড তালিকা:

আনঅর্ডারড তালিকা:

6. ফর্ম ট্যাগ:


HTML এর কিছু উন্নত কনসেপ্ট

1. HTML5:

2. Semantic HTML:


HTML এবং অন্যান্য মার্কআপ ভাষা বা প্রযুক্তির মধ্যে তুলনা 

HTML (HyperText Markup Language) এবং অন্যান্য মার্কআপ ভাষা বা প্রযুক্তির মধ্যে তুলনা করার সময় কিছু মূল পার্থক্য এবং বৈশিষ্ট্য দেখতে পাওয়া যায়। এখানে কিছু সাধারণ প্রযুক্তি যেমন HTML, XHTML, XML, CSS, এবং JavaScript এর তুলনা দেওয়া হলো।

1. HTML (HyperText Markup Language)

2. XHTML (Extensible HyperText Markup Language)

3. XML (eXtensible Markup Language)

4. CSS (Cascading Style Sheets)

5. JavaScript

সারসংক্ষেপ

বৈশিষ্ট্যHTMLXHTMLXMLCSSJavaScript
উদ্দেশ্যওয়েব পেজের কাঠামো তৈরিHTML-এর সঠিক সংস্করণডেটা সংরক্ষণ ও পরিবহনHTML ডকুমেন্টের স্টাইলইন্টারঅ্যাকটিভিটি যোগ করা
সিনট্যাক্সসহজকঠোরব্যবহারকারীর নির্ধারিতসহজপ্রোগ্রামিং ভাষা
ব্রাউজারে প্রদর্শনসরাসরিসরাসরিনানানা
কাস্টম ট্যাগনয়নয়হ্যাঁনানা

HTML ওয়েব পেজ তৈরি করার জন্য মৌলিক কাঠামো সরবরাহ করে, যেখানে XHTML এর সিনট্যাক্স নিয়ম আরো কঠোর। XML ডেটার স্টোরেজ এবং পরিবহনে ব্যবহৃত হয়, আর CSS এবং JavaScript উভয়ই HTML ডকুমেন্টের অভিজ্ঞতা এবং ইন্টারঅ্যাকটিভিটি উন্নত করতে ব্যবহৃত হয়। এই প্রযুক্তিগুলো একসাথে কাজ করে একটি সম্পূর্ণ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।


HTML শেখার জন্য রিসোর্সসমূহ

W3Schools: HTML এর জন্য একটি জনপ্রিয় টিউটোরিয়াল সাইট, যেখানে বিস্তারিত উদাহরণসহ শেখানো হয়েছে।
W3Schools HTML Tutorial

Mozilla Developer Network (MDN): MDN একটি সমৃদ্ধ ডকুমেন্টেশন সাইট, যেখানে HTML সম্পর্কে বিস্তারিত তথ্য পাওয়া যায়।
MDN HTML Guide

freeCodeCamp: HTML শেখার জন্য এটি একটি ফ্রি প্ল্যাটফর্ম, যেখানে হাতে কল### HTML শেখার জন্য রিসোর্সসমূহ (ধারাবাহিক)

freeCodeCamp: HTML শেখার জন্য এটি একটি ফ্রি প্ল্যাটফর্ম, যেখানে হাতে-কলমে প্র্যাকটিস করার সুযোগ রয়েছে।
freeCodeCamp HTML Guide

Codecademy: HTML শেখার জন্য আরেকটি চমৎকার ইন্টারেক্টিভ প্ল্যাটফর্ম।
Codecademy HTML Course

YouTube: YouTube-এ HTML শেখার জন্য অনেক ভিডিও টিউটোরিয়াল আছে, যেমন Traversy Media, The Net Ninja এবং freeCodeCamp এর ভিডিওগুলো।


উপসংহার

HTML হলো একটি মৌলিক মার্কআপ ভাষা, যা ওয়েব পেজ এবং ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি ওয়েব কন্টেন্টের কাঠামো নির্ধারণ করে এবং অন্যান্য প্রযুক্তি (যেমন CSS, JavaScript) এর সাথে মিলিত হয়ে সমৃদ্ধ ওয়েব অ্যাপ্লিকেশন তৈরি করে। HTML এর মাধ্যমে ব্রাউজার ব্যবহারকারীদের জন্য ইন্টারেক্টিভ এবং তথ্যপূর্ণ অভিজ্ঞতা প্রদান করে।

HTML (HyperText Markup Language) হলো একটি মার্কআপ ভাষা যা ওয়েব পেজ এবং ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি একটি স্ট্যান্ডার্ড ফরম্যাট, যা ওয়েব ডকুমেন্টের কাঠামো এবং কন্টেন্ট সংজ্ঞায়িত করে। HTML-এ লেখা ডকুমেন্টগুলি ব্রাউজার দ্বারা প্রদর্শিত হয় এবং এটি টেক্সট, ইমেজ, ভিডিও, অডিও, লিঙ্ক, এবং অন্যান্য কন্টেন্ট উপাদানগুলোকে একত্রিত করে একটি ওয়েব পেজ তৈরি করে।


HTML (HyperText Markup Language): একটি বিস্তারিত বাংলা টিউটোরিয়াল


HTML কি?

HTML (HyperText Markup Language) হলো একটি মার্কআপ ভাষা, যা ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। এটি মূলত ওয়েব পেজের স্ট্রাকচার এবং কন্টেন্ট নির্ধারণ করতে ব্যবহৃত হয়। HTML এর মাধ্যমে আপনি টেক্সট, ইমেজ, লিঙ্ক, ফর্ম এবং অন্যান্য উপাদান ওয়েব পেজে যোগ করতে পারেন।

HTML হলো ওয়েব পেজের বেসিক বিল্ডিং ব্লক, যা ব্রাউজার (যেমন Chrome, Firefox) দ্বারা রেন্ডার করা হয়। এটি কোনো প্রোগ্রামিং ভাষা নয়; বরং এটি একটি মার্কআপ ভাষা যা ডকুমেন্টের বিভিন্ন অংশকে ট্যাগের মাধ্যমে ডিফাইন করে।


HTML এর মূল উপাদানসমূহ

Elements (উপাদান):

  • HTML এর প্রতিটি অংশকে এলিমেন্ট বলা হয়। প্রতিটি এলিমেন্ট একটি ট্যাগ এর মাধ্যমে শুরু হয় এবং তার শেষে বন্ধ করা হয়। উদাহরণস্বরূপ:

Attributes (গুণাবলী):

  • HTML এলিমেন্টগুলোতে বিভিন্ন অ্যাট্রিবিউট থাকে, যা এলিমেন্টের সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করে। উদাহরণস্বরূপ:

Tags (ট্যাগ):

  • HTML এ ট্যাগ হলো মূল উপাদান, যা বিভিন্ন কন্টেন্ট এবং স্ট্রাকচার নির্ধারণ করে। ট্যাগ দুটি অংশে বিভক্ত: ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ

Comments (মন্তব্য):

  • HTML এ মন্তব্য ব্যবহার করা হয়, যা ডেভেলপারদের জন্য তথ্য প্রদান করে এবং ব্রাউজারে রেন্ডার হয় না।

HTML ডকুমেন্টের স্ট্রাকচার

HTML ডকুমেন্টের একটি নির্দিষ্ট স্ট্রাকচার থাকে। নিচে HTML ডকুমেন্টের একটি সাধারণ কাঠামো দেওয়া হলো:

প্রধান অংশসমূহ:

DOCTYPE Declaration:

  • এটি একটি ম্যান্ডেটরি ঘোষণা, যা ব্রাউজারকে জানায় কোন HTML ভার্সন ব্যবহার করা হচ্ছে। উদাহরণ:  

HTML Tag:

  • সব HTML কোড একটি <html> ট্যাগের ভিতরে থাকে।

Head Section:

  • <head> ট্যাগের মধ্যে মেটা ডেটা থাকে, যেমন ডকুমেন্টের শিরোনাম (title), স্টাইলশিট, স্ক্রিপ্ট, এবং মেটা ইনফরমেশন

Body Section:

  • <body> ট্যাগের ভিতরে ওয়েব পেজের প্রধান কন্টেন্ট থাকে। যেমন টেক্সট, ছবি, লিঙ্ক, টেবিল, ফর্ম ইত্যাদি।

HTML ট্যাগের ধরন

Block-level Elements:

  • Block-level elements পুরো লাইন জুড়ে কাজ করে এবং নতুন লাইনে শুরু হয়। যেমন: , , , ইত্যাদি।

Inline Elements:

  • Inline elements একই লাইনের ভিতরেই থাকে এবং পুরো লাইন নেয় না। যেমন: , , , ইত্যাদি।

HTML এর কিছু গুরুত্বপূর্ণ ট্যাগ

1. হেডিং ট্যাগ:

  • হেডিং ট্যাগের মাধ্যমে পৃষ্ঠার শিরোনাম তৈরি করা হয়। হেডিং ট্যাগের স্তর আছে ৬টি: থেকে পর্যন্ত।

2. প্যারাগ্রাফ ট্যাগ:

  • ট্যাগ ব্যবহার করে পৃষ্ঠার প্যারাগ্রাফ তৈরি করা হয়।

3. লিঙ্ক ট্যাগ:

  • ট্যাগ ব্যবহার করে একটি লিঙ্ক তৈরি করা হয়। লিঙ্কের href অ্যাট্রিবিউটে URL নির্ধারণ করা হয়।

4. ইমেজ ট্যাগ:

ছবির বিবরণ

5. তালিকা ট্যাগ:

অর্ডারড তালিকা:

আনঅর্ডারড তালিকা:

6. ফর্ম ট্যাগ:


HTML এর কিছু উন্নত কনসেপ্ট

1. HTML5:

2. Semantic HTML:


HTML এবং অন্যান্য মার্কআপ ভাষা বা প্রযুক্তির মধ্যে তুলনা 

HTML (HyperText Markup Language) এবং অন্যান্য মার্কআপ ভাষা বা প্রযুক্তির মধ্যে তুলনা করার সময় কিছু মূল পার্থক্য এবং বৈশিষ্ট্য দেখতে পাওয়া যায়। এখানে কিছু সাধারণ প্রযুক্তি যেমন HTML, XHTML, XML, CSS, এবং JavaScript এর তুলনা দেওয়া হলো।

1. HTML (HyperText Markup Language)

2. XHTML (Extensible HyperText Markup Language)

3. XML (eXtensible Markup Language)

4. CSS (Cascading Style Sheets)

5. JavaScript

সারসংক্ষেপ

বৈশিষ্ট্যHTMLXHTMLXMLCSSJavaScript
উদ্দেশ্যওয়েব পেজের কাঠামো তৈরিHTML-এর সঠিক সংস্করণডেটা সংরক্ষণ ও পরিবহনHTML ডকুমেন্টের স্টাইলইন্টারঅ্যাকটিভিটি যোগ করা
সিনট্যাক্সসহজকঠোরব্যবহারকারীর নির্ধারিতসহজপ্রোগ্রামিং ভাষা
ব্রাউজারে প্রদর্শনসরাসরিসরাসরিনানানা
কাস্টম ট্যাগনয়নয়হ্যাঁনানা

HTML ওয়েব পেজ তৈরি করার জন্য মৌলিক কাঠামো সরবরাহ করে, যেখানে XHTML এর সিনট্যাক্স নিয়ম আরো কঠোর। XML ডেটার স্টোরেজ এবং পরিবহনে ব্যবহৃত হয়, আর CSS এবং JavaScript উভয়ই HTML ডকুমেন্টের অভিজ্ঞতা এবং ইন্টারঅ্যাকটিভিটি উন্নত করতে ব্যবহৃত হয়। এই প্রযুক্তিগুলো একসাথে কাজ করে একটি সম্পূর্ণ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।


HTML শেখার জন্য রিসোর্সসমূহ

W3Schools: HTML এর জন্য একটি জনপ্রিয় টিউটোরিয়াল সাইট, যেখানে বিস্তারিত উদাহরণসহ শেখানো হয়েছে।
W3Schools HTML Tutorial

Mozilla Developer Network (MDN): MDN একটি সমৃদ্ধ ডকুমেন্টেশন সাইট, যেখানে HTML সম্পর্কে বিস্তারিত তথ্য পাওয়া যায়।
MDN HTML Guide

freeCodeCamp: HTML শেখার জন্য এটি একটি ফ্রি প্ল্যাটফর্ম, যেখানে হাতে কল### HTML শেখার জন্য রিসোর্সসমূহ (ধারাবাহিক)

freeCodeCamp: HTML শেখার জন্য এটি একটি ফ্রি প্ল্যাটফর্ম, যেখানে হাতে-কলমে প্র্যাকটিস করার সুযোগ রয়েছে।
freeCodeCamp HTML Guide

Codecademy: HTML শেখার জন্য আরেকটি চমৎকার ইন্টারেক্টিভ প্ল্যাটফর্ম।
Codecademy HTML Course

YouTube: YouTube-এ HTML শেখার জন্য অনেক ভিডিও টিউটোরিয়াল আছে, যেমন Traversy Media, The Net Ninja এবং freeCodeCamp এর ভিডিওগুলো।


উপসংহার

HTML হলো একটি মৌলিক মার্কআপ ভাষা, যা ওয়েব পেজ এবং ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি ওয়েব কন্টেন্টের কাঠামো নির্ধারণ করে এবং অন্যান্য প্রযুক্তি (যেমন CSS, JavaScript) এর সাথে মিলিত হয়ে সমৃদ্ধ ওয়েব অ্যাপ্লিকেশন তৈরি করে। HTML এর মাধ্যমে ব্রাউজার ব্যবহারকারীদের জন্য ইন্টারেক্টিভ এবং তথ্যপূর্ণ অভিজ্ঞতা প্রদান করে।

Promotion

Are you sure to start over?

Loading...