HTML, elements, tags এবং attributes এর অর্থঃ
সবার আগে চোখ রাখা যাক আপনাকে যেটা জানতেই হবেঃHTML কথাটির অর্থ হচ্ছে Hyper Text Markup Language. এটা একটা মার্কআপ ল্যাংগোয়েজ যেখানে বিভিন্ন সফটওয়্যার যেমন ব্রাউজার এই HTML কোডগুলিকে পড়ে নিয়ে HTML এর ভাষায় ট্রান্সলেট করে এবং HTML কোডের নির্দেশ অনুযায়ী ওয়েবপেজে দেখায়।
HTML হচ্ছে খুব সহজ এবং বিস্তীর্ন মার্কআপ ল্যাংগোয়েজ যা আপনি কিছুক্ষনের মধ্যে দেখতে পাবেন। "World Wide Web Consortium" (W3C.org) হল একটি আন্তর্জাতিক সংস্থা যারা ওয়েব স্ট্যান্ডার্ড, ওয়েব প্রযুক্তি-এর উন্নতি সাধন এবং HTML এর বিস্তারিত তথ্য সংজ্ঞায়িত করে।
একটি HTML ডকুমেন্ট, এলিমেন্টের মাধ্যমে গঠন করা হয়, যা ডকুমেন্টের বিভিন্ন অংশ চিত্রায়িত করে। বেশিরভাগ এলিমেন্ট তিনটি অংশ নিয়ে তৈরি হয়, একটি ওপেনিং ট্যাগ, কিছু কন্টেন্ট যেমন তার মাঝে কিছু লেখা এবং একটি ক্লোজিং ট্যাগ। কথাটি বোঝার জন্য নিচের কোডটি দেখা যেতে পারে যেখানে প্যারাগ্রাফ লেখার জন্য P টেক্সট দেওয়া হয়েছে,
<p>This is a paragraph</p>ওপেনিং ট্যাগে দেখতে পাচ্ছেন দুটি কোণ বন্ধনী(angle brackets) এবং তাদের মাঝে রয়েছে এলিমেন্টের নাম( P). অতএব উপরের উদাহরণে “<p>” হচ্ছে ওপেনিংগ ট্যাগ। তারপরে আসবে কন্টেন্ট (যেকোন টেক্সট আপনি এখানে লিখতে পারেন)এবং অবশেষে আসবে ক্লোজিং ট্যাগ যেটা ওপেনিং ট্যাগের অনুরূপ তবে এলিমেন্টের নামের আগে একটি ফরোয়ার্ড স্ল্যাশ থাকে (“/”) যেমন “</p>”।
সুতরাং, ট্যাগের কাজটি হচ্ছে ব্রাউজারকে নির্দেশ দেওয়া যেখানে একটা এলিমেন্টের মধ্যে যে কন্টেন্ট সেটা কোথায় শুর এবং কোথায় শেষ হচ্ছে।
এটা জেনে রাখা গুরুত্বপুর্ন যেকোন এলেমিন্টের নাম case-insensitive, যার অর্থ হচ্ছে আপনি যদি HTML কোডে “<p>” বা “<P>” ব্যবহার করেন তাহলে কোন রকমের বিভিন্নতা আপনি লক্ষ্য করবেননা দুটোরই কাজ এক।
Empty tags (“stand-alone tags” নামেও পরিচিত) এমন একটি এলিমেন্ট যা শুধু ওপেনিং ট্যাগ নিয়ে গঠিত। এরা কোন রকম কন্টেন্ট (টেক্সট) এবং ক্লোজিং ট্যাগ ব্যবহার করেনা। পরের লেসনে আপনি এর সম্পর্কে জানবেন।
Attribues হল প্যারামিটার যেগুলি কোন বিষয়বস্তুর (কন্টেন্ট) ফরম্যাটিং করতে সাহায্য করে। এইগুলিকে ওপেনিং ট্যাগের ভেতরে ট্যাগ নামের পাশে অন্তর্ভুক্ত করা হয় নিচের কোড সিনট্যাক্সের মাধ্যমে,
Attribute-Name="Attribute-Value".
যেখানে অ্যাট্রিবিউটের নামগুলো case-insensitive (element name এর মত) অ্যাট্রিবিউটগুলির ভ্যালুগুলি কিন্তু case-sensitive. তাই এই বিভ্রান্তি এড়ানোর জন্য এবং নিরাপদ কোডিং এর জন্য সবসময় ছোট হাতের অক্ষর ব্যবহার করা বাঞ্ছনীয়.
অ্যাট্রিবিউট এর সম্পর্কে স্বচ্ছ ধারনা দেওয়ার জন্য নিচের একটা উদাহরন দেওয়া হল,
<p align="center">This is a centered paragraph</p>
এখন দেখুন, আট্রিবিউটের নামটা হল align এবং উপরের উদাহরণে এর ভ্যালু হচ্ছে center. এবং আপনি অনুমান করুন এর কাজটা কি...
... আপনি ঠিক-ই ধরেছেন এই প্যারাগ্রাফ এলিমেন্টের ভেতরে যে সমস্ত বিষয় বস্তু আছে প্রত্যেক্টি ওয়েবপেজের মাঝখানে দেখাবে।
উদাহরনঃ আপনার ব্রাউজারে নিচের উদাহরণ যেভাবে দেখাবে
<p>this is a paragraph</p> <p>this is another paragraph</p> <p align="center">and this is a centered paragraph</p>
HTML5 ডকুমেন্টের বেসিক গঠন
উদাহরনঃ আপনার ব্রাউজারে নিচের উদাহরণ যেভাবে দেখাবে(ব্ল্যাংক পেজ)<!DOCTYPE html> <html> <head> <title>Blank Page</title> </head> <body> </body> </html>এখন সময় হয়ে গেছে আপনাকে কিছু করে দেখানোর যেমন একটি HTML ডকুমেন্ট তৈরী করা। আমরা পরবর্তী লেসন গুলিতে এই টেমপ্লেটটাকে ব্যবহার করব HTML এলিমেন্ট শেখার জন্য।
- টেক্সট এডিটর খুলুন (Notepad++)
- উপরের কোডগুলিকে কপি করে আপনার টেক্সট এডিটরের নতুন ডকুমেন্টে পেস্ট করে দিন
- আপনার কম্পিউটারের লোকাল ড্রাইভে একটি নতুন ফোল্ডার তৈরী করে ওয়েবসাইটের জন্য একটি নাম দিন, তারপর সেখানে ফাইলটাকে সেভ করুন firstpage.html নাম দিয়ে।
No comments:
Post a Comment