ধাপ
১
HTML = Hyper Text Markup Language
HTML হল markup ভাষা। Markup বলতে বুঝায় কিছু উপাদান/কোড দ্বারা কিছুকে নির্দিষ্ট/চিহ্নিত (mark) করা।
HTML এর উপাদান হল tag। HTML ডকুমেন্ট এর বিভিন্ন অংশ tag দ্বারা নির্দিষ্ট করে দেয়া হয়। HTML ডকুমেন্ট হল tag এবং লেখার (plane text) সমষ্টি। HTML ডকুমেন্টকে ওয়েব পেজও বলে। ওয়েবসাইটের কাঠামো তৈরি করা হয় এ HTML দিয়ে।
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>, <p> এগুলো নিয়ে একটু পরই জানতে পারবেন।
••• ••• •••
এ নির্দেশিকাতে HTML 4.01 এর উপর গুরুত্ব দেয়া হয়েছে এবং বর্তমানে প্রচলিত HTML5 এর কিছু বৈশিষ্ট্যের সাথেও পরিচয় করানো হয়েছে।
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
নিচের প্রিভিউ এর সাথে তুলনা করলেই আশা করি সব পরিষ্কার হবে।
কয়েকটি প্রয়োজনীয় সংজ্ঞা জেনে রাখুন। একটু পর হয়ত লাগবে!
HTML tag হলো কিছু কি-ওয়ার্ড বা কিছু মূলশব্দ বা কিছু বর্ণের সমষ্টি, যে গুলো দ্বারা বিভিন্ন element কে নির্দেশ/নামকরন করা হয়।
<tagname>content</tagneme>
Element বলতে বিষয়বস্তু বুঝানো হয়। আগেই বলা হয়েছে element সমূহ বিভিন্ন tag দ্বারা আবদ্ধ থাকে। যেমনঃ একটি প্যারাগ্রাফ element নিচে দেখানো হলঃ
<p>This is a paragraph.</p>
এখানে <p> থেকে </p> পর্যন্ত সম্পূর্ণ একটি p এলিমেন্ট। আর "This is a paragraph." হল এলিমেন্ট কনটেন্ট/ অভ্যান্তরস্থ উপাদান।
<body>
<p>This is a paragraph.</p>
</body>
এখানে <body> থেকে </body> পর্যন্ত একটি body এলিমেন্ট। যার ভিতর আবার একটি p এলিমেন্টও আছে।
তো বলা যায় এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে।