ধাপ
১

HTML কী?

HTML = Hyper Text Markup Language

HTML হল markup ভাষা। Markup বলতে বুঝায় কিছু উপাদান/কোড দ্বারা কিছুকে নির্দিষ্ট/চিহ্নিত (mark) করা।

HTML এর উপাদান হল tag। HTML ডকুমেন্ট এর বিভিন্ন অংশ tag দ্বারা নির্দিষ্ট করে দেয়া হয়। HTML ডকুমেন্ট হল tag এবং লেখার (plane text) সমষ্টি। HTML ডকুমেন্টকে ওয়েব পেজও বলে। ওয়েবসাইটের কাঠামো তৈরি করা হয় এ HTML দিয়ে।

Markup মানে কি?

Markup মানে কোনো কিছু নির্দিষ্ট করা। Hyper Text বলতে লেখা (text) বুঝায়, এই লেখাকে HTML ভাষা দিয়ে মার্কআপ করা হয়।

যেমনঃ নিচের প্যারাগ্রাফটি লক্ষ করুনঃ

Bangladesh

Bangladesh is a beautiful country in South-east Asia. Dhaka is the capital of Bangladesh. It achieved its independence in 1971. Bangladesh is a land of rivers. ...

তো এখানে Bangladesh কে আমরা বিষয়বস্তু বা ইংরেজিতে heading বলি। তো HTML দিয়ে একে নির্দিষ্ট করা হয় এভাবেঃ

<h1>bangladesh</h1>

এখানে h1 এর h এসেছে heading থেকে।

আর বাকী লিখা গুলো প্যারাগ্রাফ। একে HTML এ নির্দিষ্ট করা হয় এভাবেঃ

<p>Bangladesh is a beautiful country... </p>

এখানে p এসেছে paragraph থেকে। এরকম করে আমরা ওয়েবসাইটের বিভিন্ন বিষয়বস্তু HTML দিয়ে markup করব এবং ওয়েব ব্রাউজার গুলো এই markup গুলোকে পড়ে বিষয়বস্তু অনুয়ায়ী সেগুলোকে আলাদা করবে ও সাজাবে এবং আমরা যা করতে বলব তা করেবে।

আশা করি hyper text markup language অর্থাৎ HTML টা কি তা পরিষ্কার হয়েছে। উপরের <h1>, এগুলো নিয়ে একটু পরই জানতে পারবেন।

বিরাট ইতিহাস

1991 - "First mention of HTML..."

••• ••• •••

1999 - HTML 4
2022 - HTML 5 (The Future)

এ নির্দেশিকাতে HTML 4.01 এর উপর গুরুত্ব দেয়া হয়েছে এবং বর্তমানে প্রচলিত HTML5 এর কিছু বৈশিষ্ট্যের সাথেও পরিচয় করানো হয়েছে।

HTML ফাইল extension

HTML ডকুমেন্ট ফাইলে extension হিসেবে .html এবং .htm ব্যবহার করা।

সফটওয়্যার সম্পর্কিত তথ্য

HTML দিয়ে ওয়েবপেজ বানানো যায়। ওয়েবপেজ ইন্টারনেট Browser সফটওয়্যার (যেমনঃ Mozilla Firefox, Google Chrome, Internet Explorer (IE) ইত্যাদি) দ্বারা দেখা যায়। এ কাজটিকে Browsing বলা হয়।

HTML দিয়ে Coding করবেন কি দিয়ে? অনেক সফটওয়্যার আছে, Googling করে দেখুন। আমাদের এ নির্দেশিকার জন্য আমরা Bracket সফটওয়্যারটি ব্যবহার করতে বলব। আপনি আপনার পছন্দের অন্য যেকোন HTML Coder সফটওয়্যার ব্যবহার করতে পারেন।

আর প্রাথমিক ভাবে অনেকে notepad ব্যবহার করে। আপনিও তাই করতে পারেন। অথবা notepad++ ব্যবহার করতে পারেন।

ওয়েব ডেভেলপমেন্টের সফটওয়্যার সম্পর্কে বিস্তারিত তথ্য জেনে আসুন এখান থেকে।

প্রিভিউ ব্রাউজার পরিচিতি

আমাদের এ নির্দেশিকাতে কোড এর প্রিভিউ দেখাতে Image ব্যবহার না করে CSS দিয়ে তৈরি ভার্চুয়াল ব্রাউজার ব্যবহার করা হয়েছে। কোড ব্রাউজারে চালু করলে যে রকম দেখাবে, প্রায় সেরকম প্রিভিউ দেখা যাবে এ ভার্চুয়াল ব্রাউজারে। এর বিভিন্ন অংশ গুলো নিচে দেয়া হলঃ

TITLE

PREVIEW HERE

TITLE - ব্রাউজারের টাইটেল বার
PREVIEW HERE - ওয়েবসাইট প্রিভিউ উইন্ডো

নিচের প্রিভিউ এর সাথে তুলনা করলেই আশা করি সব পরিষ্কার হবে।

IE preview

প্রাথমিক বিষদ আলোচনা!

কয়েকটি প্রয়োজনীয় সংজ্ঞা জেনে রাখুন। একটু পর হয়ত লাগবে!

Tag

HTML tag হলো কিছু কি-ওয়ার্ড বা কিছু মূলশব্দ বা কিছু বর্ণের সমষ্টি, যে গুলো দ্বারা বিভিন্ন element কে নির্দেশ/নামকরন করা হয়।

Tag সমূহ কৌণিক ব্রাকেট (<, >) দ্বারা অবদ্ধ থাকে। যেমনঃ , , ইত্যাদি।
Tag সমূহ শুরু করতে হয় এভাবে <tag> এবং শেষ করতে হয় এভাবে </tag>। শুরুর tag কে opening tags এবং শেষ tag কে closing tag বলে। যেমনঃ bold, paragraph ইত্যাদি।
HTML 5 অনুযায়ী ট্যাগ শেষ করতেই হবে এরকম বাধ্যবাধকতা নেই। অর্থাৎ একটি tag এর কাজ শেষ হলে পরবর্তী tag শুরু করা যাবে। আগের tag শেষ তা দেখিয়ে দেয়ার দরকার নেই।

<tagname>content</tagneme>

Element

Element বলতে বিষয়বস্তু বুঝানো হয়। আগেই বলা হয়েছে element সমূহ বিভিন্ন tag দ্বারা আবদ্ধ থাকে। যেমনঃ একটি প্যারাগ্রাফ element নিচে দেখানো হলঃ

<p>This is a paragraph.</p>

এখানে থেকে পর্যন্ত সম্পূর্ণ একটি p এলিমেন্ট। আর "This is a paragraph." হল এলিমেন্ট কনটেন্ট/ অভ্যান্তরস্থ উপাদান।

<body>
<p>This is a paragraph.</p>
</body>

এখানে <body> থেকে </body> পর্যন্ত একটি body এলিমেন্ট। যার ভিতর আবার একটি p এলিমেন্টও আছে।

তো বলা যায় এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে।

যা যা জানলাম

এইচটিএমএল (HTML)
এক্সটেনশন (Extension)
এইচটিএমএল ট্যাগ (HTML Tag)
এইচটিএমএল এলিমেন্ট (HTML Element)