HTML কী? HTML সম্পর্কে বিস্তারিত আলোচনা

Welcome to creationbangla-24 . কেমন আছেন বন্ধুরা? আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "HTML" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।

HTML কী?

HTML হলো Hyper Text Markup Language এর সংক্ষিপ্ত রূপ। প্রকৃত অর্থে এটি কোনো প্রোগ্রামিং ল্যাংগুয়েজ নয় বরং একটি মার্কআপ ল্যাংগুয়েজ যা একসারি মার্কআপ ট্যাগ এর সমন্বয় গঠিত । এইচটিএমএল এর মার্ক আপ ট্যাগ সমূহ ব্যবহার করে ওয়েবপেজ এর মৌলিক কাঠামো তৈরি করা হয়।
এক জন Web Developer হতে হলে বা ওয়েব সাইটে কাজ করতে চাইলে অবশ্যই HTML সম্পর্কে ভালো ভাবে জানতে হবে। আর ভালো ভাবে HTML শিখতে চাইলে HTML Tag, Element, ও Attribute সম্পর্কে ভালো ভাবে অনুশীলন করতে হবে। এই ফাইলের এক্সটেনশন হিসাবে .html অথবা .htm যেকোন একটি ব্যবহার করতে পারেন।
১১৯০ সালে স্যার টিমোথিজন টিম বার্নাস-লী সর্বপ্রথম HTML আবিষ্কার করেন। W3C কর্তৃক প্রথম ডেভলপকৃত HTML 3.0 প্রকাশিত হয় ১৯৯৭ সালের জানুয়ারিতে। একই বছরের শেষ ডিসেম্বরে W3C HTML এর নতুন সংস্করণ HTML 4.2 প্রকাশ করে। বর্তমানে HTML সর্বশেষ সংস্করণ হচ্ছে HTML5.

ওয়েব ডিজাইনের ক্ষেত্রে HTML এর গুরুত্ব
আপনি যদি কোনো ওয়েব সাইটে কাজ করতে চান অথবা কোন ওয়েব সাইট ডিজাইন বা ডেভেলপ করতে চান তাহলে আপনাকে অবশ্যই HTML সম্পর্কে ভালো ভাবে জানতে হবে।
গঠন অনুসারে ওয়েবসাইটকে দুই ভাগে ভাগ করা হয়। যথা:
১. স্ট্যাটিক ওয়েবসাইট।
২. ডাইনামিক ওয়েবসাইট।
১. স্ট্যাটিক ওয়েবসাইট: যে সকল ওয়েবসাইটের ডেটার মান লোডিং বা চালু করার পর পরিবর্তন করা যায় না, তাকে স্ট্যাটিক ওয়েবসাইট বলে। আর এধরনের ওয়েব সাইট শুধু মাত্র HTML ভাষা দিয়েই তৈরি করা যায়।
১.ডাইনামিক ওয়েবসাইট: যে সকল ওয়েবসাইটের ডেটার মান লোডিং বা চালু করার পর পরিবর্তন করা যায় , তাকে ডাইনামিক ওয়েবসাইট বলে। আর এধরনের ওয়েবসাইট শুধু মাত্র HTML ভাষা দিয়েই তৈরি করা যায় না। HTML ছাড়াও অন্যান্য প্রোগ্রামিং ভাষার প্রয়োজন হয়। যেমন: JavaScript, PHP,Jquery, SQL, C++ ইত্যাদি। আর ওয়েবসাইটি বিভিন্ন স্টাইল করার জন্য প্রয়োজন হয় CSS.
ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি (HTML) সবার আগে ভালভাবে শিখতে হবে। তবে এটা শেখা খুব সহজ। এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন। এরপর যদি আপনি ওয়েব পেজ গুলো আকর্ষনী করে তুলতে চান বা বিভিন্ন স্টাইল করতে চান তাহলে আপনাকে CSS শিখতে হবে। তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে Html ও JavaScript এর সমন্বয়ে কোডিং করে আপনি ওয়েবসাইটকে অনেকটা ডাইনামিক ওয়েবসাইটের মতো করে গড়ে তুলতে পারবেন। তারপর আপনি যদি PHP ও Database ডেটাবেস শিখেন তাহলে আপনি পূর্নাঙ্গ একটি ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
আপনি যদি নতুন হয়ে থাকেন, তাহলে ওয়েব সাইটে কোডিং করার আগে বিভিন্ন Text editor ব্যবহার করে কোডিং করতে পারেন এবং আউটপুট দেখতে পারেন। তারপর সেই কোড গুলো কপি করে ওয়েব পেজে পেস্ট করে পাবলিস্ট করতে পারেন। তার জন্য আপনি ব্যবহার করতে পারেন: Notepad, Wordpad, Fornt Page ইত্যাদি। তাছাড়ও বিভিন্ন HTML editor রয়েছে সেগুলিও ব্যবহার করতে পারেন। আপনারা যদি চান তাহলে মোবাইল দিয়েও ছোট ছোট কোডিং করতে পারেন। কিন্তু ব্রাউজারের কারণে ফলাফল ভালো ভাবে প্রদর্শন নাও করতে পারে। এতে ভয় পাওয়ার কিছু নেই।

HTML এর সুবিধা ও অসুবিধা।
HTML এর সুবিধা:

1. Html-এ ব্যবহৃত Tag গুলো খুব সহজ। তাই যেকেউ সহজেই শিখতে পারে।
2. Html প্রায় সকল ব্রাউজারেই সাপোর্ট করে। এর ফলে খুব সহজেই Html দিয়ে তৈরি করা ওয়েবসাইট ব্রাউজ করা যায়।
3. যে কোনো মোবাইলে ব্রাউজ করে ওয়েবপেজ গুলো দেখা যায়।
4. HTML ভাষায় তৈরি করা ওয়েবসাইট রক্ষণাবেক্ষণ করা সহজ।
5. HTML দিয়ে তৈরি করা ওয়েবসাইট পূর্ব থেকে কম্পাইল করা থাকে বিধায়, দ্রুত গতিতে পেজগুলো Browser এ load হয় অর্থাৎ ব্যবহারকারীর নিকট প্রদর্শিত হয়।
6. HTML ডকুমেন্টের হাইপারলিংকে ক্লিক করার মাধ্যমে এক ডকুমেন্ট অন্য ডকুমেন্ট সহজে যাওয়া যায়।
7. HTML এর মাধ্যমে ফর্ম তৈরী করে ব্যবহারকারীর কাছ থেকে তথ্য সংগ্রহ করা যায়।
8. Document, Audio, Video, Images, Table ও অন্যান্য অ্যাপ্লিকেশনের ডাটা সহজে ব্যবহার করা যায়।
9. ওয়েবসাইটে ডাটাবেজ এর দরকার নেই সেগুলো শুধু HTML code দিয়ে সম্পূর্ণরূপে তৈরি করা সম্ভব।
10. HTML ভাষায় তৈরি করা ওয়েবসাইট এর সাইজ কম থাকে ফলে ব্যয় কম হয়।

HTML এর অসুবিধা:
HTML এর অনেক গুলো সুবিধা থাকলেও কিছু অসুবিধা রয়েছে।

1. HTML ভাষায় ওয়েবপেজ তৈরি করা সহজ। কিন্তু Update করা কঠিন।
2. HTML এর সাহায্যে ডাইনামিক ওয়েব পেজ তৈরি করা যায় না।
3. HTML এর সাহায্যে ওয়েব পেজ তৈরি করতে চাইলে অনেক বেশি কোড লিখতে হয়।
4. HTML এর নিরাপত্তা ব্যবস্থা তুলনামূলকভাবে দুর্বল।
5. যে সব ওয়েবসাইটে ডাটাবেজ দরকার হয় সেখানে শুধু HTML code দিয়ে সম্পূর্ণরূপে ওয়েবসাইটটি তৈরি করা সম্ভব না।

HTML এর গঠন প্রনালী

ট্যাগ	কাজের বর্ণনা
<html>	<html> ট্যাগ দ্বারা নির্দেশ করা হয় যে, এই ওয়েবসাইটটি HTML ভাষায় তৈরী।
<head>	<head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে।
<title> </title> </head>	<title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে।
<body> ......... ......... (আপনার প্রয়োজনীয় অন্যান্য ট্যাগ) </body> </html>	<body> ট্যাগ ওয়েবপেজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান তা <body> ট্যাগ এর মধ্যে রাখতে হবে।

এখন আমি ওয়েবপেজে একটি Paragraph প্রদর্শনের জন্য Html coding করে আপনাদেরকে দেখাচ্ছি। যার output আপনারা নিচে দেখতে পারবেন। <p> ট্যাগ ব্যবাহার করে Paragraph লিখতে হয়। যার Syntax হলো: <p> Element ( আপনি Paragraph হিসাবে যা লিখতে চান ) </p>

<!doctype html> <html> <head> <title> My Country </title> </head> <body> <p> The name of our country is Bangladesh. It became independent in 1971 from Pakistan. Dhaka is the capital of Bangladesh. Bangladesh is a small country, but has a large population. It's land area is 1,47,610 square kilometres. About 160 million people live here. Bangladesh is full of many natural beauty. Bangladesh is a peaceful country. People of different communities live here in peace. So I love my country very much. </p> </body> </html>

উপরিউক্ত Tag গুলোর কাজের বর্ণনা :

1. <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type HTML5 Standard.
2. <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
3. <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েব পেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
4. <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
5. </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজের শিরোনাম বলে গণ্য হবে না। উপরে শিরোনাম হিসাবে My Country ব্যবহার করা হয়েছে।
6. </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
7. <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
8. <p> Tag দ্বারা ওয়েব পেজে একটি Paragraph ঘোষণা করা হয়েছে । আপনি প্যারাগ্রাফ হিসাবে যা লিখতে চান তা এই ট্যাগ এর মধ্যে রাখতে হবে। অন্যথায় প্যারাগ্রাফ হলে বিবেচিত হবে না। উপরে <p> Tag এর মাঝে বাংলাদেশ সম্পর্কে লেখা হয়েছে।
9. </p> Tag এর মাধ্যমে <p> ট্যাগ বন্ধ করা হয়েছে।
10. </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
11. </html> Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।

ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "HTML ট্যাগ ও Syntax" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...