এইচটিএমএলের পূর্ণ রূপ হলো হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। এইচটিএমএলের নানা উপাদান বা এলিমেন্ট থাকে এবং এগুলোর সমন্বয় করেই তৈরি করা হয় ওয়েবসাইট। শুধু ওয়েবসাইটই নয়, ওয়েবপ্রযুক্তি ব্যবহার করা হয়—এমন আরও নানা ধরনের অ্যাপলিকেশনে এইচটিএমএল ব্যবহার করা হয়। যেমন আমরা ই-মেইলে এইচটিএমএল এলিমেন্ট ব্যবহার করতে পারি।
এইচটিএমএল কোনো প্রোগ্রামিং ভাষা নয়, বরং বিভিন্ন তথ্য কীভাবে উপস্থাপন করা হবে, তা নির্ধারণের জন্য এটি ব্যবহার করা হয়। আমরা অন্যান্য ডকুমেন্ট ফাইলে যেমন অনুচ্ছেদ, শিরোনাম, লিংক তৈরি করতে পারি, এইচটিএমএল ফাইলেও একইভাবে এলিমেন্ট তৈরি করা যায়।
এই এলিমেন্টগুলোর একটি নির্দিষ্ট মান রয়েছে এবং সব ওয়েব ব্রাউজার এই মানগুলো মেনে চলে। কোনো কোনো ক্ষেত্রে ডিজাইনে কিছু পার্থক্য দেখা গেলেও সব ব্রাউজারেই সাধারণ এলিমেন্টগুলো একইভাবে দেখিয়ে থাকে।
এইচটিএমএল ফাইলগুলোর এক্সটেনশন .html অথবা .htm হয় এবং যেকোনো ব্রাউজার থেকেই এ ধরনের ফাইলগুলো দেখা যায়। তবে ফাইলের তথ্যগুলো উপস্থাপনের জন্য শুধু কাঠামো তৈরি করে দেয় এইচটিএমএল। তবে কী ফন্টে লেখা হবে, ফন্টের আকার কী হবে, রং কী হবে, সেগুলো নির্ধারণ করার জন্য স্টাইল কোড লিখতে হয়। এইচটিএমএল স্টাইল নির্ধারণের কাজ করা হয় সিএসএস ব্যবহার করে। আবার বিভিন্ন ওয়েবসাইটে সরাসরি কোনো এক্সটেনশন ব্যবহার না করা হলেও ওয়েব ব্রাউজার এইচটিএমএল কোড দেখাতে পারে।
ওয়েবসাইট বা ওয়েব অ্যাপলিকেশন তৈরির জন্য এইচটিএমএল একটি গুরুত্বপূর্ণ উপাদান। আবার অপর কোনো প্রোগ্রামিং ভাষা ছাড়াই শুধু এইচটিএমএল কোড লিখেও পূর্ণাঙ্গ কার্যকরী ওয়েবসাইট তৈরি করা যায়। তবে ডাইনামিক ওয়েবসাইট তৈরির জন্য এইচটিএমএলের পাশাপাশি অপর কোনো প্রোগ্রামিং ভাষা ব্যবহার করতে হবে।
আমরা এখন এইচটিএমএলের নানা বৈশিষ্ট্য নিয়ে জানব এবং ধীরে ধীরে সিএসএস এবং অন্যান্য ওয়েবপ্রযুক্তি নিয়ে আলোচনা করব। এইচটিএমএল বিষয়ে পর্যাপ্ত জ্ঞান থাকলে ওয়েবসংক্রান্ত প্রায় সব কাজেই বিশেষ সুবিধা পাওয়া যাবে।
এইচটিএমএলের সাধারণ কিছু তথ্য
এইচটিএমএলের সর্বশেষ সংস্করণ হলো এইচটিএমএল৫। আমাদের কোডের সব ক্ষেত্রেই আমরা এ সংস্করণ ব্যবহার করব।
কোন সংস্করণ ব্যবহার করা হচ্ছে, সেটি ফাইলের প্রথম লাইনে লিখতে হয়, যেমন এইচটিএমএল৫-এর ক্ষেত্রে লিখতে হয় ‘<!DOCTYPE html>’।
ট্যাগগুলোর শুরু এবং শেষ রয়েছে। লেখা হয় <এবং> চিহ্নের ভেতরে। যেমন প্যারাগ্রাফ ট্যাগ শুরু হয় <p> দিয়ে এবং শেষ </p> দিয়ে।
ট্যাগ কেস সেনসিটিভ নয়। অর্থাৎ বড় হাতের বা ছোট হাতের অক্ষরে, যেভাবেই লেখা হোক সেটি কাজ করবে।
সব এইচটিএমএল কোড মূল <html>...</html> ট্যাগের ভেতরে লিখতে হবে।
এইচটিএমএল ফাইলের প্রধান দুটি অংশ হলো <head> এবং <body>।
<head> এলিমেন্টের কোডগুলো ব্রাউজারে সরাসরি দেখা যায় না। তবে সঠিকভাবে লেখা হয়েছে কি না, তা যাচাই করার জন্য বিশেষ টুল রয়েছে।
<body> এবং </body> ট্যাগের ভেতরে যা লেখা হবে, সেটি সরাসরি ব্রাউজারে দেখা যায়। আর এই এলিমেন্টের অনেক কিছুই ফাইলের <head> এলিমেন্টের ওপর নির্ভর করে কাজ করে।
এইচটিএমএল ফাইলের উদাহরণ
এইচটিএমএলের নানা কাজের জন্য নানা ধরনের এলিমেন্ট রয়েছে। বিশেষ বিশেষ লেখা বা তথ্য উপস্থাপনের জন্য বিশেষ ধরনের এলিমেন্টও রয়েছে। তবে একটি এইচটিএমএল ফাইলে নির্দিষ্ট কিছু এলিমেন্ট অবশ্যই থাকতে হয়। এই পর্ব থেকে আমরা নিজেরাই এইচটিএমএল কোড লিখে যাচাই করে দেখব, প্রয়োজনে এখানে দেখানো উদাহরণগুলো কিছু পরিবর্তন করেও দেখতে পারি। শুধু লেখা না পড়ে নিজে থেকে চর্চা করলে দ্রুততর সময়ে বিষয়গুলো আয়ত্ত করা সম্ভব হবে।
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
কম্পিউটারের কোনো ডিরেক্টরিতে আমরা code.html নামের একটি ফাইল তৈরি করে সেখানে ওপরের কোড লিখব। তারপর এই ফাইলে ডাবল ক্লিক করে ফাইলটি খোলার চেষ্টা করলে সেটি ওয়েব ব্রাউজারে দেখা যাবে। ব্রাউজারে বড় ফন্টে ‘My First Heading’ এবং কিছুটা ছোট ফন্টে ‘My first paragraph.’ লেখা দেখা যাবে।
যদিও আমরা কোনো ডিজাইন নির্ধারণ করে দিইনি, কিন্তু স্বাভাবিকভাবেই কোনো ফাইলের শিরোনামের ফন্ট ফাইলের অন্যান্য অংশের ফন্টের থেকে বড় হবে। এটি ব্রাউজার নিজে থেকে নির্ধারণ করে দিচ্ছে। যদি কম্পিউটারে একাধিক ব্রাউজার ইনস্টল করা থাকে, একাধিক ব্রাউজার থেকেই এই ফাইল খুলে দেখা যেতে পারে। ভালোভাবে খেয়াল করলে দেখা যাবে যে ব্রাউজারগুলোয় কিছুটা আলাদাভাবে দেখা যাচ্ছে। এই আলাদা হওয়ার কারণ আমরা নিজে থেকে কোনো নির্দেশনা দিইনি এবং ওই ব্রাউজার নিজের মতো করে কিছু স্টাইল যুক্ত করে দিয়েছে।
এইচটিএমএল কোড এডিটর
উইন্ডোজ, লিনাক্স বা ম্যাক—যেকোনো অপারেটিং সিস্টেম থেকেই এইচটিএমএল কোড লেখা চর্চা করা যাবে। অপারেটিং সিস্টেমের ডিফল্ট এডিটর ব্যবহার করেই আমরা এইচটিএমএল কোড লিখতে পারব। প্রায় সব ধরনের টেক্সট এডিটর থেকেই এইচটিএমএল কোড লেখা যায়। তবে আমরা এখান থেকে একটি বিশেষ এডিটর ব্যবহার করব, সেখানে কোড লেখার ক্ষেত্রে অতিরিক্ত কিছু সুবিধা পাওয়া যায়। আমরা এখন থেকে এইচটিএমএল কোড লেখার জন্য অ্যাটম (https://atom.io) অথবা ভিএস কোড (https://code.visualstudio.com) এডিটর ব্যবহার করব।
আমরা যদিও যেকোনো এডিটর ব্যবহার করতে পারি, তবে এমন কোনো এডিটর ব্যবহার করা যাবে না, যেখানে সরাসরি কোড না লিখেও এইচটিএমএল ফাইল তৈরি করা যায়। অথবা বাটনে ক্লিক করেই লেখা গাঢ় করা বা টেবিল তৈরি করা যায়। মৌলিক বিষয়গুলোয় দক্ষতা অর্জনের পর প্রয়োজনে হয়তো এমন কোনো কিছু ব্যবহার করা যেতে পারে, তবে শুরু থেকে এগুলো ব্যবহার করতে থাকলে কোড লেখা ঠিক শেখা হয়ে ওঠে না।
একটি ভালো মানের এডিটর ব্যবহার করা হলে এইচটিএমএল কোড লেখা ও এর বৈশিষ্ট্যগুলো ব্যবহার করা সহজ হয়। যেমন এইচটিএমএলে আমরা যেকোনো ভাষায় তথ্য উপস্থাপন করতে পারি। তবে আমরা যদি এমন একটি এডিটর ব্যবহার করি, যেখানে বাংলা লেখা সঠিকভাবে দেখা যায় না, তবে কোড লেখার ক্ষেত্রে নানা ধরনের সমস্যার সম্মুখীন হতে হবে। (চলবে)