- হোম
- একাডেমি
- সাধারণ
- একাদশ-দ্বাদশ শ্রেণি
- ওয়েব ডিজাইন পরিচিতি এবং HTML
পাঠ্যবিষয় ও অধ্যায়ভিত্তিক একাডেমিক প্রস্তুতির জন্য আমাদের উন্মুক্ত শিক্ষায় অংশগ্রহণ করুন।
ওয়েব ডিজাইন পরিচিতি এবং HTML
এইচটিএমএল-এর মৌলিক বিষয়সমূহ (HTML Basics)
এ অধ্যায়ের ৪.২ পাঠ অংশটুকু পুরোপুরি ব্যাবহারিক। প্রোগ্রামিং করার ব্যবস্থা আছে (কম্পিউটারে কিংবা স্মার্টফোনে) শুধু সেরকম পরিবেশে পরের অংশটুকু শিক্ষার্থীর জন্য অর্থপূর্ণ বলে বিবেচিত হবে।
HTML নিয়ে কাজ শুরু করতে চাইলে প্রথমেই একটি ফাইল তৈরি করতে হবে। যে কোনো নাম দিলেই চলবে, এক্সটেনশন হবে .html। যেমন- mypage.html। এখন এই ফাইলের মধ্যে HTML কোড লিখতে হবে। ফাইলটি ব্রাউজার দিয়ে খোলা হলো, তাহলে একটি ফাঁকা পেজ দেখা যাবে। কারণ, ফাইলটিতে এখনো কিছু লেখা হয়নি। HTML ফাইল এডিট করার জন্য যে কোনো একটি টেক্সট এডিটর ব্যবহার করলেই চলবে, যেমন- নোটপ্যাড, নোটপ্যাড++, সাবলাইম টেক্সট ইত্যাদি।
HTML উপাদান (HTML Element)
একটি বইয়ে সাধারণত কী কী অংশ থাকে সেটি বিবেচনা করা যাক। বইয়ের একাধিক খণ্ড থাকতে পারে. একটি খন্ডে একাধিক অধ্যায় থাকে। প্রতিটি অধ্যায়ে আবার শিরোনাম বা হেডিং, সাবহেডিং, অনুচ্ছেদ বা প্যারাগ্রাফ থাকতে পারে। এছাড়াও বইতে বিভিন্ন ছবি, ছবির ক্যাপশন, সারণি বা টেবিল ইত্যাদি অংশ থাকতে পারে। তেমনি একটি HTML পেজেও বিভিন্ন অংশ বা উপাদান থাকে। এ উপাদানগুলোকে বলা হয় HTML এলিমেন্ট (HTML Elements)
HTML-এর এলিমেন্ট লেখার জন্য ব্যবহার করা হয় ট্যাগ। ট্যাগকে অনেকটা ব্র্যাকেট বা বন্ধনীর সঙ্গে তুলনা করা যেতে পারে। সাধারণত এলিমেন্টের শুরু বোঝাতে একটি ওপেনিং ট্যাগ এবং শেষ বোঝাতে একটি ক্লোজিং ট্যাগ ব্যবহার করা হয়। ওপেনিং ট্যাগ, দুই ট্যাগের মধ্যবর্তী কনটেন্ট ও ক্লোজিং ট্যাগ মিলে যা হয় তা-ই একটি এলিমেন্ট। তবে কিছু ট্যাগ আছে যাদের মধ্যে কোনো কনটেন্ট থাকে না, তাই এদের ট্যাগও থাকে না। এদেরকে বলা হয় এম্পটি (empty) ট্যাগ।
</tag_name>! দুটি অ্যাঙ্গেল ওপেনিং ও ক্লোজিং ট্যাগের গঠন হয় এরকম, <tag_name> ব্র্যাকেটের ভেতরে ট্যাগের নাম লিখলে হয় ওপেনিং ট্যাগ, আর ক্লোজিং ট্যাগ হয় এ রকম, </...>। অর্থাৎ, ট্যাগের নামের আগে একটি অতিরিক্ত ফরওয়ার্ড স্ল্যাশ চিহ্ন (Forward Slash -/) দেওয়া হয়। ওপেনিং এবং ক্লোজিং ট্যাগের ভেতরের লেখা, ট্যাগের নাম একই হতে হবে।
নিচে একটি HTML কোড দেখানো হলো।
<!DOCTYPE html>
<html>
<body>
Hello World!
</body>
</html>
কোডটি টাইপ করে ফাইলটি সেভ করে ব্রাউজারে ওপেন করলে স্ক্রিনে Hello World! লেখাটি দেখাবে।
উপরের কোডটি ভালো করে লক্ষ করা যাক। প্রথম লাইনে আছে <!DOCTYPE html>, যাকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্টটি HTML 5 স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সেই অনুযায়ী রেন্ডার (প্রদর্শন) করে। এটি আসলে ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।
সম্পর্কিত প্রশ্ন সমূহ