HTML Tutorial Bangla পর্ব ০১ | HTML Introduction বিস্তারিত শিখুন

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

HTML কেন শেখা উচিত?

Table of Contents

ওয়েব ডেভেলপমেন্টের মহাসড়কে HTML হলো প্রথম প্রবেশদ্বার। এটি শেখা অত্যন্ত সহজ এবং এর সিনট্যাক্স বা লেখার নিয়মগুলো একদম মানুষের ভাষার মতোই সাধারণ। আপনি যদি একজন ফ্রিল্যান্সার হতে চান, নিজের একটি ব্লগ তৈরি করতে চান, কিংবা কোনো আইটি কোম্পানিতে ওয়েব ডেভেলপার হিসেবে ক্যারিয়ার গড়তে চান, HTML জানা আপনার জন্য বাধ্যতামূল। এটি ছাড়া ওয়েব দুনিয়ার অন্য কোনো ভাষা যেমন CSS বা JavaScript শেখা অসম্ভব।

বর্তমান সময়ে HTML-এর গুরুত্ব

অনেকেই মনে করতে পারেন যে বর্তমানে ওয়ার্ডপ্রেস বা বিভিন্ন নো-কোড ওয়েবসাইট বিল্ডার আসার পর HTML-এর গুরুত্ব কমে গেছে। কিন্তু ধারণাটি সম্পূর্ণ ভুল। যেকোনো কাস্টম ডিজাইন, এসইও (SEO) অপ্টিমাইজেশন কিংবা ওয়েবসাইটের ত্রুটি বা বাগ ফিক্সিংয়ের জন্য HTML-এর মৌলিক জ্ঞান থাকা অপরিহার্য। বর্তমানের আধুনিক HTML5 সংস্করণের মাধ্যমে আমরা খুব সহজেই অডিও, ভিডিও এবং চমৎকার সব অ্যানিমেশন যুক্ত করতে পারি, যা ওয়েবকে করেছে আরও গতিশীল।

কারা HTML শিখতে পারে?

HTML শেখার জন্য আপনার কোনো পূর্ব প্রাতিষ্ঠানিক কম্পিউটার ডিগ্রির প্রয়োজন নেই। আপনি যদি স্কুলের শিক্ষার্থী হন, কলেজের কোনো তরুণ হন, কিংবা সম্পূর্ণ ভিন্ন পেশার কেউ হন—যে কেউ এটি শিখতে পারেন। শুধুমাত্র একটি কম্পিউটার বা মোবাইল ফোন এবং শেখার তীব্র ইচ্ছা থাকলেই আপনি কয়েক দিনের মধ্যে HTML-এর বেসিক আয়ত্ত করতে পারবেন।

HTML কী? (What is HTML)

সহজ কথায় বলতে গেলে, HTML হলো একটি ওয়েবসাইটের কঙ্কাল বা মূল কাঠামো। একটি বহুতল ভবন তৈরি করার সময় যেমন প্রথমে রড এবং সিমেন্ট দিয়ে তার ভেতরের স্ট্রাকচার তৈরি করা হয়, ঠিক তেমনি একটি ওয়েবসাইটের ভেতরের মূল কাঠামোটি তৈরি করা হয় HTML দিয়ে।

মনে রাখবেন: HTML শুধুমাত্র একটি Markup Language। এটি কোনো Programming Language নয়।

HTML এর পূর্ণরূপ

HTML-এর পূর্ণরূপ হলো HyperText Markup Language। এখানে প্রতিটি শব্দের একটি বিশেষ অর্থ রয়েছে:

HyperText: এর মানে হলো এমন টেক্সট বা লেখা, যা অন্য কোনো লেখার সাথে লিংক বা যুক্ত থাকে। আপনি যখন কোনো ওয়েবসাইটে একটি লিংকে ক্লিক করে অন্য পেজে চলে যান, সেটিই হলো হাইপারটেক্সট-এর কাজ।
Markup Language: এর অর্থ হলো এটি কিছু নির্দিষ্ট ট্যাগ (Tag) ব্যবহার করে ওয়েব পেজের ভেতরের এলিমেন্ট বা উপাদানগুলোকে চিহ্নিত বা মার্কআপ করে। এটি ব্রাউজারকে বলে দেয় যে কোন অংশটি হেডিং, কোন অংশটি প্যারাগ্রাফ বা কোন অংশটি একটি ছবি হবে।

HTML কীভাবে কাজ করে

আমরা যখন কম্পিউটারে কোনো HTML ফাইল তৈরি করি, তখন সেই ফাইলের কোডগুলো সরাসরি ইন্টারনেটে দেখা যায় না। কোডগুলোকে মানুষের পড়ার উপযোগী করে দেখানোর কাজটি করে ওয়েব ব্রাউজার (যেমন: Google Chrome, Mozilla Firefox, Microsoft Edge)।

Browser কীভাবে HTML পড়ে

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

আরো পড়ুনঃ Blogger এ Sub Domain যোগ করার সম্পূর্ণ গাইড।

তাহলে HTML আসলে কী?

HTML হলো একগুচ্ছ নিয়ম বা ট্যাগের সমষ্টি, যার মাধ্যমে আমরা ব্রাউজারকে নির্দেশ দিই যে আমাদের ওয়েবসাইটের কন্টেন্ট বা তথ্যগুলো কীভাবে সাজানো থাকবে। এটি কোনো লজিক্যাল সিদ্ধান্ত নিতে পারে না (যেমন ২+২ কত হবে তা হিসাব করা), তাই এটি প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, এটি একটি পিওর মার্কআপ ল্যাঙ্গুয়েজ।

সহজ বাস্তব উদাহরণ

ধরে নিন, আপনি একটি চিঠি লিখছেন। চিঠির শুরুতে আপনি লেখেন ‘তারিখ’, তারপর লেখেন ‘প্রধান শিক্ষকের নাম’, এরপর একটি ‘বিষয়’ এবং শেষে ‘মূল বক্তব্য’। এই যে আপনি চিঠির বিভিন্ন অংশকে আলাদা আলাদা নাম দিয়ে সাজাচ্ছেন, এটাই হলো এক ধরনের মার্কআপ। কম্পিউটারের ভাষায় এই কাজটি যখন কিছু সুনির্দিষ্ট কোড দিয়ে করা হয়, তখনই তাকে HTML বলা হয়।

HTML এর ইতিহাস (History of HTML)

HTML-এর ইতিহাস বেশ চমৎকার এবং অনুপ্রেরণাদায়ক। এটি এক দিনে আজকের এই অবস্থানে আসেনি, বরং বহু বছরের পরিবর্তন এবং পরিমার্জনের মধ্য দিয়ে আজকের আধুনিক রূপে পৌঁছেছে।

HTML কে তৈরি করেন

১৯৮৯ সালে বিজ্ঞানী স্যার টিম বার্নার্স-লি (Tim Berners-Lee) সুইজারল্যান্ডের CERN গবেষণাগারে কাজ করার সময় প্রথম ওয়ার্ল্ড ওয়াইড ওয়েব (WWW)-এর ধারণা দেন। boardwalk পরবর্তীতে ১৯৯১ সালে তিনি আনুষ্ঠানিকভাবে HTML-এর প্রথম সংস্করণ বা ‘HTML 1.0’ তৈরি করেন।

কেন তৈরি করা হয়

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

বর্তমানে HTML5

১৯完整১ সালের পর থেকে HTML-এর অনেকগুলো সংস্করণ এসেছে, যেমন HTML 2.0, HTML 3.2, HTML 4.01 এবং XHTML। তবে ২০১৪ সালে ডব্লিউ৩সি (W3C) কর্তৃক প্রকাশিত হয় HTML5, যা ওয়েব দুনিয়ায় এক বিশাল বিপ্লব নিয়ে আসে। বর্তমানে আমরা যে সংস্করণটি ব্যবহার করছি তা হলো HTML5-এর আপডেট সংস্করণ, যা মূলত একটি লিভিং স্ট্যান্ডার্ড (Living Standard) হিসেবে পরিচালিত হচ্ছে।

HTML কোথায় ব্যবহার হয়? (Where is HTML Used)

আজকের দিনে ইন্টারনেট দুনিয়ায় এমন কোনো ওয়েবসাইট খুঁজে পাওয়া অসম্ভব যেখানে HTML-এর ব্যবহার নেই। নিচে কিছু প্রধান ক্ষেত্রের উদাহরণ দেওয়া হলো যেখানে HTML সরাসরি ব্যবহৃত হয়:

১. Website বা মূল ওয়েবসাইট

যেকোনো সাধারণ বা জটিল ওয়েবসাইটের প্রধান ভিত্তি হলো HTML। ফেসবুক, ইউটিউব, বা উইকিপিডিয়ার মতো বিশাল সাইটগুলোর সামনের যে অংশটি আমরা দেখতে পাই, তার সবটুকুই HTML দিয়ে নিয়ন্ত্রিত হয়。

২. Landing Page

ডিজিটাল মার্কেটিং বা কোনো পণ্যের প্রচারণার জন্য একক পেজের যে ওয়েবসাইটগুলো তৈরি করা হয়, সেগুলোকে ল্যান্ডিং পেজ বলে। এই ল্যান্ডিং পেজের ডিজাইন ও কন্টেন্ট সাজাতে HTML সবচেয়ে বেশি ভূমিকা রাখে।

৩. Blog বা ব্লগ সাইট

অনলাইনে নিবন্ধ বা আর্টিকেল পড়ার জন্য যে ব্লগ সাইটগুলো রয়েছে (যেমন আমাদের এই সাইটটি), তার ভেতরের লেখা, শিরোনাম, ছবি এবং টেবিলগুলো সাজানোর জন্য HTML ব্যবহার করা হয়।

৪. Portfolio বা পোর্টফোলিও

একজন ডেভেলপার, ডিজাইনার বা ফ্রিল্যান্সার নিজের কাজের দক্ষতা ও পূর্বের কাজের নমুনা প্রদর্শনের জন্য যে ব্যক্তিগত ওয়েবসাইট তৈরি করেন, তাকে পোর্টফোলিও বলে। এই পোর্টফোলিও সাইটের কাঠামো তৈরিতে HTML অপরিহার্য।

৫. Email Template

আমরা বিভিন্ন কোম্পানির কাছ থেকে যে চমৎকার সব অফার বা নিউজের ইমেইল পেয়ে থাকি, সেগুলো কিন্তু সাধারণ টেক্সট নয়। সেগুলো হলো HTML Email Template। সুন্দর ডিজাইন, বাটন এবং ছবিসহ ইমেইল পাঠানোর জন্য কোড লিখে এই টেমপ্লেটগুলো তৈরি করতে হয়।

৬. Documentation বা নির্দেশিকা

যেকোনো সফটওয়্যার বা প্রোগ্রামিং ভাষার অনলাইন নির্দেশিকা বা ডকুমেন্টেশন পেজগুলো তৈরি করতে HTML-এর ব্যাপক ব্যবহার রয়েছে।

HTML শেখার জন্য কী কী লাগবে? (Prerequisites)

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

১. Computer/Laptop

আপনার কাছে যদি একটি সাধারণ মানের কম্পিউটার বা ল্যাপটপ থাকে, তবে সেটিই যথেষ্ট। উইন্ডোজ, ম্যাক বা লিনাক্স—যেকোনো অপারেটিং সিস্টেমেই HTML কোড লেখা সম্ভব।

২. Mobile বা মোবাইল ফোন

আপনার যদি কম্পিউটার না থাকে, তবে হতাশ হওয়ার কিছু নেই। বর্তমান সময়ে অ্যানড্রয়েড বা আইফোনে বিভিন্ন অ্যাপ (যেমন: TrebEdit, AWD) ডাউনলোড করে আপনি মোবাইলেই HTML কোড লিখে তা ব্রাউজারে রান করতে পারবেন।

৩. Browser বা ওয়েব ব্রাউজার

কোডের আউটপুট দেখার জন্য আপনার কম্পিউটারে একটি আধুনিক ওয়েব ব্রাউজার থাকতে হবে। Google Chrome বা Mozilla Firefox এক্ষেত্রে সবচেয়ে সেরা এবং ডেভেলপার-বান্ধব।

৪. Code Editor বা কোড এডিটর

কোড লেখার জন্য আমাদের একটি সফটওয়্যারের প্রয়োজন হবে, যাকে বলা হয় কোড এডিটর।

Notepad: এটি উইন্ডোজ কম্পিউটারের সাথে বিল্ট-ইন বা আগে থেকেই দেওয়া থাকে। একদম শুরুতে কোডের প্রতিটি অক্ষর হাতেনাতে শেখার জন্য নোটপ্যাড ব্যবহার করা যেতে পারে।
VS Code (Visual Studio Code): এটি বর্তমানে পৃথিবীর সবচেয়ে জনপ্রিয় এবং সম্পূর্ণ ফ্রি কোড এডিটর। মাইক্রোসফটের তৈরি এই এডিটরে কোড লেখার সময় অটো-কমপ্লিশন, কালার হাইলাইটিং সহ অনেক আধুনিক সুবিধা পাওয়া যায়, যা আপনার কাজকে অনেক দ্রুত করে দেবে।

HTML দিয়ে কী কী করা যায়?

HTML দিয়ে আপনি একটি ওয়েব পেজের যাবতীয় কন্টেন্ট বা উপাদান যুক্ত করতে পারবেন। এর মধ্যে প্রধান কাজগুলো হলো:

ওয়েব পেজে যেকোনো ধরনের ছোট বা বড় শিরোনাম (Heading) এবং অনুচ্ছেদ (Paragraph) তৈরি করা।
যেকোনো সাধারণ বা ক্রমানুসারে সাজানো তালিকা (List) তৈরি করা।
ওয়েবসাইটের ভেতরে সুন্দর ছবি (Image) এবং লোগো প্রদর্শন করা।
এক পেজের সাথে অন্য পেজের সংযোগ বা লিংক (Hyperlink) তৈরি করা。
তথ্য সংগ্রহের জন্য বিভিন্ন ধরনের ফর্ম (Form) যেমন লগইন ফর্ম বা কন্টাক্ট ফর্ম তৈরি করা।
যেকোনো ডেটা বা তথ্যকে ছক বা টেবিল (Table) আকারে সাজানো।

HTML দিয়ে কী করা যায় না?

HTML-এর ক্ষমতা যেমন আছে, তেমনি এর কিছু সীমাবদ্ধতাও আছে। নতুনদের এই বিষয়টি শুরুতেই পরিষ্কারভাবে জেনে নেওয়া উচিত।

HTML দিয়ে ওয়েবসাইটে কোনো সুন্দর ডিজাইন, ব্যাকগ্রাউন্ড কালার বা চমৎকার ফন্ট স্টাইল করা যায় না (এর জন্য CSS প্রয়োজন)।
HTML দিয়ে কোনো লজিক্যাল কাজ করা যায় না, যেমন ব্যবহারকারী ভুল পাসওয়ার্ড দিলে তাকে আটকে দেওয়া (এর জন্য JavaScript প্রয়োজন)।
HTML কোনো ডেটাবেজের সাথে যোগাযোগ করতে পারে না, অর্থাৎ ব্যবহারকারীর তথ্য সেভ করে রাখতে পারে না (এর জন্য PHP বা MySQL প্রয়োজন)।

সহজ কথায়: HTML শুধু ওয়েবসাইটের কঙ্কাল তৈরি করে, রূপ দেয় না এবং বুদ্ধিমত্তাও দেয় না।

HTML Document কেমন হয়? (Basic Structure)

একটি স্ট্যান্ডার্ড বা আদেশযোগ্য HTML ফাইলের একটি নির্দিষ্ট গঠন বা কঙ্কাল থাকে। নিচে একটি সাধারণ HTML ডকুমেন্টের কোড দেওয়া হলো:

<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম ওয়েব পেজ</title>
</head>
<body>
<h2>হ্যালো বাংলাদেশ!</h2>
<p>আমি সহজ বাংলায় HTML শিখছি।</p>
</body>
</html>

Example Explanation (কোডের বিস্তারিত ব্যাখ্যা)

উপরের কোডটি দেখে ভয় পাওয়ার কিছু নেই। চলুন প্রতিটি লাইনের কাজ খুব সহজভাবে বুঝে নিই:

<!DOCTYPE html> : এটি ব্রাউজারকে জানিয়ে দেয় যে এটি একটি HTML5 সংস্করণের ডকুমেন্ট। এটি কোনো ট্যাগ নয়, এটি একটি ডিক্লারেশন বা ঘোষণা।
<html> : এটি হলো রুট (Root) এলিমেন্ট। এর ভেতরেই ওয়েব পেজের সমস্ত কোড থাকে। এখান থেকেই মূলত HTML ডকুমেন্টের শুরু এবং শেষ হয়।
<head> : এই অংশের ভেতরে ওয়েব পেজের পেছনের যাবতীয় তথ্য বা মেটা ডেটা থাকে, যা সরাসরি মূল ওয়েব পেজে দেখা যায় না। তবে এটি সার্চ ইঞ্জিনের জন্য খুবই গুরুত্বপূর্ণ।
<title> : এটি ব্রাউজারের একদম উপরের ট্যাবে ওয়েবসাইটের যে নামটি দেখায়, তা নির্ধারণ করে। যেমন এখানে দেখাবে “আমার প্রথম ওয়েব পেজ”।
<body> : এটি হলো ওয়েবসাইটের সবচেয়ে গুরুত্বপূর্ণ অংশ। এই ট্যাগের ভেতরে আমরা যা কিছু লিখব (যেমন লেখা, ছবি, ভিডিও, বাটন), তা-ই সরাসরি মূল ওয়েবসাইটে ব্যবহারকারীরা দেখতে পাবেন।
<h2> : এটি একটি হেডিং বা শিরোনাম ট্যাগ। কোনো লেখাকে বড় এবং মোটা আকারে দেখানোর জন্য এটি ব্যবহার করা হয়।
<p> : এটি হলো প্যারাগ্রাফ বা অনুচ্ছেদ ট্যাগ। সাধারণ কোনো বিবরণ বা লেখা প্রদর্শনের জন্য এটি ব্যবহার করা হয়।

HTML Tags কী? (What are Tags)

HTML-এর মূল চালিকাশক্তি হলো ট্যাগ। ট্যাগ হলো কিছু বিশেষ সংরক্ষিত শব্দ বা কিওয়ার্ড, যা দুটি অ্যাঙ্গেল ব্র্যাকেট বা কোণ বন্ধনী ( < এবং > ) এর মধ্যে আবদ্ধ থাকে। যেমন: <p>, <h2>, <html>।

Opening Tag এবং Closing Tag

সাধারণত বেশিরভাগ HTML ট্যাগের দুটি অংশ থাকে। একটি হলো শুরু বা Opening Tag এবং অন্যটি হলো শেষ বা Closing Tag।

Opening Tag: এটি দেখতে এমন হয়: <tagname>। এখান থেকে ট্যাগের প্রভাব শুরু হয়।
Closing Tag: এটি দেখতে ওপেনিং ট্যাগের মতোই, তবে নামের আগে একটি ফরওয়ার্ড স্ল্যাশ ( / ) থাকে। যেমন: </tagname>। এখানে এসে ট্যাগের প্রভাব শেষ হয়।

Self Closing Tag (বা Empty Tag)

কিছু কিছু ট্যাগ আছে যেগুলোর কোনো শেষ বা ক্লোজিং ট্যাগ থাকে না। এরা একাই সম্পূর্ণ। এগুলোকে বলা হয় Self Closing বা Empty Tag।

উদাহরণ: ওয়েব পেজে লাইন ব্রেক বা পরের লাইনে যাওয়ার জন্য ব্যবহৃত হয় <br> ট্যাগ এবং কোনো ছবি যুক্ত করার জন্য ব্যবহৃত হয় <img> ট্যাগ। এগুলোর কোনো ক্লোজিং ট্যাগ হয় না।

Nested Tag কী?

যখন একটি HTML ট্যাগের ভেতরে অন্য এক বা একাধিক ট্যাগ ব্যবহার করা হয়, তখন তাকে Nested Tag বলা হয়। এটি অনেকটা এক বাক্সের ভেতরে অন্য আরেকটি বাক্স রাখার মতো।

উদাহরণ:

<p>আমার নাম সামিম এবং আমি একজন <strong>ওয়েব ডেভেলপার</strong>।</p>

এখানে প্যারাগ্রাফ বা <p> ট্যাগের ভেতরে ‘ওয়েব ডেভেলপার’ কথাটিকে বেশি মোটা বা বোল্ড করার জন্য <strong> ট্যাগটি নেস্টেড বা ভেতরে ব্যবহার করা হয়েছে।

HTML Elements কী? (What are Elements)

অনেকেই ট্যাগ এবং এলিমেন্টকে একই মনে করেন, কিন্তু এদের মধ্যে একটি সূক্ষ্ম পার্থক্য রয়েছে। ওপেনিং ট্যাগ থেকে শুরু করে ক্লোজিং ট্যাগ পর্যন্ত এবং এর মাঝখানের সমস্ত কন্টেন্ট বা বিষয়বস্তুকে একসাথে HTML Element বলা হয়।

সহজ উদাহরণ:

নিচের চিত্রটি লক্ষ্য করুন:

<h2>হ্যালো ওয়ার্ল্ড!</h2>

এখানে—

<h2> হলো Opening Tag
হ্যালো ওয়ার্ল্ড! হলো Content
</h2> হলো Closing Tag
এবং এই পুরো অংশটি অর্থাৎ <h2>হ্যালো ওয়ার্ল্ড!</h2> একসাথে হলো একটি Heading Element।

HTML Attributes কী? (What are Attributes)

HTML অ্যাট্রিবিউট হলো এমন কিছু বিশেষ কোড বা তথ্য, যা কোনো এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করে। অ্যাট্রিবিউট সবসময় ওপেনিং ট্যাগের ভেতরে লিখতে হয় এবং এর একটি নাম ও একটি ভ্যালু বা মান থাকে। এর লেখার সাধারণ নিয়ম হলো: name=”value”।

একাধিক উদাহরণসহ ব্যাখ্যা:

উদাহরণ ১ (Hyperlink):

<a href=”https://www.google.com”>গুগল ভিজিট করুন</a>

এখানে <a> ট্যাগটি লিংক তৈরির জন্য ব্যবহৃত হয়েছে। কিন্তু লিংকটি কোথায় যাবে, তা নির্দিষ্ট করে দিচ্ছে href অ্যাট্রিবিউটটি। এখানে href হলো অ্যাট্রিবিউটের নাম এবং “https://www.google.com” হলো তার ভ্যালু।

উদাহরণ ২ (Image):

এখানে <img> ট্যাগের ভেতরে তিনটি অ্যাট্রিবিউট ব্যবহার করা হয়েছে:

src: এটি ছবির উৎস বা ফাইল পাথ নির্দেশ করে।
alt: কোনো কারণে ছবি লোড না হলে কী লেখা দেখাবে, তা নির্ধারণ করে।
width: ছবির চওড়া বা সাইজ কত পিক্সেল হবে, তা নিয়ন্ত্রণ করে।

HTML শেখার সুবিধা

ওয়েব দুনিয়ার ভিত্তিপ্রস্তর স্থাপনের পাশাপাশি HTML শেখার আরও অনেক সুবিধা রয়েছে:

এটি সম্পূর্ণ ফ্রি এবং ওপেন সোর্স, কোনো লাইসেন্স ফি লাগে না।
সব ধরনের আধুনিক ওয়েব ব্রাউজারে এটি কোনো অতিরিক্ত প্লাগইন ছাড়াই কাজ করে।
এটি শেখা অত্যন্ত সহজ এবং এর কোড সহজেই মনে রাখা যায়।
সার্চ ইঞ্জিন অপ্টিমাইজেশন বা SEO-বান্ধব ওয়েবসাইট তৈরিতে এটি সরাসরি সাহায্য করে।

HTML শেখার পরে কী শেখা উচিত?

আপনি যখন সম্পূর্ণ HTML ভালোভাবে শিখে যাবেন, তখন একজন প্রফেশনাল ওয়েব ডিজাইনার বা ডেভেলপার হওয়ার জন্য আপনাকে ক্রমানুসারে নিচের প্রযুক্তিগুলো শিখতে হবে:

HTML: ওয়েবসাইটের মূল কঙ্কাল বা কাঠামো তৈরি করার জন্য (যা আপনি এখন শিখছেন)।
CSS (Cascading Style Sheets): ওয়েবসাইটের কঙ্কালটিকে সুন্দর রঙ, ডিজাইন, লেআউট এবং রূপ দেওয়ার জন্য।
JavaScript: ওয়েবসাইটে বুদ্ধিমত্তা বা প্রাণ যোগ করার জন্য (যেমন বাটনে ক্লিক করলে মেনু ওপেন হওয়া বা পপআপ আসা)।
Bootstrap / Tailwind CSS: দ্রুত এবং রেসপন্সিভ ডিজাইন করার জন্য জনপ্রিয় CSS ফ্রেমওয়ার্ক।
Git: আপনার কোডের বিভিন্ন সংস্করণ বা ভার্সন কন্ট্রোল করার জন্য।
GitHub: আপনার কোডগুলো অনলাইনে ব্যাকআপ রাখা এবং অন্যান্য ডেভেলপারদের সাথে মিলে প্রজেক্টে কাজ করার জন্য।
Responsive Web Design: আপনার ওয়েবসাইটটি যেন কম্পিউটার, ট্যাবলেট এবং মোবাইল—সব ডিভাইসেই সুন্দর দেখায় তা নিশ্চিত করার কৌশল।

Beginner Tips (নতুনদের জন্য বাস্তব পরামর্শ)

নতুন অবস্থায় কোডিং শেখার সময় প্রতিটি শিক্ষার্থীর কিছু বিশেষ গাইডলাইন মেনে চলা উচিত। নিচে কিছু বাস্তব টিপস দেওয়া হলো:

শুধু দেখে যাবেন না, নিজে কোড লিখুন: ভিডিও টিউটোরিয়াল বা ব্লগ পোস্ট শুধু রিডিং পড়ে গেলে কখনো কোডিং শিখতে পারবেন না। প্রতিটি ছোট উদাহরণও নিজের কম্পিউটারে টাইপ করে রান করে দেখুন।
নোটপ্যাড দিয়ে শুরু করুন: একদম প্রথম ২-৩ দিন কম্পিউটারের সাধারণ নোটপ্যাডে কোড লিখুন। এতে ট্যাগের বানান ভুল হওয়ার সম্ভাবনা কমবে এবং কোডগুলো আপনার মাথায় গেঁথে যাবে। এরপর VS Code-এ শিফট করুন।
মুখস্থ করার চেষ্টা করবেন না: HTML-এ শত শত ট্যাগ আছে। এগুলো মুখস্থ করার কোনো প্রয়োজন নেই। কাজ করতে করতে এগুলো নিজে থেকেই আপনার মনে পড়ে যাবে। গুগলে সার্চ করার অভ্যাস তৈরি করুন।

Common Mistakes (সাধারণ ভুল এবং সমাধান)

শুরুর দিকে নতুনরা কিছু কমন ভুল করে থাকেন, যার কারণে কোড ঠিকমতো কাজ করে না। নিচে তেমন কিছু ভুল ও তার সমাধান দেওয়া হলো:

সাধারণ ভুল (Common Mistakes)	এর প্রভাব বা সমস্যা	সঠিক সমাধান (Solution)
ট্যাগের বানান ভুল করা (যেমন <pargraph>)	ব্রাউজার লেখাটি চিনতে পারে না এবং ডিজাইন ভেঙে যায়।	সবসময় সঠিক ট্যাগ ব্যবহার করুন, যেমন প্যারাগ্রাফের জন্য শুধু <p>।
ক্লোজিং ট্যাগ দিতে ভুলে যাওয়া (যেমন </p> না দেওয়া)	পরবর্তী সমস্ত লেখার ওপর সেই ট্যাগের প্রভাব থেকে যায়।	ওপেনিং ট্যাগ লেখার সাথে সাথেই ক্লোজিং ট্যাগটি লিখে ফেলার অভ্যাস করুন।
ফাইল সেভ করার সময় এক্সটেনশন ভুল করা (যেমন index.txt)	ফাইলটি সাধারণ টেক্সট হিসেবে খোলে, ওয়েব পেজ হয় না।	ফাইল সেভ করার সময় অবশ্যই নামের শেষে .html (যেমন: index.html) যুক্ত করবেন।
অ্যাট্রিবিউটের কোটেশন চিহ্ন না দেওয়া (যেমন width=300)	কিছু ব্রাউজারে কোড কাজ করলেও আধুনিক ব্রাউজারে সমস্যা হতে পারে।	অ্যাট্রিবিউটের ভ্যালু সবসময় ডাবল কোটেশন চিহ্নের (” “) ভেতরে লিখবেন।

সংক্ষিপ্তসার (Summary)

আজকের এই প্রথম পর্বে আমরা HTML-এর একদম প্রাথমিক এবং মৌলিক বিষয়গুলো সম্পর্কে জানলাম। আমরা জানলাম যে HTML হলো ওয়েবসাইটের ভিত্তি, যা ট্যাগ, এলিমেন্ট এবং অ্যাট্রিবিউটের সমন্বয়ে গঠিত। এটি কোনো কঠিন বিষয় নয়, বরং সঠিক নিয়ম মেনে নিয়মিত অনুশীলন করলে খুব সহজেই এটি আয়ত্ত করা সম্ভব। আগামী পর্বগুলোতে আমরা প্র্যাক্টিক্যালি কোড লেখা এবং বিভিন্ন ট্যাগের বাস্তব ব্যবহার শিখব।

Frequently Asked Questions

১. HTML শিখতে কতদিন সময় লাগে?

উত্তরের ধরন ব্যক্তিভেদে ভিন্ন হতে পারে। তবে আপনি যদি প্রতিদিন ১-২ ঘন্টা সময় দেন, তবে ১ থেকে ২ সপ্তাহের মধ্যে HTML-এর বেসিক থেকে অ্যাডভান্সড সব বিষয় ভালোভাবে শিখে ফেলতে পারবেন।

২. আমি কি ইংরেজি না জেনেও HTML শিখতে পারব?

হ্যাঁ, অবশ্যই পারবেন। HTML-এর ট্যাগগুলো খুব সাধারণ ইংরেজি শব্দ (যেমন head, body, title) দিয়ে তৈরি। সাধারণ রিডিং পড়ার মতো ইংরেজি জানলেই আপনি খুব সহজে কোড বুঝতে এবং লিখতে পারবেন।

৩. HTML কি একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ?

না। HTML কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। এটি একটি Markup Language, যা শুধুমাত্র ওয়েব পেজের কন্টেন্ট বা কাঠামো সাজাতে ব্যবহৃত হয়। এতে কোনো লজিক বা কন্ডিশন ব্যবহার করা যায় না।

৪. HTML ফাইল সেভ করার সময় .htm নাকি .html ব্যবহার করব?

আপনি দুটিই ব্যবহার করতে পারেন, দুটিই সমানভাবে কাজ করে। তবে বর্তমান সময়ে স্ট্যান্ডার্ড বা আধুনিক নিয়ম হিসেবে .html ব্যবহার করাই সবচেয়ে শ্রেয় এবং জনপ্রিয়।

৫. HTML কোড লেখার সময় ছোট হাতের অক্ষর নাকি বড় হাতের অক্ষর ব্যবহার করা উচিত?

HTML কেস-সেন্সিটিভ (Case-Sensitive) নয়, অর্থাৎ আপনি <BODY> বা <body> যেকোনোটিই লিখতে পারেন। তবে ডব্লিউ৩সি (W3C) এর নিয়ম অনুযায়ী সবসময় ছোট হাতের অক্ষর (Lowercase) ব্যবহার করা উত্তম এবং এটিই প্রফেশনাল স্ট্যান্ডার্ড।

৬. ইন্টারনেট কানেকশন ছাড়া কি HTML কোড প্র্যাকটিস করা যাবে?

হ্যাঁ, যাবে। HTML কোড লেখার জন্য এবং তা ব্রাউজারে রান করার জন্য কোনো ইন্টারনেট কানেকশনের প্রয়োজন হয় না। আপনার কম্পিউটারের অফলাইন ব্রাউজারই ফাইলটি ওপেন করতে পারে।

৭. মোবাইল দিয়ে কি আসলেই প্রফেশনাল ওয়েব ডিজাইন শেখা সম্ভব?

মোবাইল দিয়ে আপনি HTML এবং CSS এর কোড প্র্যাকটিস করে বেসিক বিষয়গুলো খুব ভালোভাবে শিখতে পারবেন। তবে প্রফেশনাল কাজের পরিবেশ, দ্রুত টাইপিং এবং বড় প্রজেক্ট তৈরির জন্য পরবর্তীতে একটি কম্পিউটার বা ল্যাপটপ থাকা প্রয়োজন।

৮. HTML5 এবং পুরানো HTML এর মধ্যে প্রধান পার্থক্য কী?

HTML5 হলো আধুনিক সংস্করণ। পুরানো সংস্করণে অডিও বা ভিডিও যুক্ত করার জন্য থার্ড-পার্টি প্লাগইন (যেমন flash player) লাগত। কিন্তু HTML5-এ সরাসরি <audio> এবং <video> ট্যাগ ব্যবহার করেই এই কাজগুলো করা যায়।

তথ্যসূত্র (References)

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

W3Schools HTML Tutorial: https://www.w3schools.com/html/
MDN Web Docs (Mozilla): https://developer.mozilla.org/en-US/docs/Web/HTML
WHATWG HTML Living Standard: https://html.spec.whatwg.org/
W3C Official Documentation: https://www.w3.org/