ওয়েব ডিজাইন (লেকচার-৪)

০৬ ই মে, ২০১৪ রাত ১০:৪৩

আমাদের আজকের লেকচারের বিষয়বস্তু এইচটিএমএল ট্যাগ।এটাই এইচটিএমএল এর প্রান।আজকেল লেসনে কতগুলো ট্যাগ দেয়া আছে যেগুলি আপনারা আপনাদের নোটপ্যাড ওপেন করে কোডগুলো লিখে পরে সেভ করবেন।মনে রাখবেন সেভ করার সময় নামের শেষে .txt কেটে .html দিয়ে সেভ করবেন।

আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন এখানে , , , ইত্যাদি এক একটি ট্যাগ।

সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি <> এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ। যেমন প্যারাগ্রাফ ট্যাগ

, হেডিং

ট্যাগ ইত্যাদি।

IT'S A heading

demo content goes here.

প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে আবার

এর ক্লজিং ট্যাগ হল

এভাবে বাকি সবগুলি।

টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলেopening tagবাstart tagআর শেষের ট্যাগটিকে বলেclosing tagবাend tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।

এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।

** এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।

**নিচে ইমেজ ট্যাগ এর উদাহরন



দেখুন ইমেজ ট্যাগ শুরু হয়েছে এভাবে আর শেষ হয়েছে এই চিহ্ন দিয়ে। আর মাঝে যে জিনিসটি দেখছেন (src) এটা সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।

* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়।এটি আরো পরের টিউটোরিয়ালে দেয়া আছে

* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন

ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে

ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে

, সাইজ অনুযায়ী

পর্যন্ত আছে)। টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে ট্যাগ ইত্যাদি।

* উপরে যে ডকুমেন্টটি দিয়েছি সেখানে কে বলে প্যারেন্ট ট্যাগ পুরো ডকুমেন্ট টির জন্য কেননা পুরো ডকুমেন্টে যত ট্যাগ আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু title ট্যাগের কোন চাইল্ড ট্যাগ নেই। আবার দেখুন body হল প্যারেন্ট ট্যাগ এবং এর চাইল্ড ট্যাগ এখানে p এবং h1

আমার এরপরের লেসন হবে ট্যাগ গুলি সম্বন্ধে যেখানে আপনারা নিজেরাই চেষ্টা করবেন।আর খুব চেষ্টা করবো এটা আজকেই দেবার জন্য।ততক্ষন ভালো থাকুন।

৫ টি +২/-০