HTML হল হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ । এটি একটি বিশেষ ভাষা যা ওয়েব পৃষ্ঠা তৈরিতে ব্যবহৃত হয়। আপনি যখন কোনও ওয়েবসাইট পরিদর্শন করেন, তখন কম্পিউটার আপনাকে শব্দ, ছবি এবং লিঙ্কগুলি দেখানোর জন্য HTML পড়ে। HTML কে একটি ওয়েবসাইটের বিল্ডিং ব্লক হিসাবে ভাবুন। ঠিক যেমন আপনি একটি বাড়ি বা গাড়ি তৈরি করতে লেগো টুকরো ব্যবহার করেন, আমরা একটি ওয়েব পৃষ্ঠা তৈরি করতে HTML ট্যাগ ব্যবহার করি।
HTML হলো এমন একটি কোড যা একটি কম্পিউটারকে বলে যে কীভাবে একটি ওয়েব পৃষ্ঠায় টেক্সট, ছবি, ভিডিও এবং লিঙ্ক প্রদর্শন করতে হয়। এটি এমন একটি বন্ধুকে নির্দেশনা দেওয়ার মতো যে আপনার জন্য একটি ছবি আঁকছে। HTML ওয়েব পৃষ্ঠার একটি অংশের শুরু এবং শেষ চিহ্নিত করার জন্য কোণ বন্ধনীর ভিতরে শব্দ ব্যবহার করে, যাকে ট্যাগ বলা হয়।
আপনার দেখা প্রতিটি ওয়েবসাইটই কোনো না কোনোভাবে HTML ব্যবহার করে। HTML ছাড়া, আপনার দেখার জন্য কোনও ওয়েব পৃষ্ঠা থাকত না। HTML কন্টেন্ট সংগঠিত করতে সাহায্য করে এবং কম্পিউটারকে পৃষ্ঠাটি কীভাবে প্রদর্শন করতে হয় তা বলে। ওয়েব ডেভেলপমেন্টে এটিই প্রথম জিনিস যা শেখা হয় কারণ এটি ইন্টারনেটকে কার্যকর করে তোলে!
একটি HTML ডকুমেন্টের একটি বিশেষ কাঠামো থাকে। এটি <code><!DOCTYPE html></code> নামক একটি ঘোষণা দিয়ে শুরু হয় যা কম্পিউটারকে জানায় যে পৃষ্ঠাটি HTML ব্যবহার করছে। তারপর ডকুমেন্টটি দুটি প্রধান অংশে বিভক্ত: হেড এবং বডি।
একটি খুব সাধারণ HTML ডকুমেন্ট দেখতে এরকম:
<কোড><!ডক্টাইপ html>
<html>>
<head>>
<title>আমার প্রথম ওয়েব পৃষ্ঠা</title>
</head>
<শরীর>>
<p>হ্যালো পৃথিবী!</p>
</শরীরের>
</html> </code>
এই উদাহরণে, <head> বিভাগটি পৃষ্ঠার শিরোনাম দেয় এবং <body> বিভাগটি হল যেখানে আপনি স্ক্রিনে প্রদর্শিত বিষয়বস্তু রাখেন।
HTML ওয়েব পৃষ্ঠার বিভিন্ন অংশ চিহ্নিত করার জন্য ট্যাগ ব্যবহার করে। ট্যাগ হলো কোণ বন্ধনীর ভিতরে একটি শব্দ। উদাহরণস্বরূপ, <code><p></code> কম্পিউটারকে বলে যে এর পরে যা লেখা আছে তা একটি অনুচ্ছেদ। যখন আপনি অনুচ্ছেদটি শেষ করেন, তখন আপনি শেষটি নির্দেশ করার জন্য <code></p></code> ক্লোজিং ট্যাগ ব্যবহার করেন।
HTML-এর একটি উপাদানে একটি ওপেনিং ট্যাগ, কিছু কন্টেন্ট এবং একটি ক্লোজিং ট্যাগ থাকে। উদাহরণস্বরূপ:
<code><p>এটি একটি অনুচ্ছেদ।</p></code>
প্রতিটি ট্যাগ ওয়েব ব্রাউজারকে কীভাবে বিষয়বস্তু প্রদর্শন করতে হবে তা নির্দেশ দেয়।
HTML-এ অনেক ট্যাগ আছে। এর মধ্যে সবচেয়ে সাধারণ ট্যাগগুলি হল:
অ্যাট্রিবিউটগুলি একটি HTML এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করে। এগুলি ট্যাগের কোণ বন্ধনীর ভিতরে খোলার ট্যাগে যোগ করা হয়। সবচেয়ে সাধারণ অ্যাট্রিবিউটগুলি হল src এবং alt যা ইমেজ ট্যাগের সাথে ব্যবহৃত হয়।
উদাহরণস্বরূপ, একটি ছবি যোগ করতে, আপনি লিখতে পারেন:
<code><img src="picture.jpg" alt="একটি সুন্দর ছবি"></code>
এখানে, src ব্রাউজারকে বলে যে ইমেজ ফাইলটি কোথায় আছে, এবং যদি এটি প্রদর্শিত না হয় তবে alt ইমেজটির বিবরণ প্রদান করে।
HTML ডকুমেন্ট দুটি ভাগে বিভক্ত:
লিঙ্কগুলি আপনাকে এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় যেতে সাহায্য করে। HTML-এ, আমরা <a> ট্যাগ ব্যবহার করে লিঙ্ক তৈরি করি। ট্যাগের ভিতরে href অ্যাট্রিবিউট ব্রাউজারকে লিঙ্কটির গন্তব্যস্থল বলে দেয়।
উদাহরণস্বরূপ:
<code><a href="https://www.example.com">Example.com দেখুন</a></code>
এই লিঙ্কে ক্লিক করলে, আপনার ব্রাউজারে example.com ওয়েবসাইটটি খুলবে।
ছবিগুলো একটি ওয়েব পৃষ্ঠাকে উজ্জ্বল করে এবং আরও আকর্ষণীয় করে তোলে। ছবি যোগ করতে, আপনাকে <img> ট্যাগ ব্যবহার করতে হবে। মনে রাখবেন, <img> ট্যাগে কোনও ক্লোজিং ট্যাগ থাকে না।
এখানে আপনি কীভাবে একটি ছবি যোগ করবেন:
<code><img src="sunflower.jpg" alt="একটি উজ্জ্বল সূর্যমুখী"></code>
এই কোডটি ব্রাউজারকে একটি সূর্যমুখীর ছবি প্রদর্শন করতে বলে। src অ্যাট্রিবিউটটি ছবির অবস্থান নির্দেশ করে এবং alt অ্যাট্রিবিউটটি ছবির বর্ণনা প্রদান করে।
তালিকাগুলি তথ্যকে একটি সুন্দর বিন্যাসে সংগঠিত করে। HTML-এ দুটি প্রধান ধরণের তালিকা রয়েছে:
এখানে একটি অক্রমিক তালিকার উদাহরণ দেওয়া হল:
<code><ul>
<li>অ্যাপল</li>
<li>কলা</li>
<li>চেরি</li>
</ul> </code>
এবং এখানে একটি ক্রমযুক্ত তালিকার একটি উদাহরণ দেওয়া হল:
<code><ol>
<li>প্রথম</li>
<li>দ্বিতীয়</li>
<li>তৃতীয়</li>
</ol> </code>
টেবিলগুলি সারি এবং কলামে তথ্য প্রদর্শন করতে সাহায্য করে। যখন আপনার ডেটা তুলনা করার প্রয়োজন হয় বা গ্রিডে আইটেম তালিকাভুক্ত করার প্রয়োজন হয় তখন এগুলি কার্যকর।
এখানে একটি HTML টেবিলের একটি সহজ উদাহরণ দেওয়া হল:
<code><টেবিল সীমানা="1">
<tr>
<th>নাম</th>
<th>বয়স</th>
</tr>
<tr>
<td>অ্যালিস</td>
<td>১০</td>
</tr>
</টেবিল> </কোড>
এই টেবিলে, <tr> একটি টেবিল সারি সংজ্ঞায়িত করে, <th> টেবিল হেডারের জন্য ব্যবহৃত হয় (বোল্ড টেক্সট), এবং <td> টেবিল ডেটার জন্য (কোষ) ব্যবহৃত হয়।
HTML আপনাকে শব্দ এবং ভিডিওর মতো মাল্টিমিডিয়া যোগ করতে দেয়। <audio> ট্যাগের সাহায্যে আপনি সাউন্ড ফাইল অন্তর্ভুক্ত করতে পারেন। <video> ট্যাগের সাহায্যে আপনি আপনার ওয়েব পৃষ্ঠায় ভিডিও প্লেয়ার এম্বেড করতে পারেন।
এখানে একটি ভিডিও এম্বেড কোডের একটি উদাহরণ দেওয়া হল:
<code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</ভিডিও> </কোড>
এই কোডটি একটি ভিডিও প্লেয়ার তৈরি করে যার সাহায্যে প্লে, পজ বা ভলিউম পরিবর্তন করার জন্য বোতাম ব্যবহার করা হয়। কন্ট্রোল অ্যাট্রিবিউট ব্রাউজারকে এই বোতামগুলি দেখাতে বলে।
ইন্টারনেটের প্রতিটি ওয়েবসাইট HTML দিয়ে তৈরি। কল্পনা করুন আপনি আপনার স্কুলের ওয়েবসাইট, একটি মজার গেম সাইট পরিদর্শন করছেন, অথবা একটি অনলাইন গল্প পড়ছেন। HTML পর্দার আড়ালে কাজ করছে লেখা, ছবি এবং অন্যান্য বিষয়বস্তু সাজানোর জন্য যাতে আপনি সেগুলি স্পষ্টভাবে দেখতে পারেন।
উদাহরণস্বরূপ, যখন আপনি অনলাইনে আপনার প্রিয় কার্টুন চরিত্রের ছবি দেখেন অথবা কোনও মজার বিষয় সম্পর্কে আরও পড়তে কোনও লিঙ্কে ক্লিক করেন, তখন HTML সেই কাজটি সম্পন্ন করার জন্য রয়েছে।
চলুন একটা সহজ প্রজেক্ট দেখি। কল্পনা করুন আপনি আপনার প্রিয় প্রাণী, যেমন একটি বিড়াল, সম্পর্কে একটি ছোট ওয়েব পেজ বানাতে চান। আপনি একটি শিরোনাম, বিড়াল সম্পর্কে একটি অনুচ্ছেদ, একটি ছবি, এমনকি বিড়াল সম্পর্কে মজার তথ্য সম্বলিত একটি ওয়েবসাইট লিঙ্কও অন্তর্ভুক্ত করতে পারেন।
আপনার HTML কোডটি দেখতে এরকম হতে পারে:
<কোড><!ডক্টাইপ html>
<html>>
<head>>
<title>আমার প্রিয় প্রাণী</title>
</head>
<শরীর>>
<h1>বিড়াল সম্পর্কে সবকিছু</h1>
<p>বিড়ালরা খেলাধুলাপ্রিয় এবং কোমল প্রকৃতির। তারা ঘুমাতে এবং ঘড়ঘড় করতে ভালোবাসে। অনেকেই বিড়ালকে পোষা প্রাণী হিসেবে রাখতে ভালোবাসে।</p>
<img src="cat.jpg" alt="একটি সুন্দর বিড়াল">
<a href="https://www.catfacts.com">বিড়াল সম্পর্কে আরও জানুন</a>
</শরীরের>
</html> </code>
এই প্রকল্পে শিরোনাম, অনুচ্ছেদ, ছবি এবং লিঙ্ক ব্যবহার করা হয়েছে। এটি দেখায় কিভাবে HTML ব্যবহার করে অনেক অংশ নিয়ে একটি সম্পূর্ণ ওয়েব পৃষ্ঠা তৈরি করা হয়।
HTML একটি ওয়েব পৃষ্ঠার কাঠামো তৈরি করলেও, অন্যান্য সরঞ্জাম রয়েছে যা ওয়েবসাইটগুলিকে মজাদার উপায়ে দেখায় এবং আচরণ করে।
যদিও আজ আমরা HTML সম্পর্কে শিখছি, CSS এবং JavaScript সম্পর্কে জানা আমাদের ওয়েবসাইট কীভাবে তৈরি করা হয় তা বুঝতে সাহায্য করে।
HTML অন্বেষণ করার সাথে সাথে আপনি আরও অনেক ট্যাগ খুঁজে পাবেন। এখানে আরও কিছু জানার আছে:
এই ট্যাগগুলি আপনাকে ওয়েব পৃষ্ঠায় আপনার সামগ্রী কীভাবে প্রদর্শিত হবে তার উপর আরও নিয়ন্ত্রণ দেয়।
HTML তৈরির পর থেকে এটি অনেক পরিবর্তিত হয়েছে। সময়ের সাথে সাথে অনেক নতুন ট্যাগ এবং বৈশিষ্ট্য যুক্ত করা হয়েছে। HTML এর প্রতিটি নতুন সংস্করণ জটিল এবং সুন্দর ওয়েবসাইট তৈরি করা সহজ করে তোলে। আজ, HTML CSS এবং JavaScript এর সাথে একসাথে কাজ করে এমন আধুনিক ওয়েবসাইট তৈরি করে যা ব্যবহার করা মজাদার এবং দেখতে দুর্দান্ত।
এই বিবর্তনের অর্থ হল HTML শেখা সহজ এবং সহজ ওয়েব পৃষ্ঠা থেকে শুরু করে জটিল ওয়েব অ্যাপ্লিকেশন পর্যন্ত সবকিছু তৈরি করার জন্য যথেষ্ট শক্তিশালী।
HTML শেখা মজাদার হলেও, ইন্টারনেটে নিরাপদ থাকা সবসময় গুরুত্বপূর্ণ। যখন আপনি ওয়েবসাইট পরিদর্শন করেন বা অনলাইন কন্টেন্ট অন্বেষণ করেন, তখন যদি আপনি কোনও বিষয়ে অনিশ্চিত থাকেন তবে সর্বদা একজন প্রাপ্তবয়স্কের সাহায্য নিতে ভুলবেন না। আপনার নিরাপত্তা সবার আগে, এবং HTML শেখা সর্বদা একটি মজাদার এবং নিরাপদ অভিজ্ঞতা হওয়া উচিত।
আজ তুমি যে গুরুত্বপূর্ণ শব্দগুলো শিখেছো, সেগুলো দেখে নাও:
HTML অনেক বাস্তব-বিশ্বের সেটিংসে ব্যবহৃত হয়। এখানে কিছু উদাহরণ দেওয়া হল:
এই উদাহরণগুলি দেখায় যে কীভাবে HTML দৈনন্দিন জীবনের অনেক ক্ষেত্রেই একটি খুবই কার্যকর হাতিয়ার।
আজ আমরা শিখেছি যে HTML হল হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজের সংক্ষিপ্ত রূপ। এটি ওয়েব পৃষ্ঠা তৈরিতে ব্যবহৃত মৌলিক ভাষা। এখানে মনে রাখার জন্য গুরুত্বপূর্ণ বিষয়গুলি দেওয়া হল:
ইন্টারনেটে দেখা প্রতিটি ওয়েবসাইটের ভিত্তি হল HTML। ট্যাগ এবং বৈশিষ্ট্যের মতো সহজ বিল্ডিং ব্লক ব্যবহার করে, আপনি মজাদার এবং ইন্টারেক্টিভ পৃষ্ঠা তৈরি করতে পারেন। আপনি যত শিখতে থাকবেন, আপনি দেখতে পাবেন কিভাবে HTML ওয়েব পৃষ্ঠাগুলিকে প্রাণবন্ত করে তোলে, ইন্টারনেটকে অন্বেষণের জন্য একটি দরকারী এবং উত্তেজনাপূর্ণ জায়গা করে তোলে।
