HTML
এইচটিএমএল হল ওয়েব ডিজাইনের মূলভিত্তি যা দিয়ে ওয়েব পেজ তৈরি করা হয় । আপনি যদি একজনদক্ষ ওয়েব ডিজাইনার বা ডেভলপার হতে চান তবে আপনাকে অবশ্যই এইচটিএমএল ভালভাবে জানতে হবে । HTML এর পূর্ণরূপ হল Hyper Text Markup Language তবে এটা কোন প্রােগ্রামিং ল্যাঙ্গুয়েজ নয় । এইচটিএমএল - কে Markup Language ও বলা । হয় , যা কতগুলাে Markup ট্যাগের সমষ্টি আর এই Markup ট্যাগের কাজ হল ওয়েব পেজে বিভিন্ন এলিমেন্ট কিভাবে প্রদর্শন করবে তা নির্দেশ করা । যেমন - একটি ওয়েব পেজে টেক্সট , ইমেজ , এনিমেশন অডিও , ভিডিও ইত্যাদি এলিমেন্ট থাকতে পারে । আর এই এলিমেন্টগুলাে ওয়েব পেজে প্রদর্শন করা বা কিভাবে প্রদর্শন করবে তা নির্ধারণ করাই হল মার্কআপ ট্যাগ বা এইচটিএমএল ট্যাগের কাজ । যে কোন ওয়েব পেজের অউটপুট হল এইচটিএমএল কোড । এক কথায় বলতে গেলে , ওয়েব পেজ তৈরি করা পেজের বিভিন্ন কনটেন্টকে কে সুবিন্যস্ত করা , ডিজাইন করা এবং পেজের আউটলুক দেওয়া হয় এইচটিএমএল ব্যবহার করে । এইচটিএমএল এর মূল লক্ষ্য একটি এইচটিএমএল ডকুমেন্ট ( ওয়েব পেজ ) তৈরি করা যা বিভিন্ন প্লাটফর্ম ( ব্রাউজারে কাজ করে । এইচটিএমএল কে ধরা হয় ওয়েব পেজ নির্মাণের ভিত্তিভূমি ।

HTML এর ইতিহাস
মার্কিন কম্পিউটার সায়েন্টিস্ট টিম বার্নাস-লী প্রথম HTML বা Hyper Text Mark Up Language টি তৈরি করেন। এটি তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। তারপর ১৯৯০ সালের দিকে NCSA কর্তৃকডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে W3C কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে W3C HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।
 
HTML Code কোথায় এবং কিভাবে লিখবেন? 
এইচটিএমএল কোড লেখার জন্য আলাদা কোন টেক্সট এডিটর সফটওয়্যার ব্যবহার না করলেও হবে , আপনার কম্পিউটারে Notepad নামে যে টেক্সট এডিটর আছে সেখানেই কোড লিখতে পারবেন । তবে নােটপ্যাডের উন্নত সংস্করণ Notepad + + বা আরওউন্নত এডিটর যেখানে আপনি একই সাথে কোড লিখতে ও তার আউটপুট দেখতে পারবেন যেমন - Adobe Dreamweaver , HTML Ki +Sublime Text, atom.io, Brackets ইত্যাদি ব্যবহার করতে পারেন।
HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html বা test.html দ্বারা Save করতে হবে।
এবার এইচটিএমএল কোডকে রান করানাের জন্য যেকোন একটি ব্রাউজার হলেই হবে । যেমনঃ Internet Explorer , Mozilla Firefox , Google Chrome ইত্যাদি ।



এইচটিএমএল ব্যাসিক স্ট্রাকচারঃ
এইচটিএমএল এর গঠনকে দুইভাবে ভাগ করা হয় । একটি হল হেড সেকশান যা < head > ট্যাগ দিয়ে শুরু হয় এবং < / head > ট্যাগ দিয়ে শেষ হয় অন্যটি হল বডি সেকশান যা < body > ট্যাগ দিয়ে শুরু হয় এবং < / body > ট্যাগ দিয়ে শেষ হয় । আর এই দুটি সেকশানকে < html > ও < / html > ট্যাগের মাঝে রাখতে হবে । এবার চলুন আমরা এইচটিএমএল এর ব্যাসিক কাঠামােটা দেখে নিই < html > < head > এখানে CSS , Java Script কোড ব্যবহার করতে পারবেন । title এখানে ওয়েব পেজের শিরােনাম ( title ) ব্যবহার করতে পারবেন । < / title > < / head > < body > একটি ওয়েব পেজের যাবতীয় কনটেন্ট সমূহ ( Text Emage , Table . For , Audio . Video ইত্যাদি ) এই ট্যাগের মধ্যে লিখতে হবে । < / body > < / html >



HTML শুরু করার আগে যে শব্দগুলাে ভালভাবে জানা দরকারঃ
১ . এইচটিএমএল ডকুমেন্ট ( HTML Document ) ২ , এইচটিএমএল এলিমেন্ট ( Element )
৩ , এইচটিএমএল ট্যাগ ( Tag )
৪ . এইচটিএমএল এট্রিবিউট ( Attribute )

বিষয় গুলাে নিম্নে আলােচনা করা হলঃ 
১ . ট্যাগ ( HTML Tag ) : ট্যাগ হল এইচটিএমএল - এর প্রাণ যার মাধ্যমে এইচটিএমএল কোড লেখা হয় । প্রতিটি ট্যাগ শুরু হয় বাম ( ২ ) এঙ্গেল ব্রাকেট দিয়ে এরপর একটা কীওয়ার্ড এবং শেষ হয় ডান এঙ্গেল ( > ) ব্রাকেট দিয়ে । যেমনঃ < html > < head > < body > হল এক একটা ট্যাগ । প্রতিটা ট্যাগ আলাদা আলাদা অর্থ বহন করে অর্থাৎ প্রতিটা ট্যাগের কাজ । আলাদা এবং এরা Case Sensitive নয় , তবে Small Letter - এ লেখা ভাল । ট্যাগ লেখার একটি গুরুত্বপূর্ণ নিয়ম হল যে ট্যাগ দিয়ে শুরু হয় সেই ট্যাগ দিয়েই শেষ করতে হবে শুধু শেষ কীওয়ার্ড - এর পূর্বে এর আগে একটা শাস ( 2 ) দিতে হবে । যেমন - ব্যাসিক কাঠামােতে আমরা দেখেছি যে , হেড সেকশান শুরু হয়েছে < head > ট্যাগ দিয়ে আর শেষ হয়েছে < / head > ট্যাগ দিয়ে । কিছু ট্যাগ রয়েছে যাদের শেষ ট্যাগ ব্যবহার না করলেও হয় , এগুলাে অপশনাল ট্যাগ । যেমনঃ কোন প্যারাগ্রাফ লিখতে শেষ ট্যাগ < / p > ব্যবহার না করলেও হবে এটা অপশনাল ট্যাগ ।

 
 ২ . এইচটিএমএল এলিমেন্ট ( HTML Element ) : এইচটিএমএল ট্যাগের দ্বারাই এইচটিএমএল এলিমেন্ট গঠিত । এইচটিএমএল এলিমেন্ট হল এইচটিএমএল - এর কেন্দ্রবিন্দু যার মাধ্যমে ওয়েব পেজে বিভিন্ন এলিমেন্ট প্রদর্শন করা হয় একটি এইচটিএমএল ডকুমেন্টের চারটি মৌলিক এলিমেন্ট থাকে - html , head , title এবং body । এছাড়া আরও অনেক এলিমেন্ট রয়েছে ।

এইচটিএমএল এলিমেন্ট কতগুলাে বৈশিষ্ট্য মেনে চলে তা নিম্নরূপ -

• Start Tag / Opening Tag দিয়ে শুরু হয় ।
• End Tag / Closing Tag দিয়ে শেষ হয় ।
• Start ও End ট্যাগের মাঝে Element Content থাকে । 
• কিছু ক্ষেত্তে Element Content নাও থাকতে পারে। 
• কিছু Element - এর End Tag নাও থাকতে পারে।


ব্যাপারটা ভালোভাবে বুঝার জন্য একটু আলােচনা করা যাক যেমন - কোন প্যারাগ্রাফ লিখতে প্রথমে এp > ট্যাগ দিয়ে শুরু করতে হয় তারপর প্যারাগ্রাফের বিষয়বস্তু এবং সবশেষে < / p > দিয়ে শেষ করতে হয় । এখানে প্যারাগ্রাফের শুরু ও শেষ টাগ । < p > Element Content < / p > ) নিয়েই হল প্যারাগ্রাফ এলিমেন্ট । অনেকেই ট্যাগ এবং এলিমেন্টের পার্থক্যটা বুঝতে পারে না , আসলে শুরু ও শেষ ট্যাগ একত্রে মিলেই হল এইচটিএমএল এলিমেন্ট ।


৩ . এইচটিএমএল ডকুমেন্ট ( HTML Document ) : 
এইচটিএমএল এলিমেন্ট দ্বারা গঠিত ওয়েব পেজটাই হল এইচটিএমএল ডকুমেন্ট । এইচটিএমএল ডকুমেন্টের প্রধান দুটি অংশ হল head ও body সেকশান । এইচটিএমএল ডকুমেন্ট ফাইলটিকে অবশ্যই something . html / . ht Extension দিয়ে save করতে হবে ।


৪ . এট্রিবিউট ( Attribute ) :
একটি ওয়েব পেজে বিভিন্ন টেক্সট , ইমেজ বা আরও কিছু থাকতে পারে এবং এদের অবস্থান । স্টাইল বিভিন্ন ধরণের হতে পারে । ওয়েব পেজে কোন এলিমেন্টের অবস্থান স্টাইল পরিবর্তনকারী কতগুলাে নিদিষ্ট ওয়ার্ডই হল এট্রিবিউট । কি বুঝতে কষ্ট হচ্ছ , ? একটি উদাহরণের মাধ্যমে বিষয়টা পরিষ্কার করা যাক - উপরের উদাহরণে দেখুন স্বাভাবিকভাবে হেডিংগুলাে পেজের বাম দিকে দেখাচ্ছে কিন্তু আমরা যদি চাই ডানদিকে বা মাঝখানে দেখাবাে তাহলে কি করব ? হা এই কাজটা করা যাবে এট্রিবিউটের সাহায্যে । উপরের উদাহরণে এই “ h1 > My First Heading < / h1 > " লাইনের স্থলে নিচের লাইনটুকু বসিয়ে সেভ করে ব্রাউজার রিলােভ করে দেখুন " My First Heading " লেখাটা পেজের মাঝখানে দেখাচ্ছে । < h1 align = " center " > My First Heading < / h1 > এখানে align নামে একটি এট্রিবিউট ব্যবহার করা হয়েছে যার value হল " center " যার ফলে হেডিংটি ওয়েব পেজের মাঝখানে দেখা যাচ্ছে । আসলে প্রতিটা এট্রিবিউটের এক একাধিক ভেলু থাকতে পারে । এট্রিবিউটের সাধারণরূপটি হল < HTML Tag Attribute _ Name = " Attribute _ Value " > . . . < / HTML Tag >