Sunday , 15 September 2019
Home » Web Design » HTML বাংলা টিউটোরিয়াল(পর্ব-৪),এইচটিএমএল এর ব্যাসিক আলোচনা -৩

HTML বাংলা টিউটোরিয়াল(পর্ব-৪),এইচটিএমএল এর ব্যাসিক আলোচনা -৩

হ্যালো বন্ধুরা

আসসালামু আলাইকুম

সবাই কেঅন আছেন ,আশাকরি ভাল আছেন আজকে আমি য়াপনাদের জন্য নিয়ে এসেছি HTML বাংলা টিউটোরিয়াল এর পর্ব ৪,চলুন আমরা দেখেনেই কী আছে আমাদের পর্ব ৪ এ-

১) HTML ফাইল এর ব্যাসিক গঠনঃ

এইচটিএমএল ফাইল এর একটি নিজস্ব বৈসশিষ্ট/গঠন পদ্ধতি রয়েছে। সেই গঠন/নিয়ম অনুসারে এইচটিএমএল ফাইল লিখতে হয়। এর বাইরে এইচটিএমএল ফাইল কাজ করবে না। নিচে একটি এইচটিএমএল ফাইল এর ব্যাসিক গঠন পদ্ধতি নিয়ে আলোচনা করা হল


চিত্র : HTML ফাইল এর ব্যাসিক গঠন।

HTML ফাইল শুরূ করতে হয় <HTML> ( HTML এর ওপেনিং ট্যাগ) দিয়ে, এবং শেষ করতে হয় <HTML>( html এর ক্লোজিং ট্যাগ) দিয়ে। এই html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে আমাদের অন্যান্য সমস্ত ট্যাগ,কনটেন্ট থাকবে। html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে প্রধান যে দু’টি সেকশন থাকবে, এগুলো হল ঃ head সেকশন এবং body সেকশন। head সেকশন এর ভিতর পেজ সম্পর্কে বিভিন্ন ইনফরমেশন, পেজ এর শিরোনাম,বিভিন্ন স্ক্রিপ্ট, স্টাইল ইত্যাদি বিষয়সমূহ যোগ করা হয়ে থাকে। head সেকশনকে body সেকশন শুরূ হওয়ার আগেই ক্লোজ করতে হবে। head সেকশন নিয়ে টিউটোরিয়াল এর পরবর্তীতে বিস্তারিত আলোচনা করা হবে। আর আমরা আমাদের ওয়েবপেজে যে সকল কিছু (টেক্সট, ইমেজ, ফ্ল্যাশ ইত্যাদি) দেখতে পাই, তার সবই body সেকশন এর মধ্যে উল্যেখ করতে হয়। এখানে আরো একটি বিষয় লক্ষ্যনীয় যে, যে ট্যাগ সবার আগে শুরূ হয়েছে, সেটি সবার পরে এসে শেষ
হয়েছে। এ সকল বিষয়গুলো আমরা টিউটোরিয়াল এর পরবর্তীতে প্র্যাকটিক্যালী দেখতে পাবো।

২) HTML এ প্রথম প্রোগ্রাম লেখাঃ

এতক্ষন আমরা এইচটিএমএল এর খুঁটিনাটি বিষয়গুলো সম্পর্কে জেনেছি। এখন এসকল বিষয়গুলো ব্যবহার করে
এইচটিএমএল এ আমরা আমাদের প্রথম প্রোগ্রাম লিখে তা ব্রাউজারে রান করে দেখবো। চলুন, তাহলে শুরূ করা যাক . .

খধাপ-১ ঃ নোটপ্যাড ওপেন কর

এজন্য প্রথমে আপনার কম্পিউটারের Start মেন্যু থেকে Run এ ক্লিক করূন।

চিত্রঃ Start >>>Run ক্লিক করা

অথবা, কী-বোর্ড থেকে ( win + r বাটন ) প্রেস করূন।

চিত্রঃ কিবোর্ড থেকে win+ r button press

এখন নিচের মতো একটি ডায়ালগ বক্স আসবে। এখন নিচের মতো একটি ডায়ালগ বক্স আসবে।

চিত্র : রান ডায়ালগ বক্স।

এবার Open এর পাশের টেক্সট ফিল্ডে ” notepad ” টাইপ করূন এবং Ok বাটনে ক্লিক করূন।

চিত্র : ২.৮.৪ (টেক্সট ফিল্ডে notepad টাইপ করে Ok বাটনে ক্লিক করা)।

তাহলে নিচের চিত্রের মতো একটি নোটপ্যাড ওপেন হবে।

চিত্রঃনোটপ্যাড ওপেন হওয়া

ধাপ- ২ ঃ এইচটিএমএল ফাইলে কোড লিখাঃ

এবার আগত নোটপ্যাডে নিচের মতো HTML কোড/ট্যাগ লিখি

চিত্রঃ Notepad এ HTML লিখা

ধাপ-৩ ঃ ফাইল সেভ করা

এবার ফাইলটিকে আমরা এইচটিএমএল ফরম্যাটে সেভ করবো। এজন্য প্রথমে ফাইল মেন্যু থেকে Save As……এ ক্লিক করি।

প্রথমে Save in এর পাশের ড্রপ-ডাউন লিস্ট থেকে এর লোকেশন, অর্থাৎ ফাইলটি কোথায় গিয়ে সংরক্ষিত হবে, তা ঠিক করে দিই। এবার ফাইলটির জন্য একটি নাম দিতে হবে এবং নামের শেষে অবশ্যই .html এক্সটেনশন ব্যবহার করতে হবে। নিচের মতো File name এর ঘরে আমাদের ফাইল এর জন্য একটি নাম লিখি।

চিত্রঃ html এক্সটেনশন ব্যবহারে করে এইচটিএমএল ফাইলের নাম লেখা।

এখানে একটি বিষয় লক্ষ্যনীয় যে, এইচটিএমএল ফাইল এর নামে কোন হোয়াইট স্পেস (” “) ব্যবহার করা যাবে না। হোয়াইট
স্পেস এর পরিবর্তে হাইফেন (“-“) অথবা আন্ডারস্কোর (“_”) ব্যবহার করতে পারেন।
এবার ঝধাব Save as type ফিল্ড হতে All Files সিলেক্ট করূন।

সবশেষে Save বাটনো ক্লিক করে ফাইলটি সেভ করূন।

ধাপ-৪ ঃ আউটপুট

এবার যে ফাইলটি কিছুক্ষন আগে সেভ করেছেন, সেটি কোন একটি ব্রাউজার দিয়ে ওপেন করূন। এজন্য ফাইলটির উপর মাউস এর ডান বাটন ক্লিক করূন। তারপর Open With এবং এখান থেকে আগত যে কোন একটি ব্রাউজার (যেমন ঃ- Internet Explorer, Mozilla Firefox, Google Chrome, Opera ইত্যাদি) এর নামের উপর ক্লিক করূন, যেগুলো আপনার কম্পিউটারে ইনস্টল করা আছে।
বি ঃ দ্রঃ এইচটিএমএল এর অনেক ট্যাগ, অ্যাট্রিবিউট-ব্রাউজার এর উপর নির্ভর করে কাজ করে। এ সম্পর্কে আমরার পরবর্তী পর্ব গুলোতে বিস্তারিত জানবো।

চিত্র :(এইচটিএমএল ফাইল এর আউটপুট দেখার জন্য ব্রাউজার সিলেক্ট করা )।

এবার নিচের মতো আপনার তৈরিকৃত এইচটিএমএল ফাইল এর আউটপুট ব্রাউজারে দেখতে পাবেন।

৩) ইনডেন্টেশন ( Indention )

প্রোগ্রাম লেখার সময় নির্দিষ্ট স্থানে ফাঁকা (আমি এখানে চারটি করে স্পেস ব্যবহার করেছি – এ কাজটি আপনি সহজে করার জন্য কী-বোর্ড থেকে Tab বাটন ব্যবহার করতে পারেন) রেখে রেখে প্রোগ্রামিংয়ে সৌন্দর্য/স্পষ্টতা বৃদ্ধি করাই হচ্ছে Indentation . যেমনঃ উপরের এইচটিএমএল ফাইলটিতে Indentation ব্যবহার করে ফাইলটি লিখেছি। আমি যদি ইনডেন্টেশন ব্যবহার নাও করতাম, তবুও আমার ফাইলটি কাজ করতো।

কিন্তু, আপনি একজন ভালো ওয়েব ডিজাইনার/ডেভেলপার/প্রোগ্রামার-অন্য কোন প্রোগ্রামার এর কাছে আপনার দক্ষতা আপনি প্রোগ্রাম লিখার মাধ্যমে প্রকাশ করতে পারেন। তাছাড়া অনেক সময় প্রোগ্রামিংয়ে ইনডেন্টেশন ব্যবহার না করার কারনে অনেকে ইন্টারভিউ থেকেও বাদ পড়ে যায়। যেকোন ভালো অভ্যাসের মতো প্রোগ্রামিংয়ে ইনডেন্টেশন ব্যবহার করাটাও সময় সাধ্য ব্যাপার। উপরের প্রোগ্রামটিতে আমি < html > লেখায় কোন ইনডেন্টেশন ব্যবহার করিনি, কারণ html ট্যাগ এইচটিএমএল ফাইলের প্রথম/প্রধান অংশ।

< html >

</ html >
কিন্তু, head এবং body সেকশন ব্যবহার এর সময় ইনডেন্টেশন ব্যবহার করেছি,কারণ এগুলো html এর এক একটি ইলিমেন্ট (অর্থাৎ, < html > এখানে প্রধান ইলিমেন্ট, আর < head > এবং < body > হচ্ছে < html > এর ইলিমেন্ট)।

<html>

<head>

</head>

<body>

</body>

</html>
আবার হেড সেকশন এর ভিতর টাইটেল ট্যাগটিকে আলাদা ইননেন্টশন ব্যবহার করে লিখেছি। কারণ,title হ‛েছ head এর ইলিমেন্ট। ইলিমেন্ট নিয়ে আমরা tutorial পরবর্তীতে বিস্তারিত আলোচনা করা করব।

<head>

< title > This is my first HTML Program;) </ title >

<head>
ঠিক তেমনি, < body > এর ভিতরের Hellow World!! লেখাটিতে ইনডেন্টেশন ব্যবহার করেছি। কারণ, Hellow World!! ! < body > এর কনটেন্ট।

< body > Hellow World!! < /body >

৪) এইচটিএমএল কমেন্টঃ

কমেন্টস এর কথা শুনলে হয়তো বা ফেসবুক কমেন্ট এর কথা মনে হতে পারে। বিষয়টি আসলে তা না। ফেসবুক কমেন্ট এর মতো এটি ব্রাউজারে প্রদর্শিত হয় না। এইচটিএমএল এ কমেন্ট ব্যবহার করবেন কেবল আপনার বুঝার সুবিধার্থে।মনে করূন, আজ আপনার তৈরি করা একটি এইচটিএমএল পেইজ/প্রোগ্রাম/ডকুমেন্ট-আজ থেকে আগামী ৬ মাস পর এর বিভিন্ন কোড এর ব্যবহার নাও বুঝতে পারেন। এক্ষেত্রে কোড এর পাশে কমেন্ট ব্যবহার করে এই সমস্যা থেকে মুক্তি পেতে পারেন।

তাছাড়া অনেক সময় ওয়েবপেজ ডিজাইন/ডেভেলপমেন্ট এর ক্ষেত্রে একাধিক ডিজাইনার/ডেভেলপার একসাথে কাজ করে থাকেন, তখন আপনার প্রোগ্রামটি অন্যান্য ডিজাইনার এর বুঝার সুবিধার্থেও কমেন্ট ব্যবহারের প্রয়োজন হয়ে থাকে।

কমেন্ট এর ব্যবহার

এইচটিএমএল এ কমেন্ট ব্যবহার করার জন্য কমেন্ট (!–) ট্যাগ ব্যবহৃত হয়।
যে লেখাকে কমেন্ট এর ভিতরে রাখতে চান, তার প্রথমে “<!–” এবং শেষে “–>”ব্যবহার করতে হয়। অর্থাৎ,

<!–This is a comment & will not be displayed in the browser –>

নিচে একটি উদাহরন এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।


চিত্র : (প্রোগ্রাম এ কমেন্ট এর ব্যবহার)।

কোড বিশেষণ ঃ
উপরে আমরা This is a comment. The Comment line(s) w ..লাইনটিকে কমেন্ট ট্যাগ এর ভিতরে রেখেছি,তাই এটি ব্রাউজারে প্রদর্শিত হবে না। কিন্তু নিচের লাইনটি ঠিকই ব্রাউজারে প্রদর্শিত হবে।

৫)ডকুমেন্ট টাইপ ডিক্লেয়ারেশন

কোন এইচটিএমএল পেইজে এর ডকুমেন্ট টাইপ ডিক্লেয়ার না করা হলে ব্রাউজার বুঝতে পারে না যে, এটি এইচটিএমএল এর কোন ভার্সনে তৈরি। সেক্ষেত্রে এইচটিএমএল সংক্রান্ত বিভিন্ন তথ্যই ব্রাউজার এর নিকট পৌঁছায় না। ডকুমেন্ট টাইপ ডিক্লেয়ার করা ছাড়া এইচটিএমএল পেইজ ভ্যালিডেশনও সম্ভব নয়। তাই যথাযথ ডকুমেন্ট টাইপ ডিক্লেয়ার করা জরূরী।

ডকুমেন্ট টাইপ ডিক্লেয়ার করার জন্য এইচটিএমএল এর <!DOCTYPE> ব্যবহৃত হয়। তবে, এটি এইচটিএমএলএর কোন ট্যাগ নয়। এটি এইচটিএমএল পেইজ এর শুরূতে (<এইচটিএমএল> ট্যাগ এর প্রথমে উল্যেক করতে হয়।

HMTL 5 ভার্সনে ডকুমেন্ট টাইপ ডিক্লেয়ার করাঃ

<! DOCTYPE html >

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

সবাই ভাও থাকুন

আল্লাহ হাফেজ

About Mir Md Aminul Haque

প্রযোক্তিকে ভালবাসি ,নিত্য জানতে চাই নতুন কিছু,ছড়িয়ে দিতে চাই উজার করে নিজের জ্ঞান সবার মাঝে।

Check Also

deactivate laptops built in keyboard

deactivate laptops built in keyboard – দেখেনিন কিভাবে।

deactivate laptops built in keyboard এই পোস্টটা আপনার জন্য খুবই দরকারি ,যদি আপনি laptop user…

Leave a Reply

Your email address will not be published.