Last Updated on: 10th সেপ্টেম্বর 2024, 11:04 পূর্বাহ্ন
ইন্টারনেটে প্রতিদিন লক্ষ লক্ষ ওয়েবসাইট তৈরি হচ্ছে, আর প্রতিটি ওয়েবসাইটের ভিত্তি হলো HTML। HTML (HyperText Markup Language) একটি মার্কআপ ভাষা যা ওয়েব পেজের গঠন এবং বিন্যাস নির্ধারণ করে। এটি এমন একটি ভাষা যা ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি ওয়েবসাইট এর পেজ এর বিষয়বস্তু ব্রাউজার উইন্ডো তে ইউসার কে প্রদর্শন করতে হবে। যদি আপনি ওয়েবসাইট ডিজাইন বা ওয়েব ডেভেলপার হতে চান তো HTML আপনার কাজের জন্য প্রাথমিক এবং অত্যাবশ্যক ভাষা, যা ওয়েব পেজ তৈরির মূল উপাদান হিসেবে কাজ করে।
এই ব্লগে, আমরা HTML কি, এটি কীভাবে কাজ করে, এর ইতিহাস এবং বিভিন্ন ট্যাগ এবং বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব। যারা নতুন HTML শিখছেন বা ওয়েব ডেভেলপমেন্টে আগ্রহী, তাদের জন্য এটি একটি বিস্তৃত গাইড হবে।
সূচিপত্র
এইচটিএমএল সিনট্যাক্স কী (What is HTML Syntax)?
HTML সিনট্যাক্স হলো সেই নিয়ম এবং কাঠামো যা HTML ডকুমেন্ট তৈরি করতে ব্যবহৃত হয়। এটি নির্দেশ করে কীভাবে HTML ট্যাগ এবং উপাদানগুলো গঠিত হবে, কীভাবে সেগুলো ব্যবহার করা হবে, এবং কীভাবে সেগুলো একটি ওয়েব পেজের বিভিন্ন অংশকে সংজ্ঞায়িত করবে।
HTML সিনট্যাক্সের মূল বিষয় :
১. HTML ট্যাগ
HTML ডকুমেন্টের মূল অংশ হলো ট্যাগ। প্রতিটি HTML উপাদান একটি ট্যাগ দিয়ে শুরু এবং শেষ হয়। একটি ট্যাগ < এবং > চিহ্নের মধ্যে থাকে।
HTML এর সংজ্ঞা ও ইতিহাস
HTML এর সংজ্ঞা
HTML (HyperText Markup Language) হলো এমন একটি ভাষা যা ওয়েব পেজের গঠন বা কাঠামো নির্ধারণ করতে ব্যবহৃত হয়। HTML ব্যবহার করে, আপনি ওয়েব পেজে লেখা, ছবি, লিংক, ভিডিও এবং অন্যান্য বিষয়বস্তু সংযোজন করতে পারেন। এটি মূলত একটি মার্কআপ ভাষা যেখানে “ট্যাগ” ব্যবহার করে পৃষ্ঠার বিভিন্ন উপাদান নির্দেশ করা হয়।
HTML মার্কআপ ভাষা হওয়ায়, এটি কেবল তথ্য দেখানোর জন্যই নয়, বরং সেই তথ্য কীভাবে প্রদর্শিত হবে সেটাও নির্ধারণ করে। এটি এমন একটি ভাষা যা ব্রাউজার পড়তে পারে এবং ওয়েব পেজের সঠিক গঠন তৈরি করতে পারে। HTML মূলত Standard Generalized Markup Language (SGML) and Extensible Markup এর ভিত্তি করে তৈরী যা বিভিন্ন সিম্বল ,ভাষার ফরম্যাটিং সব ঠিক রাখে ফলে বিভিন্ন আউটপুট ডিভাইস যেমন প্রিন্টার ,মনিটর সেগুলি কে সঠিক ভাবে বুঝে ভালো ভাবে প্রদর্শন করে।
CSS কী? (What is CSS?)
CSS (Cascading Style Sheets) হলো একটি স্টাইলিং ভাষা, যা HTML উপাদানগুলো কীভাবে ওয়েব পেজে প্রদর্শিত হবে তা নির্ধারণ করে। CSS ব্যবহার করে HTML পেজের বিন্যাস, রঙ, ফন্ট, মার্জিন, প্যাডিং, এবং অন্যান্য ভিজ্যুয়াল বৈশিষ্ট্যগুলো নির্দিষ্ট করা যায়। এটি ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
HTML এবং CSS এর মধ্যে পার্থক্য (Technical Difference Between HTML and CSS in Bengali)
HTML (HyperText Markup Language) এবং CSS (Cascading Style Sheets) হলো ওয়েব ডেভেলপমেন্টের দুটি প্রধান ভাষা, তবে এদের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে।
১. প্রকৃতি ও ভূমিকা
HTML: HTML হলো একটি মার্কআপ ভাষা, যা ওয়েব পেজের কাঠামো এবং বিষয়বস্তু নির্ধারণ করে। এটি ওয়েব পেজে টেক্সট, ইমেজ, লিঙ্ক, এবং অন্যান্য উপাদান প্রদর্শনের জন্য ব্যবহৃত হয়।
উদাহরণ:
<h1>এটি একটি শিরোনাম</h1>
<p>এটি একটি প্যারাগ্রাফ।</p>
CSS: CSS হলো একটি স্টাইলিং ভাষা, যা HTML উপাদানগুলোর স্টাইল এবং বিন্যাস নির্ধারণ করে। এটি ওয়েব পেজের ভিজ্যুয়াল দিক, যেমন রঙ, ফন্ট, এবং বিন্যাস নিয়ন্ত্রণ করে।
উদাহরণ:
h1 {
color: blue;
}
p {
font-size: 16px;
}
২. কাজের ধরন
HTML: HTML ওয়েব পেজের মূল কাঠামো তৈরি করে। এটি কী উপাদান দেখানো হবে এবং কীভাবে উপস্থাপন করা হবে, সেই বিষয়ে নির্দেশ দেয়।
CSS: CSS সেই কাঠামোকে ভিজ্যুয়ালভাবে আকর্ষণীয় এবং ব্যবহারকারীর অভিজ্ঞতার জন্য সঠিকভাবে বিন্যাস করে। এটি ডিজাইন এবং বিন্যাসের জন্য ব্যবহৃত হয়।
৩. ফাংশনালিটি
HTML: HTML ব্যবহার করে আপনি ওয়েব পেজের টেক্সট, ছবি, লিঙ্ক এবং ফর্মের মতো বিভিন্ন কনটেন্ট তৈরি করতে পারেন।
CSS: CSS ব্যবহার করে আপনি ওয়েব পেজের রঙ, ফন্ট, মার্জিন, প্যাডিং, এবং লেআউট পরিবর্তন করতে পারেন। এটি ওয়েবসাইটকে আরও রেসপনসিভ এবং মোবাইল-ফ্রেন্ডলি করতে সাহায্য করে।
৪. ইন্টিগ্রেশন
HTML: HTML ডকুমেন্টে বিভিন্ন ধরনের কনটেন্ট যেমন টেক্সট, ভিডিও, এবং ইমেজ সংযুক্ত করা হয়।
CSS: HTML ডকুমেন্টের সাথে CSS ফাইল যুক্ত করা হয়, যা সেই ডকুমেন্টের সকল HTML উপাদানের স্টাইলিং নির্ধারণ করে।
৫. উদ্দেশ্য
HTML: এটি মূলত কনটেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ট্যাগ এবং অ্যাট্রিবিউটের মাধ্যমে তথ্যকে গঠন করে।
CSS: এটি কনটেন্টকে সুন্দরভাবে প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ডিজাইন এবং স্টাইলের জন্য দায়ী।
৬. স্ট্যাটিক বনাম ডাইনামিক
HTML: HTML হলো স্ট্যাটিক ভাষা, যা একটি পেজের কনটেন্ট স্থিরভাবে প্রদর্শন করে।
CSS: CSS মূলত স্টাইলিংয়ের জন্য ব্যবহার হলেও, এর কিছু অংশ ডাইনামিক করা যায়। উদাহরণস্বরূপ, CSS ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে ওয়েব পেজের ভিজ্যুয়াল পরিবর্তন করা যায়।
HTML এর ইতিহাস
HTML (HyperText Markup Language) ওয়েব ডেভেলপমেন্টের প্রধান ভাষা হিসেবে বিবেচিত হয় এবং এর ইতিহাস বেশ আকর্ষণীয়। এটি ইন্টারনেটের একটি মৌলিক প্রযুক্তি, যা আজকের ওয়েব পেজগুলোর গঠন তৈরি করে। HTML-এর উদ্ভাবন ও বিবর্তন প্রযুক্তি এবং কম্পিউটিং-এর এক গুরুত্বপূর্ণ অধ্যায় হিসেবে চিহ্নিত। একটি গবেষণা ভিত্তিক আবিষ্কার আজ বিশ্বব্যাপী যোগাযোগ এর প্রদান কারিগর হয়ে উঠেছে এটি সত্যি দারুন ব্যাপার।
১. HTML এর উদ্ভাবক: টিম বার্নার্স-লি
HTML-এর উদ্ভাবক হলেন টিম বার্নার্স-লি (Tim Berners-Lee)। তিনি ১৯৮৯ সালে CERN (European Organization for Nuclear Research)-এ কাজ করার সময় প্রথম HTML-এর ধারণা দেন। তার মূল লক্ষ্য ছিল এমন একটি সহজ ভাষা তৈরি করা, যা বিজ্ঞানী এবং গবেষকরা ইন্টারনেটের মাধ্যমে তথ্য শেয়ার করতে পারবেন।
তখনকার সময়ে ইন্টারনেট ছিল মূলত গবেষণার তথ্য ভাগাভাগি করার জন্য। এটি খুবই সীমাবদ্ধ ছিল এবং আজকের মতো ব্যবহারযোগ্য ছিল না। তাই টিম বার্নার্স-লি একটি সিস্টেম তৈরি করেন যা গবেষকরা একে অপরের সাথে সহজে যোগাযোগ করতে এবং তথ্য ভাগাভাগি করতে পারবেন।
২. HTML-এর প্রাথমিক পর্যায়: ১৯৯১ – ১৯৯৪
১৯৯১ সালে টিম বার্নার্স-লি প্রথম HTML ডকুমেন্ট প্রকাশ করেন। এটি ছিল “HTML Tags” নামে একটি সাধারণ গাইড, যেখানে ১৮টি ট্যাগ ছিল। এগুলি ছিল HTML-এর প্রাথমিক ট্যাগ, যা ওয়েব পেজের গঠন তৈরি করত। সেই সময়ে, HTML খুবই সীমাবদ্ধ ছিল এবং এর ফিচারগুলো খুব সাধারণ ছিল।
HTML-এর প্রাথমিক সংস্করণ ছিল মূলত টেক্সট নির্ভর, যেখানে হাইপারলিংক, হেডিং, এবং প্যারাগ্রাফ ট্যাগগুলো ছিল মূল ফিচার। CSS এবং JavaScript তখনও এর সাথে যুক্ত হয়নি, তাই ওয়েব পেজগুলো ছিল খুবই সাধারণ এবং টেক্সট-ভিত্তিক।
৩. HTML 2.0: ১৯৯৫
১৯৯৫ সালে HTML-এর দ্বিতীয় সংস্করণ, HTML 2.0, প্রকাশিত হয়। এটি ওয়েব ডেভেলপমেন্টের জন্য একটি গুরুত্বপূর্ণ পদক্ষেপ ছিল, কারণ এই সংস্করণটি ওয়েব পেজ তৈরির জন্য কিছু নতুন ফিচার যুক্ত করে। HTML 2.0 ছিল প্রথম স্ট্যান্ডার্ড সংস্করণ, যা সব ব্রাউজারেই সমর্থিত ছিল।
HTML 2.0 সংস্করণে ফর্মস (forms) এবং টেবিল (tables) এর মতো ফিচার যুক্ত করা হয়। ফর্মস ব্যবহারকারীদের তথ্য সংগ্রহ এবং সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়, যা ওয়েব অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ হয়ে ওঠে।
৪. HTML 3.2 এবং 4.0: ১৯৯৭ – ১৯৯৯
১৯৯৭ সালে W3C (World Wide Web Consortium) HTML-এর তৃতীয় সংস্করণ, HTML 3.2 প্রকাশ করে। এটি অনেক নতুন ফিচার এবং ট্যাগ নিয়ে আসে, যেমন স্টাইলিং এবং স্ক্রিপ্টিং। এই সংস্করণে HTML-এর সাথে CSS (Cascading Style Sheets) যুক্ত করা হয়, যা ওয়েব পেজের স্টাইল এবং বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়।
১৯৯৯ সালে HTML 4.0 প্রকাশিত হয়, যা আরও আধুনিক ও স্ট্রাকচারড ফিচারসমূহ নিয়ে আসে। HTML 4.0-এ আরও সেম্যান্টিক ট্যাগ যুক্ত করা হয়, যেমন <div>, <span>, এবং অ্যাক্সেসিবিলিটি উন্নত করার জন্য বিভিন্ন এট্রিবিউট যোগ করা হয়। এই সংস্করণটি ওয়েব ডেভেলপারদের জন্য অত্যন্ত গুরুত্বপূর্ণ ছিল, কারণ এটি ওয়েব পেজের গঠনকে আরও শক্তিশালী এবং ব্যবহারের সহজ করে তোলে।
৫. HTML5: ২০১৪ – বর্তমান
HTML5 হলো HTML-এর সর্বশেষ এবং সবচেয়ে আধুনিক সংস্করণ, যা ২০১৪ সালে প্রকাশিত হয়। এটি ওয়েব ডেভেলপমেন্টের জন্য এক বিশাল অগ্রগতি হিসেবে বিবেচিত হয়। HTML5-এর মূল উদ্দেশ্য ছিল ওয়েব পেজকে আরও ইন্টারঅ্যাক্টিভ, দ্রুত, এবং সহজেই ব্যাবহার করা যায়।
HTML কেন গুরুত্বপূর্ণ?
ওয়েব ডেভেলপমেন্টে HTML-এর গুরুত্ব অনেক। এটি এমন একটি ভাষা যা প্রতিটি ওয়েবসাইটের জন্য প্রয়োজনীয়। নিম্নে HTML-এর কিছু প্রধান গুরুত্ব তুলে ধরা হলো:
১. ওয়েব পেজের গঠন নির্ধারণ:
HTML হলো ওয়েব পেজের মূল কাঠামো। প্রতিটি পৃষ্ঠার অংশ, যেমন শিরোনাম, প্যারা, ছবি, লিংক, তালিকা প্রভৃতি HTML ব্যবহার করে সজ্জিত করা হয়। ওয়েব পেজটি কেমন দেখতে হবে এবং কীভাবে এর উপাদানগুলো ব্রাউজারে প্রদর্শিত হবে, তা HTML এর সাহায্যে নির্ধারিত হয়।
২. HTML হলো অন্যান্য ওয়েব ডেভেলপমেন্ট ভাষার প্রাথমিক ভিত্তি :
CSS (Cascading Style Sheets) এবং JavaScript-এর মতো অন্যান্য ভাষাগুলি HTML-এর উপর ভিত্তি করে কাজ করে। CSS ওয়েব পেজের ডিজাইন ও বিন্যাস নির্ধারণ করে, আর JavaScript ওয়েব পেজের ইন্টারঅ্যাক্টিভিটি বৃদ্ধি করে। কিন্তু HTML ছাড়া এ ভাষাগুলি কার্যকর হয় না, কারণ HTML ওয়েব পেজের ভিত্তি গঠন করে।
৩. SEO এবং ইউজার ফ্রেন্ডলি পেজ তৈরিতে সহায়ক:
HTML সঠিকভাবে ব্যবহৃত হলে, ওয়েবসাইটের সার্চ ইঞ্জিনে র্যাঙ্কিং বৃদ্ধি পায়। HTML ট্যাগগুলির সঠিক ব্যবহার (যেমন: <title>, <meta>, <h1> ইত্যাদি) ওয়েব পেজকে SEO (Search Engine Optimization) এর জন্য উন্নত করে এবং ইউজারদের জন্য আরও ব্যবহারযোগ্য ও সুবিধাজনক পেজ তৈরি করে।
HTML এর প্রধান অংশ :
১. ট্যাগ (Tags)
HTML ট্যাগ হল এক ধরনের নির্দেশনা, যা ব্রাউজারকে বলে দেয় কীভাবে ওয়েব পেজের একটি নির্দিষ্ট অংশ প্রদর্শিত হবে। HTML ট্যাগগুলি সাধারণত কোণবন্ধনী (<>) এর ভিতরে লেখা হয়। প্রায় প্রতিটি ট্যাগের দুটি অংশ থাকে – একটি শুরু ট্যাগ এবং একটি শেষ ট্যাগ।
উদাহরণস্বরূপ:নিচের ট্যাগ টি হলো </h1> হেডার ট্যাগ এর কোড :
<h1>এইচটিএমএল শেখা</h1>
এখানে <h1> হলো শুরু ট্যাগ এবং </h1> হলো শেষ ট্যাগ। এ ট্যাগগুলি HTML কে বলে দেয়, এই অংশটি বড় শিরোনাম হয়ে ডকুমেন্ট এর
(হেডার)হিসেবে প্রদর্শিত হবে।
২. এট্রিবিউট (Attributes)
এট্রিবিউট হলো HTML ট্যাগের অতিরিক্ত বৈশিষ্ট্য যা ট্যাগের গুণাবলী নির্ধারণ করে। উদাহরণস্বরূপ, একটি ছবি দেখানোর জন্য আমরা <img> ট্যাগ ব্যবহার করি, যেখানে src এট্রিবিউট ব্যবহার করে ছবির ফাইলের অবস্থান নির্ধারণ করা হয়।
উদাহরণস্বরূপ:নিচের ট্যাগ টি হলো ওয়েবপেজ এ ছবি দেয়ার জন্য ইমেজ ট্যাগ এর কোড :
<img src=”image.jpg” alt=”ছবির বিবরণ”>
এখানে src এট্রিবিউটটি ব্রাউজারকে বলে দেয় ছবির অবস্থান কী এবং alt এট্রিবিউটটি ছবির বিকল্প বিবরণ দেয়, যা ছবি প্রদর্শিত না হলে দেখানো হয়। এই alt এট্রিবিউটটি আবার সার্চ ইঞ্জিন অপ্টিমাইজেশান এর জন্য অনেক গুরুত্বপূর্ণ।
৩. এলিমেন্ট (Elements)
HTML এলিমেন্ট হলো ট্যাগের সমগ্র অংশ, যা শুরু ট্যাগ থেকে শেষ ট্যাগ পর্যন্ত থাকে। এলিমেন্টের ভিতরের বিষয়বস্তু ব্রাউজারকে বলে দেয় কীভাবে প্রদর্শিত হবে।
উদাহরণস্বরূপ নিচের ট্যাগ টি প্যারা হলো ট্যাগ।
<p>এটি একটি প্যারা ট্যাগের উদাহরণ।</p>
এখানে <p> এবং </p> এর ভিতরের টেক্সট হলো একটি HTML এলিমেন্ট, যা একটি প্যারা হিসাবে প্রদর্শিত হবে।
HTML এর স্ট্রাকচার (Structure)
প্রতিটি HTML ডকুমেন্টের একটি নির্দিষ্ট কাঠামো থাকে। এর মধ্যে ডকুমেন্টের শিরোনাম, বডি এবং বিভিন্ন ট্যাগ ব্যবহৃত হয়। নিচে একটি
সাধারণ HTML ডকুমেন্টের উদাহরণ দেয়া হলো:
<!DOCTYPE html>
<html>
<head>
<title>HTML শেখা</title>
</head>
<body>
<h1>HTML পরিচিতি</h1>
<p>HTML হলো ওয়েব ডেভেলপমেন্টের প্রধান ভাষা।</p>
</body>
</html>ব্যাখ্যা:
১. <!DOCTYPE html>: এটি HTML5 ডকুমেন্টের ঘোষণার জন্য ব্যবহৃত হয়, যা ব্রাউজারকে বলে দেয়, এটি HTML5 ফাইল।
২. <html>: এটি HTML ডকুমেন্টের মূল ট্যাগ।
৩. <head>: এখানে মেটাডেটা থাকে যা পৃষ্ঠায় সরাসরি প্রদর্শিত হয় না, কিন্তু ব্রাউজারের জন্য গুরুত্বপূর্ণ।
৪. <title>: ওয়েব পৃষ্ঠার শিরোনাম নির্ধারণ করে, যা ব্রাউজারের ট্যাবে প্রদর্শিত হয়।
৫. <body>: এখানে সমস্ত দৃশ্যমান উপাদান থাকে, যেমন লেখা, ছবি, লিংক ইত্যাদি।
HTML এর গুরুত্বপূর্ণ ট্যাগসমূহ
HTML এর বিভিন্ন ট্যাগ রয়েছে যা ওয়েব পৃষ্ঠার বিভিন্ন অংশকে নির্দেশ করে। এখানে কিছু গুরুত্বপূর্ণ ট্যাগ নিয়ে আলোচনা করা হলো:
১. শিরোনাম ট্যাগ (Heading Tags)
শিরোনাম ট্যাগগুলি ওয়েব পৃষ্ঠার শিরোনাম বা হেডিং প্রদর্শনের জন্য ব্যবহৃত হয়। HTML-এ ছয়টি শিরোনাম ট্যাগ রয়েছে, H1 থেকে H6 পর্যন্ত। H1 সবচেয়ে বড় শিরোনাম এবং H6 সবচেয়ে ছোট শিরোনাম। উদাহরণ:
<h1>বড় শিরোনাম</h1>
<h2>মাঝারি শিরোনাম</h2>
<h3>ছোট শিরোনাম</h3>H1 থেকে H6 ট্যাগের গুরুত্ব (Importance of H1 to H6 Tags)
HTML-এর H1 থেকে H6 ট্যাগগুলো হেডিং ট্যাগ হিসেবে ব্যবহৃত হয়, যা ওয়েব পেজের বিভিন্ন অংশের গুরুত্ব এবং স্তর নির্ধারণ করে। এই ট্যাগগুলো শুধু পাঠ্য ফরম্যাটিং-এর জন্য নয়, বরং SEO (Search Engine Optimization) এবং ওয়েব অ্যাক্সেসিবিলিটির জন্যও গুরুত্বপূর্ণ।
১. H1 ট্যাগ
প্রধান শিরোনাম: H1 ট্যাগ ওয়েব পেজের প্রধান শিরোনাম হিসেবে ব্যবহৃত হয়। এটি প্রতিটি পৃষ্ঠার সবচেয়ে গুরুত্বপূর্ণ ট্যাগ এবং সাধারণত একটি পেজে একবারই ব্যবহার করা হয়।
SEO এর গুরুত্ব: সার্চ ইঞ্জিন H1 ট্যাগকে ওয়েব পেজের মূল বিষয়বস্তু নির্ধারণ করতে সাহায্য করে। সঠিকভাবে অপ্টিমাইজড H1 ট্যাগ SEO-এর জন্য অত্যন্ত গুরুত্বপূর্ণ।
২. H2 ট্যাগ
উপশিরোনাম: H2 ট্যাগ সাধারণত H1 এর নিচে ব্যবহৃত হয় এবং পৃষ্ঠার বিভিন্ন সেকশনের উপশিরোনাম হিসেবে কাজ করে। এটি কন্টেন্টকে সহজে স্ক্যানযোগ্য করে তোলে।
SEO অবদান: H2 ট্যাগের ব্যবহার সার্চ ইঞ্জিনকে কন্টেন্টের কাঠামো বোঝাতে সাহায্য করে। এটি পৃষ্ঠার বিষয়বস্তু সংগঠিত এবং লজিক্যাল করতে সাহায্য করে।
৩. H3 ট্যাগ
উপ উপশিরোনাম: H3 ট্যাগ H2 এর নিচে উপ উপশিরোনাম হিসেবে ব্যবহৃত হয়। এটি সাধারণত আরও বিস্তারিত কন্টেন্ট উপস্থাপনের জন্য ব্যবহৃত হয়।
ভিজ্যুয়াল গঠন: H3 ট্যাগ কন্টেন্টের স্তরবিন্যাস এবং ভিজ্যুয়াল শ্রেণিবিন্যাসকে সহজ করে তোলে, যা ব্যবহারকারীদের জন্য পড়া সহজ করে।
৪. H4, H5, এবং H6 ট্যাগ
বিস্তারিত উপশিরোনাম: H4, H5, এবং H6 ট্যাগগুলো আরও ছোট উপশিরোনাম হিসেবে ব্যবহৃত হয়। সাধারণত এসব ট্যাগ খুব বেশি ব্যবহৃত হয় না, তবে জটিল ও দীর্ঘ কন্টেন্টের ক্ষেত্রে এগুলো কন্টেন্টকে আরও ভালভাবে বিভক্ত করতে সাহায্য করে।
SEO তে ভূমিকা: যদিও এই ট্যাগগুলো H1, H2, এবং H3-এর মতো প্রভাবশালী নয়, তবে সঠিকভাবে ব্যবহার করলে এটি কন্টেন্টের শ্রেণিবিন্যাসে সাহায্য করতে পারে।
২. প্যারা ট্যাগ (Paragraph Tag)
প্যারা বা অনুচ্ছেদ তৈরি করতে <p> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
উদহারণ ট্যাগ :
<p>এটি একটি প্যারা ট্যাগের উদাহরণ।</p>
৩. তালিকা ট্যাগ (List Tags)
HTML-এ দুটি ধরনের তালিকা রয়েছে: অর্ডার্ড (সিরিয়াল অনুযায়ী) এবং আনঅর্ডার্ড (অসিরিয়াল)। অর্ডার্ড তালিকা তৈরি করতে <ol> এবং আনঅর্ডার্ড তালিকা তৈরি করতে <ul> ট্যাগ ব্যবহার করা হয়। প্রতিটি তালিকার আইটেমের জন্য <li> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
উদাহরণ ট্যাগ :
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ul>
৪. ছবি যোগ করা (Image Tag)
ওয়েব পৃষ্ঠায় ছবি যোগ করতে <img> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
উদাহরণ ট্যাগ :
<img src=”image.jpg” alt=”ছবির বিবরণ”>
৫. লিংক যোগ করা (Link Tag)
ওয়েব পৃষ্ঠায় লিংক তৈরি করতে <a> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
উদাহরণ ট্যাগ :
<a href=”https://www.example.com”>এখানে ক্লিক করুন</a>
HTML5: আধুনিক HTML
HTML5 হলো HTML এর সর্বশেষ এবং সবচেয়ে আধুনিক সংস্করণ, যা অনেক নতুন ফিচার এবং ট্যাগ নিয়ে এসেছে। এটি ওয়েব ডেভেলপমেন্টকে আরও সহজ এবং কার্যকর করেছে। HTML5 এর কিছু প্রধান বৈশিষ্ট্য নিচে তুলে ধরা হলো:
১. নতুন সেম্যান্টিক ট্যাগ (New Semantic Tags)
HTML5 এ কিছু নতুন সেম্যান্টিক ট্যাগ যুক্ত হয়েছে, যা ওয়েব পৃষ্ঠার গঠনকে আরও নির্দিষ্ট করে তোলে। উদাহরণ:
html
উদাহরণ ট্যাগ :
<article>
<h2>এইচটিএমএল সম্পর্কে</h2>
<p>HTML হলো ওয়েব ডেভেলপমেন্টের ভিত্তি।</p>
</article>
এছাড়াও, <section>, <header>, এবং <footer> এর মতো সেম্যান্টিক ট্যাগ রয়েছে, যা পৃষ্ঠার বিভিন্ন অংশের গঠন নির্ধারণ করতে সহায়তা করে।
২. ভিডিও এবং অডিও ট্যাগ (Video and Audio Tags)
HTML5 এ ভিডিও এবং অডিও এম্বেড করার জন্য কোনো অতিরিক্ত প্লাগইন প্রয়োজন হয় না। এখন আপনি সহজেই ভিডিও এবং অডিও সংযুক্ত করতে পারেন:
উদাহরণ ট্যাগ :
<video controls>
<source src=”video.mp4″ type=”video/mp4″>
</video><audio controls>
<source src=”audio.mp3″ type=”audio/mp3″>
</audio>
HTML শেখার উপায়
১. অনলাইন টিউটোরিয়াল এবং কোর্স
অনলাইনে বিভিন্ন প্ল্যাটফর্মে HTML শেখার অনেক ফ্রি এবং পেইড টিউটোরিয়াল ও কোর্স পাওয়া যায়। Codecademy, freeCodeCamp, এবং W3Schools এর মতো সাইটগুলো HTML শেখার জন্য বেশ জনপ্রিয়।
২. HTML প্র্যাকটিস
HTML শেখার সবচেয়ে ভাল উপায় হলো নিয়মিত প্র্যাকটিস করা। বিভিন্ন HTML প্রোজেক্ট নিয়ে কাজ করলে আপনার দক্ষতা বৃদ্ধি পাবে এবং আপনি দ্রুত উন্নতি করবেন।
৩. কোড এডিটর ব্যবহার
কোড লিখতে ভাল কোড এডিটর ব্যবহার করুন। Visual Studio Code, Sublime Text, এবং Notepad++ এর মতো এডিটরগুলি HTML কোডিংয়ের জন্য খুবই জনপ্রিয় এবং কার্যকর।
উপসংহার
HTML হলো ওয়েব ডেভেলপমেন্টের মুল ভিত্তি। এটি শেখা সহজ, তবে এর সঠিক ব্যবহার ও দক্ষতা অর্জন করলে আপনি পরবর্তীতে CSS এবং JavaScript-এর মতো অন্যান্য প্রযুক্তি শিখে আরও উন্নত ও ইন্টারঅ্যাক্টিভ ওয়েবসাইট তৈরি করতে পারবেন। HTML শেখার মাধ্যমে আপনি ওয়েব ডেভেলপমেন্টের প্রথম ধাপে প্রবেশ করবেন, যা ভবিষ্যতের জন্য অত্যন্ত মূল্যবান।
