HTML Tutorial Bangla পর্ব ০২ – HTML Basic Examples (সহজ বাংলা গাইড)

আমাদের ফেসবুক পেজে যুক্ত হয়ে নতুন সব টেক আপডেট ও গাইডলাইন পান সবার আগে। পেজে জয়েন করুন
সূচিপত্র (Table of Contents)

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

আমাদের আগের পর্বে আমরা জেনেছিলাম HTML কী, এটি কীভাবে কাজ করে এবং একটি ওয়েবসাইট তৈরিতে এর ভূমিকা ঠিক কতটুকু। আমরা এও জেনেছিলাম যে, ব্রাউজারকে নির্দেশ দেওয়ার জন্য HTML বিভিন্ন ধরনের ট্যাগ ব্যবহার করে।
আপনরা যারা আগের পর্বটি দেখেননি, তারা নিচের লিংকে গিয়ে দেখে নিন
HTML Tutorial Bangla পর্ব ০১ | HTML Introduction বিস্তারিত শিখুন
আজকের পর্বে আমরা সরাসরি কিছু প্র্যাক্টিক্যাল কাজ দেখব। আজকের আলোচনার মূল বিষয় হলো HTML Basic Examples। আমরা সরাসরি কিছু কোড ল্যাবে পরীক্ষা করব এবং দেখব কীভাবে সাধারণ কিছু ট্যাগ ব্যবহার করে একটি সুন্দর ওয়েব পেজের কাঠামো তৈরি করা যায়।

নতুনদের মনে প্রশ্ন আসতে পারে, শুরুতেই Basic Examples বা মৌলিক উদাহরণগুলো শেখা কেন এত গুরুত্বপূর্ণ? দেখুন, আপনি যখন একটি বহুতল ভবন তৈরি করতে যাবেন, তখন তার ভিত্তি বা ফাউন্ডেশন যদি মজবুত না হয়, তবে পুরো ভবনটিই ভেঙে পড়তে পারে। ঠিক তেমনি, বড় বড় এবং জটিল ওয়েবসাইট তৈরির আগে এই ছোট ছোট উদাহরণগুলোই আপনার কোডিংয়ের মূল ভিত্তি গড়ে দেবে। এগুলো ভালোভাবে আয়ত্ত করতে পারলে পরবর্তী জটিল বিষয়গুলো আপনার কাছে একদম পানির মতো সহজ মনে হবে।

আমাদের প্রথম HTML Example

চলুন, কোনো ভূমিকা না বাড়িয়ে আমরা আমাদের জীবনের প্রথম সম্পূর্ণ HTML কোডটি দেখে ফেলি। নিচে একটি আদেশ HTML পেজের কোড দেওয়া হলো:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

মনে রাখবেন: HTML শেখার সবচেয়ে ভালো উপায় হলো প্রতিটি Example নিজে হাতে টাইপ করে, ফাইলটি সেভ করে ব্রাউজারে রান করা। কপি-পেস্ট করলে কিন্তু শেখা যাবে না।

কোডের প্রতিটি লাইনের বিস্তারিত ব্যাখ্যা (Line by Line Explanation)

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

  • <!DOCTYPE html> কি? এটি আসলে কোনো HTML ট্যাগ নয়। এটিকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর মাধ্যমে আমরা আমাদের ওয়েব ব্রাউজারকে (যেমন- Chrome, Firefox) জানিয়ে দিই যে, এটি একটি HTML5 ডকুমেন্ট। ব্রাউজার যেন কোডটি সঠিকভাবে বুঝতে এবং প্রদর্শন করতে পারে, সেজন্য এটি লেখার নিয়ম।
  • <html> ট্যাগ কি? এটিকে বলা হয় পুরো HTML ডকুমেন্টের মূল বা Root Element। আপনার ওয়েবসাইটের সমস্ত কোড এই ওপেনিং ট্যাগ <html> এবং ক্লোজিং ট্যাগ </html>-এর ভেতরেই থাকবে। এর বাইরে কিছু লেখা যাবে না।
  • <head> কি? এটি হলো ওয়েবসাইটের মাথার মতো অংশ। এই ট্যাগের ভেতরের তথ্যগুলো সরাসরি ব্রাউজারের মূল পাতায় দেখা যায় না। এখানে পেজের মেটাডাটা, এক্সটার্নাল ফাইলের লিঙ্ক এবং পেজের টাইটেল রাখা হয়, যা সার্চ ইঞ্জিন এবং ব্রাউজারের কাজের জন্য দরকারি।
  • <title> কি? এই ট্যাগের কাজ হলো আপনার ওয়েব পেজের একটি নাম দেওয়া। আপনি যখন ব্রাউজারে কোনো ওয়েবসাইট ওপেন করেন, তখন একদম উপরে ট্যাবের মধ্যে যে লেখাটি দেখতে পান, সেটাই হলো এই টাইটেল। যেমন এখানে ব্রাউজার ট্যাবে দেখাবে “My First Web Page”।
  • <body> কি? এটি হলো ওয়েবসাইটের আসল শরীর বা মূল অংশ। একটি ওয়েবসাইটের ভেতরে আমরা যা কিছু দেখতে পাই—লেখা, ছবি, ভিডিও, টেবিল, বাটন—তার সবকিছুই এই <body> এবং </body> ট্যাগের মাঝখানে লিখতে হয়।
  • <h1> কি? এর পূর্ণরূপ হলো Heading 1। এটি কোনো পেজের সবচেয়ে বড় এবং প্রধান শিরোনাম লেখার জন্য ব্যবহার করা হয়। ব্রাউজার এই লেখার সাইজ স্বয়ংক্রিয়ভাবে বড় এবং মোটা করে দেখায়।
  • <p> ট্যাগ কি? এর পূর্ণরূপ হলো Paragraph। ওয়েবসাইটে সাধারণ কোনো লেখা বা অনুচ্ছেদ প্রকাশ করার জন্য এই ট্যাগ ব্যবহার করা হয়।

Browser কীভাবে এগুলো Render বা প্রদর্শন করে?

আমরা যখন এই কোডটি একটি ফাইলে লিখে (.html এক্সটেনশন দিয়ে) ব্রাউজারে ডাবল ক্লিক করে ওপেন করি, তখন ব্রাউজার উপর থেকে নিচে ক্রমান্বয়ে কোডগুলো পড়তে শুরু করে। ব্রাউজার খুব চালাক। সে বুঝতে পারে যে <h1> বা <p> ট্যাগগুলো নিজে স্ক্রিনে দেখানোর জন্য নয়, বরং ভেতরের টেক্সটগুলোকে সাজানোর জন্য এসেছে। তাই ব্রাউজার ট্যাগগুলোকে লুকিয়ে ফেলে এবং শুধু ভেতরের মূল টেক্সট বা কনটেন্ট সুন্দরভাবে স্ক্রিনে ফুটিয়ে তোলে। এই পুরো প্রক্রিয়াকে বলা হয় Rendering।

Browser Output

উপরের কোডটি ব্রাউজারে রান করলে ঠিক নিচের মতো দেখাবে:

Hello World!

This is my first HTML page.

দেখলেন তো? ব্রাউজার কিন্তু ট্যাগ লেখাগুলো দেখায়নি। সে শুধু Hello World! লেখাটিকে বড় করে শিরোনাম আকারে এবং নিচের অংশটিকে সাধারণ প্যারাগ্রাফ আকারে দেখিয়েছে।

আরও কিছু Basic Examples (বাস্তব উদাহরণ)

আপনাদের ধারণা আরও পরিষ্কার করার জন্য চলুন আমরা আরও কিছু বাস্তব উদাহরণ দেখি। এগুলো আপনারা নিজেরা কম্পিউটারে প্র্যাকটিস করবেন।

Example 1: শুধু Heading (শিরোনামের ব্যবহার)

<!DOCTYPE html>
<html>
<body>
<h1>আজকের প্রধান খবর</h1>
</body>
</html>

Explanation: এখানে আমরা শুধু একটি বড় শিরোনাম প্রদর্শন করার জন্য <h1> ট্যাগ ব্যবহার করেছি। বাস্তবে যেকোনো ব্লগ বা নিউজ পোর্টালের প্রধান শিরোনাম দিতে এটি ব্যবহার করা হয়।

Example 2: Heading + Paragraph (শিরোনাম ও অনুচ্ছেদ)

<!DOCTYPE html>
<html>
<body>
<h1>আমাদের একাডেমি</h1>
<p>এখানে আমরা খুব সহজ ভাষায় নতুনদের ওয়েব ডিজাইন ও ডেভেলপমেন্ট শিখিয়ে থাকি।</p>
</body>
</html>

Explanation: এই উদাহরণে একটি বিষয়ের শিরোনাম দেওয়ার পাশাপাশি সেই বিষয়ে বিস্তারিত কিছু বলার জন্য প্যারাগ্রাফ ট্যাগের সাহায্য নেওয়া হয়েছে। কোনো ওয়েবসাইটের ‘About Us’ বা আমাদের সম্পর্কে সেকশনে এটি বহুল ব্যবহৃত হয়।

Example 3: দুইটি Paragraph (একাধিক অনুচ্ছেদ)

<!DOCTYPE html>
<html>
<body>
<p>এটি আমাদের প্রথম প্যারাগ্রাফ, যেখানে প্রাথমিক কিছু তথ্য দেওয়া হয়েছে।</p>
<p>এটি আমাদের দ্বিতীয় প্যারাগ্রাফ। লক্ষ্য করুন, ব্রাউজার স্বয়ংক্রিয়ভাবে দুটি প্যারাগ্রাফের মাঝে কিছুটা ফাঁকা জায়গা তৈরি করে নিয়েছে।</p>
</body>
</html>

Explanation: যখন আপনার অনেক বড় কোনো লেখা বা রচনা থাকবে, তখন পুরো লেখা একবারে না লিখে এভাবে আলাদা আলাদা <p> ট্যাগ ব্যবহার করে ভাগ করে দেওয়া উচিত। এতে পাঠকের পড়তে সুবিধা হয়।

Example 4: Multiple Heading (বিভিন্ন আকারের শিরোনাম)

<!DOCTYPE html>
<html>
<body>
<h1>বইয়ের নাম (সবচেয়ে বড়)</h1>
<h2>প্রথম অধ্যায় (মাঝারি বড়)</h2>
<h3>উপ-পরিচ্ছেদ (ছোট শিরোনাম)</h3>
</body>
</html>

Explanation: HTML-এ মোট ৬টি হেডিং ট্যাগ আছে (<h1> থেকে <h6>)। গুরুত্ব অনুযায়ী এগুলো ব্যবহার করা হয়। যেমন মূল বিষয়ের জন্য h1, সাব-টপিকের জন্য h2 এবং তার ভেতরের ছোট পয়েন্টের জন্য h3 ব্যবহৃত হয়。

Example 5: Simple Web Page (একটি সাধারণ ওয়েব পেজ)

<!DOCTYPE html>
<html>
&head>
<title>আমার প্রিয় ব্লগ</title>
</head>
<body>
<h1>ওয়েব ডিজাইন শেখার সহজ উপায়</h1>
<h2>ধাপ ১: HTML দিয়ে শুরু করুন</h2>
<p>প্রথমে আপনাকে HTML এর বেসিক ট্যাগগুলো ভালোভাবে শিখতে হবে।</p>
<h2>ধাপ ২: CSS দিয়ে সাজান</h2>
<p>এরপর ওয়েবসাইটকে সুন্দর ও রঙিন করতে CSS ব্যবহার করতে হবে।</p>
</body>
</html>
Explanation: এটি একটি পূর্ণাঙ্গ ছোট আর্টিকেলের কাঠামো। এখানে একটি প্রধান শিরোনাম (h1), দুটি উপ-শিরোনাম (h2) এবং তাদের অধীনে প্রয়োজনীয় বর্ণনা (p) ব্যবহার করা হয়েছে। বাস্তবে একটি স্ট্যান্ডার্ড ব্লগ পোস্ট এভাবেই সাজানো হয়।

মনে রাখবেন: সার্চ ইঞ্জিন অপটিমাইজেশন বা SEO এর নিয়ম অনুযায়ী, একটি ওয়েব পেজে শুধুমাত্র একটিই <h1> ট্যাগ থাকা উচিত। সাব-হেডিংয়ের জন্য সবসময় <h2> বা <h3> ব্যবহার করবেন।

নতুনদের জন্য ১০টি জরুরি টিপস (Beginner Tips)

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

  1. প্রতিদিন অন্তত ১ ঘণ্টা নিজে কোড লিখে প্র্যাকটিস করার অভ্যাস করুন।
  2. কোড লেখার জন্য ভালো একটি কোড এডিটর ব্যবহার করুন (যেমন- VS Code বা Notepad++)।
  3. ট্যাগ ওপেন করার সাথে সাথেই তা ক্লোজ করার অভ্যাস গড়ে তুলুন।
  4. কোড মুখস্থ করার চেষ্টা একদম করবেন না, লজিক বা কোন ট্যাগ কেন ব্যবহার হচ্ছে তা বুঝুন।
  5. আপনার করা কোডগুলো একটি নির্দিষ্ট ফোল্ডারে গুছিয়ে রাখুন।
  6. ছোট হাতের অক্ষরে (Lowercase) ট্যাগ লিখুন, এটিই স্ট্যান্ডার্ড নিয়ম।
  7. কোড কাজ না করলে হতাশ হবেন না, ধৈর্য ধরে ভুলটি খোঁজার চেষ্টা করুন।
  8. অন্যদের লেখা HTML কোড দেখার চেষ্টা করুন এবং বোঝার চেষ্টা করুন তারা কীভাবে লিখেছে।
  9. ফাইল সেভ করার সময় কোনো স্পেস বা স্পেশাল ক্যারেক্টার ব্যবহার করা থেকে বিরত থাকুন।
  10. সবসময় ব্রাউজারে রিফ্রেশ (Refresh/F5) দিয়ে আউটপুট চেক করুন।

সাধারণ ভুলসমূহ ও সমাধান (Common Mistakes & Solutions)

নতুন শিক্ষার্থীরা প্রথম প্রথম কিছু সাধারণ ভুল করে থাকেন। আসুন জেনে নিই সেই ভুলগুলো কী এবং কীভাবে তা সমাধান করবেন:

১. Tag Close না করা: অনেক সময় শিক্ষার্থীরা ট্যাগ শুরু করেন কিন্তু শেষ করতে ভুলে যান। যেমন: <p>এটি একটি লেখা। এর ফলে পুরো পেজের ডিজাইন নষ্ট হয়ে যেতে পারে।

সমাধান: সবসময় ট্যাগ শুরু করার পর শেষ অংশটি </p> এভাবে শেষ হয়েছে কিনা তা নিশ্চিত করুন।

২. বানান ভুল (Spelling Mistakes): ট্যাগের বানানে সামান্য ভুল হলে ব্রাউজার সেটি আর বুঝতে পারে না। যেমন <body> এর জায়গায় <bdy> লিখে ফেলা।

সমাধান: কোড রান না করলে প্রথমে প্রতিটি ট্যাগের বানান মনোযোগ দিয়ে চেক করুন।

৩. Nested Tag বা ট্যাগের ক্রম ভুল করা: একটি ট্যাগের ভেতরে অন্য ট্যাগ লেখার সময় ক্রম ঠিক না রাখা। যেমন: <p><strong>ভুল কোড</p></strong>

সমাধান: যে ট্যাগটি পরে শুরু হবে, সেটি আগেই শেষ হবে। সঠিক রূপটি হবে: <p><strong>সঠিক কোড</strong></p>

৪. File Save করার ভুল এবং .html Extension না দেওয়া: ফাইল সেভ করার সময় অনেকেই শুধু ফাইলের নাম লিখে সেভ করে দেন বা শেষে .txt রেখে দেন। যেমন: index.txt বা শুধু mycode। এর ফলে ফাইলটি ব্রাউজারে রান না হয়ে নোটপ্যাডে ওপেন হয়।

সমাধান: সেভ করার সময় ফাইলের নামের শেষে অবশ্যই কোনো স্পেস ছাড়া .html যুক্ত করতে হবে। যেমন: index.html বা about.html

৫. Code Browser-এ Run না হওয়া বা পরিবর্তন না দেখানো: কোডে পরিবর্তন করার পরও ব্রাউজারে আগের রূপই দেখা যায়।

সমাধান: কোড এডিটরে ফাইলটি প্রথমে Save (Ctrl + S) করে নিন, তারপর ব্রাউজারে গিয়ে Reload বা Refresh (Ctrl + R) দিন।

কোড লেখার সেরা নিয়মাবলী (Best Practices)

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

  • Indentation (ইনডেন্টেশন): একটি ট্যাগের ভেতরে যখন অন্য ট্যাগ লিখবেন, তখন ভেতরের ট্যাগটিকে একটু ডানপাশে সরিয়ে লিখুন (কিবোর্ডের Tab বাটন চেপে)। এতে কোডটি কার অধীনে আছে তা সহজে বোঝা যায়।
  • Readable Code (সহজে পাঠযোগ্য কোড): কোডগুলো জগাキシচুড়ি না পাকিয়ে সুন্দর স্পেস দিয়ে পরিষ্কারভাবে লিখুন যাতে অন্য কোনো ডেভেলপার আপনার কোড দেখলে এক নজরেই বুঝতে পারেন।
  • Comment (কমেন্ট) ব্যবহার করা: কোডের কোন অংশটি কী কাজ করছে তা ছোট নোট বা কমেন্ট আকারে লিখে রাখা যায়। HTML কমেন্ট লেখার নিয়ম হলো: <!-- এখানে আপনার নোট -->। এই লেখাটি ব্রাউজারে দেখাবে না।
  • Meaningful Structure (অর্থপূর্ণ কাঠামো): যেখানে হেডিং দরকার সেখানে হেডিং ট্যাগ এবং যেখানে সাধারণ প্যারাগ্রাফ দরকার সেখানে প্যারাগ্রাফ ট্যাগই ব্যবহার করুন। শুধু সাইজ বড় দেখানোর জন্য অপ্রয়োজনীয় হেডিং ট্যাগ ব্যবহার করবেন না।

HTML Basic Tags এর একটি দরকারি তালিকা (Table)

চলুন, এতক্ষণ আমরা যে ট্যাগগুলো নিয়ে আলোচনা করলাম, তার একটি সহজ তালিকা দেখে নিই যা আপনাকে দ্রুত মনে রাখতে সাহায্য করবে:

HTML Tag কাজ (Description) উদাহরণ (Example)
<!DOCTYPE html> ব্রাউজারকে ডকুমেন্টের ধরন (HTML5) জানায়। <!DOCTYPE html>
<html> HTML ডকুমেন্টের প্রধান সীমানা নির্ধারণ করে। <html> ... </html>
<head> পেজের মেটা তথ্য ও টাইটেল ধারণ করে। <head> ... </head>
<title> ব্রাউজার ট্যাবে পেজের শিরোনাম দেখায়। <title>হোম পেজ</title>
<body> ওয়েবসাইটের মূল দৃশ্যমান কনটেন্ট ধারণ করে। <body> ... </body>
<h1> থেকে <h6> বিভিন্ন আকারের শিরোনাম বা হেডিং তৈরি করে। <h1>প্রধান শিরোনাম</h1>
<p> সাধারণ প্যারাগ্রাফ বা অনুচ্ছেদ তৈরি করে。 <p>স্বাগতম আমাদের ব্লগে।</p>

Summary (সারসংক্ষেপ)

আজকের ক্লাসে আমরা অত্যন্ত গুরুত্বপূর্ণ কিছু কাজ সম্পন্ন করেছি। আমরা একটি পূর্ণাঙ্গ বেসিক HTML কোড লিখেছি এবং তার প্রতিটি লাইন পুঙ্খানুপুঙ্খভাবে ব্যাখ্যা করেছি। আমরা জেনেছি DOCTYPE কী, html, head, body, heading এবং paragraph ট্যাগ কীভাবে কাজ করে। এছাড়াও আমরা বেশ কয়েকটি বাস্তব উদাহরণ দেখেছি, নতুনদের কিছু কমন ভুল ও তার সমাধান নিয়ে কথা বলেছি এবং পেশাদার কোড লেখার কিছু নিয়ম বা Best Practices সম্পর্কে জেনেছি।

সচরাচর জিজ্ঞাসিত প্রশ্নাবলী (FAQ)

১. HTML কোড লেখার জন্য কোন সফটওয়্যার সবচেয়ে ভালো?

শুরু করার জন্য উইন্ডোজের ডিফল্ট Notepad বা Notepad++ ব্যবহার করতে পারেন। তবে প্রফেশনাল কাজের জন্য Visual Studio Code (VS Code) সবচেয়ে সেরা এবং জনপ্রিয়।

২. ফাইলের নাম সবসময় index.html দিতে হবে কেন?

যেকোনো ওয়েবসাইটের হোম পেজ বা প্রথম পাতাকে সার্ভার স্বয়ংক্রিয়ভাবে ‘index.html’ নামে খুঁজে নেয়। তাই প্রধান ফাইলের নাম index.html রাখাই নিয়ম। অন্যান্য ফাইলের নাম আপনি যেকোনো কিছু দিতে পারেন (যেমন- about.html)।

৩. <h1> এবং <h2> এর মধ্যে মূল পার্থক্য কী?

আকারের দিক থেকে h1 সবচেয়ে বড় এবং h2 তার চেয়ে কিছুটা ছোট। গুগলের কাছে h1 হলো পেজের প্রধান বিষয়, আর h2 হলো তার একটি সাব-টপিক বা উপ-শিরোনাম।

৪. আমি কি একটি পেজে একাধিক <h1> ট্যাগ ব্যবহার করতে পারব?

প্রযুক্তিগতভাবে ব্যবহার করা সম্ভব এবং ব্রাউজার তা দেখাবেও। কিন্তু SEO বা সার্চ ইঞ্জিনের নিয়মানুযায়ী একটি পেজে কেবল একটিই h1 ট্যাগ থাকা উচিত।

৫. HTML ট্যাগগুলো কি বড় হাতের অক্ষরে লেখা যাবে?

হ্যাঁ, যাবে। HTML কেস-সেনসিটিভ (Case-sensitive) নয়। অর্থাৎ <P> এবং <p> ব্রাউজারের কাছে একই। তবে ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) সবসময় ছোট হাতের অক্ষর ব্যবহারের পরামর্শ দেয়।

৬. ডকটাইপ (<!DOCTYPE html>) না লিখলে কি কোড কাজ করবে না?

কোড কাজ করতে পারে, তবে অনেক আধুনিক ব্রাউজার কোডটি রেন্ডার করার সময় কনফিউজড হয়ে যেতে পারে বা পুরনো ভার্সন মনে করে ডিজাইন ভেঙে ফেলতে পারে। তাই এটি লেখা বাধ্যতামূক।

৭. আমার কোড ব্রাউজারে রান করার পর বাংলা লেখা ভেঙে যাচ্ছে কেন?

বাংলা বা অন্য কোনো ভাষা যেন সঠিকভাবে প্রদর্শিত হয়, সেজন্য head ট্যাগের ভেতরে <meta charset="UTF-8"> এই কোডটি যুক্ত করতে হয়। এটি ক্যারেক্টার এনকোডিং ঠিক রাখে।

৮. HTML শেখার পর আমার পরবর্তী ধাপ কী হওয়া উচিত?

HTML দিয়ে ওয়েবসাইটের কঙ্কাল বা কাঠামো তৈরি করার পর, এটিকে সুন্দর, রঙিন ও আকর্ষণীয় করার জন্য আপনাকে CSS (Cascading Style Sheets) শিখতে হবে।

References (বিশ্বস্ত উৎস)

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

  • W3Schools: W3Schools HTML Tutorial – নতুনদের জন্য সবচেয়ে সহজ গাইডলাইন।
  • MDN Web Docs: MDN HTML Basics – মজিলা ডেভেলপার নেটওয়ার্কের অফিসিয়াল এবং বিস্তারিত ডকুমেন্টেশন।
  • WHATWG HTML Living Standard: WHATWG HTML Specification – HTML এর বর্তমান স্ট্যান্ডার্ড ও প্রযুক্তিগত নিয়মের মূল উৎস।
  • W3C Documentation: W3C Official Website – ওয়েব স্ট্যান্ডার্ড নির্ধারণকারী সংস্থার মূল পোর্টাল।

আজকের পর্বটি আপনাদের কেমন লাগলো এবং আপনারা প্রথম কোডটি সফলভাবে রান করতে পেরেছেন কিনা, তা অবশ্যই আমাকে জানাবেন। আগামী পর্বে আমরা HTML Elements এবং Attributes নিয়ে বিস্তারিত আলোচনা করব। সেই পর্যন্ত সবাই ভালো থাকুন, সুস্থ থাকুন এবং বেশি বেশি প্র্যাকটিস করতে থাকুন। ধন্যবাদ।

SA Samim

Simple persion with simple Thought.

Leave a Reply

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